Fireworks8图像制作.ppt

Fireworks8.0图像制作,Fireworks8.0,2,教学内容,Fireworks8.0简介矢量编辑文本编辑特效和样式GIF动画制作位图处理图像切片,Fireworks8.0,3,Fireworks8.0简介,Fireworks8.0简介1.简介：Fireworks8.0是一个功能非常强大的绘制和处理图片的软件。它主要针对网页图形设计和制作的，使用它创建和编辑网页图形，可以对其进行动画处理、添加高级交互功能以及优化图像等。,Fireworks8.0,4,Fireworks8.0简介,2.Fireworks常用的文件类型PNG：即可移植网络图形，是Fireworks的本身文件格式。GIF：是一种很流行的网页图形格式，可用于卡通、徽标、包含透明区域的图形以及动画。JPEG：专门为照片或增强色图像开发的图像格式。,Fireworks8.0,5,Fireworks8.0简介,3.新功能：在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。对ActionScript和CSS（层叠样式表）格式的新增支持使Fireworks能够更有效地与Dreamweaver和Flash一起工作。详见Fireworks8.0帮助文档。,Fireworks8.0,6,Fireworks8.0工作环境,标题栏菜单栏文档窗口工具栏“工具”面板“属性”面板其它浮动面板,Fireworks8.0,7,“工具”面板,位于屏幕的左侧，包括选择、位图、矢量、web、颜色和视图等工具组。如在“选择”工具中，通过“缩放”工具、“倾斜”工具和“扭曲”工具来编辑所选对象，使其变形和扭曲，,Fireworks8.0,8,工具面板（续）,工具条上包括各种选择、创建、编辑图像的工具,有的工具按钮的右下角有一个小三角，说明这个工具包含有几种不同的形式，按住这个工具按钮不放就能显示其他的形式。,Fireworks8.0,9,属性面板,属性面板显示当前选区的属性、当前工具选项或文档属性。默认情况下，属性面板停放在工作区的底部。,Fireworks8.0,10,属性面板的基本操作,通过右击属性面板的标题栏，弹出菜单，可以将属性面板以半高方式打开，只显示两行属性，也可以全高方式打开，显示四行属性。同样可以通过单击“属性”二字或字左侧的小三角将属性检查器完全折叠。,Fireworks8.0,11,浮动面板,提示：在网页三剑客中的浮动面板的操作方法基本一致。,Fireworks8.0,12,1.工具栏的组成和基本操作,通过窗口菜单，调出“主要”工具栏和“修改”工具栏,问：在DW中如何调出“文档”和“标准”工具栏？,Fireworks8.0,13,“主要”工具栏,新建按钮打开按钮（打开图片文件）保存按钮（扩展名为.png）导入按钮（将外部的图片导入Fireworks）导出按钮（导出其他格式的文件，如gif、jpg等）,Fireworks8.0,14,新建按钮,单击该按钮可新建一个png格式的图像文件。png是Fireworks本身的文件格式。当画布尺寸大于图像尺寸时，可以选择“修改”“画布”-“符合画布”，去掉周围没有使用的空间。,Fireworks8.0,15,新建按钮（续）,新建文档对话框,以象素、英寸或厘米为单位输入画布宽度和高度。以象素、英寸或厘米为单位输入分辨率。在图中为画布选择白、透明或自定义颜色。选中“自定义”选项按钮时，先单击颜色框，然后从弹出窗口中选择一种自定义画布颜色。,Fireworks8.0,16,打开按钮,在Fireworks中，通过“打开按钮”可以很容易地打开和编辑矢量和位图图形。若要打开文件而不覆盖前一版本，请选择“打开为未命名”，然后用其它名称保存该文件。,Fireworks8.0,17,打开按钮（续）,打开按钮功能等于“文件”菜单下的“打开”命令。若要打开已有的Fireworks文档时：,如果打开最近关闭的文档，可选择“文件”-“打开最近的文件”子菜单中快速打开，此菜单最多可以列出10个最近打开的文档，,Fireworks8.0,18,保存按钮,功能：保存文档若要以gif、jpg、png、tif等格式保存文档，则可以选择“导出”按钮。,Fireworks8.0,19,举例,在fireworks8.0中画一个房子，由三角形和长方形组成；保存文件名为“房子.png”,要求导出文件名为“房子.gif”。在fireworks8.0中导入一张明星图片，图片宽度为400像素，保存件名为“明星.png”,要求导出文件名为“明星.jpeg”。,Fireworks8.0,20,2.文件视图,文件视图选项卡显示比例和动画控制按钮,Fireworks8.0,21,矢量编辑,计算机图形可以分为两种：矢量图和位图。,Fireworks8.0,22,绘制矢量对象,使用工具面板上的基本形状工具可以轻松地绘制直线、矩形、圆等基本图形。基本形状工具位于工具面板的“矢量”栏上。,Fireworks8.0,23,1.绘制直线、矩形和椭圆,（1）从“工具”面板中选择“直线”工具、“矩形”工具或“椭圆”工具。（2）在“属性”面板中设置笔触和填充属性。（3）在画布上拖动以绘制形状。,对于“直线”工具，按住Shift键并拖动可限制只能按45的倾角增量来绘制直线。对于“矩形”或“椭圆”工具，按住Shift键并拖动可将形状限制为正方形或圆形。,Fireworks8.0,24,2.绘制圆角矩形,（1）从“矩形”工具弹出菜单中，选择“圆角矩形”工具。（2）拖动画布以绘制矩形。,Fireworks8.0,25,3.绘制多边形和星形,选择菜单项后，鼠标光标变成“+”，在画布上拖拽便画出多边形。,Fireworks8.0,26,绘制多边形和星形（续）,选中，在属性面板中将多边形选项调节到选项，拖拽鼠标，即可绘制各种星形。,Fireworks8.0,27,绘制多边形和星形（续）,自动形状是智能矢量对象组，这些对象组遵循特殊的规则以简化常用可视化元素的创建和编辑。,Fireworks8.0,28,编辑路径,1.绘制路径绘制路径一般使用钢笔工具，路径的形状是由路径上绘制的点和控制柄决定的，控制柄是用来控制曲线在定位点处的斜度和弯曲程度。,Fireworks8.0,29,绘制折线,在文档窗口指定的位置处，单击鼠标左键，然后在目的地再次单击鼠标左键，可在两点之间绘制直线，多次单击可绘制折线。,Fireworks8.0,30,绘制曲线,在文档窗口指定的位置处，按住鼠标左键不放，拖动鼠标，直到显示为所需曲线为止。,Fireworks8.0,31,2.路径编辑,Fireworks提供了多种编辑矢量对象的方法。（1）使矢量对象弯曲和变形（2）使用刀子工具（3）路径的基本操作,Fireworks8.0,32,（1）使矢量对象弯曲和变形,使用“自由变形”工具可以直接对矢量对象执行弯曲和变形操作，而不是对各个点执行操作。利用“自由变形”工具绘制苹果。,Fireworks8.0,33,操作步骤：,新建一个文件，在画布中绘制一个椭圆，单击“自由变形”工具，在其属性面板中设置光标的半径大小为40像素，在画布中按下鼠标，可以看到鼠标变成了一个红色的圆，用这个红色的圆拖动路径变成苹果的样子。为苹果添加一个小小的柄，选择“更改区域形状”工具，在其属性面板中设置光标的半径大小为10像素，强度为80，然后从苹果的内部来拖动路径，按住鼠标左键向上拖。选择“油漆桶”工具，对苹果进行为由白色到红色的放射性渐变填充。选中苹果，单击“滤镜”按钮并在弹出的菜单中选择“阴影和光晕”，单击“投影”按钮，使苹果更有立体感。,Fireworks8.0,34,（2）使用“刀子”工具,“刀子”工具能够将一个路径切成两个或多个路径。,Fireworks8.0,35,操作步骤：,在图中绘制三个正圆分别以黑色和白色填充。选中大圆，选中“刀子”工具，进行纵向沿圆心的切割，使之被切成两个半圆修改右半圆的填充颜色为白色。绘制一黑一白两个小圆放在图中。,Fireworks8.0,36,（3）路径的基本操作合并,可以将多个路径对象合并成单个路径对象。选择两个或多个路径，然后选择“修改”“组合路径”“合并”。,Fireworks8.0,37,（3）路径的基本操作联合,联合路径是指将多个对象混合后，以所有对象的外部轮廓作为路径，生成一个新的对象。选择“修改”-“组合路径”-“联合”。,Fireworks8.0,38,（3）路径的基本操作交集,相交路径是指将所有选中对象的相交部分的外部轮廓作为路径，生成一个新的对象。选择“修改”-“组合路径”-“交集”。,Fireworks8.0,39,（3）路径的基本操作打孔,打孔路径是指用上层对象的轮廓剔除下层对象的内容,生成一个新的对象。选择“修改”-“组合路径”-“打孔”。,Fireworks8.0,40,制作标记图形,使用的主要菜单：“编辑“克隆”“修改”“变形”“数值变形”“修改“”组合为路径“”打孔“修改”“组合为路径”“联合”“修改”“变形”“水平翻转”,Fireworks8.0,41,操作步骤,新建文件，宽度为600，高度为600，单位为象素，背景色为白色。用工具箱中的矩形工具，在编辑区拖画出一个长和宽都是100象素的正方形，填充色为浅蓝色（0099CC）。选中该正方形，“编辑“克隆”，克隆出一个，选中克隆出的正方形，“修改”“变形”“数值变形”，在弹出的对话框中设置为“调整大小”，把长和宽都设为60象素。然后同时选中这两个一大一小的正方形，“修改”“组合路径”“打孔”。这样，得到了一个边框为20象素的镂空正方形。选中这个镂空正方形，“修改”“变形”“数值变形”，使它旋转450。,Fireworks8.0,42,操作步骤（续）,用椭圆工具按住Shift键在编辑区拖画出一个长和宽为60像素的圆，选中该圆“编辑”“克隆”，克隆出一个圆，选中克隆出来的圆“修改”“变形”“数值变形”，在弹出的对话框中设置为“调整大小”，把长和宽都设为20象素选中这一大一小的两个圆，“修改“”组合路径“”打孔“，得到了一个圆环。选中该圆环，“编辑”“克隆”，克隆出一个圆环，把它暂时隐藏起来备用。（隐藏的方法就是点击“图层”面板前面的眼睛图标，当眼睛闭合状态时表示隐藏，眼睛为睁开状态时表示该图层是可见图层）。用矩形工具拖画一个宽为20象素，高为90象素的矩形。选中该矩形，“修改”“变形”“数值变形”，使它旋转450。,Fireworks8.0,43,操作步骤（续）,把该矩形移动到和圆环内圆和外圆相切的位置，（这一步要小心操作，放大来移动更好些），然后把矩形克隆一个，把克隆出来的矩形逆时针转90度，然和再把它移动到和圆环的内圆和外圆相切的位置。再拖画一个1616的正方形（目的就是要把圆环最下面的部分去掉），使拖画出的矩形旋转45度，然后同时选中该正方形和圆环，“修改”“组合路径”“打孔”。同时选中残缺的圆环和两个矩形，“修改”“组合路径”“联合”。然后把它顺时针旋转90度，移动到镂空矩形的右侧，对齐。,Fireworks8.0,44,操作步骤（续）,选中刚才的图，“编辑”“克隆”，选中克隆出的图，“修改”“变形”“水平翻转”，然后把它移动到镂空矩形的左边对齐，同时选中它们，“修改”“组合路径”“联合”。打开刚才隐藏的圆环，然后用矩形工具在编辑区拖画一个矩形。同时选中它们“修改”“组合路径”“打孔”。再用矩形工具拖画出一个宽为20像素，高为140像素的矩形，然后移动到半圆环的左下面，再拖画一个宽为20象素，高为70象素的矩形，把它移动到半圆环的右下面。,Fireworks8.0,45,操作步骤（续）,选中半圆环，“编辑”“克隆”，克隆一个，把克隆出的半圆环旋转180度，放到长矩形的下面。把短矩形克隆一个移动到下面圆环的左上面。同时选中这一长两短的矩形和两个半圆环，“修改”“组合路径”“联合”。把该图形旋转-45度。选中旋转的图，克隆一个，把克隆出来图“修改”“变形”“水平翻转”，对齐放置。这时大部分工作已完成。用矩形工具拖画出宽为5个象素，长为120象素的黄色矩形，然后旋转45度，克隆三个，把克隆出的其中两个旋转90度。,Fireworks8.0,46,操作步骤（续）,同时选中用四个矩形和最底层的菱形，“修改”“组合路径”“打孔”。再重复操作3次，打孔完成。选中所有图中所有元素，单击“修改”“组合路径”“联合”。,Fireworks8.0,47,文字编辑,如何合理的将文字和设计图结合起来是网页图像设计中不可轻视的一环，良好设计的文本对象可以和整个网页相得益彰，使整个网页更加有吸引力。,Fireworks8.0,48,文字的输入与编辑,1.文字的输入使用工具箱中的“文字”工具可以直接输入文字，也可以拖动绘制文本块。在文字属性面板中，可以调整文字的各种属性。可以通过“修改”-“变形”，或“缩放”工具、“扭曲”工具等来设置字体的效果。,Fireworks8.0,49,文字的编辑,字体：添加系统中没有的字体，可从网上下载后，安装到“控制面板”的“字体”文件夹中。字号、颜色、样式文字方向、字间距,Fireworks8.0,50,字体设计案例,Fireworks8.0,51,将文本附加于路径,将文字附加于路径是指使用一条路径来定义文字对象的方向，从而产生特殊的文字效果。,Fireworks8.0,52,操作步骤,使用“钢笔”工具在文档窗口中绘制路径。应用“添加文字”工具在文档中添加所需的文本“精彩生活每一天”。同时选中路径和文本。选择“文本”“附加于路径”命令即可完成。按住Alt键不放拖动文字可以复制文字对象。,Fireworks8.0,53,将文本转化为路径,可以先将文本转换为路径，然后就像对待矢量对象那样，编辑字母的形状。一旦文本转换为路径,则所有的矢量编辑工具都可用来编辑该文本。,Fireworks8.0,54,制作新浪标识,Fireworks8.0,55,操作步骤,选用“文字”工具在文档中输入的文字“Sina.C”和“新浪网”，设定字体、字号和颜色。选中“Sina.C”,单击“文本”-“转化为路径”，可将文本转换为路径。选择“修改”-“取消组合”将其分解成多个路径，从“层”面板中观察到，i被解成复合路径。选择“修改”-“组合路径”-“拆分”将i拆成两个对象。删除掉小写i字母的点，使用部分选定工具和钢笔工具改变字母i的形状。使用椭圆工具绘制两个椭圆，并进行打孔的操作，可以绘制出眼睛的轮廓，使用文字工具键入字母o，可以绘制出眼睛的眼球。,Fireworks8.0,56,操作步骤（续）,使用工具箱中的刷子工具，并在属性面板中选择相应的笔触，直接绘制眼睛的睫毛。,Fireworks8.0,57,特效和样式,MacromediaFireworks8.0提供了笔触、填充、样式和滤镜等多种功能，可以用于矢量对象、位图图像和文本的增强效果。,Fireworks8.0,58,使用笔触和填充,1.使用笔触使用“属性”面板、“笔触选项”弹出菜单和“编辑笔触”对话框，可以完全控制每个刷子的细微差别，包括墨量、笔尖大小和形状、纹理、边缘效果和方向。,Fireworks8.0,59,2.使用填充,（1）实心填充实心填充是填充对象内部的纯色。可以在“工具”面板、“属性”面板或“混色器”中更改对象的填充颜色。（2）图案填充可以使用成为图案填充的位图图形填充路径对象。Fireworks中附带了很多的图案填充，包括叶片和木纹等。,Fireworks8.0,60,2.使用填充（续）,（3）渐变填充“无”、“实心”、“图案”和“网页抖动”以外的填充类别皆为渐变填充。这些填充将颜色混合在一起以产生各种效果。,Fireworks8.0,61,制作水晶般剔透的banner背景图,新建一文件，用“圆角矩形”工具绘制一57095的白色圆角矩形。选中该圆角矩形，再复制一个，修改其长宽各缩短10个象素，居中对其，填充色为429de3。用椭圆工具画出弧形，填充为白色到429de3的线型渐变，然后把429de3的不透明度设置为0。复制一份弧形填充，将它放置到右上角。在背景图上导入LOGO，添加文字并克隆一个，将克隆的文字通过“修改”-“变形”-“垂直翻转”命令制作倒影效果，设置倒影文字的透明度为20。制作完成。,Fireworks8.0,62,使用样式,所谓样式就是将填充、笔画、效果以及文本属性等一套设置进行保存，然后将定制好的这一套效果应用于文档中的对象。,Fireworks8.0,63,使用滤镜,Fireworks的滤镜是可以用于矢量对象、位图图像和文本的增强效果。效果包括：斜角和浮雕、投影和光晕、杂点等。,Fireworks8.0,64,1.斜角效果,斜角特效主要产生一种边缘凹凸出效果。可以创建内斜角和外斜角。,Fireworks8.0,65,2.浮雕效果,浮雕效果使得图片有凸起和凹陷的视觉效果。对象或文本凹入画布或从画布凸起。,Fireworks8.0,66,3.阴影效果,使用Fireworks可以很容易地将投影、内侧阴影应用于对象。可以指定阴影的角度以模拟照射在对象上的光线角度。,Fireworks8.0,67,4.光晕效果,光晕效果有普通的发光效果和外发光效果两种。,Fireworks8.0,68,GIF动画制作,在Fireworks8.0中，可以创建包含活动的横幅广告、徽标和卡通形象的动画图形。例如，可以在徽标淡入淡出的同时让公司的吉祥物在网页上来回跳动。Fireworks可以将动画作为GIF动画文件或FlashSWF文件导出。也可以将Fireworks动画直接导入到Flash中进一步编辑。,Fireworks8.0,69,GIF动画制作,在Fireworks中，可以通过向称为动画元件的对象分配属性来创建动画。一个元件的动画被分解成多个帧，帧中包含组成每一步动画的图像和对象。,Fireworks8.0,70,1.自行制作动画,新建一个46860的文件，设定背景为黑色。然后利用绘图工具绘制图形这就是动画第一帧的内容。单击帧面板中的“新建”“重置帧”按钮，添加第二帧，然后绘制第二帧的内容“Dreamweaver”，绘制完成后，同样，再次单击这个按钮，添加第三、第四帧，然后绘制第三、第四帧的内容，分别为“Fireworks”和“MacromediaWebDesigner”。在帧面板中将前三帧的帧延迟时间定义为100，停留1秒，将第四帧的延迟时间定义为200，停留2秒，。,Fireworks8.0,71,2.制作旋转文字动画,建立新文件输入文本图形制作文本图形的分布路径开始制作动画创建动画输出动画,Fireworks8.0,72,3.制作动态Banner,做背景层新建层2，场景中输入“海量”两个字，大小为120像素，字体为“文鼎霹雳体”，调整透明度为60%；调整颜色为橘黄色及倾斜角度。在帧面板中将第1帧复制，创建帧2，并将文字大小设置为44。在画布中输入文字“免费”，大小为40像素，字体为“汉鼎繁随意体”，颜色为6666FF，在滤镜的“阴影和光晕”中选择“发光”。再对文字“免费”进行模糊处理：在滤镜的“模糊”中选择“缩放模糊”。,Fireworks8.0,73,3.制作动态Banner（续）,复制该帧，创建帧3，并将新帧中的“免费”的模糊参数修改。再复制该帧，创建帧4，删除“免费”的模糊滤镜。再复制该帧6次，添加输入“.”实现动画效果。新建帧（直接点“添加帧“图标，不用”重制帧“的操作），输入文字“尽在”，导入网页图片，调整位置、文字字体（“长城新艺体”）等。重复复制该帧，创建帧12、13，调整图片。复制该帧，创建帧14，输入“”，并使用发光滤镜。双击各帧，在弹出的帧延时对话框中，设置间隔为100。制作完毕。,Fireworks8.0,74,创建按钮和弹出菜单,Fireworks的按钮编辑器将引导完成按钮的创建过程，并且自动完成许多按钮制作任务。创建了按钮元件后，就可以轻松地创建该元件的实例来制作导航栏了。,Fireworks8.0,75,1.创建按钮,Fireworks8.0,76,2.创建弹出菜单,Fireworks中还有一个弹出菜单编辑器，利用它可以快速方便地创建垂直或水平弹出菜单。弹出菜单编辑器的“高级”选项卡能够发挥创造力来控制单元格间距和边距、文字缩进、单元格边框以及其它属性。,Fireworks8.0,77,2.创建弹出菜单（续）,Fireworks8.0,78,位图图像的处理,创建位图对象Fireworks的位图是基于大量不同色彩的像素集合而形成的。要新建一个位图对象，可使用“编辑”-“插入”-“空位图”命令，Fireworks将在当前的图像文档中插入一个空白的位图对象，并且自动切换到图像编辑模式。也可以使用“文件”-“导入”插入位图。,Fireworks8.0,79,修饰位图,1.位图的选取Fireworks用于选定位图区域的工具具有选取框系列工具、套索系列工具及魔术棒。,Fireworks8.0,80,矩形和椭圆形选取,“选取框”工具可以从位图中选取矩形像素区域，而“椭圆形选取框”工具可以选取椭圆形像素区域。,Fireworks8.0,81,不规则图形的选择,不规则图形的选择工具包括“套索”、“多边形套索”和“魔棒”。“套索”可以选择任意形状的像素区域，而“多边形套索”用来选择多边形像素区域。,Fireworks8.0,82,不规则图形的选择（续）,“魔棒”可以从图像中选择相近颜色的像素区域,颜色越接近，选择范围越大，若按住shift键，可以进行多重选取。,Fireworks8.0,83,2.制作羽化效果,在制作图形时，经常要对照片进行效果的处理，羽化是最基本的一种方式。羽化使像素选区的边缘模糊，并有助于所选区域与周围的象素混合。,Fireworks8.0,84,3.位图的复制,“橡皮章”工具可以实现位图图像的部分复制，特别是在照片修补中用处很大。,Fireworks8.0,85,4.修饰图像,模糊工具：使鼠标涂抹过的图像变得模糊。锐化工具：使鼠标涂抹过的图像变得清晰。涂抹工具：将单击选中那点的颜色涂抹到其它位置。“减淡”或“加深”工具：减淡或加深图像的局部。这类似于给照片加强光照或挡住光线的暗室技术。,Fireworks8.0,86,5.调整颜色,（1）调整亮度和对比度（2）反转（3）调整色阶（4）调整曲线（5）调整色相和饱和度,Fireworks8.0,87,（1）调整亮度和对比度,Fireworks8.0,88,（2）反转,Fireworks8.0,89,（3）调整色阶,Fireworks8.0,90,（4）调整曲线,Fireworks8.0,91,（5）调整色相和饱和度,Fireworks8.0,92,6.制作精美网页位图,Fireworks8.0,93,操作步骤,新建一个Fireworks文件。在弹出的“新建文档”对话框中设置画布的宽度为760像素，高度为430像素，背景颜色为白色。择绘图工具栏中的“选取框”工具，在“属性”面板中进行相应的设置。使用“选取框”工具在画布的右侧绘制一个矩形选区。选择绘图工具栏中的“渐变”工具，这时“属性”面板会自动变成渐变色的调节属性。设置渐变的类型为线性渐变，渐变颜色为白色过度到绿色(#87A583)。,Fireworks8.0,94,操作步骤（续）,使用“渐变”工具，在画布右侧的选区中单击鼠标左键，渐变色即可填充到当前选区中。填充完毕，按快捷键Ctrl+D退出位图编辑模式。在Fireworks8.0的新窗口中打开事先准备好的图像素材“花草.jpg”，选择绘图工具栏中的“椭圆选取框”工具，在“属性”面板中进行相应的设置。使用“椭圆选取框”工具在图像“花草.jpg”中绘制一个正圆的选区。按住键盘的“Shift”键，这时在鼠标指针的右下角会显示一个小“+”号，表示添加选区。使用“椭圆选取框”工具在当前选区的基础上增加一个新的选区。,Fireworks8.0,95,操作步骤（续）,现在得到的是有点类似于望远镜的两个椭圆连接在一起的选区把选择的像素区域，复制到前面新建立的画布中来。使用“多边形套索”工具,把图像素材“模特.jpg”的人物区域选中。把选中的像素区域复制到前面新建的画布中。选择绘图工具栏中的“椭圆选取框”工具，其属性设置和前面一致。在画布中绘制一个椭圆的选区。单击“选择”-“反选”命令，对选区进行反选操作，选中的就是椭圆选区以外的部分。在图层中选择图像素材“模特.jpg”所在的图层，按键盘的Delete键，即可删除所选中的像素区域。根据需要，可以适当移动选区，对图像素材“模特.jpg”的边缘部分进行多次删除。,Fireworks8.0,96,操作步骤（续）,选择“修改”-“变形”-“水平翻转”命令，改变模特素材的水平方向。并且使用“缩放”工具适当调整图像的尺寸，对齐到相应的位置。打开“属性”面板中的“亮度/对比度”滤镜命令，适当增加其“亮度”和“对比度”属性，使图像素材更清晰明亮。使用绘图工具栏中的“直线”工具，在画布中绘制一个十字坐标，并且在“属性”面板中设置其笔触样式为虚线。在Fireworks8.0的新窗口中打开事先准备好的图像素材“向日葵.jpg”，选择绘图工具栏中的“多边形套索”工具，其属性设置和前面一致，把向日葵选择下来，并且复制到当前画布中。,Fireworks8.0,97,操作步骤（续）,把向日葵克隆两个，选中其中的一个向日葵图像，在“属性”面板的“滤镜”菜单中选择“模糊”-“运动模糊”命令。在弹出的“运动模糊”对话框中设置好相应的属性。在“图层”面板中调整模糊后向日葵的排列顺序，拖拽到所有对象的下方，并且同时设置其“透明度”为40。把另外一张向日葵的图像缩小到适当的尺寸，并且移动到十字坐标上。使用绘图工具栏中的“选取框”工具，选中图像中多余的像素区域，依次删除。在画布中添加文本和网站标志，整个页面效果图就制作完毕了。,Fireworks8.0,98,层与蒙板,1.层,Fireworks8.0,99,2.蒙板,同时选中两个图片，选择“修改”-“蒙板”-“组合为蒙板”，即实现蒙板效果。,Fireworks8.0,100,制作地球旋转动画,双击桌面任务栏右下角的时间，打开日期和时间属性对话框后，按Alt+PrintScreen键，将对话框屏幕复制到剪贴板中。进入Fireworks，新建文件，粘贴。粘贴后利用“裁剪”工具将世界地图部分裁剪下来，裁剪时一定要放大比例进行裁剪，精确一些。将裁剪好的世界地图克隆一份，移动到画布右侧之外，空白处单击，选择“修改”-“画布”-“符合画布”项，扩大画布，再详细调整地图素材的位置，将两张图片左右无缝拼接在一起。同时选取两幅图，选择“修改”-“平面化所选，将两幅图片合并为同一张图片。,Fireworks8.0,101,制作地球旋转动画（续）,新建文件，宽高分别为300200像素，绘制一个合适大小的正圆，笔触选择无，白色填充。复制刚绘制的圆形，在层面板中新建一层2，选取新建的层，粘贴。设定粘贴到层2中的圆形为1像素黑色柔化线段笔触，圆形为放射状填充：左右两侧颜色均为黑色，将上方的不透明度选项做调整，将其中左侧的不透明度选项稍向右移动，并将其值设置为0。将渐变填充右侧的不透明度选项设置为50。将步骤3中的地图素材复制，粘贴到层1中。使用缩放工具将地图素材不改变长宽比例进行缩放，并将地图素材右对齐圆形，此时选取地图素材看属性面板，记下地图素材现在的宽度。,Fireworks8.0,102,制作地球旋转动画（续）,在层面板中将地图素材拖动到层1中圆形下方。选取地图素材，按F8，打开元件属性面板，将地图素材转换为动画元件。设置动画的帧数，移动方向，还有移动距离。因为地图素材被拼接成了两张，旋转一周也就是移动一整张地图素材的宽度，或者说是缩放后的地图素材的一半宽度，在步骤9中，记下了地图素材在缩放后的宽度666像素，将此宽度除以2，得到结果333像素（要根据记下的宽度为主算其数值），将333数值填入移动距离项目中。按住Shift键选取层1中的圆形和地图动画元件，选择“修改”-“蒙板”-“组合为蒙板”。,Fireworks8.0,103,制作地球旋转动画（续）,选取层1中的蒙板对象，在属性栏设定蒙板方式为路径轮廓。这里的蒙板圆形是白色，不选这项也可以，如果做的时候蒙板的圆形设置不是白色，此步骤必不可少。双击层2的名字，选取“共享交叠帧”项目。给层2中的圆形加阴影效果来增强立体感。设置首帧和尾帧的时间，让首帧和尾帧时间加一起等于普通其他帧的时间，因为首帧和尾帧的内容是一样的，如果不改时间，动画会出现停顿。这时候可以播放动画了。导出GIF时，因为层2中的圆形有渐变，可能会出现颜色过渡不自然，可以在导出选项中设定“抖动”选项。,Fireworks8.0,104,图像切片,切割图片后，可以对图片的各个部分分别进行压缩、优化。这样可将一整张尺寸非常大的图片分割成若干个小的图片。使得浏览者在浏览我们的网页时，对图像有一个非常快的显示速度。,Fireworks8.0,105,绘制矩形切片对象,导入“黄山”图片；选择工具箱中的“切片”工具；使用切片工具绘制切片对象，从切片对象延伸的线是切片引导线，它确定导出时将文档拆分成单独图像文件的边界。这个操作可反复进行，在图像上绘出多个切片对象。,Fireworks8.0,106,切片交互,拖放变换图像方法是切片交互的最简单方法。只需拖动切片的“行为柄”并将其放在目标切片中，即可快速创建简单的交互效果。,Fireworks8.0,107,制作网页名称栏图片,效果图：第一步，新建一个文档，并设置属性；第二步，制作图片元素，并按图所示排列；第三步，添加切片，导出图片。,Fireworks8.0,108,具体操作步骤：,1.新建文档启动FireworksMX，选择“文件”“新建”菜单，打开“新建文档”对话框。在“画布大小”栏中设置为448*85，自定义颜色代码为“0064CE”，单击“确定”。2.制作图片元素,Fireworks8.0,109,操作步骤（续）,优化导出图片,Fireworks8.0,110,优化和导出,网页图形设计的最终目标是创建能够尽可能快地下载的精美图像。为此，必须在最大限度地保持图像品质的同时，选择压缩质量最高的文件格式。这种平衡就是优化，即寻找颜色、压缩和品质的最佳组合。,Fireworks8.0,111,本章小结,MacromediaFireworks8.0是一款用来设计网页图形的应用程序。它之所以能够成为主流的网页图形图像处理和网页制作软件。第一，它所含的创新性解决方案解决了图形设计人员和网站管理员所面临的主要问题。Fireworks的工具种类齐全，使用这些工具，可以在单个文件中创建和编辑矢量和位图图形。第二，Fireworks可以创建从简单图形按钮到复杂变换效果的任何内容，并具有流畅的开发环境。在这一章我们详细介绍了Fireworks8.0的各种操作，并借助一些实例让同学们学会使用Fireworks处理图片、制作网页图像及动画。,