Hi,我是优设小编

cyRotel

浏览全部 4613 篇文章

到我的微博瞧瞧

PS新手教程!教你绘制一枚清新淡雅的时钟图标

photoshop-clock-icon-design-1

@P大点S微博 :今天的教程是一个超简单的图标绘制,无任何难度,仅仅是图层样式的应用,适合新手入门临摹练习,源文件已打包,感兴趣的同学来一发。

我们的最终效果:

1pdds20160419

背景没什么好说的,就是做个渐变,设置前景色为#f8efe0,用圆角矩形工具画一个圆角矩形,这是我们的主体。

34pdds20160419

为圆角矩形添加一个图层样式。友情提示,渐变叠加样式中的图层混合模式是叠加,为什么是叠加,自己想想。

33pdds20160419

32pdds20160419

31pdds20160419

30pdds20160419

下面,我们强化一下投影效果,复制一层圆角矩形,置于我们主体圆角矩形的下层,更改颜色为黑色,执行一个角度为90度,距离为50的动感模糊滤镜,将图层混合模式更改为正片叠底,图层不透明度为23%,当然,你需要用蒙版擦除上半部分那些不和谐的部分。

29pdds20160419

28pdds20160419

复制一层这个执行了动感模糊的阴影层,置于底层(当然,是在背景层的上层,无可置疑),我将图层的不透明度改为了21%,动感模糊的参数角度不变,距离改成了108,这样,看起来,显得更为真实一些。

27pdds20160419

用椭圆工具,画一个圆形,并添加一个图层样式。渐变的颜色,大家随意,挑自己喜欢的就OK了。

26pdds20160419

25pdds20160419

24pdds20160419

23pdds20160419

接下来,用椭圆工具来添加中间的圆,使刚才那个渐变的圆形成一个圆环,设置一个图层样式。

22pdds20160419

21pdds20160419

20pdds20160419

19pdds20160419

下面,我用来画最中间最小的圆,同样的使用椭圆工具,画好后,添加一个图层样式。

18pdds20160419

17pdds20160419

16pdds20160419

15pdds20160419

设置前景色为#f2eee8,我们画出固定时针的那个圆(主要是我不知道叫啥),添加图层样式。

14pdds20160419

13pdds20160419

12pdds20160419

再往下,我们画最小的那个圆(好伤心,真心叫不出这东西叫啥),添加图层样式。

11pdds20160419

10pdds20160419

9pdds20160419

8pdds20160419

7pdds20160419

画一个圆角矩形,编辑——变形——扇形——1度,然后CTRL+T旋转,放置到那个小圆与固定时针分针的圆的中间图层位置。

6pdds20160419

为秒针添加一个投影。

5pdds20160419

在秒针上层画一个白色矩形,旋转,创建剪贴蒙版,图层不透明度15%,营造高光效果。

4pdds20160419

一样的操作手法,做出分针,时针,以及各自的高光,高光的透明度灵活调整。

3pdds20160419

最后,我加了几个文字。

2pdds20160419

最终完成

1pdds20160419

欢迎关注可能是最用心做原创教程的微信公众号:

psqr21111111

「技多不压身的设计师才有高薪资!」

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
  8. 交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》

原文地址:pdadians

yestone-uisdc-2

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

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

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/photoshop-clock-icon-design