开启辅助访问

QQ登录

注册 找回密码
查看: 841
回复: 36

应用界面 风格电视图标UI设计教程

 

TA的画板

978

元素币

147

活跃度

32

贡献值

元素魔

Rank: 2Rank: 2

积分
3415
主题
41
精华
0
扩散
0
首发
0
土豪金
0
在线时间
30 小时
发表于 2016-4-21 17:16:54

马上注册成为元素者,获取海量元素资源,结识各路大神级人物

您需要 登录 才可以下载或查看,没有帐号?注册

x
风格电视图标UI设计教程


今天,带大家来临摹一个电视机图标。教程不难,重点也是图层样式,效果非常好看,已附上源文件方便学习,针对一些细节做了很多实用的讲解,非常适合新手学习,来收!

这里再次强调一点,图层样式中的参数设置是对应其相应图层的,受图层大小尺寸影响,在不同尺寸下,效果呈现是不同的。

比如说,同样一个5像素的描边的图层样式,在10像素的圆和100像素的圆下,其表现效果肯定是不一样的。

所以,四个字:活学活用。

首先,我们看看原图,一个400*300的小图。

1HT510R-0.jpg

新建一个1000*800的文档,添加一个渐变调整层,做一个#b4b097到#4e473a的90度的径向渐变,设置缩放为150%,勾选仿色,防止出现色块。

1HT5K64-1.jpg

我想大家一定很好奇,我的截图径向渐变中的浅色为何不居中,而是位于中部居上,看我们的GIF演示。

在渐变填充的状态下,我们把鼠标指针放置到屏幕上,出现那个移动工具的图标时,我们拖动,渐变的位置也跟着动,这一个操作方法,在图层样式中一样可用。

1HT53926-2.jpg

使用圆角矩形工具画一个600*600像素的圆角矩形,设置圆角为140像素,设置水平居中,垂直居中。

1HT52957-3.jpg

我将这个圆角矩形命名为“主体”,并为其添加了一个图层样式。

1HT56450-4.jpg 1HT53B7-5.jpg 1HT55205-6.jpg 1HT525b-7.jpg 1HT522D-8.jpg

复制一层“主体”图层,更改图层名为“投影”,将“投影”图层置于“主体”图层下层,将图层填充设置为0,再添加一个图层样式,我们来增强一下投影效果。

1HT543A-9.jpg 1HT53210-10.jpg

原图画的是一个类似椭圆的形状,我这里偷懒一下,还是画的圆角矩形,大小为500X360像素,圆角半径为130像素,添加一个图层样式。

1HT56406-11.jpg 1HT55942-12.jpg 1HT51225-13.jpg

下面,我们创建屏幕,设置前景色为#b4b097,使用圆角矩形工具,画一个大小为420*280像素,圆角半径为100像素的圆角矩形。

1HT52593-14.jpg

为这个“屏幕”图层添加一个图层样式。

1HT55352-15.jpg 1HT53440-16.jpg 1HT54Q1-17.jpg 1HT5LP-18.jpg 1HT54L1-19.jpg

复制一层“屏幕”图层,转智能对象,添加一个杂色,并将图层混合模式更改为“柔光”。

1HT51295-20.jpg

用两个屏幕的那个圆角矩形相减,得到我们需要的屏幕下部的高光形状,将这个形状的颜色设置为#eaead2,在属性面板中设置一个1像素的羽化,并将图层混合模式更改为“柔光”,不透明度34%。

1HT52F6-21.jpg

设置前景色为#eaead2,用屏幕的那个圆角矩形和一个椭圆相交,得到我们需要的屏幕顶部的高光形状,同样的将图层混合模式更改为“柔光”,不透明度34%,并添加一个图层蒙版,适当的擦拭左右两侧。

1HT51531-22.jpg

下面,我们来制作按纽,设置前景色为#b4b097,画一个正圆,并添加一个图层样式。

1HT52216-23.jpg 1HT54B2-24.jpg

设置前景色为#d9d0ca,画一个小一点的圆,并添加一个图层样式。

