《Photoshop+Illustrator平面设计实例教程教学案例-食品餐饮类App首页设计》由会员分享，可在线阅读，更多相关《Photoshop+Illustrator平面设计实例教程教学案例-食品餐饮类App首页设计（34页珍藏版）》请在金锄头文库上搜索。
1、14.1 扩展案例食品餐饮类扩展案例食品餐饮类 App 首页设计首页设计【案例学习目标】在 Photoshop 中，学习新建参考线版面命令分割页面，使用绘图工具、置入嵌入对象命令、横排文字工具、添加图层样式命令和创建剪贴蒙版命令制作食品餐饮类 App 首页。【案例知识要点】在 Photoshop 中，使用新建参考线命令添加水平/垂直参考线，使用矩形工具、圆角矩形工具、置入嵌入对象命令制作状态栏和标签栏，使用移动工具添加各类图标，使用横排文字工具、圆角矩形工具、属性控制面板、置入嵌入对象命令制作内容区，使用投影命令为图形添加阴影效果；食品餐饮类 App 首页设计效果如图 1所示。【效果所在位置】
2、云盘 Ch14 效果 食品餐饮类 App 首页设计.psd。图 1 Photoshop 应用应用 14.1.1 制作状态栏和导航栏（1）打开 Photoshop CC 2019 软件，按Ctrl+N 组合键，弹出“新建文档”对话框，设置宽度为 750 像素，高度为 1334 像素，分辨率为 72 像素/英寸，颜色模式为 RGB，背景内容为白色，单击“创建”按钮，新建一个文件。（2）选择“视图 新建参考线版面”命令，弹出“新建参考线版面”对话框，设置如图 2 所示；单击“确定”按钮，完成版面参考线的创建，如图 3 所示。图 2 图 3（3）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，
3、在 300 像素（距上方参考线 260 像素）的位置建立水平参考线，设置如图 4 所示；单击“确定”按钮，完成参考线的创建，如图 5 所示。图 4 图 5（4）选择“矩形”工具，在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为玫红色（其 R、G、B 的值分别为 245、45、86），“描边”颜色设为无，在图像窗口中绘制一个矩形，效果如图6 所示，在“图层”控制面板中生成新的形状图层“矩形 1”。图 6（5）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch14 素材 食品餐饮类 App首页设计 01”文件，单击“置入”按钮，将图片置入到图像窗口中，
4、拖曳图片到适当的位置，并调整其大小，按 Enter 键确定操作，效果如图 7 所示，在“图层”控制面板中生成新的图层并将其命名为“状态栏”。图 7（6）选择“横排文字”工具，在适当的位置分别输入需要的文字并选取文字，在属性栏中分别选择合适的字体并设置大小，设置文本颜色为白色，效果如图 8 所示，在“图层”控制面板中生成新的文字图层。（7）选择“圆角矩形”工具，在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为白色（其 R、G、B 的值分别为 248、248、248），“描边”颜色设为无，“半径”选项设为 8 像素，在图像窗口中绘制一个圆角矩形，效果如图 9 所示，在“图层”控制面
5、板中生成新的形状图层“圆角矩形 1”。图 8 图 9（8）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在 50 像素（距左侧参考线 20 像素）的位置建立垂直参考线，设置如图 10 所示；单击“确定”按钮，完成参考线的创建，如图 11 所示。图 10 图 11（9）按 Ctrl+O 组合键，打开云盘中的“Ch14 素材 食品餐饮类 App 首页设计 02”文件，选择“移动”工具，将“搜索”图形拖曳到适当位置，如图 12 所示，在“图层”控制面板中生成新的形状图层。图 12（10）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在属性栏中选择合适的字体并设置大小，设置文本
6、颜色为灰色（其 R、G、B 的值分别为 193、192、201），效果如图 13 所示，在“图层”控制面板中生成新的文字图层。图 13（11）在“图层”控制面板中，按住 Shift键的同时，将“搜索”文字图层和“浏览”文字图层之间的所有图层同时选取，如图14 所示。图 14 （12）按 Ctrl+G 组合键，编组图层并将其命名为“导航栏”，如图 15 所示。图 15 14.1.2 制作内容区（1）单击“图层”控制面板下方的“创建新组”按钮，生成新的图层组并将其命名为“内容区”。（2）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在 368 像素（距上方参考线 68 像素）的位置建立水
7、平参考线，设置如图 16 所示；单击“确定”按钮，完成参考线的创建，如图 17 所示。（3）用相同的方法，分别在 432 像素、921 像素、992 像素处新建水平参考线，如图 18 所示。图 16 图 17 图 18（4）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在属性栏中选择合适的字体并设置大小，设置文本颜色为黑色，效果如图 19 所示，在“图层”控制面板中生成新的文字图层。选取文字“查看全部”，在属性栏中设置文本颜色为玫红色（其 R、G、B 的值分别为 245、45、86），效果如图 20 所示。图 19 图 20（5）在“02”图像窗口中，选择“移动”工具，将“更多”
8、图形拖曳到适当的位置，效果如图 21 所示，在“图层”控制面板中生成新的形状图层。图 21（6）选择“圆角矩形”工具，在属性栏中将“半径”选项设为 4 像素，在图像窗口中绘制一个圆角矩形，将“填充”颜色设为白色，“描边”颜色设为无，效果如图 22所示，在“图层”控制面板中生成新的形状图层“圆角矩形 2”。（7）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“投影”命令，在弹出的对话框中进行设置，如图 23 所示；单击“确定”按钮，效果如图 24 所示。图 22 图 23 图 24（8）选择“圆角矩形”工具，在图像窗口中绘制一个圆角矩形，在属性栏中“填充”颜色设为灰色（其 R
9、、G、B 的值分别为 193、192、201），“描边”颜色设为无，效果如图 25 所示，在“图层”控制面板中生成新的形状图层“圆角矩形 3”。图 25（9）选择“窗口 属性”命令，弹出“属性”控制面板，将“左下角半径”和“左下角半径”选项设为 0 像素，效果如图26 所示；按 Enter 键确定操作，效果如图27 所示。图 26 图 27（10）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch14 素材 食品餐饮类 App首页设计 03”文件，单击“置入”按钮，将图片置入到图像窗口中，拖曳图片到适当的位置，并调整其大小，按 Enter 键确定操作，效果如图 2
10、8 所示，在“图层”控制面板中生成新的图层并将其命名为“美食1”。图 28（11）按 Alt+Ctrl+G 组合键，为“美食1”图层创建剪贴蒙版，效果如图 29 所示。图 29（12）在“02”图像窗口中，选择“移动”工具，将“星星”图形拖曳到适当的位置，效果如图 30 所示，在“图层”控制面板中生成新的形状图层。（13）选择“横排文字”工具，在适当的位置分别输入需要的文字并选取文字，在属性栏中分别选择合适的字体并设置大小，设置文本颜色为黑色，效果如图 31 所示，在“图层”控制面板中生成新的文字图层。图 30 图 31（14）选取“北欧特色餐厅”，在属性栏中设置文本颜色为灰色（其 R、G、B
11、 的值分别为 155、155、155），如图 32 所示。图 32（15）在“02”图像窗口中，选择“移动”工具，将“五颗星”图形拖曳到适当的位置，效果如图 33 所示，在“图层”控制面板中生成新的形状图层。（16）用相同的方法置入其他图片，并添加相应的文字，效果如图 34 所示。图 33 图 34（17）单击“内容区”图层组左侧的三角形图标，将“内容区”图层组中的图层隐藏，如图 35 所示。图 35 14.1.3 制作标签栏（1）击“图层”控制面板下方的“创建新组”按钮，生成新的图层组并将其命名为“标签栏”，如图 36 所示。图 36（2）在“02”图像窗口中，选择“移动”工具，将“底部导航
12、栏”图形拖曳到适当的位置，效果如图 37 所示，在“图层”控制面板中生成新的形状图层。（为方便读者观看，这里以黑色显示。）图 37（3）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“投影”命令，在弹出的对话框中进行设置，如图 38 所示；单击“确定”按钮，效果如图 39 所示。（4）在“02”图像窗口中，选择“移动”工具，将“首页”图形拖曳到适当的位置，效果如图 40 所示，在“图层”控制面板中生成新的形状图层。图 38 图 39 图 40（5）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在属性栏中选择合适的字体并设置大小，设置文本颜色为玫红色（其 R、G
13、、B 的值分别为245、45、86），效果如图 41 所示，在“图层”控制面板中生成新的文字图层。图 41（6）用相同的方法制作“发现”“收藏夹”“我的”图标，效果如图 42 所示。图 42（7）选择“椭圆”工具，在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为玫红色（其 R、G、B 的值分别为 245、45、86），“描边”颜色设为无，按住 Shift 键的同时，在图像窗口中绘制一个圆形，效果如图 43 所示，在“图层”控制面板中生成新的形状图层“椭圆1”。图 43（8）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“投影”命令，在弹出的对话框中进行设置，
14、如图 44 所示；单击“确定”按钮，效果如图 45 所示。（9）在“02”图像窗口中，选择“移动”工具，将“购物车”图形拖曳到适当的位置，效果如图 46 所示，在“图层”控制面板中生成新的形状图层。图 44 图 45 图 46（10）单击“标签栏”图层组左侧的三角形图标，将“标签栏”图层组中的图层隐藏，如图 47 所示。食品餐饮类 App 首页制作完成，效果如图 48 所示。（11）按 Ctrl+S 组合键，弹出“另存为”对话框，将其命名为“食品餐饮类 App 首页设计”，保存为 PSD 格式，单击“保存”按钮，弹出“Photoshop 格式选项”对话框，单击“确定”按钮，将图像保存。图 47 图 48
