实例4 设置印刷厂主页布局

实例说明

本实例中，将制作一个印刷厂主页的素材图像，该素材在图像主体部分三张彩色半调图案的图像，这是在印刷行业常见的一种形式，在画面底部为相关文字和印刷品的图像。

技术要点

在制作本实例时，首先创建一个标准的网页文件，然后设置背景颜色，绘制选区并填充选区，通过执行滤镜中的彩色半调命令和拼缀图命令，完成图像的特殊效果。打开图像素材，将图像拖至网页中并设置投影，使其具有立体效果。接下来创建文本并设置文字效果，完成本实例的制作。

本实例中设置的网站，为一个印刷厂的网站，该网站整体以浅灰色作为背景，但从画面中部水平分为两部分，上部为印刷品形式，下部为照片，画面显得简洁大方，主体突出。在制作网页素材时，按钮部分可根据实例情况在后期适当添加并进行处理，本实例中的按钮大部分以文本替代。图4-1为本实例完成后的效果。

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

2 确定前景色为R、G、B值均为243的浅灰色，按组合键Alt+Delete使用前景色填充背景，然后单击工具箱中的“矩形选框工具”按钮，在如图4-3所示的位置绘制一个矩形选区。

3 确定“背景色”为白色，按组合键Ctrl+Delete使用背景色填充选区，然后使用工具箱中的“矩形选框工具”在如图4-4所示的位置绘制一个矩形选区。

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

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

6 选择“图层1”，执行菜单栏中的“滤镜”/“像素化”/“彩色半调”命令，打开“彩色半调”对话框，在该对话框中的“最大半径”参数栏内键入6，其他参数使用默认设置，如图4-7所示，然后单击“确定”按钮，退出该话框。

7 退出“彩色半调”对话框后，图像效果如图4-8所示。

8 单击工具箱中的“矩形选框工具”按钮，在属性栏中激活“添加到选区”按钮，然后在如图4-9所示的位置绘制矩形选区。

9 确定选区处于可编辑状态下，按Delete键，删除选区内的图像，然后执行菜单栏中的“选择”/“取消选择”命令，取消选区。

10 在“图层1”的顶部创建一个新图层——“图层2”，然后使用工具箱中的“矩形选框工具”在如图4-10所示的位置绘制一个矩形选区。

11 确定“背景色”为白色，按组合键Ctrl+Delete使用背景色填充选区，然后取消选区，执行菜单栏中的“图层”/“图层样式”/“投影”命令，打开“图层样式”对话框，在“不透明度”参数栏内键入25，其他参数使用默认设置，如图4-11所示。

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

13 单击工具箱中的“渐变工具”按钮，在属性栏中单击“点按可编辑渐变”显示窗，打开“渐变编辑器”对话框，在该对话框中参照图4-13调整为灰色、白色到白色透明的线性渐变。

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

15 在“图层3”的顶部创建一个新图层——“图层4”，使用工具箱中的“矩形选框工具”按钮在如图4-15所示的位置绘制一个矩形选区，将前景色设置为R、G、B均为240的灰色，按组合键Alt+Delete，使用前景色填充选区。

16 执行菜单栏中的“选择”/“取消选择”命令，取消选区，然后执行菜单栏中的“滤镜”/“纹理”/“拼缀图”命令，打开“拼缀图”对话框，在该对话框的“方形大小”参数栏内键入1，在“凸现”参数栏内键入0，如图4-16所示，单击“确定”按钮，退出该对话框。

17 确定“图层4”处于可编辑状态，执行菜单栏中的“图像”/“调整”/“亮度/对比度”命令，打开“亮度/对比度”对话框，在该对话框的“亮度”参数栏内键入20，如图4-17所示，单击“确定”按钮，退出该对话框。

18 在“图层4”的顶部创建一个新图层——“图层5”，使用工具箱中的“矩形选框工具”在如图4-18所示的位置绘制一个矩形选区，然后将选区填充为白色。

