7.2 手机订餐APP界面设计（课件）-高一《图形图像处理：Photoshop CC》同步精品课堂（高教版2018）

图形图像处理——Photoshop CC 第四版 手机订餐APP界面设计 界面设计 制作如图7-14所示的手机订餐APP界面效果。 手机订餐APP界面设计 7.2 案例解析 本案例中，需要完成以下操作： ．通过为素材图片添加“高斯模糊"滤镜，制作背景标题部分的图像效果 ．借助图层蒙版制作上半部分锅盖形状的菜品罗列效果 ．组合图像、文字、形状等素材，借助图层样式完成热销菜品的设计。 ．利用“矩形工具"、“模排文字工具"完成图像底部长矩形导航的设计。 手机订餐APP界面设计 7.2 （1）执行菜单“文件一新建"命令，新建一个文件，文件名为“手机订餐APP界面"，宽度为1350像素，高度为2100像素，分辨率为300像素/英寸，颜色模式为RGB颜色，背景颜色为 #e6e3e3，单击“创建"按钮 （2）打开素材“背景.jpg"，利用“移动工具"将其移动到当前文件中，自动生成“图层1 "，调整图像的大小及位置，如图7一巧所示 （3）选择“图层1 "，执行菜单“滤镜模糊高斯模糊"命令，设置模糊半径为10像素，添加模糊滤镜后的效果如图7一16所示。 案例实施 手机订餐APP界面设计 7.2 案例实施 手机订餐APP界面设计 7.2 （4）选择“椭圆选框工具" ，按住Shift键绘制一个圆形选区。选择“矩形选框工具" ， 在其工具栏中选择“从选区减去"选项，在圆形选区的下半部分绘制矩形，减去圆形选区的下半圆。 （5）在“图层1 "上方新建图层，并命名为“锅盖"。打开“路径"面板，选择“从选区生成工作路径"按钮，将半圆形选区生成为工作路径，效果如 17所示。 （6）将前景色设置为白色，选择“画笔工具"，设置大小为10像素，硬度为100％；在“图层" 面板中选择“锅盖"图层；在“路径"面板中单击“用画笔描边路径"按钮0 ，描边后的效果如图7一18所示。 案例实施 手机订餐APP界面设计 7.2 案例实施 手机订餐APP界面设计 7.2 （7）利用“直线工具"、“矩形工具"，设置工具模式为“像素"，在“锅盖"图层继续绘制锅盖内部线条及提手部分，效果如图7一19所示 （8）打开素材“图像l.jpg"，利用“移动工具"将其移动到当前文件中，自动生成“图层2" 的位置，使其位于”锅盖“图层的下方，效果如图7-20所示。 案例实施 手机订餐APP界面设计 7.2 （9）选择“锅盖"图层，利用“魔棒工具"塑在锅盖图形的中间部分单击，选取中间区域；选择“图层2 "，单击“添加图层蒙版"回按钮，效果如图7一21所示 （10）依次打开素材“菲力牛排jpg"、“红烧翅中-jpg"、“图像2.jpg"、“图像3．jpg"，借鉴步骤、0的操作，完成如图7一22所示的效果 （11）选择“椭圆工具" ，设置工具模式为“路径"，按住Alt+Shift键，参照锅盖形状，从中点开始绘制一个圆形路径，效果如图7一23所示 案例实施 手机订餐APP界面设计 7.2 （12）选择“横排文字工具"，在工具选项栏中设置字体为宋体，字号为1 1点，颜色为黑色，沿路径输入文字“妈妈的厨房，家一样的味道"，效果如图7一24所示隐藏路径。 案例实施 手机订餐APP界面设计 7.2 案例实施 手机订餐APP界面设计 7.2 （13）继续使用“横排文字工具"，将字体设置为黑体，字号为16点，颜色为白色，输入文字“新用户最高立减20元"。选中文字“20"，将字体调整为24点，颜色改为8bOb。 （14）继续调整字体为华文行楷，字号为12点，字体颜色为白色，参照图7一25的效果，在图像左上角输入文字“妈妈de厨房"，并为其添加“外发光"图层样式（发光颜色为绿色）。 （15）创建新图层“矩形条"；选择“矩形工具" ，设置工具模式为“像素"，分别将前景色调整为# e9b907、#504f4d，在“矩形条"图层上绘制如图7一26所示的两种颜色的矩形条。选择“横排文字工具"，设置字体为宋体，字号为12点，字体颜色为白色，输入文字“首页"、“购物车"、“我的设置”。 案例实施 手机订餐APP界面设计 7.2 案例实施 手机订餐APP界面设计 7.2 （16）创建新图层“矩形框"，选择“矩形工具"，设置工具模式为“像素"，将前景色调整为白色，在该图层中绘制一个白色矩形。为“矩形框"图层添加“投影"图层样式。 （17）打开素材图片“南香排骨jpg",利用“移动工具"将其移动到当前文件中，将生成的图层名称修夜为“南香排骨"，将图层置于“矩形框"图层的上方，组合后的效果如图7一27所示。 （18）选择“横排文字工具"，设置文字颜色为#929292，字号为10点，输入文字“南香排骨"；将字号改为12点，输入文字“订