小七网-最动听的语言送给你

ps怎么绘制一个扁平的UI按钮图标?

发布:艾小七2017-6-17 9:17分类: P S教程 标签: UI按钮图标

ps怎么绘制一个扁平的UI图标?想要设计一款下载图标,该怎么设计呢?下面我们就来看看详细的教程,很简单,需要的朋友可以参考下

 

今天给大家带来了详细绘制UI图标的教程。效果如下。有兴趣的朋友可以自己试试。

20170613125612111.jpg

 

1、打开PS,新建一个6x6像素大小的页面。其他参数默认。如图。20170613125612112.jpg

2、新建一个图层。点击铅笔工具。铅笔大小为1像素。前景色为黑色。默认颜色就可以。然后在页面左上角点击四下。然后如图绘制。可以拖拉辅助线绘制。

20170613125613113.jpg20170613125613114.jpg

20170613125613115.jpg

3、去掉背景。

20170613125613116.jpg

4、点击菜单栏编辑-->定义图案。然后点确定。

20170613125613117.jpg

20170613125613118.jpg

5、定义好后,按ctrl+n新建一个文档。文档大小为600x600像素。设置背景颜色为#5f484e前景色为;#c8b3b8;

20170613125613119.jpg

20170613125613120.jpg

 6、按ctrl+j复制一层图层。图层样式选择刚绘制的图形。并选择混合模式为叠加,不透明度为10%;点确定。

20170613125614121.jpg

20170613125614122.jpg

7、选择圆角矩形工具。新拉两条辅助线。确定好中间点的位置,点击鼠标,输入需要的大小。宽高124像素,半径25像素;点确定。颜色为#78cf43;背景色可以按ctrl+u自己改。

20170613125614123.jpg

20170613125614124.jpg

8、复制一层矩形,改颜色为#418810;选择选择工具,按住ctrl+方向键;将矩形往下移动一些。

20170613125614125.jpg

9、给上面那层添加图层样式,选择斜面浮雕深度为42;大小10,角度90;高光模式:颜色减淡,不透明度:67,就可以。选择图案叠加,选择刚绘制的图形。不透明度为8;选择内阴影,混合模式为:颜色减淡;不透明度30;内发光:混合模式:叠加;颜色:#000000;确定。

20170613125614126.jpg20170613125614127.jpg

10、新建一图层,选择椭圆工具,按住shift+alt绘制一个 正圆填充#78cf43;添加图层蒙版。前景色改为黑色#000000;选择椭圆选区工具,按住shift+alt绘制一个正圆,在蒙版上填充黑色。按alt+delete填充。效果如图。20170613125615128.jpg

11、给图层改成线性加深;添加混合选项:内阴影;混合模式为:颜色加深;不透明度:41;距离|:2像素;大小:2像素;添加投影;混合模式为:颜色减淡,颜色为白色:#ffffff;不透明度为21;距离2;大小:2;

20170613125615129.jpg20170613125615130.jpg20170613125615131.jpg

12、新建一图层,用椭圆工具按住shift绘制一正圆如图。填充#7be046;给图层添加蒙版,选择椭圆选区工具,按住shift+alt绘制正圆填充黑色;

20170613125615132.jpg

13、新建一图层ctrl+shift+alt+n,选择椭圆工具绘制一个正圆,按住shift键,绘制。颜色改为#fbfb2d;

20170613125615133.jpg

14、拷贝图层一的图层样式,黏贴到图层2。

20170613125615134.jpg

15、将图层3栅格化,我这边已经先删除了。点右键栅格化就可以。在选中图层3的情况下,然后点击矩形选框工具绘制一个矩形。按delete键删除。按ctrl+d取消选区。

20170613125616135.jpg20170613125616136.jpg

16、用椭圆工具,按住shift+alt键绘制一个正圆。如图。并按ctrl+t调整圆的大小。按住alt键复制一个到另外一边。如图。选中这三层按ctrl+e向下合并。然后点右键转换为智能对象。右键混合选项选择内发光,混合模式:线性加深,不透明度53,颜色#6f6e14;大小:3;点确定。

20170613125616137.jpg20170613125616138.jpg

17、选择自定形状工具,选择箭头9,绘制一个箭头,填充#3a9206。按ctrl+T旋转角度为90度。如图右键单击图层样式选择内阴影;混合模式:颜色加深;不透明度54;距离:1;大小:1;杂色:4;添加投影效果;颜色#7c7777;距离:1;大小:1;杂色:4;绘制完成。效果如图。

20170613125616139.jpg20170613125616140.jpg20170613125616141.jpg

 

 
 

 

 

 

温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!

已有 0/766 人参与

发表评论:

欢迎使用手机扫描访问本站,还可以关注微信哦~