3.1.1 课堂案例——制作旅游类App首页
【案例学习目标】学习使用绘图工具、文字工具和“创建剪贴蒙版”命令制作旅游类App首页。
【案例知识要点】使用“移动”工具移动素材，使用“置入”命令置入图片，使用“剪贴蒙版”命令调整图片显示区域，使用“横排文字”工具输入文字，使用“矩形”工具和“圆角矩形”工具绘制基本形状，最终效果如图3-1所示。
图3-1
【效果所在位置】Ch03/效果/制作旅游类App/制作旅游类App首页.psd。
制作旅游类App首页1
制作旅游类App首页2
1. 制作状态栏、导航栏和搜索栏
（1）按Ctrl+N组合键，弹出“新建文档”对话框，宽度设为750像素，高度设为3092像素，分辨率为72像素/英寸，如图3-2所示，单击“创建”按钮，完成文档的新建。
图3-2
（2）选择“视图 > 新建参考线版面”命令，弹出“新建参考线版面”对话框，设置如图3-3所示。单击“确定”按钮，完成参考线的创建，效果如图3-4所示。
图3-3
图3-4
（3）选择“文件 > 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch03 > 素材 > 制作旅游类App首页 > 01”文件，单击“置入”按钮，将图片置入到图像窗口中，将其拖曳到适当的位置，按Enter键确认操作，效果如图3-5所示，在“图层”控制面板中生成新的图层并将其命名为“状态栏”。
图3-5
（4）选择“视图 > 新建参考线”命令，弹出“新建参考线”对话框，在128像素（距离上方参考线88像素）的位置建立参考线，设置如图3-6所示。单击“确定”按钮，完成参考线的创建。
图3-6
（5）按Ctrl＋O组合键，打开云盘中的“Ch03 > 素材 > 制作旅游类App首页 > 02”文件，选择“移动”工具
，将“菜单”图形拖曳到图像窗口中适当的位置，在“图层”控制面板中生成新的形状图层“菜单”。用相同的方法拖曳“更多”图形到适当的位置，效果如图3-7所示。
图3-7
（6）按住Shift键的同时，单击“菜单”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“导航栏”，如图3-8所示。
图3-8
（7）选择“视图 > 新建参考线”命令，弹出“新建参考线”对话框，在152像素（距离上方参考线24像素）的位置建立参考线，设置如图3-9所示。单击“确定”按钮，完成参考线的创建。
图3-9
（8）选择“横排文字”工具
，在适当的位置输入需要的文字并选取文字，选择“窗口 > 字符”命令，弹出“字符”面板，在面板中将“颜色”设为绿色（27、229、141），其他选项的设置如图3-10所示，按Enter键确认操作，在“图层”控制面板中生成新的文字图层。从上方的标尺处拖曳出一条水平参考线到“嗨！你想去哪儿旅行？”文字的下方，效果如图3-11所示。
图3-10
图3-11
（9）选择“视图 > 新建参考线”命令，弹出“新建参考线”对话框，在492像素（距离上方参考线40像素）的位置建立参考线，设置如图3-12所示。单击“确定”按钮，完成参考线的创建。
图3-12
（10）再次在适当的位置输入需要的文字并选取文字，在“字符”面板中将“颜色”设为灰色（157、163、180），其他选项的设置如图3-13所示，按Enter键确认操作，在“图层”控制面板中生成新的文字图层。从上方的标尺处拖曳出一条水平参考线到“目的地，酒店，关键词”文字的下方，效果如图3-14所示。
图3-13
图3-14
（11）在“02”图像窗口中，选择“移动”工具
，选中“搜索”图层，将其拖曳到图像窗口中适当的位置，效果如图3-15所示，在“图层”控制面板中生成新的形状图层“搜索”。
图3-15
（12）选择“直线”工具
，在属性栏中的“选择工具模式”选项中选择“形状”，将“粗细”选项设为1像素。按住Shift键的同时，在距离上方参考线34像素的位置绘制直线，在属性栏中将“填充”颜色设为无，“描边”颜色设为灰色（205、212、232），如图3-16所示，在“图层”控制面板中生成新的形状图层“形状1”。
图3-16
（13）按住Shift键的同时，单击“嗨！你想去哪儿旅行？”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“搜索栏”，如图3-17所示。
图3-17
2. 制作内容区
（1）选择“视图 > 新建参考线”命令，弹出“新建参考线”对话框，在640像素（距离上方形状80像素）的位置建立参考线，设置如图3-18所示。单击“确定”按钮，完成参考线的创建。
图3-18
（2）选择“横排文字”工具
，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为蓝灰色（69、69、83），其他选项的设置如图3-19所示，按Enter键确认操作。再次在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为灰色（157、163、180），其他选项的设置如图3-20所示，按Enter键确认操作，效果如图3-21所示，在“图层”控制面板中分别生成新的文字图层。
图3-19
图3-20
图3-21
（3）选择“视图 > 新建参考线”命令，弹出“新建参考线”对话框，在714像素（距离上方文字34像素）的位置建立参考线，设置如图3-22所示，单击“确定”按钮，完成参考线的创建。
图3-22
（4）选择“圆角矩形”工具
，在属性栏中的“选择工具模式”选项中选择“形状”，将“填充”颜色设为黑色，“描边”颜色设为无，“半径”选项设为12像素，在图像窗口中适当的位置绘制圆角矩形，如图3-23所示，在“图层”控制面板中生成新的形状图层“圆角矩形1”。
图3-23
（5）选择“文件 > 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch03 > 素材 > 制作旅游类App首页 > 03”文件，单击“置入”按钮，将图片置入到图像窗口中，将其拖曳到适当的位置并调整其大小，按Enter键确认操作，在“图层”控制面板中生成新的图层并将其命名为“图1”。按Alt+Ctrl+G组合键，为“图1”图层创建剪贴蒙版，效果如图3-24所示。
图3-24
（6）在“02”图像窗口中，选择“移动”工具
，选中“喜欢”图层，将其拖曳到图像窗口中适当的位置，效果如图3-25所示，在“图层”控制面板中生成新的形状图层“喜欢”。
图3-25
（7）选择“视图 > 新建参考线”命令，弹出“新建参考线”对话框，在1038像素（距离上方形状34像素）的位置建立参考线，设置如图3-26所示，单击“确定”按钮，完成参考线的创建。
图3-26
（8）选择“横排文字”工具
，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为蓝灰色（69、69、83），其他选项的设置如图3-27所示，按Enter键确认操作，效果如图3-28所示，在“图层”控制面板中生成新的文字图层。
图3-27
图3-28
（9）在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为灰色（146、146、175），其他选项的设置如图3-29所示，按Enter键确认操作，效果如图3-30所示，在“图层”控制面板中生成新的文字图层。
图3-29
图3-30
（10）在“02”图像窗口中，选择“移动”工具
，选中“五颗星”图层，将其拖曳到图像窗口中适当的位置，效果如图3-31所示，在“图层”控制面板中生成新的形状图层“五颗星”。
图3-31
（11）选择“横排文字”工具
，在适当的位置输入需要的文字并选取文字。在“字符”面板中，将“颜色”设为灰色（146、146、175），其他选项的设置如图3-32所示，按Enter键确认操作，效果如图3-33所示，在“图层”控制面板中分别生成新的文字图层。
图3-32
图3-33
（12）按住Shift键的同时，单击“圆角矩形1”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“网红店”，如图3-34所示。用相同的方法制作“森林屋”图层组，如图3-35所示，效果如图3-36所示。
图3-34
图3-35
图3-36
（13）按住Shift键的同时，单击“酒店推荐”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“酒店推荐”，如图3-37所示。
图3-37
（14）选择“视图 > 新建参考线”命令，弹出“新建参考线”对话框，在1224像素（距离上方文字80像素）的位置建立参考线，设置如图3-38所示。单击“确定”按钮，完成参考线的创建。
图3-38
（15）选择“横排文字”工具
，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为蓝灰色（69、69、83），其他选项的设置如图3-39所示，按Enter键确认操作。再次在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为灰色（157、163、180），其他选项的设置如图3-40所示，按Enter键确认操作，效果如图3-41所示，在“图层”控制面板中分别生成新的文字图层。
图3-39
图3-40
图3-41
（16）选择“视图 > 新建参考线”命令，弹出“新建参考线”对话框，在1296像素（距离上方文字34像素）的位置建立参考线，设置如图3-42所示。单击“确定”按钮，完成参考线的创建。
图3-42
（17）选择“圆角矩形”工具
，在属性栏中将“填充”颜色设为灰色（170、170、170），“描边”颜色设为无，“半径”选项设为12像素，在图像窗口中适当的位置绘制圆角矩形，如图3-43所示，在“图层”控制面板中生成新的形状图层“圆角矩形2”。
图3-43
（18）选择“文件 > 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch03 > 素材 > 制作旅游类App首页 > 05”文件，单击“置入”按钮，将图片置入到图像窗口中，拖曳到适当的位置并调整其大小，按Enter键确认操作，在“图层”控制面板中生成新的图层并将其命名为“图3”。按Alt+Ctrl+G组合键，为“图3”图层创建剪贴蒙版，效果如图3-44所示。
图3-44
（19）选择“圆角矩形”工具
，在属性栏中将“填充”颜色设为绿色（27、229、141），在图像窗口中适当的位置绘制圆角矩形，如图3-45所示，在“图层”控制面板中生成新的形状图层“圆角矩形3”。选择“窗口 > 属性”命令，弹出“属性”面板，设置如图3-46所示，按Enter键确认操作，效果如图3-47所示。
图3-45
图3-46
图3-47
（20）在“02”图像窗口中，选择“移动”工具
，选中“喜欢”图层，将其拖曳到图像窗口中适当的位置，效果如图3-48所示，在“图层”控制面板中生成新的形状图层“喜欢”。
图3-48
（21）选择“视图 > 新建参考线”命令，弹出“新建参考线”对话框，在1686像素（距离上方形状34像素）的位置建立参考线，设置如图3-49所示。单击“确定”按钮，完成参考线的创建。
图3-49
（22）选择“横排文字”工具
，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为蓝灰色（69、69、83），其他选项的设置如图3-50所示，按Enter键确认操作。再次在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为灰色（146、146、175），其他选项的设置如图3-51所示，按Enter键确认操作，效果如图3-52所示，在“图层”控制面板中分别生成新的文字图层。
图3-50
图3-51
图3-52
（23）按住Shift键的同时，单击“圆角矩形2”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“米尼奥河畔”，如图3-53所示。用相同的方法制作“旧金山”图层组和“纽约”图层组，效果如图3-54所示。
图3-53
图3-54
（24）按住Shift键的同时，单击“特色景点”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“特色景点”，如图3-55所示。
图3-55
（25）选择“视图 > 新建参考线”命令，弹出“新建参考线”对话框，在1828像素（距离上方文字80像素）的位置建立参考线，设置如图3-56所示。单击“确定”按钮，完成参考线的创建。
图3-56
（26）选择“横排文字”工具
，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为蓝灰色（69、69、83），其他选项的设置如图3-57所示，按Enter键确认操作。再次在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为灰色（157、163、180），其他选项的设置如图3-58所示，按Enter键确认操作，在“图层”控制面板中分别生成新的文字图层，效果如图3-59所示。
图3-57
图3-58
图3-59
（27）选择“视图 > 新建参考线”命令，弹出“新建参考线”对话框，在1902像素（距离上方文字34像素）的位置建立参考线，设置如图3-60所示。
图3-60
（28）选择“圆角矩形”工具
，在属性栏中将“填充”颜色设为灰色（170、170、170），“描边”颜色设为无，“半径”选项设为12像素，在图像窗口中适当的位置绘制圆角矩形，在“图层”控制面板中生成新的形状图层“圆角矩形4”。从上方的标尺处拖曳出一条水平参考线到“圆角矩形4”图形的下方，如图3-61所示。
图3-61
（29）选择“文件 > 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch03 > 素材 > 制作旅游类App首页 > 08”文件，单击“置入”按钮，将图片置入到图像窗口中，拖曳到适当的位置并调整其大小，按Enter键确认操作，在“图层”控制面板中生成新的图层并将其命名为“图6”。按Alt+Ctrl+G组合键，为“图6”图层创建剪贴蒙版，效果如图3-62所示。
图3-62
（30）在“02”图像窗口中，选择“移动”工具
，选中“喜欢”图层，将其拖曳到图像窗口中适当的位置，效果如图3-63所示，在“图层”控制面板中生成新的形状图层“喜欢”。
图3-63
（31）选择“圆角矩形”工具
，在属性栏中将“填充”颜色设为绿色（27、229、141），在图像窗口中适当的位置绘制圆角矩形，如图3-64所示，在“图层”控制面板中生成新的形状图层“圆角矩形5”。
图3-64
（32）选择“横排文字”工具
，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为蓝灰色（69、69、83），其他选项的设置如图3-65所示，按Enter键确认操作。效果如图3-66所示，在“图层”控制面板中生成新的文字图层。
图3-65
图3-66
（33）选择“椭圆”工具
，在属性栏中的“选择工具模式”选项中选择“形状”，将“填充”颜色设为蓝灰色（69、69、83），“描边”颜色设为无。按住Shift键的同时，在图像窗口中适当的位置绘制圆形，如图3-67所示，在“图层”控制面板中生成新的形状图层“椭圆1”。
图3-67
（34）选择“横排文字”工具
，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为蓝灰色（146、146、175），其他选项的设置如图3-68所示，在“图层”控制面板中生成新的文字图层。按住Shift键的同时，单击“圆角矩形4”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“日本大阪”。用相同的方法制作“寿司”图层组，效果如图3-69所示。
图3-68
图3-69
（35）按住Shift键的同时，单击“美食精选”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“美食精选”，如图3-70所示。
图3-70
（36）选择“视图 > 新建参考线”命令，弹出“新建参考线”对话框，在2542像素（距离上方文字80像素）的位置建立参考线，设置如图3-71所示。单击“确定”按钮，完成参考线的创建。
图3-71
（37）用上述方法建立参考线，并制作“其他推荐”图层组，如图3-72所示，效果如图3-73所示。按住Shift键的同时，单击“酒店推荐”图层组，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“内容区”，如图3-74所示。
图3-72
图3-73
图3-74
（38）按Ctrl+S组合键，弹出“存储为”对话框，将其命名为“制作旅游类App首页”，保存为psd格式。单击“保存”按钮，弹出“Photoshop格式选项”对话框，单击“确定”按钮，将文件保存，旅游类App首页制作完成。