PS网页设计教程VIII——在Photoshop中设计不同寻常布局 作为编码者,美工基础是偏弱的。我们可以参考一些成熟的网页PS教程,提高自身的设计能力。套用一句话,“熟读唐诗三百首,不会作诗也会吟”。 本系列的教程来源于网上的PS教程,都是国外的,全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教。 约定: 1、本文的软件是Photoshop CS5版本 2、原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数,以红色的文字显示。有些错误的参数,直接以红色文字显示正确的参数 例如:(90,22,231,77),表示矩形的左上角的坐标是(90,22),宽231,高77 例如:(90,22),表示矩形的左上角的坐标是(90,22),矩形的其他两个参数教程里已经指定 4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。 In this tutorial I will show you how to manipulate some simple shapes, to obtain a wonderful layout. As you have seen I am trying to create unusual layouts. I want to show you that it is possible to create also another type of layouts (not usual ones). 在本教程中我将向您展示如何巧妙处理一些简单的形状,以获取一个精彩的布局。您已经看到我试图创建非同寻常的布局。我想要告诉你它是可能还创建另一种类型的布局 (不是通常的那种)。 Start by creating a new document (CTRL+N) with the following size: 960 x 900 pixels, and with the background color #5c7a02. 一开始创建新文档(Ctrl+N),尺寸:960px*900px,背景颜色: #5c7a02 Select Rounded Rectangle Tool, and set your corner radius to 50 Pixels 选择圆角矩形工具,设置半径为50px With this tool I will create a shape in the middle of my layout, then I will press on CTRL+T and while I am holding the Shift key down, I will rotate the now it doesn’t matter what color you will choose. I will use different colors for each shape I make, because I want to show you where I will place the I will change the color for all this shapes to # the top of my layout I will add another shape, but this time I will use the Rectangle will change the color for this shape to # 3c3427, and on the bottom right of this layout I will add another shape. 在页面的中部创建一个圆角矩形,然后按Ctrl+T自由变换,按住Shift键,旋转圆角矩形。现在还没告诉你要用哪种颜色。我将用不同的颜色创建一些圆角矩形,因为我要展示给你我如何摆放这些圆角矩形。现在我要更改这些矩形颜色为#3c3427。在网页的顶部我将添加一个矩形,这次用的是矩形工具。我给这个矩形还是用颜色#3c3427,在布局的右下角我将添加另一个圆角矩形 感觉原教程的操作比较繁琐,于是自己更改了操作步骤,但是最终的效果是一样的。 创建一个圆角矩形(432,29,480,644),颜色:#3c3427 创建一个圆角矩形(0,0,485,485),题外话,(644-50*2)/+50*2≈485 按Ctrl+T,自由变换,旋转45度,按回车确定退出自