19 接下来执行菜单栏中的“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例4：设置印刷厂主页布局/图片01.jpg”文件，单击“打开”按钮，打开该文件，如图4-19所示。

20 确定“图片01.jpg”处于可编辑状态，使用工具箱中的“移动工具”拖动该文件中的背景图像至“设置印刷厂主页布局.psd”文件中，这时在“图层”面板中会出现一个新图层——“图层6”。

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

22 接下来参照步骤18至21，设置另外两个图像效果，如图4-21所示。

提示

读者在创建时，可直接将“图层5”进行复制得到“图层5副本”和“图层5副本2”，然后将这两个图层拖至顶层。打开本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例4：设置印刷厂主页布局/图片02.jpg/图片03.jpg”文件，将这两个文件中图像分别拖至复制的图层顶部。

23 在“图层”面板的最顶部创建一个新图层——“图层9”，在工具箱中单击“画笔工具”的下拉按钮；在弹出的下拉式按钮中选择“铅笔工具”选项；在属性栏中设置“画笔”大小为2，将前景色设置为R、G、B值分别为150、170、50的绿色，然后按住Shift键，同时拖动鼠标左键在如图4-22所示的位置绘制一条直线。

24 使用同样的方法，将前景色设置为R、G、B值分别为134、120、120的灰色，然后使用“铅笔工具”在如图4-23所示的位置绘制直线。

25 单击工具箱中的“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择Courier New选项，在“设置字体大小”参数栏内键入18，将“设置文本颜色”显示窗的颜色设置为R、G、B值均为80的灰色，在图4-24所示的位置键入Publishing Company。

26 参照上述设置文本的方法，使用“横排文字工具”分别键入society、seminary、family、MAKE HASTE、2008、2007、2006，如图4-25所示。

27 选择MAKE HASTE层，单击工具箱中的“横排文字工具”按钮，在属性栏中将“设置文本颜色”显示窗的颜色设置为白色。

28 在MAKE HASTE的底层创建一个新图层——“图层10”，使用工具箱中的“矩形选框工具”，在如图4-26所示的位置绘制一个矩形选区，然后将前景色设置为黑色，按组合键Alt+Delete使用前景色填充选区。

29 执行菜单栏中的“选择”/“取消选择”命令，取消选区；然后进入“图层”面板，在“图层10”的“不透明度”参数栏内键入40，如图4-27所示。

30 在2008层的顶部创建一个新图层——“图层11”，使用“矩形选框工具”在如图4-28所示的位置绘制一个矩形选区，将前景色设置为R、G、B值分别为140、3、3的深红色，然后使用前景色填充选区。

31 取消选区，进入“图层”面板，在“图层11”的“不透明度”参数栏内键入40，如图4-29所示。

32 再次使用工具箱中的“横排文字工具”，在属性栏内的“设置字体系列”下拉式选项栏中选择Courier New选项，在“设置字体大小”参数栏内键入12，将“设置文本颜色”显示窗的颜色设置为R、G、B值均为80的灰色，分别键入resume、probation、be fond of、society，如图4-30所示。

33 在“图层”面板的顶部创建一个新图层——“图层12”，然后单击工具箱中的“自定形状工具”按钮，在属性栏中激活“路径”按钮，单击“点按可打开‘自定形状’拾色器”按钮，选择“箭头7”选项，如图4-31所示。

34 在图4-32所示的位置绘制一个箭头路径。

35 进入“路径”调板，选择“工作路径”层，单击该面板底部的“将路径作为选区载入”按钮，将路径作为选区载入，然后将前景色设置为R、G、B值分别为200、50、50的红色，使用前景色填充选区，如图4-33所示。

36 进入“图层”面板，执行菜单栏中的“选择”/“取消选择”命令，取消选区。然后参照上述方法，使用工具箱中的“自定形状工具”中的“花形纹章”选项，在如图4-34所示的位置绘制路径并填充图形。

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