动态网页效果图设计利器Photoshop和Fireworks教程.pptVIP

第6章 动态网页效果图设计利器——Photoshop CS5与Fireworks CS5 动态网页设计教程——美工与技术 第6章 动态网页效果图设计利器——Photoshop CS5与Fireworks CS5 Adobe Photoshop 是功能强大的图像处理软件，是设计网页效果图的首选软件。本章采用Photoshop CS5作为网页效果图设计的软件，采用Fireworks CS5对网页效果图进行优化与切片处理。 第6章 动态网页效果图设计利器——Photoshop CS5与Fireworks CS5 6.1 网页标志设计 标志设计一直是企业形象设计的基础和最直接的表现形式，其重要性是不言而喻的，网页标志（LOGO）的设计同样非常重要。网站标志（LOGO）是网站的“名片”，是网站形象的重要体现。 6.1.1 网页标志设计的技术要求 应按照固定的尺寸与规格，关于网页的LOGO，目前有国际标准规范：网页LOGO大小规定为88×31像素，而企业或者组织的LOGO通常不限定。 6.1.2 网页标志设计的艺术创意 作为具有传媒特性的LOGO，为了在最有效的空间内实现所有的视觉识别功能，一般是通过特征图案及特征文字的组合，达到对被标识体的出示、说明、沟通、交流从而引导受众的兴趣、达到增强美誉、记忆等目的。表现形式的组合方式一般分为特征图案，特征字体，合成字体。领跑者网页标志的设计本着“领跑”的含义，采用图形与文字相结合的方式，使用文字L的造型，牵动ITTC（IT Training Center），字母“L”即“领”字的第一个字母来设计，展示领跑者的形象，色彩采用蓝色和橙色相对比的方式，体现科技色彩。 6.1.3 Photoshop CS5界面介绍 Photoshop CS5是由美工Adobe公司推出的目前世界上最著名、使用最广泛的平面图像处理软件之一。它对图像有着非凡的装饰、编辑、加工制作能力，是在广告制作、图像修改编辑中可以缺少的重要工具。本书采用Photoshop CS5进行网页效果图设计。Photoshop CS5软件窗口由标题栏、菜单栏、工具选项栏、工具箱、浮动控制面板、状态栏、收缩型控制面板等组成。 6.1.3 Photoshop CS5界面介绍 6.1.3 Photoshop CS5界面介绍 6.1.4 网页标志设计过程 1.新建文件 启动Photoshop CS5，选择菜单“文件|新建”命令，设置文件大小为850*230（宽度*高度），分辨率72像素/英寸（dpi），色彩模式为RGB，背景颜色为白色，文件名称为领跑者LOGO。 6.1.4 网页标志设计过程 2.创建图层 单击图层面板右下角的创建新图层按钮 ，创建“图层1”，我们可以双击“图层1”文字，修改为“标志图形”。 6.1.4 网页标志设计过程 3.钢笔勾画标志造型 使用工具箱中的钢笔工具 ，设置属性为路径方式，按如图所示锚点连续单击鼠标，用钢笔工具勾勒出背景的基本形状，到最后一个节点时单击第一个锚点，实现封闭路径。 6.1.4 网页标志设计过程 3.钢笔勾画标志造型 按住钢笔工具，在弹出的工具组中选择转换点工具，如图所示，单击路径上的锚点，然后按住鼠标拖曳，可以对路径锚点类型的调整，拖动控制柄使曲线变得圆滑。 6.1.4 网页标志设计过程 4.路径选择工具创建选区 使用路径选择工具 选择路径，单击鼠标右键建立选区，在弹出的建立选区对话框中，设置羽化半径为0。 6.1.4 网页标志设计过程 5.填色与处理 单击工具组中的前景色设置工具 ，弹出拾色器对话框，设置颜色为蓝色（R：40，G：117，B：187）。选择菜单“编辑|填充”，设置填充色为前景色，单击确定为选区填色。 设计指导：填色一般采用快捷键的方法，填充前景色快捷键Alt+Delete，填充背景色快捷键Ctrl+Delete。 6.1.4 网页标志设计过程 6.标志文字设计 6.1.4 网页标志设计过程 6.标志文字设计 使用文本工具 ，输入文字“ITTC”，使用文本工具框选文字，单击文字工具属性面板上显示字符面板的按钮 ，显示字符控制面板，调节字符面板属性，设置字体为Normande BT大小为36，选择“I”字母，设置颜色为橙色（R：210，G：84，B：10），选择“TTC”字母，设置颜色为蓝色（R：40，G：117，B：187）。 6.1.4 网页标志设计过程 6.标志文字设计 使用文本工具设置网站名称“领跑者IT培训中心”，设置字体为黑体，大小60，调节AV字符间距为20，选择“领”文字，设置颜色为橙色（R：210，G：84，B：10），选择“跑者IT培训中心”文字，设置颜色为蓝色（R：40，G：117，B：187）。 6.1.4 网页标志设计过程 6.标志文字设计 新建图层