03美化你的网页――Fireworks-网页设计

第三章美化你的网页——Fireworks在网页制作过程中，使用图像处理软件对Web图形图像进行创作和编辑是制作与美化网页必不可少的步骤。Macromedia公司出品的Fireworks，是用来设计和制作专业化网页图形的应用软件。本章主要介绍Fireworks在网页图形图像制作与编辑方面的应用。3.1认识Fireworks使用Fireworks，可以在一个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像。在Fireworks中，可以在单个应用程序中创建和编辑位图和矢量两种图形，同时，Fireworks与Macromedia的其它多种产品集成在一起（如Dreamweaver、Flash、FreeHand、Director及HTML编辑器），为网页创作者提供了一个真正集成的Web处理平台。3.1认识FireworksFireworks的特点：可以很方便的进行网页的设计布局,制作,优化；-能和Dreamweaver、Flash很方便的合作开发网站和Flash程序-小型动画图片的制作，LOGO、BANNER、ICON等等；相比其他图形制作软件，下面的FIREWORKS的优点是否对你很有帮助？？1.Fireworks简洁的软件界面更适合非设计人员学习2.更方便和DREAMWEAVER、FLASH合作开发3.更适合做排版以及切图的设计4.Fireworks提供更优化的网页图形解决方案，能在图形质量以及大小上找到更好的平衡点，更适合网络传输3.1认识FireworksFIREWORKS的学习渠道-FIREWORKS官方手册（在软件中按Ｆ１查看）/LIVEDOCS-FIREWORKS的网络资源-FIREWORKS书籍（不推荐）3.1认识Fireworks3.1.1Fireworks界面标题栏菜单栏工具箱“属性”面板功能面板3.2Fireworks基础3.2.1Fireworks的基本操作文档的基本操作新建文档保存文档Fireworks将文档保存为*.Png格式,这是其工作格式。文档的打开与导入画布属性的修改在编辑图像的过程中，经常需要将画布放大或缩小、修剪、旋转画布、重新设置画布的颜色等。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑位图图形工具选取工具矩形选取创建一个选区后，按住Shift键再创建选区，后创建的选区与先创建的选区合并；按住Alt键则进行选区相减；和PS一样，Ctrl+D取消选区；Ctrl+shift+I反选椭圆选取套索工具包括套索工具、多边形套索。魔术棒工具用行选择图像中颜色相似的像素区域。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑位图图形工具选取工具矩形选取创建一个选区后，按住Shift键再创建选区，后创建的选区与先创建的选区合并；按住Alt键则进行选区相减；和PS一样，Ctrl+D取消选区；Ctrl+shift+I反选椭圆选取套索工具包括套索工具、多边形套索。魔术棒工具用行选择图像中颜色相似的像素区域。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑位图图形工具铅笔工具，使用铅笔工具可以绘制单像素的线段；刷子工具，可以在工作区域中绘制任意粗细的线段，通过设置刷子的样式，可以绘制出特殊效果的线段。像皮图章工具，可以将图像的一部分提制到其他位置；颜色替换工具，橡皮擦工具位图修饰工具，包括模糊工具、锐化工具、减淡工具、加深工具和涂抹工具。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑矢量图形工具线条工具基本形状工具包括矩形工具、圆角矩形工具、椭圆工具、多边形工具，钢笔工具可以绘制直线或贝塞尔曲线，按住Alt键可以变它变成转换点工具。在绘制过程中，按住Ctrl键可以结束绘制。矢量路径工具就像使用铅笔工具一样，可以绘制出任意的线段，只是使用矢量路径工具绘制的线段为矢量线段。重绘路径工具可以重绘或扩展所选择的路径段，同时保留该路径的笔触、填充和效果等特性。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑图形对象的编辑使用选择工具编辑图形指针工具可以选择对象或移动对象，按住Alt键同时移动所选对象，可能复制该对象；选择后方对象工具可以使用选择后方对象工具选择被其他对象遮挡的对象。部分选定工具可以选择、移动或修改矢量路径上的节点或群组的对象。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑图形对象的编辑图形的变形1.缩放图形：可以使用缩放工具来缩放图形。2.倾斜图形：3.扭曲图形：4.也可以在“修改”菜单中选择“变形”子菜单来对图形进行变形操作。图形的颜色的填充图形的颜色包括笔触颜色和填充颜色，可以工具箱中找到。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑图形对象的编辑图形对象的组织组合对象：调节整体与个体的关系排列对象：调节图形的层次关系对齐对象：调节图形之间的位置关系3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑图形对象的编辑矢量图形的编辑1.自由变形工具：可以直接对矢量对象进行弯曲和变形操作2.更改区域形状工具：可以像自由变形工具一样对图形进行变形操作，不过更改区域形状工具的变形比较柔和，可以对整个曲线路径进行变形。3.刀子工具：可以将一个矢量图形路径剪切为两个图形路径。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑图形对象的编辑矢量图形的编辑4.组合路径：合并：可以将多个路径对象合并为单个路径对象，还可以将两个断开的路径端点连接到一起。拆分：可以将组合的单个路径进行拆分。联合：可以将选择的多个矢量图形合并为一个图形，合并后的图形将保持最底层图形对象的笔触和填充属性。相交：可以从选择的多个矢量图形对象的交集创建对象。相交的图形将保持最底层图形对象的笔触和填充属性。打孔：可以从选择的多个矢量图形对象中删除最上层对象重叠的部分。裁切：另一个路径的形状来修剪路径。前面或最上面的路径定义修剪区域的形状。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑图形对象的编辑矢量图形的编辑5.改变路径使用“改变路径”命令可以对矢量路径对象进行重新编辑。1.简化：可以指定要删除的路径上多余节点的数量，删除路径中节点的同时将保持路径的总体形状。扩展笔触：可以将选择的矢量路径向外扩展一定的像素，与原来的路径形成一个封闭区域。伸缩路径，可以将选择的矢量路径向内收缩或向外扩展一定的像素。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑图形对象的编辑图形特效的形成为了使自己绘制的图形在网页中更加生动，用户可以使用Fireworks提供的各种特效美化图形。图形特效主要通过图形对象的属性面板中的效果来进行相应的设置；斜角和浮雕；阴影和光晕；模糊；调整颜色；锐化；3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑图形对象的编辑样式的使用通过“样式”面板，可以将系统中预设的多种填充、笔触、效果样式及文本样式直接应用于工作区中的对象，使其具备该样式的特效。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑文本的操作文字是网页中很重要的一个元素，人们在网络上通过文字来了解各种各样的信息。在DW中设计时，一般都要使用大部分人都安装的字体。在Fireworks中，可以将文字制作得与图形一样精美和漂亮，然后将其导出转为图形，插入到网页中就不会产生在不同用户计算机中显示效果不同的现象，做到了最大的兼容性。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑文本的操作文本的输入有两种方法来输入文本，一是选择文字工具后，在工作区中单击鼠标创建文本输入框，用这种方法创建的文本输入框，在输入文本时将自动适应文本的宽度，文本输入框是动态的；另一种方法是选择文字工具后，在工作区中扡曳鼠标创建文本输入框，用这种方法创建的文本输入框其宽度是固定的，输入的文本到输入框的宽度后将自动换行。动态输入框档案右上角为圆形，而固定宽度的输入框右上角为矩形。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑文本的操作编辑文本设置文字的基本属性设置文字的对齐方式设置段落属性文字的填充、笔触、特效将文本添加到路径可以将文本吸附到路径上，这样文本可以按照路径的方向进行排列。将文本转换为路径将输入的文本转换为路径后，转换后的文本不再具有文字属性，成为一个文字形状的矢量图形，这时可以像矢量图形一样编辑转换为路径的文本。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑图层与蒙版图层在FireWorks中，可以像PS一样进行图层的操作，但又和PS有所不同，新建图层按钮创建的图层相当于PS中的图层文件夹，但是在Fireworks中称为“图层”，而真正的图层在Fireworks中称“对象层”。对象层有两种：一是矢量对象层，它是随着矢量图形的创建而产生的；另一种位图对象层，需要单击“新建位图对象”按钮来创建。图层的操作包括：新建一个层、改变层的顺序、复制层、锁定/解锁图层、改变图层混合模式、改变图层的不透明度等。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑图层与蒙版蒙版在Fireworks中，可以通过蒙版技术用上层图像遮住下面的图像，制作出一种镂空图像效果。蒙版可以分为两种类型：矢量蒙版和位图蒙版。将矢量对象作蒙版将产生矢量蒙版，而将位图对象用作蒙版将产生位衅蒙版。另外，还可以使用多个对象或组合对象来创建蒙版。矢量蒙版可以在下层图像中显示出上层图形路径遮住的图像，没有被遮住的图像将透明显示，产生一种生活中见到的镂空图形效果。矢量蒙版创建后，将在层面板中出现一个带铅笔图标的蒙版缩略图，表示已经创建了一个矢量蒙版。创建矢量蒙版后，在“层”面板中选择蒙版图层中的蒙版，“属性”面板中将显示相关的属性。在Fireworks中，位图蒙版是以灰度色阶来表示的，通过蒙版中图形灰度色阶可以表达被蒙住的图形的透明度。蒙版与图像的关系为：蒙版的颜色为白色，则其完全显示下方的图像；蒙版的颜色为黑色，则其完全覆盖下方的图像；蒙版的颜色为灰色，则图像呈不同程度的透明效果。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑图层与蒙版蒙版创建蒙版对象1.对过现有的对象创建蒙版。使用“粘贴为蒙版”命令可以创建出矢量蒙版或位图蒙版。如果粘贴的对象是矢量图形，将创建矢量蒙版，它使用矢量对象的路径轮廓来裁剪被蒙版对象；如果粘贴的对象是位图，将创建位图蒙版，它使用位图对象的灰度颜色值影响被蒙版对象的可见性。也可以使用“贴入内部”命令来创建蒙版。使用“贴入内部”命令时，剪切并粘贴的对象是要被蒙版的对象。而使用“粘贴为蒙版”命令时，剪切粘贴的对象是蒙版对象。对于矢量蒙版，“贴入内部”命令创建的蒙版可以显示蒙版对象本身的填充和笔触；使用“粘贴为蒙版”创建的矢量对象的填充和笔触是不可见的。3.2Fireworks基础3.2.2Fireworks图形对象的绘制与编辑图层与蒙版蒙版创建蒙版对象2.使用图层创建蒙版在Fireworks中单击“创建图层蒙版”按键可以创建一个空的蒙版，使用位图工具在蒙版层中绘制图形，即可根据所绘图形的不同灰度值产生蒙版效果。使用这种方法创建的蒙版为位图蒙版。3使用“修改”/“蒙版”子菜单中的命令也可以创建蒙版对象。在画布中选择位图，单击菜单的“修改”/“蒙版”/“全部显示”命令，将