《Photoshop+Illustrator平面设计实例教程教学案例(共19单元)-汽车工业类网页设计》由会员分享，可在线阅读，更多相关《Photoshop+Illustrator平面设计实例教程教学案例(共19单元)-汽车工业类网页设计（45页珍藏版）》请在金锄头文库上搜索。
1、13.1 扩展案例汽车工业类扩展案例汽车工业类 网页设计网页设计【案例学习目标】在 Photoshop 中，学习使用变换命令、绘图工具、图层控制面板制作背景、标志及导航条，使用横排文字工具添加宣传信息。【案例知识要点】在 Photoshop 中，使用矩形工具、变换命令、描边命令、填充选项、矩形选框工具和渐变工具制作背景效果，使用椭圆工具、添加图层样式按钮、扩展命令和收缩命令制作主体图片，使用自定形状工具、矩形选框工具绘制标志图形，使用圆角矩形工具、添加图层样式按钮和横排文字工具添加相关信息；汽车工业类网页设计效果如图 1 所示。【效果所在位置】云盘 Ch13 效果 汽车工业类网页设计.psd。
2、图 1 Photoshop 应用应用 13.1.1 制作背景效果（1）打开 Photoshop CC 2019 软件，按Ctrl+N 组合键，弹出“新建文档”对话框，设置宽度为 1100 像素，高度为 786 像素，分辨率为 72 像素/英寸，颜色模式为 RGB，背景内容为白色，单击“创建”按钮，新建一个文件。（2）新建图层并将其命名为“绿色块”。将前景色设为绿色（其 R、G、B 的值分别为 194、215、50）。选择“矩形”工具，在属性栏的“选择工具模式”选项中选择“像素”，在图像窗口中的适当位置拖曳鼠标绘制图形，效果如图 2 所示。图 2（3）按 Ctrl+T 组合键，在图像周围出现变换
3、框，将光标放在变换框的控制手柄右上角，光标变为旋转图标，拖曳光标将图形旋转到适当的角度，按 Enter 键确定操作，效果如图 3 所示。图 3（4）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“描边”命令，弹出对话框，将描边颜色设为白色，其他选项的设置如图 4 所示，单击“确定”按钮，效果如图 5 所示。图 4 图 5（5）在“图层”控制面板上方，将“绿色块”图层的“填充”选项设为 26%，如图6 所示，按 Enter 键确定操作，效果如图 7所示。图 6 图 7（6）使用相同的方法制作其他色块，效果如图 8 所示。按 Ctrl+O 组合键，打开云盘中的“Ch13 素材
4、汽车工业类网页设计 01”文件，选择“移动”工具，将图片拖曳到图像窗口中适当的位置，效果如图9 所示，在“图层”控制面板中生成新的图层并将其命名为“汽车”。图 8 图 9（7）新建图层并将其命名为“渐变条”。选择“矩形选框”工具，在图像窗口中拖曳鼠标绘制选区，如图 10 所示。选择“渐变”工具，单击属性栏中的“点按可编辑渐变”按钮，弹出“渐变编辑器”对话框，将渐变色设为从灰色（其 R、G、B的值分别为 228、228、228）到白色，单击“确定”按钮。在图像窗口中由上向下拖曳渐变色。按 Ctrl+D 组合键，取消选区，效果如图 11 所示。图 10 图 11（8）选择“椭圆”工具，在属性栏的“
5、选择工具模式”选项中选择“形状”，将“填充”颜色设为白色，“描边”颜色设为无。按住 Shift 键，在图像窗口中拖曳鼠标绘制圆形，效果如图 12 所示，在“图层”控制面板中生成新的图层“椭圆 1”。图 12（9）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“描边”命令，弹出对话框，将描边颜色设为白色，其他选项的设置如图 13 所示，单击“确定”按钮，效果如图 14 所示。图 13 图 14（10）按 Ctrl+O 组合键，打开云盘中的“Ch13 素材 汽车工业类网页设计 02”文件，选择“移动”工具，将图片拖曳到图像窗口中适当的位置，效果如图 15 所示，在“图层”控制面
6、板中生成新的图层并将其命名为“图片”。按 Alt+Ctrl+G 组合键，创建剪贴蒙版，效果如图 16 所示。（11）新建图层并将其命名为“环形”。按住 Ctrl 键，单击“椭圆 1”图层的缩览图，在圆形周围生成选区，如图 17 所示。图 15 图 16 图 17（12）选择“选择 修改 扩展”命令，在弹出的对话框中进行设置，如图 18 所示，单击“确定”按钮，如图 19 所示。图 18 图 19（13）将前景色设为白色。按 Alt+Delete组合键，用前景色填充选区，效果如图 20所示。图 20（14）选择“选择 修改 收缩”命令，在弹出的“收缩”对话框中进行设置，如图21 所示，单击“确定
7、”按钮，效果如图 22所示。图 21 图 22（15）按 Delete 键，删除选区中的图像，效果如图 23 所示。按 Ctrl+D 组合键，取消选区。图 23（16）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“投影”命令，在弹出的对话框中进行设置，如图 24 所示，单击“确定”按钮，效果如图 25 所示。图 24 图 25（17）按 Ctrl+O 组合键，打开云盘中的“Ch13 素材 汽车工业类网页设计 03”文件，选择“移动”工具，将图片拖曳到图像窗口中适当的位置，效果如图 26 所示，在“图层”控制面板中生成新的图层并将其命名为“汽车”。图 26 13.1.2 制
8、作标志及导航条（1）新建图层并将其命名为“环形 2”。将前景色设为红色（其 R、G、B 的值分别为 230、30、29）。选择“自定形状”工具，单击属性栏中的“形状”选项，弹出“形状”面板，单击面板右上方的按钮，在弹出的菜单中选择“全部”命令，弹出提示对话框，单击“确定”按钮。在“形状”面板中选中需要的图形，如图 27 所示。在属性栏的“选择工具模式”选项中选择“像素”，在图像窗口中拖曳光标绘制图形，如图 28 所示。图 27 图 28（2）选择“矩形选框”工具，在适当的位置绘制矩形选区，如图 29 所示。按Delete 键，删除选区中的图像，效果如图30 所示。按 Ctrl+D 组合键，取消
9、选区。图 29 图 30（3）选择“自定形状”工具，单击属性栏中的“形状”选项，弹出“形状”面板，选中需要的图形，如图 31 所示。图 31（4）在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为蓝色（其 R、G、B 的值分别为 17、130、175），“描边”颜色设为无。在图像窗口中拖曳鼠标绘制图形，如图 32 所示，在“图层”控制面板中生成新的图层“形状 1”。图 32（5）选择“圆角矩形”工具，在属性栏中将“半径”选项设为 20px，在图像窗口中拖曳鼠标绘制圆角矩形。在属性栏中将“填充”颜色设为白色，效果如图 33 所示，在“图层”控制面板中生成新的图层“圆角矩形 1”。（
10、6）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“内阴影”命令，弹出对话框，将阴影颜色设为灰色（其 R、G、B 的值分别为 205、205、205），其他选项的设置如图 34 所示。图 33 图 34（7）选择“投影”选项，弹出对话框，将投影颜色设为灰色（其 R、G、B 的值分别为 205、205、205），其他选项的设置如图 35 所示，单击“确定”按钮，效果如图36 所示。图 35 图 36（8）选择“横排文字”工具，在适当的位置输入文字并选取文字，在属性栏中选择合适的字体并设置文字大小，设置文本颜色为黑色，效果如图 37 所示，在“图层”控制面板中生成新的文字图层。
11、（9）选择“圆角矩形”工具，在属性栏中将“半径”选项设为 2px，在图像窗口中拖曳鼠标绘制圆角矩形。在属性栏中将“填充”颜色设为灰色（其 R、G、B 的值分别为 166、159、155），效果如图 38 所示，在“图层”控制面板中生成新的图层“圆角矩形 2”。图 37 图 38（10）选择“路径选择”工具，按住Alt+Shift 组合键的同时，将圆角矩形拖曳到适当的位置，复制圆角矩形。用相同的方法再次复制圆角矩形，效果如图 39 所示。选择“横排文字”工具，在适当的位置输入文字并选取文字，在属性栏中选择合适的字体并设置文字大小，设置文本填充色为白色，效果如图 40 所示，在“图层”控制面板中生
12、成新的文字图层。图 39 图 40（11）选择“圆角矩形”工具，在属性栏中将“填充”颜色设为红色（其 R、G、B的值分别为 194、25、31），“描边”颜色设为无，“半径”选项设为 20px，在图像窗口中拖曳鼠标绘制圆角矩形，效果如图 41 所示，在“图层”控制面板中生成新的图层“圆角矩形 3”。图 41（12）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“内发光”命令，弹出对话框，将发光颜色设为红色（其 R、G、B 的值分别为 231、35、25），其他选项的设置如图 42 所示。图 42（13）选择“投影”选项，在弹出的对话框中进行设置，如图 43 所示，单击“确定
13、”按钮，效果如图 44 所示。图 43 图 44（14）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在属性栏中选择合适的字体并设置文字大小，设置文本填充色为白色，效果如图 45 所示，在“图层”控制面板中生成新的文字图层。选中文字“最新动态”，设置文本颜色为黄色（其 R、G、B 的值分别为 245、203、30），效果如图 46 所示。图 45 图 46 13.1.3 添加其他信息（1）新建图层并将其命名为“红色块”。将前景色设为红色（其 R、G、B 的值分别为 224、21、20）。选择“圆角矩形”工具，在属性栏的“选择工具模式”选项中选择“像素”，将“半径”选项设为 65p
14、x，在图像窗口中拖曳鼠标绘制图形，效果如图47 所示。（2）新建图层并将其命名为“白色圆形”。将前景色设为白色。选择“椭圆”工具，按住 Shift 键的同时，在图像窗口中拖曳鼠标绘制圆形，效果如图 48 所示。图 47 图 48（3）按住 Shift 键的同时，单击“红色块”图层，将“红色块”和“白色圆形”图层同时选取，选择“移动”工具，单击属性栏中的“水平居中对齐”按钮，水平居中图形，效果如图 49 所示。图 49（4）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“投影”命令，在弹出的对话框中进行设置，如图 50 所示，单击“确定”按钮，效果如图 51 所示。图 50
15、图 51（5）按 Ctrl+O 组合键，打开云盘中的“Ch08 素材 汽车工业类网页设计 04”文件，选择“移动”工具，将图片拖曳到图像窗口中适当的位置，效果如图 52 所示，在“图层”控制面板中生成新的图层并将其命名为“轮胎”。（6）按住 Shift 键的同时，单击“白色圆形”图层，将“白色圆形”和“轮胎”图层同时选取，选择“移动”工具，单击属性栏中的“水平居中对齐”按钮 和“垂直居中对齐”按钮，居中对齐图像，效果如图53 所示。（7）选择“横排文字”工具，在适当的位置输入文字并选取文字，在属性栏中分别选择合适的字体并设置文字大小，设置文本填充色为白色，如图 54 所示，在“图层”控制面板中
16、分别生成新的文字图层。图 52 图 53 图 54（8）选择“横排文字”工具，在适当的位置分别输入文字并选取文字，在属性栏中分别选择合适的字体并设置文字大小，设置文本颜色为红色（其 R、G、B 的值分别为 212、23、25），效果如图 55 所示，在“图层”控制面板中分别生成新的文字图层。图 55（9）分别选择文字“微汽车”和“Micro car”，按 Alt+组合键，适当调整文字字距，效果如图 56 所示。图 56（10）分别选择文字“10”和“1100”，在属性栏中选择合适的字体，如图 57 所示。图 57（11）选择“横排文字”工具，在适当的位置分别输入文字并选取文字，在属性栏中分别选择合适的字体并设置文字大小，设置文本颜色为红色（其 R、G、B 的值分别为 212、23、25）和灰色（其 R、G、B 的值分别为 147、147、147），效果如图 58 所示，在“图层”控制面板中分别生成新的文字图层。图 58（12）选择“矩形”工具，在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为红色（其 R、G、B 的值分别为 230、30、29），“描边”颜色设为无，在图
