PS网页设计教程在Photoshop中设计优雅的网站布局设计.docx

1、PS网页设计教程在Photoshop中设计优雅的网站布局设计PS网页设计教程III在Photoshop中设计优雅的网站布局设计作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。本系列的教程来源于网上的PS教程，都是国外的，全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限，翻译的细节上还有待推敲，希望广大网友不吝赐教。约定：1、本文的软件是Photoshop CS5版本2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以

2、红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。Lets start the tutorial.Open Photoshop and create a new document 1020 by 1100px让我们开始教程打开Photoshop，新建一个文档，尺寸：1020*1100pxNext select Rectangle To

3、ol and create a large rectangle over your document. I have used this color: #e5e4e4接下来用矩形工具创建一个覆盖整个文档的矩形，颜色： #e5e4e4这一步可以斟酌一下，个人觉得用油漆桶工具比较好Step 1I will select ellipse tool and I will create this white shape步骤1选择椭圆工具创建如下的白色椭圆Step 2I will go to FilterBlurGaussian Blur and I will apply a radius of abou

4、t 35px步骤2用滤镜 模糊 高斯模糊，半径设置为35pxStep 3FromPremium Files, available to ourPremium MembersI will useHand Drawn Vector Ornamentsand I will add an element on my document.I will lower the opacity to 4% also步骤3在Premium Files, 到达我们的Premium Members，我将用Hand Drawn Vector Ornaments里的图案放在我的文档里把它的不透明度调到4%Step 4Nex

5、t I will select Rectangle Tool and I will create this 3 shapes at the top:步骤4接下来，用矩形工具在顶部创建3个矩形。3个矩形高度为6px，颜色分别为： #cdaeac、#ad8b8a、#a18280Step 5With Type Tool I will write “Elegant Website” and as a tagline I will use “a design by trendyTUTS”. The font used is Ariston, with 48pt in size.For “Elegant”

6、 I have applied this layer styles:步骤5用文字工具添加文字elegant website，对下面的标志行添加文字a design by trendyTUTS。字体用Ariston，48号字。对Elegant添加下面的图层样式：颜色叠加：颜色： #c7c1c1For “Website” this layer styles:对website添加如下的图层样式：颜色叠加：颜色： #d38475My result:结果如下：Step 6On this step Ill make use of ourPremium Filesagain. This time from

7、Universal Vector Icons 2, Ill select a badge icon and I will add it on my document.步骤6在这一步，我又要访问Premium Files。这次用Universal Vector Icons 2，选择badge icon添加到我的文档中。I will apply the following layer styles to my badge:对刚才的图标添加下面的图层样式：颜色叠加：颜色： #d2d2d2Here is my result:结果如下：Step 7With Type Tool I will add so

8、me text on the right side. I will write “Call us 1-800-elegant”步骤7用文字工具在右边添加call us 1-800-elegant。其中call us和之前的elegant图层样式一样，1-800-elegant和之前的website图层样式一样。Step 8I will use Rectangle Tool and I will create this black shape.步骤8用矩形工具添加如下的黑色矩形。（0，223，1020，65） 颜色： #636363Step 9Having Rectangle Tool sele

9、cted I will create another shape on the top of the shape created Step 6. I have used a red color just for demonstration proposes. When you create this shape you will need to use this color: # e5e4e4步骤9用矩形工具创建另一个矩形在刚才矩形的顶部。我为了示范建议用红颜色。当您创建此矩形，您将需要使用颜色： #e5e4e4跟着教程走，也先用红颜色，再改成#e5e4e4，矩形（70，223，882，40）

10、Step10Make sure that the layer of the shape created on step 8 is selected on your layer palette,select Direct Selection Tool and drag a little bit from the bottom left corner of the shape. Please see the screenshot:Proceed in the same way for the right side. Here is my result:请确保刚才新建的矩形图层被选中的状态，用直接选

11、择工具拖动矩形的左下角，看屏幕快照：拖动的时候按住shift，可以保持水平不动，结合信息面板上的提示，可以完美的拖动成45度角用同样的方式，拖动矩形的右下角，再将颜色改回#e5e4e4，结果如下：Step 11With Rectangle Tool I will create this shape. Color used: # d67474步骤11用矩形工具创建一个矩形（76，187，870，76），颜色： #d67474Step 12With Ellipse Tool I will create this shape:步骤12用椭圆工具创建如下的椭圆：And I will apply a G

12、aussian Blur of about 34px. My result然后对椭圆添加高斯模糊，半径设置为34px（个人觉得半径8px比较合适，不知为什么，他的参数就基本上什么都看不到了），结果如下Step 13I will surround the navigation with this sign “”. To create a nice effect I will apply this layer styles:步骤13我将符号“-”围绕着导航栏一圈，为了漂亮，添加如下的图层样式：用文字工具，调整字符间距，以达到虚线框的效果My result结果如下Step 14With Type T

13、ool I will add the text for navigationI have used Ariston font with 24px in size步骤14用文字工具在导航栏上添加一些文本，字体Ariston，大小24px为了和样张一样，还对文字增加了投影的设置：Step 15With Pen Tool I will create this arrow wich it will act as an selector for navigation.步骤15用钢笔工具创建导航栏上菜单被选中时的三角箭头。用多边形工具，将边数改成3，创建三角形可能还更方便一点Step 16With rec

14、tangle Tool I will create this shape on the middle of the page. Make sure that the layer of the shape created is selected on your layer palette, select Direct Selection Tool and drag a little bit from the top left corner of the shape. Please see the screenshot:步骤16用矩形工具在页面的中部创建矩形（36，552，950，50），确保矩形

