3.1.1 课堂案例——制作旅游类App首页_Photoshop CC 移动UI设计案例教程（全彩慕课版）-QQ阅读中文武侠网

书名：Photoshop CC 移动UI设计案例教程（全彩慕课版）
作者名：胡金黎朱海燕
本章字数：5737字
更新时间：2025-02-23 06:15:16

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所示。