使用Photoshop制作 Web 2.0 布局的网站 [3]

五

2010

使用Photoshop制作 Web 2.0 布局的网站 [3]

发布者: seasun

在这个photoshop网页设计教程中，我们将要学习如何使用Photoshop来制作 Web 2.0 布局的网站。由于本文较长，为了阅读的方便，我们将此文分成四个部分来发布以提高单个页面的访问速度。这里发布的是该文的第三部分。以前我们学习了那么多的photoshop教程，似乎都有些长，那是因为这些教程都是非常详细。我保证只要你跟着去做就会发现很简单，你所要做的只是去试一试。

步骤 19

重复三次以上两个步骤，然后效果如下图所示！

步骤 20

让我们来创建一个分隔符

在50px之后拖拽一条新的参考线。

用椭圆先框工具 (M) 创建一个选区如下图所示：

设置前景色为(#000000)，然后按下 Shift+Backspace填充选区，将图层命名为“separator_bg”。

为了使它有模糊的效果，执行文件> 模糊 > 高斯模糊– 半径：3px.

选择 “separator_bg” 图层，创建一个选区然后删除。

单击添加图层蒙版标志然后设置渐变编辑器为黑，白，黑。

用渐变工具 (G) 根据下图所示拖拽一个线性渐变。

降低图层透明度度为50%。

用直线工具(U) 在分隔符顶部创建两条水平线，把place them right above the separator.
填充颜色为：#b3b3b3 – #ffffff ，然后为他们添加同样的图层蒙版。

步骤 21

我们现在要制作下方的内容区域，距离50px 拖拽一条新的水平参考线。

输入标题，字符设置如下：

字体类型： Rockwell
字体大小： 30px
字体粗细： Regular
反锯齿设置：Smooth
颜色： #81aa48

如下图所示拖拽两条新的水平参考线。

输入一些文字字符设置如下：
字体类型： Arial
字体大小： 14px
字体粗细： Regular
无锯齿设置：None
颜色： #505150

距离160px拖拽一条新的参考线作为内容区域的下边界。

步骤 22

输入另一个标题和文本，字符设置同上个步骤。

用键盘输入一个引号，字符设置如下：
字体类型：Arial
字体大小：200px
字体粗细：Regular
反锯齿设置：Smooth
颜色： #505150
降低图层透明度度为50%。

输入一些你自己的或者是引用的话，字符设置如下
字体类型： Arial
字体大小：14px
字体粗细：Italic
反锯齿设置： Smooth
颜色：#81aa48

步骤 23

为了创造一个垂直的分隔线，我们创建两条紧挨着的线，线条颜色分别设置为：#ffffff – #b3b3b3.

确定你的图层组织起来，看一下我是怎么组织它们的。

步骤24

像左边一样输入另一个标题（尝试着写一些东西代表团队，比如，我写下了“Our Team”) 用矩形工具 (U)创建一个90×90px 的矩形，然后以任何颜色填充，命名这个图层为“photo1_holder”。
这个区域将会作为团队成员的展示区。执行描边，参考如下图所示。放置团队成员的一张图片，命名这个图层为“photo1″，确定图层 “photo1″是在“photo1_holder”图层的上方，然后右击 “photo1″图层选择添加剪贴蒙版，你会看到如下图所示的样子。