第1篇 使用Photoshop CS3编辑网页素材

一个优秀的网站，离不开漂亮的素材，网页使用的图形图像素材，通常需要在专业的二维软件中进行创建和编辑。Photoshop CS3是一款优秀的图形图像编辑软件，在网页设计中，该软件通常用于图片素材的编辑和处理，使用Photoshop CS3中的切片工具，还可以设置网页布局，与Dreamweaver CS3配合，能够快速完成网页制作，在这一部分中，将为读者讲解使用Photoshop CS3编辑网页素材的方法。

实例1 蒲公英网站网页背景素材

实例说明

网页背景素材，通常都是由漂亮的图片组成的，Photoshop CS3是一款专业的位图处理软件，能够很方便地设置图片尺寸、分辨率，并能够对各种类型的位图进行编辑。在本实例中，将和读者一道制作蒲公英网站网页背景素材，由于本实例为本书的第一个实例，所以本实例将使用Photoshop CS3中最基础的选择、绘制和编辑工具来完成动画的设置，使读者了解Photoshop CS3的工作流程。

技术要点

在制作本实例时，首先需要创建一个1024×768的标准网页文件，然后导入位图，设置背景底纹；接下来使用Photoshop CS3自带的绘制工具配合外部导入的位图设置网页上的图形；最后在网页中添加文本，完成网页的制作。

本实例中设计的网站，为一个乡村摇滚音乐网站。为了配合网站主题，该网站背景为蓝绿色底纹，主题图案为一张卡片上蒲公英飘出的画面之外，卡片使用了较为鲜艳的金黄色背景，由于网页还需要添加各种按钮、文本框等附件，所以会有较多的留白部分，图1-1为本实例完成后的效果。

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

2 在菜单栏中执行“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例1：蒲公英网站背景素材/背景.jpg”文件，如图1-3所示，单击“打开”按钮，打开该文件。

3 确定“背景.jpg”处于可编辑状态，按组合键Ctrl+A全选图像，然后按组合键Ctrl+C，复制图层。

4 确定“蒲公英网页背景”文件处于可编辑状态，按组合键Ctrl+V粘贴图像，如图1-4所示，这时在“图层”面板中会出现一个新的图层——“图层1”。

5 这时读者可以看到，粘贴的图像与背景的尺寸不一致，在“图层”面板选择“图层1”，按组合键Ctrl+T，在“图层1”图像外围会出现一个自由变换框，拖动该自由变换框的控制点，使其与背景尺寸一致，如图1-5所示，双击鼠标，退出编辑模式。

6 在“图层”面板底部单击“创建新图层”按钮，创建一个新的图层——“图层2”，如图1-6所示。

7 在工具箱中单击“圆角矩形工具”按钮，这时在属性栏内会出现其编辑参数，在属性栏激活“填充像素”按钮，确定绘制属性，在“设置圆角半径”参数栏内键入20，确定圆角半径，如图1-7所示，按X键，使前景色和背景色互换。

提示

在默认状态下，前景色为黑色，背景色为白色，绘制的图形默认使用前景色，由于需要绘制的图形应为白色，所以按X键，使前景色和背景色互换，绘制出白色的图形。

8 参照图1-8所示的位置和尺寸绘制一个圆角矩形。

9 在“图层”面板中双击“图层2”的图层缩览图，打开“图层样式”对话框。选择“样式”选项组中的“投影”复选框，进入投影编辑窗口。在“不透明度”参数栏内键入30，在“角度”参数栏内键入120，在“距离”、“扩展”和“大小”参数栏中分别键入4、4、12，如图1-9所示。

10 选择“样式”选项组中的“描边”复选框，进入描边编辑窗口，双击“设置描边颜色”显示窗，打开“选取描边颜色”对话框，在该对话框内的R、G、B参数栏内均键入155，如图1-10所示，单击“确定”按钮退出该对话框，使描边颜色为浅灰色。

11 退出“选取描边颜色”对话框后，在描边编辑窗口内的“大小”参数栏内键入2，在“位置”下拉式选项栏中选择“外部”选项，如图1-11所示，单击“确定”按钮，退出“图层样式”对话框。

12 图层样式编辑完成后，“图层2”的效果如图1-12所示。

13 在菜单栏中执行“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例1：蒲公英网站背景素材/绘图.jpg”文件，如图1-13所示，单击“打开”按钮，打开该文件。

