实例3 制作时尚类网站主页布局

实例说明

在制作时尚类网站主页时，通常会使用较为另类的图像和对比鲜明的色彩，本实例为了实现具有冲击力的视觉效果，增大了图像的纯度和饱和度，并在人物面部添加文本叠加效果，突出画面的神秘感。

技术要点

在制作本实例时，首先创建一个标准的网页文件，然后设置背景颜色，打开人物素材图像，将人物图像拖至网页中并调整图像的大小、位置和色相/饱合度，接下来创建文本并设置文字效果，最后在网页中设置矩形条和在矩形条中添加人物素材图像，完成本实例的制作。

本实例中设置的网站，为一个时尚封面的网站，为了配合网站主题，该网站黑色作为背景色，主题图案为时尚的人物图像，整体呈红色调，与背景色形成鲜明的对比，为了突出网页主题，使人物脸的部位与浅色字母相叠加，由于该网页的背景色为黑色，所以整体显得时尚高雅。图3-1为本实例完成后的效果。

1 运行Photoshop CS3，执行菜单栏中的“文件”/“新建”命令，打开“新建”对话框。在“名称”文本框中键入“制作商业网站主页布局”。在“宽度”参数栏内键入1024，“高度”参数栏内键入768，单位设置为“像素”，在“分辨率”参数栏内键入72，在“颜色模式”下拉列表框中选择“RGB颜色”选项，在“背景内容”下拉式选项栏中选择“背景色”选项，如图3-2所示，单击“确定”按钮，创建一个新文件。

2 确定前景色为黑色，按组合键Alt+Delete使用前景色填充背景，然后执行“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例3：制作商业网站主页布局/图片01.jpg”文件，单击“打开”按钮，打开该文件，如图3-3所示。

3 确定“图片01.jpg”文件处于可编辑状态，使用工具箱中的“移动工具”将“图片01.jpg”中的图像拖动至“制作商业网站主页布局.psd”文件中，如图3-4所示。这时在“图层”面板中会出现一个新图层——“图层1”。

4 选择“图层1”层，按组合键Ctrl+T，打开自由变换框，然后参照图3-5所示调整图像的大小和位置。

5 在自由变换框内双击，结束自由变换，然后拖到“图层1”至“图层”面板底部的“创建新图层”按钮处，复制“图层1”得到“图层1副本”。

6 单击“图层”面板中“背景”层和“图层1”左侧的“指示图层可见性”按钮，确定将“背景”层和“图层1”层隐藏。

7 选择“图层1副本”层，执行菜单栏中的“选择”/“色彩范围”命令，打开“色彩范围”对话框，在“颜色容差”参数栏内键入200，如图3-6所示，然后单击图像白色的部分，单击“确定”按钮，退出该对话框。

8 退出“色彩范围”对话框后，在图像中会出现一个选区，执行菜单栏中的“选择”/“反选”命令，将选区进行反选，然后按Delete键，删除选区内的图像，图3-7为删除选区内图像后的效果。

9 执行菜单栏中的“选择”/“取消选择”命令，取消选区。确定“图层1副本”仍处于可编辑状态，执行菜单栏中的“图像”/“调整”/“色相/饱合度”命令，打开“色相/饱合度”对话框，首先选择“着色”复选框，然后在“色相”参数栏内键入360，在“饱和度”参数栏内键入70，在“明度”参数栏内键入24，如图3-8所示。

10 单击“图层”面板中“背景”层和“图层1”左侧的“指示图层可见性”按钮，显示“背景”层和“图层1”层。

11 单击工具箱中的“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择Impact选项，在“设置字体大小”参数栏内键入30，将“设置文本颜色”显示窗的颜色设置为R、G、B值分别为200、195、172的土黄色，在图3-9所示的位置键入VOGUE MODE STYLE PRIMETHE PICK OT THE BASKET DISTILLATE SHASTENING ESSENTIAL RETRENCH PORCELAIN BY RULE AND LINE MODE。

12 确定文本层处于可编辑状态，执行菜单栏中的“图层”/“栅格化”/“文字”命令，将文本进行栅格化，然后按住Ctrl键，单击“图层1副本”层的图层缩览图，加载该图层的选区，如图3-10所示。

13 使选区处于可编辑状态，按Delete键，删除选区内的图像，然后执行菜单栏中的“选择”/“取消选择”命令，取消选区，如图3-11为删除后的图像效果。

14 单击工具箱中的“橡皮擦工具”按钮，将画笔大小设置为35，然后参照图3-12所示将人脸外部的文字擦除。

