PHP+CMS+Dreamweaver网站设计实例教程 作者 王德永 张少龙 第3章 美工设计网站页面（Photoshop）.pptVIP

通过本任务的学习，熟练掌握切片技术对网页效果图切割的方法。能完成各类网页效果图的切割。 3.5.1 任务描述 3.5.2 实训目的 3.5.3 实训要求 3.5.4 实训考核 使用Photoshop CS5工具软件，完成“平顶山华通胶辊有限公司”企业网站网页平面效果图设计与制作。 掌握Photoshop CS5工具软件基本操作； 熟悉Photoshop CS5常见快捷键。 完成完成“平顶山华通胶辊有限公司”企业网站网页平面效果图设计与制作。 按照网页设计流程，通过网页网站规划和网站风格设计，对“平顶山华通胶辊有限公司”企业网站网页平面效果图设计与制作。 能使用Photoshop CS5工具软件设计企业网站首页和二级页面平面效果图。 能使用Photoshop CS5工具软件制作网页图形元素、网页按钮、网站LOGO、导航栏等网页元素。 最终使用切片技术对企业网页效果图进行切割，并生成.html网页。 * 3.3.1 任务描述 3.3.2 相关知识 3.3.3 任务实施 3.3.4 任务评价 3.3.5 任务小结 网站LOGO、网页按钮等网页素材一般设计精巧，立体感强，将其应用到网页中，既吸引浏览者的注意，又增加了网页的美观效果。本任务主要完成“平顶山韩创教育咨询有限公司”网站网页按钮、网站LOGO、导航条的制作。并通过任务的完成能熟练掌握使用Photoshop网页按钮、网站LOGO、导航条的制作。 LOGO的设计要能够充分体现该公司的核心理念，并且设计要求动感、简约、大气、有活力、高品位，色彩搭配要合理、美观。 网站LOGO设计有以下标准： 要与企业的CI设计一致。 要有良好的造型，LOGO的题材和形式可以丰富多彩，如中外文字体、图案、抽象符号、几何图形等。 构图要美观、适当、简练、讲究艺术效果，构思须巧妙、新颖，力求避免雷同或隐私。 充分考虑企业标志理念的表现力、可行性。 色彩最好单纯、强烈、醒目，力求色彩的感性印象与企业的形象风格相符。 标志设计一定要注意其识别性，识别性是网站LOGO的基本功能。 一、网站LOGO设计的标准 在网页设计中，网页广告都有一定的规格要求，如表3-3所示。网页广告（banner）不超过14KB。 二、标准网页广告尺寸规格 （1）打开Adobe Photoshop CS5，选择【文件】|【新建】菜单命令。打开【新建】对话框。将【名称】设置为：“search”，【宽度】设置为“66像素”，【高度】设置为“22像素”，“【分辨率】设置为“72dpi”，【背景内容】设置为“白色”。 （2）首先选择【工具栏】|【圆角矩形工具】绘制一个圆角矩形，在【工具栏选择器】设置“圆角半径”为：3px，大小为：66*22像素，具体设置如图3-41和3-42所示。 1、 “Search”按钮制作 （3）在【图层面板】中选择文字图层，单击右键选择【混合选项】命令，打开【图层样式】对话框，对绘制好的圆角矩形设置图层样式【描边】，参数设置如图3-43所示。 1、 “Search”按钮制作 （4）【工具栏】|【文字工具】输入文字“Search”。 如图3-44所示。 1、 “Search”按钮制作 （1）打开Adobe Photoshop CS5，选择【文件】|【新建】菜单命令。 （2）选择【工具栏】|【圆角矩形工具】绘制一个圆角矩形，在其【工具选择器】中设置圆角半径设置为“3px”。 2、“QQ在线”按钮的制作 （3）在【图层面板】中选择文字图层，单击右键选择【混合选项】命令，打开【图层样式】对话框，对绘制好的圆角矩形设置图层样式【描边】，参数设置如图3-45所示。 2、“QQ在线”按钮的制作 （4）在【图层样式】对话框，选择【渐变叠加】选项，并设置参数如图3-46所示。 2、“QQ在线”按钮的制作 （5）在【图层面板】上单击 新建图层按钮，添加“QQ企鹅”素材和文字素材，并复制2遍。“QQ在线”按钮最终效果如图3-47所示。 2、“QQ在线”按钮的制作 （1）打开Adobe Photoshop CS5，选择【文件】|【新建】菜单命令。打开【新建】对话框。将【名称】设置为：“logo”，【宽度】设置为“58像素”，【高度】设置为“69像素”，“【分辨率】设置为“72dpi”，【背景内容】设置为“白色”。 （2）首先在【工具栏】|【前景色】设置为“#003d6c”，用【工具栏】|【自定形状工具】，如图3-48和3-49所示。选择“球形画笔”绘制一个地球，如图3-50所示。 3、网站LOGO制作 （1）打开Adobe Photoshop CS5，选择【文件】|【新建】菜单命令。打开【新建】对话框。将【名称】设置为：“logo”，【宽度】设置为“58像素”，【高度】设置为“69像素”，“【分辨率】设置为“72dpi”，【背景内容】