天天看点

Photoshop-八步教你设计扁平化图标阴影部分

扁平化图标阴影部分简单教学

前言: 前段时间笔者一哥们让我给他们的APP设计一个图标,笔者不假思索想到了目前十分流行的扁平化风格。于是便到谷歌上搜了一下:

Photoshop-八步教你设计扁平化图标阴影部分

可以看到大牛们设计的扁平化图标很多都有一个标志性的阴影部分,笔者认为这个阴影部分才是扁平化的精髓。

于是笔者开始动脑动手自己仿造设计了一下,最后笔者的哥们十分满意。

在此笔者把自己设计的阴影部分教给大家。

Step 1

打开你的Photoshop(没有具体的版本限制,很老的版本也可以实现,笔者使用的是CS6),分别新建背景和图标,背景部分可以使用一些渐变效果,让背景更有层次感:

Photoshop-八步教你设计扁平化图标阴影部分

Step 2

首先确定你的光源,笔者设计光源在左上角,所以阴影应该向右下角投射。然后新建一个图层,这里新建图层很重要,一定要把阴影独立画在一个图层上面,并且阴影图层要在图标图层之下,否则会覆盖住图标。之后用钢笔工具在图标的边角处划线(注意要符合实际情况,线最好要划长一点,方便后期裁剪):

Photoshop-八步教你设计扁平化图标阴影部分

Step 3

像这样,笔者已经将一个字母的阴影部分勾勒出来了。在这里钢笔工具一定要熟练,否则线条画不了。

Photoshop-八步教你设计扁平化图标阴影部分

Step 4

线条(专业的名称是:路径)划好之后,来到路径界面,按下Ctrl单击刚才划的路径。

Photoshop-八步教你设计扁平化图标阴影部分

当你使用了这个组合键之后,你会发现你划的路径已经转变为虚线框(专业名称:选区)。

Step 5

返回到图层界面,确定在阴影图层的前提下,填充刚才转换好的选区。笔者这里直接填充前景色(黑色),按下Alt+Del组合键。此时你的选区应该变为黑色了。

Photoshop-八步教你设计扁平化图标阴影部分

Step 6

在这样的基础上,把其他部分画完(PS:笔者后来把背景换成了橘黄色渐变)。

值得注意的是一些阴影的处理要符合光影常理,比如笔者这里T字母的左上角是这样画的:

Photoshop-八步教你设计扁平化图标阴影部分

好了,画完之后应该是这个样子:

Photoshop-八步教你设计扁平化图标阴影部分

是不是有点感觉了呢?但这还不是我们想要的,继续加工。

Step 7

选择你的阴影图层:

Photoshop-八步教你设计扁平化图标阴影部分

在透明度中设置合适的百分比:

Photoshop-八步教你设计扁平化图标阴影部分

笔者设置的是10%,可以按你的喜好设置啦~

Step 8

最后,把原图裁剪一下,做一下小修饰就OK啦,大功告成!

Photoshop-八步教你设计扁平化图标阴影部分

继续阅读