《PS网页设计教程XII——在PS中创建专业的web2.0的网页布局 》.doc

PS网页设计教程XII——在PS中创建专业的web2.0的网页布局 作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。 本系列的教程来源于网上的PS教程，都是国外的，全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限，翻译的细节上还有待推敲，希望广大网友不吝赐教。 约定： 1、本文的软件是Photoshop CS5版本 2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图 3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数 例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77 例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定 4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。 In this Photoshop tutorial we’re going to learn how to create a web 2.0 layout, As we go through the tutorial we’ll deal with so many Photoshop techniques. Seems kind of long? that’s because it’s very detailed. I assure you’ll find easy to follow and to get done, just give it a try! 在本PS教程中，我们将学习如何创建web 2.0的布局，随着我们通过本教程我们会学习很多PS技巧。似乎太长了吗？这是因为它非常详细。我保证你照着做会发现很容易，试试看！ Step 1 To keep everything aligned we’re going to use 960s Grid System (Get it from here) once downloaded open up the file “960_grid_24_col.psd”. We’ll start by creating layer from background, right-click on the layer “Background”, then choose Layer From Background. and call it “bg”. 步骤1 为了对齐元素，我们打算用960s Grid System（从这获得），下载后打开960_grid_24_col.psd文件 一开始从背景创建图层，在Background上右键，选择背景图层，命名为bg 由于本翻译不使用960s Grid System，故本步改为新建文档，尺寸：1020px*1800px Step 2 As we’ll use guides so much, we need to view our Rulers. In order to do that go to View Rulers. 步骤2 我们需要参考线，我们需要显示我们的标尺。为此，点击：视图 标尺 Step 3 We need to set lower borders for the header area, therefore we’ll drag a new horizontal guide after 100px. go to View New Guide, Position: 100. 步骤3 我们需要设定头部区域的边框，为此在100px的位置拖动一条水平的参考线。点击：视图 新建参考线，位置：100 Step 4 Let’s create our header. we’ll start by creating a selection of 1020x100px. then click Shift+Backspace to fill it (with any color just for now). 步骤4 现在创建头部区域。我们首先创建一个1020px*100px的选区。然后按Shift+Backspace填充（用当前的前景色填充） 建议：不太常见的做法，一般用矩形工具创建一个矩形（0，0，1020，100），区别是矩形工具会新建一个图层 Give it a Gradient Overlay according to the following image: 按照下图设置矩形的渐变叠加的图层样式 渐变编辑器的颜色：#161616，#202020，#131313 Now call