实例2 汽车销售网站标志
实例说明
制作销售类网站标志所使用的素材，通常是公司所经营的商品。本实例为一个汽车营销的网站，主体为汽车图像，为了使其更为美观，对其形态和色彩进行了编辑。
技术要点
在制作本实例时，首先创建一个标准的网页文件，然后键入文本，并设置文本的金属效果，接下来导入素材图像，使用Photoshop CS3的抠像工具进行抠像，最后在网页中添加文本和设置金属标志，完成网站标志的制作。
本实例中设置的网站，是一个销售汽车的网站。为了配合网站主题，该网站用了较为简约、明快的白色背景，主题图案为汽车，汽车所在位置为网页的中心偏右的位置，保持了画面的平衡感。由于该网页为网站的首页，所以其中大部分为文字介绍，图2-1为本实例完成后的效果。
图2-1 汽车销售网站标志
1 运行Photoshop CS3，执行菜单栏中的“文件”/“新建”命令，打开“新建”对话框。在“名称”文本框中键入“汽车销售网站网页背景”。在“宽度”参数栏内键入1024，在“高度”参数栏内键入768，单位设置为“像素”，在“分辨率”参数栏内键入72，在“颜色模式”下拉式选项栏中选择“RGB颜色”选项，在“背景内容”下拉式选项栏中选择“白色”选项，如图2-2所示，单击“确定”按钮，创建一个新文档。
图2-2 “新建”对话框
2 单击工具箱中的
“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择Arial Black选项，在“设置字体大小”参数栏内键入52，将“设置文本颜色”显示窗内的颜色设置为黑色，在如图2-3所示的位置键入Guidkness。
图2-3 键入文本
3 单击工具箱中的
“横排文字工具”按钮，选择Guidkness中的字母G，在属性栏内将“设置文本大小”参数设置为60，如图2-4所示。
图2-4 改变字母大小
4 单击工具箱中的
“移动工具”按钮，选择文本，执行菜单栏中的“栅格化”/“文本”命令，将文本进行栅格化。
5 在“图层”面板选择文本层，然后按住Ctrl键同时单击文本层的图层标识图标，这时会沿文本形成一个选区，如图2-5所示。
图2-5 生成选区
6 单击工具箱中的
“渐变工具”按钮，在属性栏中激活
“线性渐变”按钮，确定为线性渐变，单击“点按可编辑渐变”显示窗，打开“渐变编辑器”对话框，然后参照图2-6所示设置渐变颜色为由黑色到白色再到黑色的线性渐变色。
图2-6 “渐变编辑器”对话框
提示
在色彩滑条单击可以添加色标，选择色标后可以对其颜色进行编辑。
7 确定选区处于可编辑状态，参照图2-7所示在选区内部创建渐变，然后执行菜单栏中的“选择”/“取消选择”命令，取消选区。
图2-7 拖动鼠标
8 在“图层”面板中双击文本层的图层缩览图，打开“图层样式”对话框。选择“样式”选项组中的“投影”复选框，进入投影编辑窗口。在“不透明度”参数栏内键入75，在“角度”参数栏内键入120，在“距离”、“扩展”和“大小”参数栏分别键入3、7、4，如图2-8所示。
图2-8 投影编辑窗口
9 选择“样式”选项组中的“描边”复选框，进入描边编辑窗口，在“设置描边宽度”参数栏内键入1，然后双击“设置描边颜色”显示窗，打开“选取描边颜色”对话框，在该对话框内的R、G、B参数栏内均键入136，如图2-9所示，单击“确定”按钮退出该对话框，使描边颜色为浅灰色。
图2-9 “选取描边颜色”对话框
10 接下来在菜单栏执行“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例2：汽车销售网站标志/汽车.jpg”文件，单击“打开”按钮，打开该文件，如图2-10所示。
图2-10 “打开”对话框
11 确定“背景.jpg”处于可编辑状态，然后单击工具箱中的
“魔棒工具”按钮，在属性栏的“容差”参数栏内键入10，在“背景.jpg”图像的空白处单击，如图2-11所示，将图像的空白处选取。
图2-11 使用魔棒工具选取图像
12 接下来执行菜单栏中的“选择”/“反选”命令，将图像进行反选，然后单击工具箱中的
“移动工具”按钮，拖动选区内的图像至“汽车销售网站标志”文件中，如图2-12所示，这时在“图层”面板中会出现一个新的图层——“图层1”。
图2-12 拖动图像至“汽车销售网站标志”文件中
13 确定“图层1”处于可编辑状态下，按组合键Ctrl+T，打开自由变换框，然后参照图2-13调整图像的大小和位置。
图2-13 调整图像大小和位置
14 执行菜单栏中的“编辑”/“变换”/“水平翻转”命令，将图像进行水平翻转，如图2-14所示。
图2-14 将图像进行水平翻转
15 使“图层1”处于可编辑状态，执行菜单栏中的“图像”/“调整”/“亮度/对比度”命令，打开“亮度/对比度”对话框，在“亮度”参数栏内键入35，在“对比度”参数栏内键入10，如图2-15所示。
图2-15 设置“亮度/对比度”对话框
16 单击“图层”面板中的
“创建新图层”按钮，在“图层1”的顶部创建一个新图层——“图层2”，然后单击工具箱中的
“矩形选框工具”按钮，使用该工具在如图2-16所示的位置绘制一个矩形选区。
图2-16 绘制一个矩形选区
17 使选区处于可编辑状态下，在工具箱中设置前景色的R、G、B值均为248，然后按组合键Alt+Delete，填充选区颜色，如图2-17所示。
图2-17 绘制一个矩形选区
18 接下来执行菜单栏中的“选择”/“取消选择”命令，取消选区，然后执行菜单栏中的“图层”/“图层样式”/“投影”命令，打开“图层样式”对话框，在投影编辑窗口中，双击“设置阴影颜色”显示窗，打开“选择阴影颜色”对话框，设置R、G、B值均为66，如图2-18所示，单击“确定”按钮，退出该对话框。
图2-18 “选择阴影颜色”对话框
19 退出“选择阴影颜色”对话框后，在“不透明度”参数栏内键入75，在“角度”参数栏内键入120，在“距离”、“扩展”和“大小”参数栏内分别键入1、0、3，如图2-19所示。
图2-19 设置“图层样式”对话框
20 在菜单栏中执行“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例2：网站背景素材/花边.jpg”文件，如图2-20所示，单击“打开”按钮，打开该文件。
图2-20 “打开”对话框
21 确定“花边.jpg”处于可编辑状态，执行菜单栏中的“选择”/“色彩范围”命令，打开“色彩范围”对话框，在“颜色容差”参数栏内键入200，如图2-21所示，然后单击显示窗中的白色区域，再单击“确定”按钮，退出该对话框。
图2-21 “色彩范围”对话框
22 退出“色彩范围”对话框后，在“花边.jpg”图像中会出现一个选区，执行菜单栏中的“选择”/“反选”命令，将选区进行反选，然后使用
“移动工具”拖动选区内的图像至“汽车销售网站标志.psd”文件中，如图2-22所示。
图2-22 拖动图像至“汽车销售网站标志.psd”文件中
23 将花边图像拖动至“汽车销售网站标志.psd”文件中，在“图层”面板中出现一个新图层——“图层2”。按组合键Ctrl+T，调整“图层2”图像的位置和大小，如图2-23所示。
图2-23 调整“图层2”图像的位置和大小
24 双击鼠标，结束自由变换框，然后拖到“图层2”至“图层”面板底部的
“创建新图层”按钮处，复制“图层2”得到“图层2副本”。
25 确定“图层2副本”处于可编辑状态，执行菜单栏中的“编辑”/“变换”/“水平翻转”命令，将该层图像进行水平翻转，然后参照图2-24所示调整图像位置。
图2-24 调整图像位置
26 接下来参照设置“图层2副本”的方法，绘制出其他三个顶角的花边效果，如图2-25所示。
图2-25 绘制花边效果
提示
读者在设置其他花边图像时，应注意适当设置图像的水平翻转和垂直翻转。
27 单击工具箱中的
“画笔工具”下拉按钮，在弹出的下拉式按钮中选择“铅笔工具”选项，在属性栏中单击“点按可打开画笔预设选取器”下拉按钮，在“主直径”参数栏内键入1，将“画笔”大小设为1，然后按住Shift键在如图2-26所示的位置绘制一条直线。
图2-26 绘制一条直线
提示
在使用
“铅笔工具”绘制直线时，按住Shift键时，可以水平或垂直绘制。
28 单击工具箱中的
“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择Courier New选项，在“设置字体大小”参数栏内键入10，将“设置文本颜色”显示窗内的颜色设置为黑色，在如图2-27所示的位置键入Click here to enter。
图2-27 键入文本1
29 在属性栏内的“设置字体系列”下拉式选项栏中选择Arial Black选项，在“设置字体大小”参数栏内键入12，将“设置文本颜色”显示窗内的颜色设置为黑色，在如图2-28所示的位置键入INTERNATIONAL SITE。
图2-28 键入文本2
30 在属性栏内的“设置字体系列”下拉式选项栏中选择Arial Black选项，在“设置字体大小”参数栏内键入24，将“设置文本颜色”显示窗内的颜色设置为蓝色，在如图2-29所示的位置键入MAKE HASTE。
图2-29 键入文本3
31 在属性栏内的“设置字体系列”下拉式选项栏中选择Courier New选项，将“设置文本颜色”显示窗内的颜色设置为黑色，然后在“设置字体大小”参数栏内首先键入10，在图2-30（a）所示的位置键入The power repidity，然后在“设置字体大小”参数栏内首先键入12，在图2-30（b）所示的位置键入THIS SITE REQUIRES FLASH PLUG-IN FOR VIEWING CLICK HERE TO DOWNLOAD COPYRIGHT 2005 KIA MOTORS CORP. ALL RIGHTS RESERVED。
图2-30 键入文本
32 接下来将完成的标志素材导入至“汽车销售网站标志.psd”文件中，执行菜单栏中的“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例2：汽车销售网站标志/标志01.psd”和“标志02.psd”文件，单击“打开”按钮，打开这两个文件，如图2-31所示。
图2-31 “打开”对话框
33 确定“标志01.psd”文件处于可编辑状态，使用工具箱中的
“移动工具”，将“标志01”层中的图像拖动至“汽车销售网站标志.psd”文件中，这时在“图层”面板中出现“标志01”层，然后参照图2-32所示调整该层中图像的位置。
图2-32 调整图像的位置
34 确定“标志02.psd”文件处于可编辑状态，将“标志02”层中的图像拖动至“汽车销售网站标志.psd”文件中，这时在“图层”面板中出现“标志02”层，参照图2-33所示效果，调整该层中图像的位置。
图2-33 调整图像的位置
35 现在汽车销售网站标志的制作就全部完成了，完成后的效果如图2-34所示，如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例2：汽车销售网站标志/汽车销售网站标志.psd”文件，该文件为本实例完成后的效果。
图2-34 汽车销售网站标志