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

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计 作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页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 1020 by 1100px 让我们开始教程 打开Photoshop，新建一个文档，尺寸：1020*1100px ? Next select Rectangle Tool and create a large rectangle over your document. I have used this color: #e5e4e4 接下来用矩形工具创建一个覆盖整个文档的矩形，颜色： #e5e4e4 这一步可以斟酌一下，个人觉得用油漆桶工具比较好 ? Step 1 I will select ellipse tool and I will create this white shape 步骤1 选择椭圆工具创建如下的白色椭圆 ? Step 2 I will go to FilterBlurGaussian Blur and I will apply a radius of about 35px 步骤2 用滤镜 模糊 高斯模糊，半径设置为35px ? Step 3 From? HYPERLINK Premium Files, available to our? HYPERLINK Premium Members?I will use? HYPERLINK Hand Drawn Vector Ornaments?and I will add an element on my document.?I will lower the opacity to 4% also 步骤3 在 HYPERLINK Premium Files, 到达我们的? HYPERLINK Premium Members?，我将用? HYPERLINK Hand Drawn Vector Ornaments?里的图案放在我的文档里?把它的不透明度调到4% ? Step 4 Next I will select Rectangle Tool and I will create this 3 shapes at the top: 步骤4 接下来，用矩形工具在顶部创建3个矩形。3个矩形高度为6px，颜色分别为： #cdaeac、#ad8b8a、#a18280 ? Step 5 With 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” I have applied this layer styles: 步骤5 用文字工具添加文字elegant website，对下面的标志行添加文字a design by trendyTUTS。字体用Ariston，48号字。 对Elegant添加下面的图层样式： 颜色叠加：颜色： #c7c1c1 ? For “Website” this layer styles: 对website添加如下的图层样式： 颜色叠加：颜色： #d38475 ? My result: 结果如下： ? Step 6 On this step I’ll make use of our? HYPERLINK Premium Files?again. This time from Universal Vector Icons 2, I’ll select a badge icon and I