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