1HT55R1-25.jpg 1HT54A3-26.jpg 1HT5K09-27.jpg 1HT51061-28.jpg

复制一层“按纽”图层,更改图层名为“投影”,将图层填充设置为0,再添加一个图层样式,我们来增强下投影效果。

1HT55463-29.jpg 1HT512U-30.jpg

选择住按纽的这三个图层,CTRL+G,创建图层组,命名为“按纽1”,复制图层组,得到四个按纽,最右侧的一个按纽,我将颜色更改了,这里不再给参数了,如果你不懂得如何改,那么你看教程就是只是单纯的看,并没有真正的理解。真不会的话,下载我们的PSD看看。

1HT51L2-31.jpg

最后我添加了我们P大点S的LOGO和图标,设置了一个内阴影和投影,这个图层样式太经常用到了,我们的教程里太经常看到了,这里就不说了。

1HT5N63-32.jpg

我们的最终效果:

1HT510R-0.jpg

资源地址: http://cg.silucg.com/ui/jichu/10971.html(分享请保留)


使用道具 举报

回复 论坛版权

盘 TA

色彩不错····感谢分享···

使用道具 举报

回复

盘 TA

想要成大触,天天上元素!

使用道具 举报

回复

盘 TA

首发必需微元素,荣耀加身装备酷!

使用道具 举报

回复

盘 TA

{:1_145:}

使用道具 举报

回复

盘 TA

好资源,点赞

使用道具 举报

回复

盘 TA

想要成大触,天天上元素!

使用道具 举报

回复

盘 TA

从业不识微元素,做遍项目也枉然

使用道具 举报

回复

盘 TA

为了元素币,拼了!

使用道具 举报

回复

盘 TA

这世上没有什么是元素币搞不定的,如果有,那就用更多!

使用道具 举报

回复

盘 TA

你们大神真会玩!

使用道具 举报

回复

盘 TA

每天一早上元素,挖矿撩妹两不误!

使用道具 举报

回复

盘 TA

想要成大触,天天上元素!

使用道具 举报

回复

盘 TA

从业不识微元素,做遍项目也枉然

使用道具 举报

回复

盘 TA

谢谢您的努力,很有帮助!

使用道具 举报

回复

盘 TA

灰常好的资源,谢谢楼主分享

使用道具 举报

回复

盘 TA

首发必需微元素,荣耀加身装备酷!

使用道具 举报

回复

盘 TA

这世上没有什么是元素币搞不定的,如果有,那就用更多!

使用道具 举报

回复

盘 TA

想要成大触,天天上元素!

使用道具 举报

回复

盘 TA

元素帖子强,满满正能量!

使用道具 举报

回复

盘 TA

天下武功出少林,世界资源入元素!

使用道具 举报

回复

盘 TA

感謝分享

使用道具 举报

回复

盘 TA

强势

使用道具 举报

回复

盘 TA

首发必需微元素,荣耀加身装备酷!

使用道具 举报

回复

盘 TA

我们先定一个能达到的小目标,先赚它一亿元素币

使用道具 举报

回复

盘 TA

资源甚好,发帖艰辛,且阅且珍惜!

使用道具 举报

回复

盘 TA

好,正是我要找的,谢

使用道具 举报

回复

盘 TA

资源甚好,发帖艰辛,且阅且珍惜!

使用道具 举报

回复

盘 TA

元素帖子强,满满正能量!

使用道具 举报

回复

盘 TA

nise

使用道具 举报

回复

盘 TA

资源甚好,发帖艰辛,且阅且珍惜!

使用道具 举报

回复

盘 TA

首发必发微元素,荣耀加身装备酷!

使用道具 举报

回复

盘 TA

资源哪里好,肯定元素找

使用道具 举报

回复

盘 TA

想要成大触,天天上元素

使用道具 举报

回复

盘 TA

想要成大触,天天上元素!

使用道具 举报

回复

盘 TA

不错不错  

使用道具 举报

回复

盘 TA

666666666666666666

使用道具 举报

回复
快捷回复:
您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

元素推荐-友情提示上一条 /1 下一条

快速回复 返回顶部 返回列表