PS打造长阴影丨技巧篇

长阴影(Long Shadow)概念来自于非常流行的扁平化设计(Flat Design)。扁平化设计趋势影响最大的是用户界面元素和图标,但它也开始蔓延到其他网页设计的其他部分。 

长阴影其实就是扩展了对象的投影,感觉是一种光线照射下的影子,通常采用角度为 45 度的投影,给对象添加了一份立体感。长阴影快速发展为流行的设计趋势,并经常被应用到扁平设计方案的对象。这些阴影特别之处在于它们也是扁平的。网页设计师使用没有阴影、渐变的颜色来生成阴影。目前,长阴影设计主要用于较小的对象和元素,如图标。

PS打造长阴影丨技巧篇_第1张图片

一、PS如何打造长阴影?要深入学习PS,我们需要循序渐进,从基本操作开始入手。

先打开PS,新建一个文件,用矩形工具画出一个图标背景,然后输入文字,调整好文字和图标背景的位置,我们一般设置为居中。

PS打造长阴影丨技巧篇_第2张图片

然后我们开始长阴影的绘制吧。

方法一:矩形叠加法(操作难度:★★ )

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

PS打造长阴影丨技巧篇_第3张图片

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

PS打造长阴影丨技巧篇_第4张图片

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


PS打造长阴影丨技巧篇_第5张图片

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

PS打造长阴影丨技巧篇_第6张图片

方法二:钢笔工具法(操作难度:★★)

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

PS打造长阴影丨技巧篇_第7张图片

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

PS打造长阴影丨技巧篇_第8张图片

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

PS打造长阴影丨技巧篇_第9张图片

方法三:图层位移法(操作难度:★★)

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

PS打造长阴影丨技巧篇_第10张图片

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

PS打造长阴影丨技巧篇_第11张图片

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

PS打造长阴影丨技巧篇_第12张图片

二、上面的基本操作都学会了,有没有进阶版本的技巧?当然!下面我们来学习打造长阴影的高逼格方法。

方法一、ps动作(操作难度:★)

1、下载ps长阴影动作文件(一般为.atn),双击动作文件即可载入,完成后在ps动作窗格中会添加一个名字为Long Shadow的动作,

PS打造长阴影丨技巧篇_第13张图片

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

PS打造长阴影丨技巧篇_第14张图片
选择图层
PS打造长阴影丨技巧篇_第15张图片
执行动作
PS打造长阴影丨技巧篇_第16张图片
完成

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

PS打造长阴影丨技巧篇_第17张图片

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插件,点击免费按钮获取。

PS打造长阴影丨技巧篇_第18张图片

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

PS打造长阴影丨技巧篇_第19张图片

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

PS打造长阴影丨技巧篇_第20张图片

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

PS打造长阴影丨技巧篇_第21张图片
PS打造长阴影丨技巧篇_第22张图片
插件功能介绍
PS打造长阴影丨技巧篇_第23张图片
插件效果

为了方便下载,我们把需要的程序和插件一起打包分享了哦。

http://pan.baidu.com/s/1mim4zPm

方法三:ps智能对象(操作难度:★★)

1、打开包含智能对象的长阴影PSD文件,

PS打造长阴影丨技巧篇_第24张图片

2、双击打开智能对象

PS打造长阴影丨技巧篇_第25张图片
PS打造长阴影丨技巧篇_第26张图片

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

PS打造长阴影丨技巧篇_第27张图片

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

PS打造长阴影丨技巧篇_第28张图片

PSD智能对象的方法好处是能够快速制作各个方向的长阴影效果,缺点是效果单一,后期个人根据需求要进行二次处理。

PSD文件下载地址

http://pan.baidu.com/s/1pLIRQQ3

三、放在最后的福利

在线生成长阴影图标的网站,文章开头的图标就是通过网站制作的。

http://flattyshadow.com/

打开网址,在网站的最下方就是制作长阴影图标的界面

PS打造长阴影丨技巧篇_第29张图片
编辑界面
PS打造长阴影丨技巧篇_第30张图片
颜色编辑
PS打造长阴影丨技巧篇_第31张图片
形状设置
PS打造长阴影丨技巧篇_第32张图片
阴影设置
PS打造长阴影丨技巧篇_第33张图片
图标选择
PS打造长阴影丨技巧篇_第34张图片
大小设置

四、写在最后

做一下教程的总结:

1、PS软件绘制长阴影的方法有矩形叠加、路径绘制、图层位移。

2、借助动作、扩展插件、PSD文件修改也可以制作出长阴影。

PS绘制长阴影的方法有很多种,找到最适合自己的方法,多实践几次,就是自己最熟悉的方法。

你可能感兴趣的:(PS打造长阴影丨技巧篇)