photoshop-texture-tv-icon-1

编者按:今天@P大点S微博 来一个图标教程,重点依然是图层样式的运用,而且会多次用到布尔运算,这是PS课程中特别重要的一个知识点,不熟悉的同学建议来练个手。

我们从背景的创建开始,我用的尺寸是1000*800像素。创建一个“渐变填充”调整层,设置如下:

45PDDS20151203

画一个600*600像素的圆,设置填充为0,并添加一个斜面和浮雕。

44PDDS20151203

43PDDS20151203

42PDDS20151203

设置前景色为#312f35,利用布尔运算,画出下图中的这个圆环。这个不多赘述,不懂的可以百度下。

41PDDS20151203

为这个圆环添加一个图层样式。

40PDDS20151203

39PDDS20151203 38PDDS20151203 37PDDS20151203 36PDDS20151203 35PDDS20151203

设置前景色为黑色#000000,跟刚才一样的操作方法,利用布尔运算,画出下图中的这个小的圆环出来,添加一个图层样式。

34PDDS20151203

33PDDS20151203

设置前景色为#aba9a8,画一个350*350像素的圆,命名为“主体”,并添加一个图层样式。

32PDDS20151203

31PDDS20151203 30PDDS20151203 29PDDS20151203

用椭圆工具画一个330*330像素的正圆,添加一个图层样式。

28PDDS20151203

27PDDS20151203 26PDDS20151203

接下来,我们返回到刚才那个命名为“主体”的圆那里,复制一层,命名为“浮雕1”清除图层样式,设置填充为0,添加一个斜面浮雕。

25PDDS20151203

24PDDS20151203 23PDDS20151203

接着复制一层“浮雕1”图层,在图层样式中,勾选将内部效果混合成组,并更改斜面浮雕参数,添加一个图层蒙版,擦拭一下。

22PDDS20151203

21PDDS20151203 20PDDS20151203 19PDDS20151203

复制“浮雕2”图层,在图层样式中更改斜面浮雕的阴影角度,同时调整蒙版。

18PDDS20151203

17PDDS20151203

刚开始,想用一个斜面浮雕搞定这个效果,调节了好几次等高线,效果不佳,于是放弃,改用了3个斜面浮雕配合蒙版来叠加效果,有大神能搞定的,请告之。

接下来,我们开始添加刻度,这个没什么好说的,大家应该都会,画个矩形,变换中心点,旋转3度,CTRL+SHIFT+ALT+T,轻松搞定。这里我设置的颜色为白色,不透明度7%。

16PDDS20151203

一样的方法做出那橙色的刻度,颜色为#f6a303。

15PDDS20151203

下面,我们来添加那个类似雷达扫描的渐变,从我们的截图中,你可以清楚的看到,我们的形状是利用布尔运算得到的,一个圆和一个旋转了15度的矩形相交,将这个形状的颜色设置为#171826,图层填充设置为0,添加一个渐变叠加,并添加蒙版擦拭下方。

14PDDS20151203

13PDDS20151203

接着我们来添加高光,用椭圆工具画一个圆,设置颜色为#bbaffd,图层混合模式为“柔光”,不透明度“81%”,在属性面板中,将这个形状羽化35.6像素,并载入“主体”那个圆的选区,为这个高光添加一个蒙版。

12PDDS20151203

11PDDS20151203

接下来,我们完善一下高光,复制这个蓝色高光图层,左移上移一定像素,更改形状颜色为#e9e5fe,羽化不修改,图层混合模式依旧为“柔光”,图层不透明度更改为“56%”。

10PDDS20151203

复制一个刚才那个“主体”图层,移到最顶层,设置图层填充为0,添加一个内阴影。

9PDDS20151203

8PDDS20151203

打上文字和添加那三个形状,形状图标的话,利用布尔运算来画。

7PDDS20151203

最后,我们添加左侧的那个按纽,设置前景色为#a09e9f,画个圆,添加个图层样式。

6PDDS20151203

5PDDS20151203 4PDDS20151203 3PDDS20151203 2PDDS20151203

最终效果:

1PDDS20151203

可能是国内最用心做原创PS教程的:

psqr21

【设计干货+职场秘籍+神器推荐】

教科书级别的苹果官方人机指南!
《腾讯力作!超实用的IOS 9人机界面指南(1):UI设计基础》

如何自学成为腾讯高级交互设计师?
《优设访谈!腾讯高级交互设计师C7210的十年设计路》

纹理素材两大杀器!
《酷站两连发!专注无缝纹理素材站+多边形背景生成器》

原文地址:pdadians

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量106万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

点赞
收藏

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
相关推荐
评论 收藏