15、的图层处于被选中的状态，用直接选择工具，拖动矩形的左上角，请参考下图：I will proceed in the same way for the right corner, then I will apply this layer styles:用同样的方法调整矩形的右边，然后添加如下的图层样式：渐变编辑器的三个颜色从左至右分别为：#f4f4f4，#fefefe，#ffffffStep 17With Rectangle Tool I will create another shape and I will apply this layer styles:步骤17用矩形工具创建另一个矩形（36

16、，602，950，438），然后添加如下的图层样式：渐变编辑器的颜色从左只有分别为： #f6f6f6，#ffffff，#ffffffStep 18With Pen Tool I will create this triangles at the bottom of the shape created on Step 15用钢笔工具在刚才的白色的矩形底部创建两个三角形I will apply a Gaussian Blur of about 40px.对两个三角形添加高斯模糊，参数：40pxMy result结果如下：Step 19Next Ill make use ofPremium File

17、s. From Universal Vector Icons 2, I will add a Light Bulb and fromHand Drawn Vector Ornaments, I will use some ornaments.步骤19接下来要从Premium Files上的Universal Vector Icons 2，从中添加灯泡图案，并且从Hand Drawn Vector Ornaments上添加一些花纹。Step 20With Type Tool I will add some text步骤20用文字工具添加一些文字Step 21To enhance the titl

18、e “We Bring Ideas to Life” I have used 2 type of fonts: Arial and Ariston. I have used also 6 lines (3 on the left and 3 on the right side of the title). For this lines I have applied this layer styles:步骤21对标题文字We Bring Ideas to Life，用两种字体：Arial 和 Ariston。字号：44px，对标题文字添加内投影，参数如图，颜色： #bbb7b6。添加6条直线（3

19、条在标题的左边，3条在标题的右边），对这些直线添加如下的图层样式：内阴影：颜色：#797979颜色叠加：颜色： #fbfbfbStep 22With Pen Tool I will create this 2 triangles and I will apply a Gaussian Blur of about 10px步骤22用钢笔工具创建2个三角形，并对它们进行高斯模糊，参数10pxStep 23On the top of the triangles created on Step 21, with Rectangle Tool I will create this shape and I

20、 will apply this layer styles.步骤23在刚才的阴影上方，用矩形工具创建矩形（720，518，184，56），并添加如下的图层样式：参考样张，似乎应该是圆角矩形工具，我给的半径参数是10颜色叠加：颜色： #e7e7e7Step 24Having Rectangle Tool still selected, I will create another shape on the top of the shape created on Step 22, I will apply this layer styles and with Type Tool I will add

21、 some text步骤24保持矩形工具选择状态，在刚才的矩形的上方创建一个新的矩形，添加如下的图层样式，并添加一些文字参考样张，还是用圆角矩形，直接复制刚才的图层，然后自由变换，各自缩进14px。文字的颜色和样式和之前步骤19中的文字一致。渐变叠加，颜色分别为：#f6f6f6，#ffffffStep 25Because this area it will be a jquery slideshow, we will need to create the arrows as well. I will select Line Tool with 10px weight I will draw 2

22、 identical lines, than with Free Transform Tool (Ctrl + T) I will arrange them to create an arrow. I will apply this layer styles also:步骤25因为要用jquery显示幻灯片，我们将创建左右的箭头。我将选择直线工具，设置10px的粗细， 画2条相同的直线，然后用自由变换工具 (Ctrl + T)排列它们，以创建一个箭头。我还将运用如下的图层样式：这两个箭头还是颇费了一番功夫，目前采用的方法是，先用直线工具画一条水平直线，长度40px，Ctrl+J复制图层，将复制

23、的图层顺时针旋转90度。微调这两条直线，使得左上角重合。然后合并图层，再逆时针旋转45度。再Ctrl+T自由变换，高度调整为原来的94%左右。再添加如下的样式。做好一个箭头后，Ctrl+J复制图层，水平翻转，得到另一个箭头。再调整箭头到合适的位置。颜色叠加：颜色： #c7c1c1Step 26Now I will create the content area. I will select Type Tool and I will write “Latest Project”. I have applied this layer styles:步骤26现在要创建内容区域。用文字工具添加文本La

24、test Project。并添加如下的图层样式：颜色叠加：颜色： #ecececStep 27With Pen Tool I will create this 2 triangles and I will apply a Gaussian Blur of about 10px.Over this triangles I will add an image. I will repeat the same process and I will create a total of 6 similar thumbnails.步骤27用钢笔工具画2个三角形，并对其添加高斯模糊，参数10px在三角形的上方

25、，添加图片。重复同样的过程，一共要创建8个相似的图片缩略图下面是我最终的效果：心得：1、合理建立图层分组：之前没有感觉。这3个例子做下来，动辄数十个图层，在日后的编辑是很头疼的事情。所以一般会根据不同的区域新建一个图层分组，在这个区域内的图层都划并到同一个组。这样，日后修改就方便多了。从网页设计来讲，一般划分为这几个组：Header、Navigation、Feature、Content、Footer、Slider等。图层分组不是必须的，也不会美化你的网页，但是能简化你日后的维护编辑工作2、虚线：在PS中是没有设置线型的选项的。因此，如果要画虚线，就不是很方便了。本文提出的不失为一种很巧妙的方法，用文字工具添加文本“-”，然后调整字符间距，可以很方便快速的模拟出直线的效果。3、内嵌字的效果：本文多处通过添加图层样式的方法，来达到文字内嵌的效果。