制作下载文件的图标

制作下载文件的图标 Hi，中午好～登录|注册|忘记密码 站酷规则|常见问题 搜索素材o o o o |高级搜索|论坛 , 首页 , 我的站酷 , 原创作品 , 经验分享 , 设计素材 , 佳作欣赏 , 设计活动 , 找服务 , 站酷志 , 小组 用户名: 密码: 登 录 自动登录 忘记密码 用户名: 密码: 登 录 自动登录 忘记密码 您的位置:首页 >> 原创经验分享 >> 交互设计 >> 图标设计 在PS中制作一个下载文件夹的图标 (翻译教程) 28天前上传 / 您是第 5827 位浏览者 / 目前有 19 条评论 使用 Photoshop 完成 站酷网提示您:本文由 TCWison 翻译，如需商业用途或转载请与 TCWison 联系，谢谢配 合～ TCWison 北京市 / 学生 积分 42 转载请注明出处及作者～ Icons are an important part of most interactive and web design. While icons are small, they can often be challenging to create. In today’s tutorial we will demonstrate how to create a download folder icon using different shapes and reflections in Photoshop. Let’s get started! 在大多数的交互和网页设计中，图标都是非常重要的一部分。虽然图标很小，但制作他们也经常是个不小的挑战。在这个教程里，我们将介绍到如何在PS中运用不同的形状和反射制作一个下载文件夹的图标。我们开始吧～ -------------------------------------------------------------------------------- Step 1 – 新建文档/钢笔工具技巧 Open Photoshop and set up a new document (Command/Ctrl + N). Use the following settings: Resolution: 72dpi Color Mode RGB color Dimensions: 600×600 px Create the following shape using the Pen tool (P). 打开PS，新建一个一个文档(Ctrl + N)。参数如下: 分辨率:72dpi 颜色模式:RGB 尺寸:600×600 px 使用钢笔工具(P)创建如下形状。 -------------------------------------------------------------------------------- Step 2 - 钢笔工具绘制基本形状 Draw the back part of the folder using the Pen Tool using the same drawing technique. Then draw the stripe as shown. 使用钢笔工具绘制文件夹背后的部分，然后再绘制蓝色条纹。如下图所示。 -------------------------------------------------------------------------------- Step 3 – 完成基本型 Once you have finished drawing your folder, go ahead and add the paper and arrow as shown. You should now have the following 5 layers. Each shape will be in its own layer. Be sure to give each layer a unique name. 绘制完成文件夹之后，继续按下图所示添加纸和箭头。你现在应该有五个图层，每个形状都会有自己的图 层。别忘了给每个图层起一个好认的名字。 -------------------------------------------------------------------------------- Step 4 – 添加颜色效果 Add the following layer styles to the front part of the folder. Lower opacity to 90%. 为文件夹前面的部分添加下图所示的图层样式。不透明的设为90%。 Add the following layer styles to the Paper. Lower the opacity of the layer to around 90-95%. 为纸片添加如下的图层样式。不透明度降至90-95%左右。 Add the following layer styles to the Stripe. 为条纹添加如下的图层样式。 Add the following layer styles to the rear part of the folder. 为文件夹的背面添加如下的图层样式。 Add the following layer styles to the arrow. 为箭头添加如下的图层样式。 Your icon should now look like this. 现在你的图标应该是这样。 -------------------------------------------------------------------------------- Step 5 – 添加反射 Add a new group named "refs." Use the pen tool to draw reflections as shown. Make sure you draw your shapes as paths instead of shape layers (see arrow). After you have closed the path, right-click on the workspace and choose "make selection" (feather 0). Pick up a big brush (master diameter around 470, hardness 0) and brush round the right part of the selection as I did creating a white reflection. Change the blending mode to Overlay and reduce the opacity to 63%. 新建一个组命名为"refs"。按下图所示用钢笔工具绘制反射。要确保你绘制的形状是路径曲线而非形状图 层(注意下图的黑箭头所示)。闭合曲线之后，在工作区按右键选择“建立选区”(羽化值为0)。选择一 个大笔刷(直径大概470左右，硬度为0),沿选区的右半部份绘制反射。之后将混合模式改为叠加，不 透明度为63%。 -------------------------------------------------------------------------------- Step 6 – 处理边缘 Create a new group named "margins," create a new layer in it (Command/Ctrl + Shift + N). Adding highlights on the margins emphasizes the effect of the 3d icon. Use the pen tool to create the stroke lines around the corners and all the margins of the folder, paper and arrow. Then, right-click on the workspace and choose stroke path – brush. The brush settings must be changed to 8 px master diameter, hardness 0. 新建一个组命名为"margins"，在该组内新建一个图层(Ctrl + Shift + N)。现在增加边缘的高光细节 以使图标更具立体感。使用钢笔工具沿拐角处和文件夹、箭头和纸张的边缘绘制路径。然后在工作区右键 选择描边路径-画笔。注意此时笔刷需要设置为直径8像素，硬度为0。混合模式改为叠加，不透明度大 概55%左右。 -------------------------------------------------------------------------------- Step 7 – 阴影 Create a new layer (Command/Ctrl + Shift + N) for shadows and place it into a new group (Command/Ctrl + G). Make selection as you did in step 5 for creating reflections. Fill the selections with black and then blur the margins using the blur tool. If the shadows look too strong, it means that you must lower the opacity of the layer to 40%. 新建一层(Ctrl + Shift + N)制作阴影，将该层打入一个新组内(Ctrl + G)。像第五步那样绘制选区。 为选区填充黑色，然后用模糊工具模糊边缘。如果阴影太强了，需要将图层的不透明度降至40%。 -------------------------------------------------------------------------------- Step 8 – 添加文字 Add text using whichever font you like. In this case, I chose "Agency FB." Font size: 40, Layer Opacity: 75%. 用你喜欢的字体添加文字。这个示例中我用的是"Agency FB"。字体大小为40，不透明度75%。 -------------------------------------------------------------------------------- Step 9 – 添加最终的阴影和反射 Add some more reflections to the paper using the same techniques we demonstrated in Step 5. 用第五步所示的技术再为纸张添加一些反射。 Add a shadow using the ellipse tool (U). Draw an ellipse as shown and add a slight motion blur. Reduce the opacity to your liking. 用椭圆工具(U)添加一个阴影。如下图所示绘制一个椭圆并添加一点点动感模糊。降低不透明度直到你 觉得合适了。 -------------------------------------------------------------------------------- Final Preview – 最终效果 I hope you enjoyed this tutorial. I added some additional icons that I created using the same techniques below. 我还用相同的技术制作了一些不同的图标，如下图。希望你喜欢这个教程。 本文由 站酷网 - TCWison 翻译，转载请保留此信息，多谢合作。 , 赞它 24 , 收藏 124 , 分享 Share It 推荐你一个经验分 , 举报 Report It 站酷网提示您:本文由 TCWison 翻译，如需商业用途或转载请与 TCWison 联系，谢谢配合～ 转贴到: 新浪微博 作者的其他经验分享 查看全部 >> , , , , , , 酷友评论(19条) happyTIME2 广州 / 学生 , 19F 发表于 1天前: 我也前来交作业了～～～～ 作业内容 原图:570x570 , 回复| 举报 去看看他/她 发短消息 关注他/她 king4421607 南京 / 建筑/环艺设计师 , 18F 发表于 8天前: 交作业咯，吼吼～～～ 作业内容 原图:600x600 , 回复| 举报 去看看他/她 发短消息 关注他/她 Eric728 海淀 / 网页设计师 , 17F 发表于 9天前: 搂主翻的教程都这么给力 , 回复| 举报 去看看他/她 发短消息 关注他/她 Khunsea20 武汉 / 学生 , 16F 发表于 13天前: 大家都做的不错啊~～我都不敢把我的上传了 哈哈 , 回复| 举报 去看看他/她 发短消息 关注他/她 静者为王 合肥 / 三维/动画师 , 15F 发表于 15天前: 我发现在我的作业还不算最难看的。哇 哈哈哈哈 , 回复| 举报 去看看他/她 发短消息 关注他/她 jcego 济宁 / 网页制作 , 14F 发表于 16天前: 不错啊,,学习了,,呵呵.. 很实用.. , 回复| 举报 去看看他/她 发短消息 关注他/她 Helen卫 上海市 / 平面设计师 , 13F 发表于 17天前: LZ~~~交个作业来啦~~HOHO~ 作业内容 原图:225x225 , 回复| 举报 去看看他/她 发短消息 关注他/她 桐叻 广州 / 其他 , 12F 发表于 21天前: 我也来交个作业，第一次做，有点囧 作业内容 原图:600x657 , 回复| 举报 去看看他/她 发短消息 关注他/她 刘企鹅 厦门 / 设计爱好者 , 11F 发表于 21天前: 啦啦啦交作业~~ 作业内容 原图:600x600 , 回复| 举报 去看看他/她 发短消息 关注他/她 380958555 佛山 / 学生 , 10F 发表于 24天前: 谢谢，学习了~看看我的如何 作业内容 原图:1000x1000 , 回复| 举报 去看看他/她 发短消息 关注他/她 < 1 2 > 发表评论 上传作业: 备注:jpg/gif/png格式，图片大小2m以内。 用户: 密码: 忘记密码, 注册 发 布 [ 完成后可按 Ctrl+Enter 发布 ] o 可用表情 o 关于站酷| 广告服务| 提交问题| 联系我们| 版权声明| 关于隐私| 合作伙伴| @站酷 本站会员发布的“原创作品”，版权归原作者所有，如需商业用途或转载请与作者联系。如未经作 者同意，用作商业用途或匿名转载，作者将保留追究侵权者法律责任的权利。 本站服务器托管于:中电云集 | 部分带宽支持:中电云集(电信下载) | 八度网络(电信下载) 零刻数据联通带宽赞助 特别鸣谢～ | 京ICP备06051668号 / 京ICP证100774号 2006-2011 ZCOOL.com.cn CNZZ 全景 去看看他/她 发短消息 关注他/她