Photoshop+Illustrator平面设计实例教程教学案例-食品餐饮类App喜欢页设计.pdf

14.2 扩展案例食品餐饮类扩展案例食品餐饮类 App 喜欢页设计喜欢页设计【案例学习目标】在 Photoshop 中，学习新建参考线版面命令分割页面，使用绘图工具、置入嵌入对象命令、横排文字工具、添加图层样式命令和创建剪贴蒙版命令制作食品餐饮类 App 喜欢页案例知识要点】在 Photoshop 中，使用新建参考线命令添加水平参考线，使用矩形工具、置入嵌入对象命令和横排文字工具制作状态栏和标签栏，使用移动工具添加各类图标，使用横排文字工具、圆角矩形工具、属性控制面板、置入嵌入对象命令制作内容区，使用投影命令为图形添加阴影，食品餐饮类 App 喜欢页设计效果如图 0 所示效果所在位置】云盘 Ch14 效果 食品餐饮类 App 喜欢页设计.psd图 0 Photoshop 应用应用 14.2.1 制作状态栏和导航栏（1）打开 Photoshop CC 2019 软件，按Ctrl+N 组合键，弹出“新建文档”对话框，设置宽度为 750 像素，高度为 1334 像素，分辨率为 72 像素/英寸，颜色模式为 RGB，背景内容为白色，单击“创建”按钮，新建一个文件2）选择“视图 新建参考线版面”命令，弹出“新建参考线版面”对话框，设置如图 0 所示；单击“确定”按钮，完成版面参考线的创建，如图 1 所示。

图 0 图 1（3）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在 121 像素（距上方参考线 81 像素）的位置建立水平参考线，设置如图 2 所示；单击“确定”按钮，完成参考线的创建，如图 3 所示4）选择“矩形”工具，在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为浅灰色（其 R、G、B 的值分别为 248、248、248），“描边”颜色设为无，在图像窗口中绘制一个矩形，效果如图 4 所示，在“图层”控制面板中生成新的形状图层“矩形 1”图 2 图 3 图 4（5）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“投影”命令，在弹出的对话框中进行设置，如图 5 所示；单击“确定”按钮，效果如图 6 所示图 5 图 6（6）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch14 素材 食品餐饮类 App喜欢页设计 01”文件，单击“置入”按钮，将图片置入到图像窗口中，拖曳图片到适当的位置，并调整其大小，按 Enter 键确定操作，效果如图 7 所示，在“图层”控制面板中生成新的图层并将其命名为“状态栏”图 7（7）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在属性栏中选择合适的字体并设置大小，设置文本颜色为黑色，效果如图 8 所示，在“图层”控制面板中生成新的文字图层。

8）在“图层”控制面板中，按住 Shift键的同时，将“收藏夹”文字图层和“矩形1”图层之间的所有图层同时选取，如图 9所示图 8 图 9 （9）按 Ctrl+G 组合键，编组图层并将其命名为“导航栏”，如图 10 所示图 10 14.2.2 制作内容区（1）单击“图层”控制面板下方的“创建新组”按钮，生成新的图层组并将其命名为“内容区”选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在264 像素（距上方参考线 143 像素）的位置建立水平参考线，设置如图 11 所示；单击“确定”按钮，完成参考线的创建，如图12 所示2）用相同的方法，分别在 686 像素、720 像素、1142 像素、1174 像素处新建水平参考线，如图 13 所示图 11 图 12 图 13（3）选择“圆角矩形”工具，在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为白色，“描边”颜色设为无，“半径”选项设为 4 像素，在图像窗口中绘制一个圆角矩形，效果如图 14所示，在“图层”控制面板中生成新的形状图层“圆角矩形 1”图 14（4）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“投影”命令，在弹出的对话框中进行设置，如图 15 所示；单击“确定”按钮，效果如图 16 所示。

