PS网页设计教程XI在PS中创建柔和的绿色环保的网页布局.docVIP

PS网页设计教程XI——在PS中创建柔和的绿色环保的网页布局 作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。 本系列的教程来源于网上的PS教程，都是国外的，全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限，翻译的细节上还有待推敲，希望广大网友不吝赐教。 约定： 1、本文的软件是Photoshop CS5版本 2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图 3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数 例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77 例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定 4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。 Let’s start the tutorial. Open Photoshop and create a new document (Ctrl + N) and as a foreground color choose: #e6e5e5 让我们开始教程 打开PS新建文档（Ctrl + N），尺寸：1020px*1150px，设置背景颜色： #e6e5e5 Next select Rectangle Tool and create a shape on the top of the document. Dimensions 1020 by 268px, color: #f7f7f7 接下来选择矩形工具在文档的顶部创建一个矩形（0，0）。尺寸：1020px*268px，颜色： #f7f7f7 Step 1 Creating the top area Having Rectangle Tool selected, create a similar shape. Color (blue) #3fadbf, dimensions: 340 by 4px. I will duplicate this shape 2 more times and I will move them to the right. For the second shape I have used this color (green) #a3b76b and for the third one (that pinky one) #bf7678. On the left side, a little bit down, I will add my logo. Here you should add your own logo. Here is my result: 步骤1：创建顶部区域 选择矩形工具，创建一个矩形（蓝）（0，0），颜色： #3fadbf，尺寸：340px*4px 复制这个矩形两次，并移动到右侧。第二个矩形（绿）（340，0）的颜色： #a3b76b，第三个矩形（粉）（680，0）的颜色： #bf7678 在左侧的下方一点，我要添加我的LOGO。这儿也能添加你自己的LOGO。这是我的结果 Now on the right side I will create the navigation. With rectangle tool I will create this shapes and with type tool I will add the links. For the Home tab I have used this color: #3fadbf, dimensions: 75 by 47px. No layer styles applied For the rest of the tabs (About Us, Services, Portfolio, Contact) I have applied this layer styles 现在在右边要创建导航菜单。用矩形工具添加一些矩形，用文字工具添加一些链接。 Home导航项（471，43），颜色： #3fadbf，尺寸：75px*47px。没有图层样式 其余的导航项（About Us（555，54，83，36）, Services（648，54，83，36）, Portfolio（740，54，83，36）, Contact（832，54，83，36）），颜色： #a4a4a4，我将添加如下的图层样式，投影的颜色： #ababab After you will apply this layer styles you s