3个步骤教你绘制一个扁平化图标 | 周良博客

我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  

by Ouyang • 2014 年 11 月 28 日 • 设计相关, 默认分类 • Comments (10) • 209 views

3个步骤教你绘制一个扁平化图标

文章目录[隐藏]
  • 一、绘制草图
  • 二、电脑绘制
  • 三、修饰

时下各个网站都充斥着扁平化元素,扁平化已经成为一个时代的趋势,那么扁平化的图标是什么绘制出来的呢?你想知道吗?现在就教你用最简单的办法绘制一个扁平化图标。

draft1

一、绘制草图

首先,你需要确定你需要画一个什么图标,我们以照相机为例,我们需要提取照相机的特点,它的镜头,长方形的机身,闪光灯,然后绘制出草图。

draft2

 

二、电脑绘制

我们以Photoshop cs6 为例,Photoshop CS3以后的版本差别不大,步骤也同样,所以你不用担心接下来的步骤图你会看不懂。

1、我们新建一张画布,把画好的草图放在最下的图层里,然后根据画的草图用矩形工具,圆形工具,钢笔工具在草图上描边,注意,描边的时候可以根据绘图的需要自行调整,不必严格按照草图的形式,设计是个灵活的工作。当然你觉得没必要描边的话可以直接绘制图形。这里描边,只是为了方便读者了解其过程。

stroke1

2、基本线框图出来后,我们就可以根据你的需要填充颜色了。这时我们不再需要草图,可以把草图隐藏起来,同时给背景添加别的颜色。

stroke3

 

color

上色后我们会发现,如果两个白色的图形叠加在一起时,照相机镜头就凸不出来了,没有立体感,我们需要扁平化的效果,但是也还是需要能够展现出照相机的特性。因此我们需要在镜头的部分添加一些简洁的效果,让看起来简单的图标也不那么简单。你可以给镜头的位置添加一些内阴影,白色部分增加外发光,投影效果。

 

jintou1jintou2jintou3jintou4

color2

三、修饰

我们可以给图标增加一些投影效果,我们需要复制一个相机,然后把相机栅格化,变成图片,然后选择滤镜>模糊>高斯模糊,然后选择图层>图层样式>颜色叠加,填充黑色就好了。确定后,把图层的不透明度修改到30%,最后放在图标靠下的位置。这样,虽然是扁平的图标也会给人一种立体感觉。学会了吗?

color3color4

finally



Photoshop教程
about the author: Ouyang
关注于用户体验,产品交互的视觉设计师。
本站长期承接 WordPress 项目,详情请 Email:jack@aips.me。
  1. 娱乐名人榜 on said:

    哇、长知识了

  • Rain_Division on said:

    有点卡。。感觉是gravatar的过o_O

  • 挖金人 on said:

    这个可以有,不过好像已经超过三步了。难过啊,

  • 冯耀宗 on said:

    很不错的东西,感谢分享

  • 偏方大全qianjinpianfang.com on said:

    长见识了,其实还可以简单吧。

  • 琉璃瓦(www.yxllwa.com) on said:

    博主的这个技能算是素描吗?

  • 小布网赚(www.mcxiaobu.com) on said:

    学习了!!!!!!!!!!!

  • vipc on said:

    地标金融P2P理财平台:http://www.dib66.com



  • 随意打赏

    提交建议
    微信扫一扫,分享给好友吧。