图 15 图 16（5）按 Ctrl+J 组合键，复制“圆角矩形1”图层，生成新的图层“圆角矩形 1 拷贝”，如图 17 所示图 17（6）删除“投影”效果，如图 18 所示7）在属性栏将“填充”颜色设为灰色（其 R、G、B 的值分别为 144、144、145），效果如图 19 所示图 18 图 19（8）选择“窗口 属性”命令，弹出“属性”控制面板，将“左下角半径”和“左下角半径”选项设为 0 像素，效果如图20 所示按 Enter 键确定操作，效果如图21 所示图 20 图 21（9）按 Ctrl+T 组合键，在图形周围出现变换框，向上拖曳圆角矩形下方中间的控制手柄到适当的位置，调整其大小，按 Enter键确定操作，效果如图 22 所示10）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch14 素材 食品餐饮类 App喜欢页设计 02”文件，单击“置入”按钮，将图片置入到图像窗口中，拖曳图片到适当位置，并调整其大小，按 Enter 键确定操作，如图 23 所示，在“图层”控制面板中生成新的图层并将其命名为“美食 1”图 22 图 23（11）按 Alt+Ctrl+G 组合键，为“美食1”图层创建剪贴蒙版，效果如图 24 所示。

图 24（12）选择“横排文字”工具，在适当的位置分别输入需要的文字并选取文字，在属性栏中分别选择合适的字体并设置大小，效果如图 25 所示，在“图层”控制面板中生成新的文字图层13）选取“康意德芝加哥餐厅”，在属性栏中设置文本颜色为灰色（其 R、G、B 的值分别为 155、155、155），如图 26 所示图 25 图 26（14）按 Ctrl+O 组合键，打开云盘中的“Ch14 素材 食品餐饮类 App 喜欢页设计 03”文件，选择“移动”工具，将“五颗星”图形拖曳到适当的位置，效果如图 27 所示，在“图层”控制面板中生成新的形状图层图 27（15）在“图层”控制面板中，按住 Shift键的同时，将“五颗星”形状图层和“圆角矩形 1”图层之间的所有图层同时选取，按Ctrl+G 组合键，编组图层并将其命名为“新西兰烤羊排”，如图 28 所示图 28（16）用相同的方法置入“0408”图片，制作如图 29 所示的效果，“图层”控制面板如图 30 所示单击“内容区”图层组左侧的三角形图标，将“内容区”图层组中的图层隐藏图 29 图 30 14.2.3 制作标签栏（1）单击“图层”控制面板下方的“创建新组”按钮，生成新的图层组并将其命名为“标签栏”。

在“02”图像窗口中，选择“移动”工具，将“底部导航栏”图形拖曳到适当的位置，效果如图 31 所示，在“图层”控制面板中生成新的形状图层图 31（2）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“投影”命令，在弹出的对话框中进行设置，如图 32 所示；单击“确定”按钮，效果如图 33 所示图 32 图 33（3）在“02”图像窗口中，选择“移动”工具，将“首页”图形拖曳到适当的位置，效果如图 34 所示，在“图层”控制面板中生成新的形状图层图 34（4）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在属性栏中选择合适的字体并设置大小，设置文本颜色为灰色（其 R、G、B 的值分别为 193、192、201），效果如图 35 所示，在“图层”控制面板中生成新的文字图层图 35（5）用相同的方法制作“发现”“收藏夹”“我的”图标，效果如图 36 所示图 36（6）选择“椭圆”工具，在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为玫红色（其 R、G、B 的值分别为 245、45、86），“描边”颜色设为无，按住 Shift 键的同时，在图像窗口中绘制一个圆形，如图 37 所示，在“图层”控制面板中生成新的形状图层“椭圆 1”。

图 37（7）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“投影”命令，在弹出的对话框中进行设置，如图 38 所示；单击“确定”按钮，效果如图 39 所示图 38 图 39（8）在“02”图像窗口中，选择“移动”工具，将“购物车”图形拖曳到适当的位置，效果如图 40 所示，在“图层”控制面板中生成新的形状图层单击“标签栏”图层组左侧的三角形图标，将“标签栏”图层组中的图层隐藏，如图 41 所示图 40 图 41（9）食品餐饮类 App 喜欢页制作完成，如图 42 所示按 Ctrl+S 组合键，弹出“另存为”对话框，将其命名为“食品餐饮类 App喜欢页设计”，保存为 PSD 格式，单击“保存”按钮，弹出“Photoshop 格式选项”对话框，单击“确定”按钮，将图像保存图 42 。