... / nVoxel主页 » PS/AI/AE » 【译】在Photoshop中创建一个下载文件夹图标_Create a Download Folder Icon in Photoshop

【译】在Photoshop中创建一个下载文件夹图标_Create a Download Folder Icon in Photoshop

作者:T.n.T发表时间:2011-11-21本文链接:http://www.nvoxel.com/create-a-download-folder-icon-in-photoshop.html

图标在网页设计及交互式设计中有着很重要的作用

尽管图标一般都很小,不过制作图标的过程却是很具挑战性的

在今天的课程中我们就来讲解

如何在Photoshop中使用不同的形状来制作出一个表示下载功能的文件夹图标以及图标上的反射效果

那么,这就开始吧~

 

第一步:新建文件/使用钢笔工具_Step 1-New File/Pen Tool Technique

打开Photoshop,然后新建一个文档(快捷键为Ctrl+N,苹果系统中的快捷键为Command+N)

文件的设置如所示:

Resolution(分辨率):72dpi

Color Mode(颜色模式):RGB Color

Dimensions(文档尺寸):600×600px

使用钢笔工具(快捷键P)画出如下图所示的形状:

 

第二步:使用钢笔工具创建形状_Creating Shapes Using Pen Tool

使用和第一步中相同的方法制作出文件夹图标的本面部分

然后再画文件夹上的横条纹,如下图所示:

 

 

第三步:完成形状部分的绘制_Finishing the Shapes

当你画好文件夹的形状之后

接下来就是在此基础上添加纸张及箭头形状啦,如图所示

画好后,你应该有图中所示的那样五个涂层

每一个形状都存在于各自的图层当中

请确认每个图层都有各自独立的名称

 

第四步:添加色彩效果_Adding Colour Effects

为文件夹图标的前面部分添加如下图所示的效果

并且将该图层的不透明度设置为90%

 

为纸张涂层增加如下图所示的效果

将该图层的不透明度设置为90%-95%左右

 

为文件夹前面的丝带涂层添加如下图所示的效果

文件夹的后部分使用如下图所示的效果设置

 

为箭头图形部分添加如下图所示的效果

 

完成以上步骤后,你的图标看上去应该如下图中右边那个一样

 

第五步:添加反射效果_Step:5 Adding Reflections

新建一个组,命名为“refs”

使用钢笔工具画出反射的形状,如图中所示

请确认这次使用钢笔工具画的时候,画出的是路径,而不是形状图层(注意观察图中箭头所指的地方)

当你完成闭合路径的会之后,右击工作图层

从弹出的选项中 选择“Make selection”(建立选区)(羽化值设置为0)

然后选取设置好后,使用一个大的柔性笔刷(尺寸为470,硬度为0)

使用该笔刷在选取的右边一点点的画,就如所图中所示

通过这种方式来制作白色的反光效果

画好后,将反光图层的混合模式设置为Overlay(叠加)同时将Opacity(不透明度)设置为63%

 

 

第六步:边距_Margins

创建一个新的组,命名为“Margins”

在其中创建一个新的图层(快捷键为Ctrl+Shift+N,苹果系统中的快捷键为Command+Shift+N)

这里要在图标的边缘增加高光效果以突出图标的三维效果

使用钢笔工具在文件夹,纸张,箭头形状的拐角直线边缘处描出直线路径

然后右击,从弹出的选项中选择Stroke path(描边路径)选项,使用brush(画笔)工具

描边时候的画笔设置一定要是8px大小,硬度为0

 

 

第七步:阴影_Shadows

创建一个新的图层(快捷键为Ctrl+Shift+N,苹果系统中的快捷键为Command+Shift+N)用来绘制阴影

同时将该图层至于一个新的组当中(快捷键为Ctrl+G, 苹果系统中的快捷键为Command+G)

和步骤五中绘制反射的方式一样,通过画路径的方式制作出阴影部分的选区

选区确定后,在选区中填充满黑色

然后使用模糊工具将黑色的边缘进行模糊处理

如果图标中的阴影看上去太深

你可以通过降低图层不透明度的方式来减淡效果

这里我将图层不透明度降低为了40%

 

第八步:添加文字信息_Adding Text

使用你喜欢的字体打上文字

这里我使用的字体是:“Agency FB”,字体大小为40px,图层的不透明度为75%

 

第九步:增加最终的反射和阴影效果_Add the Final Reflections and Shadows

使用和第五步中同样的方法,为图标的纸张部分增加反射

 

使用椭圆工具(快捷键E)画出阴影的形状

画出的椭圆如图所示,然后再通过滤镜→模糊→运动模糊,为画出的形状增加一点模糊效果

最后将阴影的不透明度调到自己喜欢的样子

 

最后看下效果:

希望你们喜欢这个教程

下面的插图中,我放了一些我使用同样方法创建出的一些其他形状的图标

 

 

 

本文地址:http://www.nvoxel.com/?p=452

原文地址: http://psd.tutsplus.com/tutorials/icon-design/folder-icon/

 

评论

(必填)


不是'叮'的一声变成别的东西才算是奇妙,那个走得很慢很慢,慢得不像话但是非常肯定,一直都在走得钟就已经很奇妙了
相遇 相识 相知 相爱 然后分开 / Themes by T.n.T