五
9
2010
使用Photoshop制作 Web 2.0 布局的网站 [2]
发布者: seasun在这个photoshop网页设计教程中，我们将要学习如何使用Photoshop来制作 Web 2.0 布局的网站。由于本文较长，为了阅读的方便，我们将此文分成四个部分来发布以提高单个页面的访问速度。这里发布的是该文的第二部分。以前我们学习了 那么多的photoshop教程，似乎都有 些长，那是因为这些教程都是非常详细。我保证只要你跟着去做就会发现很简单，你所要做的只是去试一试。
输入欢迎语，字符设置如下：
字体设置：Rockwell
字体大小: 40px
字体样式: Regular
反锯齿设置：锐利
颜色：#f4f4f4 
我已经写上了“Here’s our brand new work. Oops Welcome!”但是我们需要以某种方式来强调“Welcome！”这个单词。所以基本上我们先添加一个渐变叠加，如下图所示。
现在根据下图所示拖拽两条新的水平参考线。
在我们结束这一步之前，要确定你的文字图层已经组织起来。
步骤 10
我们先创建一个220*150像素的选区（可用任何颜色填充），这个选区将会作为我们的图像控制区。
将这个图层命名为“pic-holder”然后试着将它像上图所示对齐。
描边
让我们添加一个特征设计中图片，文件>打开图像。把图层命名为“pic”，并且确定放在“pic-holder”的上层。
在“pic”图层上右击并且选择创建剪贴蒙板。
步骤 11
创建阴影，我们先复制“pic”和“pic-holder”这两个图层。
选中复制的两个图层，执行编辑>自由变换，然后调整高度为：-100.0%
当复制的两个图层仍处于选中状态时右击选择转换为智能对象，把这个图层命名为“shadow”，并且确定这个图层是位于底部。
选择“shadow”层然后单击添加图层蒙版（位于图层面版的底部）。
选择渐变工具（G）设置黑、白、黑从下到上拉一个线性渐变。
你应该会得到下面的图像。
步骤 12
我们需要为图像添加一个说明，先创建一个240*25像素的选区，填充颜色值：#1a1919，作为说明的背景。
输入说明文字，字符设置如下：
字体设置：Arial
字体大小: 15px
字体样式: Regular
反锯齿设置：None
颜色：#82aa48 
确定你的文件简洁！
步骤 13
复制一份特色图像然后右对齐。
我们将要在中部做一个大一些的图，我们先创建一个340×200px的选区，如下图所示对齐，用任何颜色填充。
以下图作参考，执行描边 。
下图是我们做到这一步的效果。
确定你的图层系统化并且已经重组。 我已经创建了三个组，下图是它们的样子
步骤 14
现在让我们来创建滑动按钮！我们先运用椭圆选区工具（M）创建一个50*50的选区，用任何颜色填充。
添加图层样式，如下图所示：
运用自定义形状工具(U) 创建一个箭头样式，然后如下图所示给它添加图层样式。
你看到的图将会是这个样子： 
不要忘了对齐你的按钮，如下图所示：
复制另一个箭头然后右对齐。
步骤 15
我们来一起制作内容区域，首先创建一个1020×815px的选区。
设置颜色值为： #e8e8e8，然后按下Shift+Backspace t填充选区。
运用单行选框工具 (M) 创建1px 的选区，位置如下图所示，然后填充白色(#ffffff)。
现在一个很棒的像素细节就制作出来了！
步骤 16
我们需要给内容区域设置一个上边界，所以我们在50像素下面拖拽了一条新的参考线。
下载标志设置Basic Set – Pixel Mixer，位置如下图所示。
在标志下方拖拽一条新的参考线, 距离20Px再拖拽一条新的参考线。
输入标题，字符设置如下：
字体类型: Rockwell
字体大小: 29px
字体粗细: Regular
反锯齿设置：Sharp
颜色: #81aa48
如下图所示拖拽两条参考线。
输入一些文本，字符设置如下：
字体类型: Arial
字体大小: 15px
字体粗细: Regular
反锯齿设置： None
颜色: #2f3235
如下图所示再拖拽三条参考线
步骤 17
现在我们来创建一个“read more” 按钮，运用圆角矩形工具 (U) 创建一个大小为 100×30px，半径为5px 的圆角矩形，用任何颜色填充。 
参考下面图像，给图层添加图层样式。
运用椭圆工具(U)创建一个15×15px的椭圆，填充颜色为： #4d4d4d.
为了能够正确地对齐，我们先选择椭圆所在的图层和矩形所在的图层，当两个图层都被选定，单击对齐水平中心。
按下 “+”, 填充白色 (#ffffff) 位置如下图所示。
输入文字 “read more” ，字符设置如下：
字体类型: Tahoma (get it from here)
字体大小: 12px
字体粗细: Regular
反锯齿设置： None
颜色: #ffffff
添加阴影。参考下图设置。
步骤 18
创建一个垂直的分隔符，运用直线工具(U) 创建两条紧挨着的线，填充颜色值为 #ffffff – #b3b3b3.
对齐这两条线如下图所示
不要忘了组织你的图层，看一下我的图层。
该文的其余部分：
- 分享