14 确定“绘图.jpg”处于可编辑状态，按组合键Ctrl+A全选图像，然后按组合键Ctrl+C，复制选区中的图像。

15 确定“蒲公英网页背景”文件为可编辑状态，按组合键Ctrl+V粘贴图像，这时在“图层”面板中会出现一个新图层——“图层3”，将粘贴的图像移动至如图1-14所示的位置。

16 在“图层”面板中选择“图层3”层，然后按住Ctrl键单击“图层2”的图层标识图，加载选区，在菜单栏中执行“选择”/“修改”/“收缩”命令，打开“收缩选区”对话框，在该对话框的“收缩量”参数栏内键入4，如图1-15所示，然后单击“确定”按钮，退出该对话框。

17 按组合键Ctrl+Shift+I反选选区，然后按Delete键，删除选区内的图像，效果如图1-16所示。最后按组合键Ctrl+D取消选区。

18 确定“图层3”层处于被选择状态，在菜单栏中执行“图像”/“调整”/“色相/饱和度”命令，打开“色相/饱和度”对话框。在“饱和度”和“明度”参数栏中均键入15，如图1-17所示，然后单击“确定”按钮，退出该对话框。

19 在菜单栏中执行“文件”/“打开”命令，打开“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例1：蒲公英网站背景素材/蒲公英.jpg”文件，如图1-18所示，单击“打开”按钮，打开该文件。

20 确定“蒲公英.jpg”处于可编辑状态，在菜单栏中执行“选择”/“色彩范围”命令，打开“色彩范围”对话框，在“颜色容差”参数栏内键入55，如图1-19所示，然后单击“蒲公英.jpg”中白色的部分，单击“确定”按钮，退出该对话框。

21 退出“色彩范围”对话框后，在“蒲公英.jpg”图像会出现一个选区，按组合键Ctrl+Shift+I反选选区，如图1-20所示，然后按组合键Ctrl+C，复制选区内的图像。

22 确定“蒲公英网页背景”文件处于可编辑状态，按组合键Ctrl+V粘贴图像，这时在“图层”面板中会出现一个新图层——“图层4”。

23 选择“图层4”，在菜单栏执行“编辑”/“变换”/“水平翻转”命令，将该层图像翻转，如图1-21所示。

24 按组合键Ctrl+T，出现一个自由变换框，编辑该自由变换框的控制点，缩放“图层4”层图像大小，双击鼠标，退出编辑模式。然后将其移动至如图1-22所示的位置。

25 在工具箱单击“矩形选框工具”按钮，在如图1-23所示的位置绘制一个矩形选区。

26 按Delete键，删除选区内的图像，然后按组合键Ctrl+D取消选区，效果如图1-24所示。

27 在“图层”面板选择“图层4”，按住鼠标左键将其拖动至“创建新图层”按钮，如图1-25所示，在“图层”面板会出现“图层4副本”层。

28 按住Ctrl键并单击“图层4”的图层缩览图，加载选区，然后右击选区，在弹出的快捷菜单中选择“填充”选项，打开“填充”对话框，在“使用”下拉式选项栏中选择“前景色”选项，如图1-26所示，单击“确定”按钮，退出该对话框，将选区填充为白色。

29 在工具箱单击“移动工具”按钮，按键盘上的“←”键和“↓”键，微调“图层4”，使蒲公英出现白色边缘，如图1-27所示。

30 单击工具箱中的“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择Impact选项，在“设置字体大小”参数栏内键入35，将“设置文本颜色”显示窗内的颜色设置为白色，在如图1-28所示的位置键入DANDELION。

31 单击工具箱中的“横排文字工具”按钮，选择DANDELION中的字母D，在属性栏内将“设置文本颜色”显示窗内的颜色设置为黑色，如图1-29所示。

32 在属性栏内的“设置字体系列”下拉式选项栏中选择Impact选项，在“设置字体大小”参数栏内键入30，将“设置文本颜色”显示窗内的颜色设置为白色，在如图1-30所示的位置键入Tramp。

33 选择Tramp中的字母T，在属性栏内将“设置文本颜色”显示窗内的颜色设置为R、G、B值分别为255、200、70的橘黄色，如图1-31所示。

34 在属性栏内的“设置字体系列”下拉式选项栏中选择Arial选项，在“设置字体大小”参数栏内键入25，将“设置文本颜色”显示窗内的颜色设置为白色，然后在如图1-32所示的位置键入www.dandelion.com。

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