6.2 爱上厨房美食网页设计（课件）-高一《图形图像处理：Photoshop CC》同步精品课堂（高教版2018）

图形图像处理——Photoshop CC 第四版 爱上厨房美食网页设计 网页美工设计 爱上厨房美食网页设计 6.2 设计如图6一41所示的“爱上厨房"美食网页效果图。 6.2 爱上厨房美食网页设计 6.2 案例解析 本案例中，需要完成以下操作： 熟练掌握使用图层组管理网页元素的方法． 掌握在网页中插入图片、文字。 熟练运用剪贴蒙版 （1）选择“文件新建"命令，新建如图6一42所示的空白文件。选择菜单“视图标尺"命令，显示标尺，从垂直标尺中拖曳出4条垂直参考线，分别放置在水平标尺的2．72厘米、44．06厘米、46．3厘米、64．7厘米处，从垂直标尺中拖曳出6条水平参考线，分别放置在垂直标尺的7．58 厘米、36．17厘米、55．53厘米、76，27厘米、106．43厘米、134．10厘米处，用于网页的布局，效果如图6一43所示。 爱上厨房美食网页设计 6.2 （2）选择工具箱中的“矩形工具"，工具模式设置为“形状"，填充为灰色，无描边，在文档中按照图6一44所示的尺寸及分布绘制多个矩形。将“美食l.jpg "拖入文档，并置于尺寸为宽61.98cm、高23．65cm的“灰色矩形1 "图层上方，在“图层"面板中运用剪贴蒙版将“美食I.jpg" 置于灰色矩形的形状中，效果如图6一45所示；将以上图层拖至图层面板下方的“创建新组"按钮上，并命名为"banner"o按照以上方法，运用剪贴蒙版将页面上所有美食图片置入对应的灰色矩形中，效果如图6一46所示。 爱上厨房美食网页设计 6.2 爱上厨房美食网页设计 6.2 （3）制作页顶“导航栏" 爱上厨房美食网页设计 6.2 爱上厨房美食网页设计 6.2 （4）制作"banner"版块 爱上厨房美食网页设计 6.2 （5）制作“精品菜谱"版块 爱上厨房美食网页设计 6.2 （6）制作“一日三餐"版块 爱上厨房美食网页设计 6.2 （7）制作“今日早餐"版块。新建“今日早餐"图层组，利用“圆角矩形工具"绘制圆角矩形，工具选项栏如图6一57所示。利用“横排文字工具"输入“今日早餐1 314人记录"，设置字体为幼圆、字号为70点、黑色。拖入图片“美食18•jpg"、“美食19.jpg"至圆角矩形上，利用“椭圆选框工具"框选想要部分，反选将多余部分删除；双击“美食18"图层打开“图层样式"对话框，给图层添加3像素的白色描边，给“美食19"图层添加同样的描边。“今日早餐"效果如图6一58所示 爱上厨房美食网页设计 6.2 （8）制作“厨studio课堂”板块。新建厨studio课堂图层组，将“图层"面板中的“美食 13 "、“美食14"、“美食15"图层拖入图层组中。选择“横排文字工具"，在图片左上方输入文字 “厨studio课堂"，设置字体字号同“精品菜谱"，在对应图片上输入文字“讲师"及名字，“讲师" 下层的圆角矩形设置为宽1巧像素、高53像素、半径5像素。在对应图片的下方输入文字，设置字体为黑体、字号为46点。“厨studio课堂"图层组效果如图6一59所示 爱上厨房美食网页设计 6.2 （9）制作“电子书"版块。新建“电子书"图层组，将“图层"面板中的“美食16 "、“美食17 " 图层拖入图层组中。文字设置同步骤O，输入如图6一60所示文字，其中“Y29．9／144篇、Y12．99巧3 期"字号为62点 （10）制作“热搜排行"版块。新建“热搜排行"图层组，图标及文字设置同“精品菜谱"，放置于“一日三餐"版块右侧。利用“矩形工具"绘制七个矩形放置于文字下方，矩形的高均为95像素，宽分别为524像素、503像素、468像素、436像素、414像素、382像素、336像素，第一个矩形颜色为#f39800，第二、三个矩形颜色为#fdb844，其余矩形颜色为#fbe3ba，所有矩形左对齐、垂直居中分布，效果如图6一61所示。选择“横排文字工具"，设置字体为黑体、字号为40点，文字内容及“热搜排行"版块分布如图6一62所示。 爱上厨房美食网页设计 6.2 爱上厨房美食网页设计 6.2 爱上厨房美食网页设计 6.2 （11）将素材图片“美食天下·红．png "和“扫一扫.jpg"拖入文档，调整大小及位置，分别放置在网页页面的右下角，图片分布及网页最终效果如前图6一41所示。至此，“爱上厨房"美食网页设计完成。 （12）单击工具箱中的“切片工具"，在页面中通过按住鼠标左键并拖动的方式进行切片，每切分出一个图形，在其左上角会显示出切片编号，切割后的效果如图6一63所示。 （13）切分出所有图片后，单击“文件一导出一存储为web所用格式"命令，打开“存储为 Web所用格式"对话框，根据需要设置好