五
9
2010
使用Photoshop制作 Web 2.0 布局的网站 [4]
发布者: seasun在这个photoshop网页设计教程中，我们将要学习如何使用Photoshop来制作 Web 2.0 布局的网站。由于本文较长，为了阅读的方便，我们将此文分成四个部分来发布以提高单个页面的访问速度。这里发布的是该文的第四部分。以 前我们学习了 那么多的photoshop教程，似乎都有 些长，那是因为这些教程都是非常详细。我保证只要你跟着去做就会发现很简单，你所要做的只是去试一试。
步骤 30
重复第27步创建一些图形如下图所示， 同时创建一个矩形，填充以颜色值#334814 ，然后调整不透明度为40%。
给大矩形添加图层样式，设置参考下图所示： 
给the skewed rectangle填充一个暗些的颜色值：#2a6788
输入“t”，并设置以下文字属性：
字体类型： Pico-Black
字体大小：35px
字体粗细：Regular
反锯齿设置 Smooth
颜色：#2fcfff
描边，参考下图所示：
确定你的图层系统化并且组合好了。
步骤 31
复制另一个the Twitter icon， 调整上面的颜色 (大矩形) 为： #0080ab, 然后填充the skewed rectangle 的颜色值为：#00526d.
输入文字“in” 并设置以下文字属性：
字体类型： Myriad Pro
字体大小：35px
字体粗细：Bold
反锯齿设置 Smooth
颜色：white (#ffffff) 
创建三份the Twitter或获得图标,更改叠加颜色(大长方形):# 395796,填补倾斜矩形这个颜色值为:# 263e6f。
输入文字“f”，并设置以下文字属性：
字体类型： Klavika
字体大小：35px
字体粗细：Bold
反锯齿设置 Smooth
颜色：white (#ffffff)
再复制一份，更改叠加颜色(大长方形):#e8e8e8,填补倾斜矩形这个颜色值为:# cdcdcd。
输入文字“fr”，并设置以下文字属性：
字体类型： Frutiger Black (get it from here )
字体大小：35px
字体粗细：Bold
反锯齿设置 Smooth
颜色：f: #0079d2 – r: #ff3093
把图标分别放在每一个分隔组里，然后选中这四个图标单击分散左边。
步骤 32
让我们继续，现在只剩下页脚了。创建一个1020×460px 的选区，以任何颜色填充。
添加渐变叠加，参考下图设置。
现在你应该拥有一个很漂亮的阴影。
wi运用单排选框工具(M) 创建一个1px 的选区然后填充白色(#ffffff)。
步骤 33
参照下图所示拖拽两条新的水平参考线。
输入一个标题，并设置以下字符属性：
字体类型： Rockwell
字体大小：30px
字体粗细：Regular
反锯齿设置 Sharp
颜色：#7ea547
输入一个sub-title，字符属性设置如下：
字体类型： Arial
字体大小：15px
字体粗细：Regular
反锯齿设置： None
颜色：#d3d3d3 
运用线性工具 (U)在顶部创建两条水平线，然后设置颜色值为：#151515 – #2f2f2f.
如下图所示对齐：
步骤 34
参照下图所示拖拽两条新的水平参考线。
运用圆角矩形工具 (U) 创建两个210×25px半径 5px 的矩形，填充颜色为： #141313，设置阴影。
在这两个矩形里面输入文本，设置文字属性如下：
字体类型： Arial
字体大小：15px
字体粗细：Regular
反锯齿设置： None
颜色：#7ea547
创建另一个矩形如上图所示，但是这个高度调整为： 110px依然在里面输入文字，属性设置同上，复制我们在第17步制作的按钮，然后对齐它如下图所示：
步骤 35
如同左边，我们在右边也输入同样的标题。
输入文字，并参考下图设置。
把你所做的复制两份。
步骤 36
输入第三个标题和一些文字来填充右边的部分。
现在你的页脚应该像这个样子：
步骤 37
我们现在应该到这一步了！向下50px拖拽一条新的水平参考线。
在每个顶部创建两条水平线，设置颜色为#181818 – #2f2f2f.
输入一些关于版权的文字，并设置以下文字属性：
字体类型：Arial
字体大小:15px
字体粗细：Regular
反锯齿设置： None
颜色：white (#ffffff) – #82aa48
运用这些字符设置，输入write a sub-navigation.
要确保你的图层条理清晰，并且都已经组合起来，下面看到的是我们的样子！
总结：
现在我们已经做好了，我们已经创造了一个专业2.0网络布局。正如你所看到的,这里的方法很简单，却得能做出很好的效果。
该文的其余部分：
- 分享
