设计相关 ·

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

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

3个步骤教你绘制一个扁平化图标 设计相关 第1张

一、绘制草图

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

draft2

 

二、电脑绘制

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

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

stroke1

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

stroke3

 

color

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

 

jintou1jintou2jintou3jintou4

color2

三、修饰

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

color3color4

finally

参与评论

  • vipc游客
    地标金融P2P理财平台:http://www.dib66.com
    5年前 (2014-12-04)
    7楼
    回复
  • 琉璃瓦(www.yxllwa.com)游客
    博主的这个技能算是素描吗?
    5年前 (2014-12-03)
    6楼
    回复
  • Ouyang游客
    这个不算素描啊,就简单用铅笔画个草图,然后在电脑里面画就可以了。根据步骤来,不难
    5年前 (2014-12-05)
    回复
  • 偏方大全qianjinpianfang.com游客
    长见识了,其实还可以简单吧。
    5年前 (2014-12-03)
    5楼
    回复
  • 冯耀宗游客
    很不错的东西,感谢分享
    5年前 (2014-12-02)
    4楼
    回复
  • 挖金人游客
    这个可以有,不过好像已经超过三步了。难过啊,
    5年前 (2014-12-02)
    3楼
    回复
  • Ouyang游客
    哈哈哈,没有啦,很简单的,看步骤一步步来还是很容易的呀。
    5年前 (2014-12-05)
    回复
  • Rain_Division游客
    有点卡。。感觉是gravatar的过o_O
    5年前 (2014-12-01)
    2楼
    回复
  • 娱乐名人榜游客
    哇、长知识了
    5年前 (2014-11-29)
    1楼
    回复