分享

Adobe Photoshop清新风格简洁时钟 绿色主题风格时钟APP图标教程

 百合仔 2019-05-07

PS教学第37篇

第一篇

设计清新风格简洁时钟图片的PS实例教程

教程主要会用PS的图层样式,图层样式基本上一直是图标或者字体制作的常客,同学们根据教程来学习一下吧,相信可以完成的很好,但是要动起手来噢。

本篇教程通过PS制作一款干净清新的时钟图标教程,做起来也不复杂,但是不管复杂不复杂的东西,都必须动手制作才行,会用到图层样式,图层样式基本上一直是图标或者字体制作的常客,同学们根据教程来学习一下吧,相信可以完成的很好,但是要动起手来噢。

效果图:

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

先在PS里面新建一个800*800的画布,颜色用#f3fbff(淡蓝色)铺满!

1.新建一个图层画出560*560的圆角矩形(颜色为纯白色),圆角为90,参数如下

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

2.然后调整图层形状的斜面浮雕参数和投影参数

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

3.画出时钟的内表盘,新建一个318*318的正圆并调整它的斜面浮雕参数、内阴影参数以及渐变叠加参数,如图:

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

4.调整完内表盘和外表盘的效果图如下:

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

5.接下里我们画时间刻度;新建一个7*7的正圆(颜色为#595f70),给它加个内阴影,具体参数如下

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

现在我们要画12个刻度让他平均分配到对应的时间点上,怎么画呢?我们可以用动作来实现它

操作步骤:F9打开动作窗口,新建一个动作,开启录制——选中一个圆点执行ctrl+t,然后按住Alt键拖动中心点至画布的中心,然后松开alt,按住shift,旋转30°,结束动作录制即可——最后再复制多个图层,分别执行动作即可

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

最后我们再把四个点替换成文字,就可以得到如下图象:

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

6.最后我们再来做指针(指针我参考的是DW经典款的指针),指针用形状堆叠而成,再给指针加上投影就好了,最后旋转复制时针、分针、秒针即可;

指针颜色为#69728b,投影看参数

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

7.指针的轴是用了三层员堆叠而成,大家可以看看细节

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

8.把这些全部整合到一块即可,别忘了每个图层命名,最终效果如图

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

本篇要主要的就是图层样式的运用和动作录制的运用,心态也很关键,不要中途觉得难就不做了,练习一下吧。

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

第二篇

绘制绿色主题风格时钟APP图标的PS教程

首选先来分析一下教程的效果图,教程主要分为三个部分来完成,具体如下底座、内圆、指针,其它问题都不大,主要是指针部分、需要用到多个图层及图层样式,来表现图标的立体感,教程的视频和源文件已经打包了,感兴趣的朋友一起来学习吧。

最终效果:

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

先看看效果图:

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

步骤一:首先新建画布400px*300px画布,命名为时钟,填充背景颜色# 63d7a6。

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

步骤二:使用圆角矩形、绘制一个190px*190px,圆角半径为40px的底座,并为它添加图层样式。

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

步骤三:现在我们来绘制内圆部分吧,选择椭圆工具绘制一个154px*154px的正圆吧,并为它添加一下图层样式。

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

步骤四:继续选择椭圆工具,绘制一个132px*132px的正圆吧,并为它添加一下图层样式。

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

步骤五:现在我们来绘制三角位置,选择多边形工具边数设置为3,绘制一个颜色白色三角形,并将混合模式设置为叠加,命名为下侧三角。

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

步骤六:复制下侧三角执行自由变换命令,调整中心点至画布中心,旋转90度并执行重复上一命令并复制,shift+ctrl+alt+t复制出另外两个三角形状,将上侧三角混合模式设置为柔光,透明度设置为70%,左右两侧三角混合模式正常。

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

步骤七:现在我们将指针的位置绘制一下吧,选择圆角矩形工具,画两个圆角矩形,旋转放到合适的位置。

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

步骤八:接下来我们为两个指针添加一下相同的图层样式吧。

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

步骤九:现在我们绘制秒针吧,选择矩形工具,绘制一个颜色为#ff5758长宽2px*24px的矩形,并添加图层样式。

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

步骤十:指针完成之后我们选择椭圆工具绘制一个20px*20px的正圆吧,并为它添加一下图层样式。

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

步骤十一:现在我们赶紧来绘制最后一个圆吧,使用椭圆工具绘制一个10px*10px正圆,给它起名叫小内圆吧,并为它添加图层样式。

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

Adobe Photoshop清新风格简洁时钟+绿色主题风格时钟APP图标教程

图片来源/百度

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多