综合案例2—网页页眉设计.docVIP

综合案例2—网页页眉设计 实训目标： 1、掌握标志设计过程。 2、掌握网页配色及网页元素设计与制作。 3、熟练掌握Photoshop CS2软件的基本操作和技巧 实训知识点： 1、新建文件、保存与打开文件 2、设置颜色 3、素材导入 4、图层与图层组的基本操作 5、图层蒙版与层样式 6、图层混合模式与不透明度 7、钢笔工具绘制与编辑路径 8、文字工具使用 实训效果图： 实训内容： 1、打开Photoshop CS2，新建如图1所示大小的画布。 图1 2、设置前景色为#0662ce，将背景图层填充前景色，效果如图2所示。 图2 3、打开图层面板，单击【创建新组】按钮，新建图层组为“页眉”， 导入素材“1.jpg” 设置其混合模式为“叠加”，添加图层蒙版，将图片上图蒙盖住，调整其位置，； 4、导入素材“2.psd”，不透明度为“76%”； 5、导入素材“3.psd” 设置其混合模式为“线性减淡”不透明度为“47%”； 6、导入素材“4.jpg”设置其混合模式为“线性加深”，不透明度为“50%”效果见图3所示。 图3 7、单击图层面板中【创建新组】按钮，新建图层组为“top logo”，导入素材“xiaohui.jpg”，设置图层样式，效果如图4所示。 图4 8、新建图层，命名为“top”，选择钢笔工具，绘制如下形状，将路径转化为选区，填充白色，设置图层不透明度为“21%”，效果如图5所示。 图5 9、取消选区，单击图层面板中【创建新组】按钮，新建图层组为“top navi”，新建图层，命名为“line_navi”，绘制白色细线条，大小为1px，设置图层不透明度为“10%”，效果如图6所示。 图6 10、新建图层，命名为“cross_navi”，在细线条交叉处绘制十字形，填充白色，设置图层不透明度为“30%”，效果如图7所示。 图7 11、新建图层，命名为“line box_navi，在细线条交叉处形成的方格处绘制矩形框，填充白色，设置图层不透明度为“50%”，效果如图8所示。 12、用同样方法绘制白色矩形，填充白色，设置图层不透明度为“29%”，复制出两个，摆放在合适位置，效果如图9所示。 图8 图9 13、单击图层面板中【创建新组】按钮，新建图层组为“星座”，导入素材“圆盘.jpg”，复制出7个圆盘，调整大小和位置，设置图层不透明度为“80%”，摆放出星座样式，效果如图10所示。 图10 14、新建图层组为“星座”，导入素材“line.jpg”，调整大小和位置，复制出7条虚线，将圆盘连接在一起，效果如图11所示。 图11 15、选择文字工具，字体为“Arial”，颜色为“# 235c8e”，在圆盘中输入文字，调整文字大小适合圆盘，如图12所示。 图12 16、单击图层面板中“创建新组”按钮，新建图层组为“top menu”，新建图层，命名为“bg_top”，选择选框工具，在页眉上方绘制一矩形选框，填充白色，设置图层不透明度为“30%”，为图层添加蒙版，将前景色设为黑色，选择渐变工具，设置“前景到透明”渐变，在图层蒙版中拖动，效果如图13所示。 图13 17、选择【文字工具】，添加创艺字体，选择字体“创艺简行楷”，输入文字“网站开发课程群”，大小79点，颜色为“#faf718”，设置图层样式参数如图14所示。 图14 放置文字效果如图15所示。 图15 19、选择【文字工具】，选择字体“Comic Sans MS”，输入文字“Anhui Vocational College of Electronics and Information Technology”，大小21点，颜色为“#e6f796”，摆放在“网站开发课程群”文字下方，最终网页页眉效果如图16所示。 图16 6