7.1 Fireworks基本操作（课件）-高二《网页设计与制作》同步教学（北京出版社）

第7章 网页图形处理工具Fireworks Adobe Fireworks是一款专为网页图形设计的图形编辑软件，它大大简化了网页图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks可以轻松地完成图片制作、大图优化、切片等工作，是创建与优化Web图像和快速构建网站与Web界面原型的理想工具。本章节具体内容包括： 7.1 Fireworks的操作界面 7.2 公司网站Logo和按钮设计 7.3 公司网站的图片处理 7.4 公司“周年大酬宾”整图网页设计 7.1 Fireworks基本操作 任务导入 对Fireworks这样一个网页图形处理软件，如何使用它制作网页中的Logo、按钮以及处理其他图片呢？小赵感觉有点无从下手。老张告诉他不要着急，“工欲善其事，必先利其器”，首先就是熟悉个软件的基本操作。 学习目标： 1）了解Fireworks工作界面的布局。 2）能熟练建立、保存Fireworks文件。 7.1.1 启动Fireworks 在Windows桌面上，双击Fireworks的快捷方式图标，即可启动Fireworks。启动后的界面如图所示。 Fireworks启动后的界面 7.1.2 Fireworks工作界面 Fireworks工作界面 7.1.3 保存Fireworks文档 完成Fireworks编辑后，同其他软件一样，单击“文件”菜单→“保存”或“另存为”项。 如果选择“保存”，只能存为Fireworks可编辑的PNG格式。 如果选择“另存为”，则可以保存为其他支持的格式，如常见的GIF格式、JEPG格式等。 7.1 思考与练习 1. 建立一个Fireworks新文档有哪几种方法？ 2. 打开Fireworks，进行下面的操作： 文件建立：进入Fireworks，建立一个新文档（500×300）。 使用工具栏的文本工具写下你的班级和姓名，字体格式为加粗、黑体、25号字，颜色为红色。 用你的姓名命名保存该文档（如：张三.png），要求保存为Fireworks专用格式的png，并另存为普通PNG格式，然后比较这两个文件的大小。 试着保存为其他类型的图片格式，如常用的GIF格式、JEPG格式、BMP格式等，并观察它们的图片质量和大小。 7.2 网站Logo、按钮和静态Banner设计 任务导入： 如果在网站中只有文字做链接的话太单调了，小赵想为网站设计一个Logo及一些漂亮的按钮图标。本任务将学习在Fireworks中制作Logo、按钮、静态Banner的制作方法。 学习目标： 1）掌握Fireworks工具栏中常用工具的操作。 2）学会制作简单的网站Logo。 3）学会制作网站按钮。 4）学会制作网站静态Banner。 7.2.1 制作网站Logo（一） 以叶行科技公司为例，学习制作网站Logo的方法。制作效果如图所示。 网站Logo制作效果 7.2.1 制作网站Logo（二） 新建文档 新建一个Fireworks文档（PNG），设置为（宽度186，高度63，分辨率72，画布颜色为白色），如图所示。 新建文档 7.2.1 制作网站Logo（三） 导入外部素材 点击“文件”菜单→“导入”，在“导入”对话框中，浏览找到你所需要的素材文件，如图所示，单击“打开”按钮，将所有素材导入到编辑区域内。并调整到合适的位置。 素材导入 “导入”对话框 7.2.1 制作网站Logo（四） 输入文本 使用工具栏中的文本工具，在工作区输入公司名称和网址：“叶行软件公司”、“WWW.YEXING.COM.CN”，调整到合适的位置，如图7-14所示。 输入文本 7.2.1 制作网站Logo（五） 调整属性 1）选中“叶行科技公司”文本，在文本属性面板中，对输入的文本进行美化处理，包括字体、颜色、投影等效果。 2）同样地，选中“WWW.YEXING.COM.CN”文本，在文本属性面板中，对输入的文本进行美化处理。 3）双击文本，按住鼠标左键不放分别选择不同的文本并设置为不同的颜色。其中，“叶行”颜色为“#FF6600”，“科技公司”颜色为“#41A622”，英文“YEXING”颜色为“#CC0000”，其余英文为黑色。 4）添加Photoshop动态效果，可以让文本更具动感。单击文本属性栏中滤镜旁边的加号 ，在弹出菜单中选择“Photoshop动态效果”，在弹出的“Photoshop动态效果”对话框中选中“阴影”效果，并设置右边“阴影效果”属性值。 7.2.1 制作网站Logo（六） 完成保存 至此，Logo制作完成，点击保存为可编辑的Fireworks png格式，以备下次修改使用。当然也可以另