PS制作一个时尚网页文件夹图标
原出处：webdesign转载自：Iconfans
作者：Nico Harather
翻译：S.Shekhttp://pic.16xx8.com/article/UploadPic/2009-6/20096633852424.jpgIn this tutorial you will learn how to create a nice folder for your desktop or a website.1. First of all create a new document which is 128 x 128 pixels large and has a transparent background.
2. Make a new layer, choose the Pen Tool and draw a shape wich is similar to this one:在这个教程里你将学会如何为你的桌面或网页制作一个漂亮的文件夹(图标).1,首先我们需要新建一张大小为128*128像素的画布,选择透明背景.
2,新建图层,然后使用钢笔工具画出一个类似于下图的形状.http://pic.16xx8.com/article/UploadPic/2009-6/20096633852779.gif3. Now use the following settings:
Gradient Overlay
#FFd27A -> #FFB912
Stroke
Size: 1px
Position: Outside
Color: #C07C33
Inner Glow
Blend Mode: Normal
Color: #FFFFFF
Choke: 100%
Size: 1px
After that it should look something like this:3,然后将图层样式设置如下:渐变叠加
渐变:#FFd27A -> #FFB912
描边
大小:1像素
位置:外部.(外描边)
颜色:#C07C33
内发光
混合模式:正常
颜色:#FFFFFF
阻塞:100%
大小:1像素设置完这些之后你会看到如下图的效果.http://pic.16xx8.com/article/UploadPic/2009-6/20096633852612.gif
,
4. Then you duplicate the layer with the shape. Now you have to perspectively distort the new layer as shown on the picture:4,然后复制一层.现在我们需要在新层上进行透视变换.(自由变换 -> 透视)http://pic.16xx8.com/article/UploadPic/2009-6/20096633852906.gifAnd now scale it down a little bit, so that it looks like an 3d opened folder:然后把这里向下缩小一点,让它看起来像3D的打开文件夹.http://pic.16xx8.com/article/UploadPic/2009-6/20096633852247.gifThe result of step 4:第四步的效果如下:http://pic.16xx8.com/article/UploadPic/2009-6/20096633852804.gif5. In this step we're going to add a piece of paper. So make a new layer and draw a shape like the one on the picture:5,这一步我们将制作一张纸.新建图层,画上如图的形状.http://pic.16xx8.com/article/UploadPic/2009-6/20096633853838.gif6. Now go to the layers palette and use the following settings:
Gradient Overlay:
Opacity: 10%
#000000 -> #FFFFFF
Angle: 50°
Stroke
Size: 1px
Position: Outside
Color: #D6D6D6
It should now look similar to this one:6,接着将图层样式设置如下:渐变叠加
不透明度:10%
渐变:#000000 -> #FFFFFF
角度:50°描边
大小:1像素
位置:外部
颜色:#D6D6D6现在看起来应该像这样:http://pic.16xx8.com/article/UploadPic/2009-6/20096633853310.gif
,
7. Next you turn the piece of paper to the left a little bit and put this layer under the layer with the 3D folder thing from step 4.7,接着把这张纸向左旋转一些,然后把这个图层放在第四步的图层之下.http://pic.16xx8.com/article/UploadPic/2009-6/20096633853988.gif8. That looks quite nice, but the thing wich makes it look like a really cool icon, is to set the opacity of the 3D folder part to about 50-60%.8,现在看起来就漂亮多了,但是我们还可以让它更酷一些,只需要把第四步的图层的不透明度设置在50%-60%左右.http://pic.16xx8.com/article/UploadPic/2009-6/20096633853823.gifThat's it. You can add some details and use it for a website or make an .ico file and use it for your desktop.
Thats what I came up with in the end:就是它了! 你可以再为它增加一些细节,然后用在你的网页上,或者把它制作成.ico格式的图标应用在你的桌面上.
下面就是我最后做出来的:http://pic.16xx8.com/article/UploadPic/2009-6/20096633853618.gifTwo other things wich I made with exactly the same folder parts:我在相同的文件夹上做出的另外两种效果:http://pic.16xx8.com/article/UploadPic/2009-6/20096633853105.gifhttp://pic.16xx8.com/article/UploadPic/2009-6/20096633853322.gifI hope you liked my first tutorial, and I'm looking forward to make another one soon!
Have fun!
页:
[1]