6.1 网页美工设计（课件）-高一《图形图像处理：Photoshop CC》同步精品课堂（高教版2018）

图形图像处理——Photoshop CC 第四版 网页美工设计 网页美工设计 网页美工设计 6.1 网页把各种信息以最快捷、方便的方式传达给人们。人们对一个网站有没有兴趣，网站的主题是否准确传递，主要体现在网站的首页设计上，网站首页设计对整个网站至关重要，因此从审美的方面人手，结合使用方便的要求，制作出清晰、整体性好、画面感强的页面，使人浏览起来心情愉悦，接收信息就会更加容易，从而提升网站的形象，如图6一1所示为某教育视频网页模板。 网页美工设计 6.1 本项目涉及两个行业的网站网页设计。 一个是护肤品网站的新品发布页面，设计上强调简洁、明快，色彩上采用清新明快的绿色系，配以山丘、树等大自然的图案，更能衬托出护肤品的纯天然品质，给人赏心悦目、跃跃欲购的感觉。 另一个是美食行业网站首页，采用丰富的暖色调，再配以自制的桌布图案，充分体现家的温馨，拉近了与消费者的距离，同时提供了多种快捷链接，可以直接进人想要了解的内容页面，浏览效率高。 旅游宣传单 5.2 设计制作所示的护肤品网页效果图。 案例解析 本案例中，需要完成以下操作： ．了解网页设计的方法 ．掌握使用图层组管理网页元素的方法 ．熟练运用“切片工具" ．优化输出切片图像 护肤品网页设计 6.2 案例实施 （1）选择“文件乛新建"命令，新建一个文件：文件名为“护肤品网页"，宽度为67厘米，高度为180厘米，分辨率为72像素/英寸，颜色模式为RGB颜色，背景为白色，单击“创建"按钮。 （2）选择菜单“视图一标尺"命令，显示标尺，从垂直标尺中拖曳出6条垂直参考线，分别放置在水平标尺的12．86厘米、16．3厘米、32，65厘米、34．8厘米、5L38厘米和54．8厘米处；从水平标尺中拖曳出5条水平参考线，分别放置在垂直标尺的5，8厘米、35厘米、66厘米、117．4厘米、16L7厘米处，用于网页的布局，效果如图6一3所示。 护肤品网页设计 6.2 （3）制作网页的导航栏。单击“图层"面板底部的“创建新组"按钮囗，新建图层组并命名为“导航栏"；选择工具箱中的“矩形工具"，工具选项栏设置如图6一4所示，颜色为 # 068f23，单击文档后将生成的矩形放置在如图6一5所示位置，“图层"面板的形状层命名为“深绿长条"。选择工具箱中的“横排文字工具"，设置字体为“黑体"，字号为37．5点，颜色为白色，在“深绿长条"的位置输入文字“返回首页所有产品新品上新热销榜单镇店之宝品牌故事买家须知"。单击“图层"面板底部的“创建新组"按钮囗，新建图层组并命名为 “叶子"，移至“导航栏"图层组的最顶端，选择工具箱中的“钢笔工具"，设置工具模式为形状，填充为纯色#068f23，描边无，绘制叶片，运用“画笔描边路径"绘制叶脉，效果如图6一6所示。利用“椭圆工具"绘制直径为755像素、颜色为#70dc45 的圆形，将形状层移至“导航栏"图层组的最底层，利用“矩形工具"绘制宽为167像素、高为50像素、颜色为#70dc45 的矩形形状，将形状层移至文字层下方，放置位置如图6一7所示。 护肤品网页设计 6.2 护肤品网页设计 6.2 护肤品网页设计 6.2 （4）制作标头“新品首发" 用步骤3同样的方法创建图层组“新品首发"，选择工具箱中的 “椭圆工具"，选项栏设置如图6一8所示，颜色为#068f23，在文档中绘制圆形；以同样的方法在圆形内另外绘制四个圆形，并用选项栏“路径操作"菜单中的“减去顶层形状"命令将多余圆弧减去，所有圆形效果如图6一9所示选择工具箱的“直排文字工具"，设置字体为“宋体"，字号为277点，颜色为#068f23，在圆形内输入文字“新品首发"；选择“横排文字工具"，字号设置为 43．5，开启大写键，在“新品首发"左下角输入"XINPINSHOUFA"o将图片“燕子l•png"、“燕子2.png"拖入文档中，调整大小及位置。文字及图片位置效果如图6一10所示。 护肤品网页设计 6.2 （5）制作图形“山丘"。创建图层组“山丘"，选择“钢笔工具"，工具模式设为“形状"，颜色为#70dc45，绘制如图6一1 1的形状；以同样的方法绘制其他三组山丘形状，颜色为#068 3和 # 13440d，所有山丘效果如图6一12所示。选择“椭圆工具"，选项栏设置如图6一13所示，在文档中绘制圆形，选择选项栏“路径操作"菜单中的“合并形状"命令，添加o多个圆形，形成白云的形状；复制当前形状层，再制作一朵白云，效果如图6一14所示。将“山丘"图层组置于“新品首发" 图层组下方。 护肤品网页设计 6.2 护肤品网页设计 6.2 （6）绘制背景。选择“钢笔工具"，在选项栏上设置工具模式为“形状"，颜色为#068觎3，无描边，绘制背景图形，将形状层命名为