15 单击工具箱中的“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择Impact选项，在“设置字体大小”参数栏内键入72，将“设置文本颜色”显示窗内的颜色设置为R、G、B分别为165、88、70的红色，在图3-13所示的位置键入W。

16 接下来在W图层的顶部创建一个新图层——“图层2”，然后单击工具箱中的“矩形选框工具”按钮，在图3-14所示的位置绘制一个矩形选区。

17 确定选区处于可编辑状态，在工具箱中将前景色设置为R、G、B值分别为148、3、3的红色，然后按组合键Alt+Delete，使用前景色填充选区，如图3-15所示。

18 执行菜单栏中的“选择”/“取消选择”命令，取消选区；然后执行菜单栏中的“图层”/“图层样式”/“斜面和浮雕”命令，打开“图层样式”对话框；在“斜面和浮雕”复选框中，将“样式”设置为“内斜面”类型；在“方法”下拉式选项栏中选择“平滑”选项，将“深度”设置为100，单击“方向”右侧的“上”单选按钮；在“大小”参数栏内键入5，在“软化”参数栏内键入0；在“阴影”面板中将“角度”设置为120，其他参数按照默认设置，如图3-16所示。

19 在“图层”面板中，激活“图层2”，在“不透明度”参数栏内键入60，如图3-17所示。

20 单击工具箱中的“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择Impact选项，在“设置字体大小”参数栏内键入24，将“设置文本颜色”显示窗内的颜色设置为R、G、B分别为148、108、108的暗红色，在图3-18所示的位置键入H。

21 接下来参照上述设置H字母的方法，分别对T、M、L字母进行相应的设置，如图3-19所示。

22 创建一个新图层——“图层6”，使用工具箱中的“矩形选框工具”在如图3-20所示的位置绘制一个矩形选区。

23 单击工具箱中的“渐变工具”按钮，在属性栏中单击“点按可编辑渐变”显示窗，打开“渐变编辑器”对话框，在该对话框中参照图3-21所示设置渐变颜色。

24 确定选区处于可编辑状态，在选区中从左向右拖动鼠标左键，如图3-22所示，然后执行菜单栏中的“选择”/“取消选择”命令，取消选区。

25 使用工具箱中的“横排文字工具”，在属性栏内的“设置字体系列”下拉式选项栏中选择Arial Black选项，在“设置字体大小”参数栏内键入20，将“设置文本颜色”显示窗内的颜色设置为白色，在图3-23所示的位置键入Essential。

26 选择文本层，执行菜单栏中的“图层”/“栅格化”/“文字”命令，将文本栅格化，然后按住Ctrl键，单击Essential层的图层缩览图，加载该图层的选区。

27 使选区处于可编辑状态下，单击工具箱中的“渐变工具”按钮，在属性栏中单击“点按可编辑渐变”显示窗，打开“渐变编辑器”对话框，在该对话框中参照图3-24所示设置渐变颜色。

28 在选区中从左向右拖动鼠标左键，为选区填充渐变颜色，然后执行菜单栏中的“选择”/“取消选择”命令，取消选区。

29 确定Essential层仍处于可编辑状态下，在“图层”面板中的“不透明度”参数栏内键入75，如图3-25所示。

30 创建一个新图层——“图层7”，使用工具箱中的“矩形选区工具”在如图3-26所示的位置绘制一个矩形选区，然后使用R、G、B值均为189的灰色填充选区。

31 执行菜单栏中的“选择”/“取消选择”命令，取消选区。接下来执行菜单栏中的“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例3：制作商业网站主页布局/图片02.jpg、图片03.jpg、图片04.jpg、图片05.jpg、图片06.jpg”文件，单击“打开”按钮，如图3-27所示。

32 确定“图片02.jpg”处于可编辑状态，使用工具箱中的“移动工具”将背景图片像拖至“制作商业网站主页布局.psd”文件中，这时在“图层”面板中会出现一个新图层——“图层8”。

33 选择“图层8”，按组合键Ctrl+T，打开自由变换框，参照图3-28所示调整该层中图像的位置和大小，然后双击鼠标取消自由变换框。

34 接下来参照设置“图片02.jpg”的方法，分别将“图片03.jpg”、“图片04.jpg”、“图片05.jpg”和“图片06.jpg”中的背景图像拖至“制作商业网站主页布局.psd”文件中，并参照图3-29所示从左至右依次调整各图层中的图像的位置和大小。

35 现在商业网站主页布局的制作就全部完成了，完成后的效果如图3-30所示，如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例3：商业网站主页布局/商业网站主页布局.psd”文件，该文件为本实例完成后的效果。