PS打造长阴影丨技巧篇
长阴影(Long Shadow)概念来自于非常流行的扁平化设计(Flat Design)。扁平化设计趋势影响最大的是用户界面元素和图标,但它也开始蔓延到其他网页设计的其他部分。
长阴影其实就是扩展了对象的投影,感觉是一种光线照射下的影子,通常采用角度为 45 度的投影,给对象添加了一份立体感。长阴影快速发展为流行的设计趋势,并经常被应用到扁平设计方案的对象。这些阴影特别之处在于它们也是扁平的。网页设计师使用没有阴影、渐变的颜色来生成阴影。目前,长阴影设计主要用于较小的对象和元素,如图标。

一、PS如何打造长阴影?要深入学习PS,我们需要循序渐进,从基本操作开始入手。
先打开PS,新建一个文件,用矩形工具画出一个图标背景,然后输入文字,调整好文字和图标背景的位置,我们一般设置为居中。

然后我们开始长阴影的绘制吧。
方法一:矩形叠加法(操作难度:★★ )
1、新建一个图层,用矩形工具绘制一个矩形(为了识别方便,我们填充了黑色,长阴影一般为图标颜色的高饱和度颜色,大小和角度可以在后面的步骤里进行调整)。

2、Ctrl+t,对矩形进行旋转,一般角度设置在45°,

3、调整好矩形的大小和位置。

4、重新填充矩形颜色后,栅格化图层,把多余的部分可以用橡皮擦擦除掉,也可以通过载入选区的方法来删除。

方法二:钢笔工具法(操作难度:★★)
1、新建一个图层,选择钢笔工具,沿着文字的边缘绘制路径,在绘制45°斜线的时候,由于我们是绘制斜下方阴影,一般采取先上后下的步骤,先在上方添加一个描点,然后按住shift键,在斜下方添加第二个描点,就可以画出很标准的45°斜线了,在图例中,为了使两个斜线角度保持一致,我们使用了两个路径拼合。

2、在路径上点击右键,选择建立选区

3、确认后用油漆桶工具选取阴影的颜色填充,再擦除掉多余的阴影,这样就完成了。

方法三:图层位移法(操作难度:★★)
1、复制一个文字图层(为了辨识,文字填充黑色),通过按键盘的方向键“→”和“↓”,把复制图层右移1px(像素)和下移1px。

2、重复上面的步骤,一直复制到覆盖图标的边缘。

3、将全部复制的文字图层栅格化后合并为一个图层,填充好颜色,去掉多余的部分就完成了。

二、上面的基本操作都学会了,有没有进阶版本的技巧?当然!下面我们来学习打造长阴影的高逼格方法。
方法一、ps动作(操作难度:★)
1、下载ps长阴影动作文件(一般为.atn),双击动作文件即可载入,完成后在ps动作窗格中会添加一个名字为Long Shadow的动作,

2、选择要制作长阴影的图层,执行动作,长阴影就做好了。



另外还可以调整图层的效果来调整阴影的深浅和颜色

ps动作的优点是一键傻瓜式生成,缺点是无法自由调整角度。
ps长阴影动作下载地址
http://pan.baidu.com/s/1bpdYFBx
方法二:ps长阴影扩展(操作难度:★★)
Long Shadow Generator是一个 Photoshop 扩展 —— 帮助你一键傻瓜式操作,轻松创建长阴影,原理和 Photoshop 动作一样,不过所有的参数都是可以调整的。需要注意的是Long Shadow Generator只支持CC以上版本。
扩展的安装
1、先下载安装Adobe Extension ManagerCC,地址http://www.adobe.com/exchange/em_download/
2、在官网插件库(地址https://creative.adobe.com/addons)中搜索long shadow ganerator2插件,点击免费按钮获取。

3、打开Adobe Extension Manager软件就可以看到获得的插件。

4、也可以去插件官网下载(下载地址http://lab.rayps.com/lsg2/),然后点击Adobe Extension Manager的安装按钮,载入插件进行安装就完成了,需要注意的一点是,安装过程要进行联网才能完成。

5、安装完成后在软件对应插件列表就可以找到刚才安装的插件了,重启PS,在窗口-扩展功能选项中即可看到此插件。



为了方便下载,我们把需要的程序和插件一起打包分享了哦。
http://pan.baidu.com/s/1mim4zPm
方法三:ps智能对象(操作难度:★★)
1、打开包含智能对象的长阴影PSD文件,

2、双击打开智能对象


3、新建图层,在图层上输入文字或者绘制图标,完成后选择菜单“文件-存储”。

4、再回到原图就可以看到效果了。

PSD智能对象的方法好处是能够快速制作各个方向的长阴影效果,缺点是效果单一,后期个人根据需求要进行二次处理。
PSD文件下载地址
http://pan.baidu.com/s/1pLIRQQ3
三、放在最后的福利
在线生成长阴影图标的网站,文章开头的图标就是通过网站制作的。
http://flattyshadow.com/
打开网址,在网站的最下方就是制作长阴影图标的界面






四、写在最后
做一下教程的总结:
1、PS软件绘制长阴影的方法有矩形叠加、路径绘制、图层位移。
2、借助动作、扩展插件、PSD文件修改也可以制作出长阴影。
PS绘制长阴影的方法有很多种,找到最适合自己的方法,多实践几次,就是自己最熟悉的方法。