第5章Fireworks.ppt

基于Web标准的网页设计 第五章Fireworks 5 1Fireworks基础 5 1 1矢量图和位图的概念 5 1 2认识Fireworks的界面 5 1 3新建 打开和导入文件 1 新建文档在开始页中点击 新建Fireworks文件 或执行菜单命令 文件 新建 都能新建文档 2 打开文件选择 文件 打开 菜单项 Fireworks可打开其可读的任何图像文件格式 包括Photoshop格式 psd 和Freehand Illustrator CorelDraw等大部分图像处理软件创建的文件格式3 导入文件导入文件是把一张图片导入到另一张图片里面去 1 选择 文件 导入 命令 2 在导入文件对话框中选择需要导入的文件 3 在文档窗口拖动鼠标指针 出现一个虚线矩形框 如图5 5所示 虚线矩形框总是等比例放大 保证导入的图片不会变形 松开鼠标 图片就被导入到矩形框中 导入图片大小 位置由拖动产出的矩形框决定 如图5 6所示 在步骤 3 中 也可以直接在文档编辑窗口单击鼠标 图片也会被导入 单击的位置即为图片左上角的位置 但图片的大小将保持原有的尺寸不变 导入文件还可以通过将要导入的文件拖动到图像文件的编辑窗口中实现 图片的大小也会保持原有的尺寸不变 导入文件的步骤 5 1 4画布和图像的调整 1 修改画布2 符合画布3 修剪画布4 改变画布的显示比例5 修改图像大小6 裁剪图像 5 1 5辅助设计工具的使用 1 标尺 视图 显示标尺 或 隐藏标尺 命令 可以显示或隐藏标尺2 辅助线3 网格 5 2操作对象 5 2 1对象和图层的概念在Fireworks中 只要我们向画布中添加内容 例如画一个矩形 插入一段文字 导入一个图像 这些都被看作是添加了一个对象 每插入一个对象 Fireworks就插入了一个图层 可以在窗口右侧的 层 面板中看到画布中具有的图层 图层示意 5 2 2选择 移动和对齐对象 5 2 3变形和扭曲 缩放 工具 可以放大或缩小图像 倾斜 工具 可以将对象沿指定轴倾斜 扭曲 工具 可以通过拖动选择手柄的方向来移动对象的边或角 旋转对象 使用变形工具组中的任何一样工具 都可以旋转对象 将鼠标指针移动到变换框之外的区域 2 数值变形 5 2 4改变对象的叠放次序 5 2 5设置对象的不透明度 5 2 6操作对象的快捷键 1 当使用全选箭头选中对象后 使用键盘的方向键可以移动对象 每按一次方向键就使对象在该方向上移动一个像素 这在对对象进行精确位置调节时很方便 如果按住 Shift 键不放 再按方向键移动 可每次移动10像素 2 如果要选中多个对象 需要按住 Shift 键 多选键 再用全选箭头就可以同时选中多个对象了 此时多个对象外围都会出现选择框 这样可同时对多个对象进行移动等操作 3 如果要复制某个对象 可先选中再按住 Alt 键不放拖动某个对象 即可对其进行复制 这比选中对象再用 Ctrl C Ctrl V 复制快多了 4 对于所有形状绘制工具而言 按住 Shift 键不放进行绘制 可以保证其宽 高比始终为原始比例 这对于绘制圆形或正方形是必要的 5 3编辑位图 在Fireworks中 用户处理的对象主要分为两类 一类是位图图像 另一类是矢量图形 无论是处理位图还是矢量图像 用户都应该了解一个基本原则 就是 先选择 后操作 就是说要先选中一个对象 这个对象可以是一个多边形对象 也可以是一些像素组成的位图区域 然后才能对它进行操作 5 3 1创建和取消选区 选取框 工具 在图像中选择一个矩形像素区域 椭圆选取框 工具 在图像中选择一个椭圆形像素区域 套索 工具 在图像中选择一个不规则曲线形状像素的区域 多边形套索 工具 在图像中选择一个直边的自由变形像素区域 魔术棒 工具 在图像中选择一个像素颜色相似的区域 1 选取框 或 椭圆选取框 工具 选取框 工具和 椭圆选取框 工具位于工具箱的同一个按钮位置 选取框工具用于创建矩形的选区 而 椭圆选取框 工具用于选择 椭圆形 选区 边缘 选项 边缘 选项有三种选择 它们的功能如下 实边 创建的选取框将严格按照鼠标操作产生区域 消除锯齿 防止选取框中出现锯齿边缘 羽化 可以柔化像素选区的边缘 4 套索 和 多边形套索 工具 套索 工具用于创建曲线形的选区 而 多边形套索 工具是以直线为边界的多边形选区 4 魔术棒工具 魔术棒工具可以在图像中选择一个像素相似的区域 5 3 2编辑选区中的像素区域 1 滴管 工具2 调整颜色3 模糊效果 5 4绘制矢量图形 1 矢量图形的基本构成 矢量图形可分为笔触和填充两个部分 而要认识矢量图形 就必须了解另一个几何概念 路径 路径 是用矢量数据来描述的线条 它本身是看不见的 但是在Fireworks中 为了便于编辑 将会使用彩色线条来表示它 沿着路径添加某种颜色样式 得到的线状结果就是 笔触 而在路径围成的区域中应用某种颜色样式 得到的块状结果就是 填充 2 直线 矩形 和 椭圆 工具 使用 直线 工具 矩形 工具 或 椭圆 工具 可以快速绘制基本矢量形状 绘制好形状后 可以在属性面板中对它进行进一步设置 先使用 全选箭头 工具选中画布上的矢量形状 就会出现它的属性面板 3 填充属性的设置 矢量图形的填充方式主要有三种 即 实心 渐变 和 图案 2 渐变方式填充 渐变引导线的使用 用全选箭头选中矢量图形 这时图形上会自动出现渐变引导线 如图5 56所示 如果要旋转渐变引导线 可以单击渐变线一头的方点拖动 或将鼠标移动到渐变线上方 此时光标会变成旋转形状 可按住鼠标拖动旋转 如果按住Shift键旋转 可保证渐变引导线以45度增量为单位旋转 如果要改变渐变线的长度 可以拖动渐变线一头的方点延长或缩短 如果要改变渐变线的位置 则需要拖动另一头的菱形点 渐变线将发生平移 4 笔触属性设置 选中需要设置笔触的对象 在属性面板中将显示用于笔触设置的各种属性 图5 62 其中用得最多的是描边颜色 描边粗细和描边类型选项 5 自由形状 以圆角矩形为例 6 钢笔工具 1 绘制点 使用钢笔工具在画布上单击一下 即绘制了一个点 接下来不要移动鼠标 在这个点附近 光标右下角带有 形时 双击鼠标结束或按住Ctrl键单击结束 2 绘制直线 使用钢笔工具在画布上单击一下 即放置了第一个点 然后移动鼠标 再单击一下即放置了第二个点 一条直线段会将这两个点连接起来 继续绘制点 直线段将连接每个节点 执行下列操作之一可以结束绘制 在最后一个点处双击完成绘制一条开放路径 在所绘制的第一个点处单击完成绘制一条封闭路径 3 绘制曲线 使用钢笔工具在绘制点按住鼠标并拖动 或者单击绘制第一个点后 移动鼠标 在绘制第二个点时按住鼠标并拖动 继续绘制点 在绘制最后一个点之前松开鼠标 单击绘制最后一个点 接着在最后一个点处双击完成绘制一条曲线 如图5 66所示 4 绘制直线和曲线的混合曲线 在直线节点后绘制曲线 点击并拖动鼠标即可 在曲线节点后绘制直线 点击即可 如图5 67所示 其中路径上的空心圆点表示曲线节点 空心方形点表示直线节点 将鼠标移动到曲线节点上单击鼠标可将其转换为直线节点 将鼠标移动到直线节点上时 光标右下角会出现 号 此时单击可将该直线节点删除 7 修改路径 对于已经绘制好的路径 可以用 部分选定 箭头单击路径上的某个节点 此时该节点会变为实心 表示被选中 此时按住并拖动鼠标 即可调整路径的形状 也可使用键盘上的方向箭头以1像素为单位精确移动节点 提示 钢笔工具可对任何矢量路径进行修改 例如矩形 圆等矢量图形的路径 方法是先用 部分选定 箭头选中路径 再选择钢笔工具就能对路径进行修改了 钢笔工具绘制完路径后一般要使用 部分选定 箭头对路径进行调整 很多路径不一定非得使用钢笔绘制 利用现有的矢量路径 例如矩形 圆等工具 绘制后再调整可能事半功倍 5 4 2调整矢量线条 5 4 3路径的切割和组合 刀子 工具 用于切割矢量图形的路径 2 路径组合 1 联合 2 相交 3 打孔 4 裁切 5 4 4路径和选区的相互转换 1 路径转换为选区 2 选区转换为路径 5 5文本对象的使用 在Fireworks中修饰文本的一般步骤 如下 选择合适的字体 有时只要选择一款漂亮的字体 无须太多修饰也能显得很美观 书写文字 并调整间距 对文本进行填充和描边处理 对文本应用滤镜效果 如投影 发光等 5 5 1文本编辑和修饰的过程举例 1 新建一个画布 选择工具箱中的文本工具 2 在文本起始处单击左键 将会弹出一个小文本框 或者拖动鼠标绘制一个宽度固定的文本框 3 在其中输入文本 也可以粘贴文本 4 单击文本框外的任何地方 或在工具面板中选择其他工具 或按下Esc键都将结束文本的输入 如果要修改文本 则首先要使用全选箭头 选中这个文本对象 此时文本对象周围会出现带顶点的蓝色矩形框 如图5 103所示 然后用文本工具 点击并拖动选中其中的文字 就可以对选中的文字进行修改了 如图5 104所示 例如调整大小 水平间距 颜色等 3 给文字描边4 添加投影 5 5 3将文本附加到路径 5 6蒙版 5 6 1使用 粘贴于内部 创建矢量蒙版 4 制作图像背景的文字 由于文本也是一种矢量 所以也能将位图图像粘贴于文本内部 达到图像背景文字的效果 其制作步骤如下 5 6 2创建位图蒙版 1 位图蒙版创建的步骤 2 利用位图蒙版技术制作网页Banner 5 7简单GIF动画的制作 5 7 1使用补间实例制作动画 1 选择 直线 工具按住Shift键绘制一条水平直线 将直线的笔触颜色设置为黑色 2 用全选箭头选中直线 执行菜单命令 修改 元件 转换为元件 快捷键为F8 在弹出的元件属性对话框中保持默认设置即可 此时可发现直线上多了一个箭头 表示它已转换为元件了 3 按 Ctrl Shift D 将直线 克隆 出一个新的 这样就有两个直线元件了 4 选中新克隆出的直线 执行菜单命令 修改 变形 数值变形 在数值变形对话框中选择 旋转 输入角度为255度 再使用缩放工具 将直线缩短一些 然后移动到如图5 162所示的位置 5 接下来在 层 面板中同时选中两个元件 执行菜单命令 修改 元件 补间实例 在图5 163所示的对话框中 输入步骤为15 把 分散到帧 前面的勾去掉 点击确定后效果如图5 164所示 5 7 2制作遮罩动画 2 用文本工具输入一段文字 执行菜单命令 文本 编辑器 在文本编辑器中将文本的方向改为 垂直文本 和 文本自右至左流向 如图5 166所示 3 按F8键将文本对象转换为图形元件 4 在文本上方绘制一个和文本对象一样大的矩形作为遮罩层 设置该矩形的填充方式为 线性渐变 渐变颜色从左至右为 黑色 白色 黑色 如图5 167所示 图5 166文本编辑器图5 167矩形遮罩层 5 在 层 面板中选中文本对象和矩形 执行菜单命令 修改 蒙版 组合为蒙版 6 将蒙版层中间的铁链图标去掉 选中蒙版层左边的文本对象 将其拖动到矩形的左边 使文本均看不见 7 在 层 面板中选中蒙版层 按 Ctrl C 和 Ctrl V 复制一个 这时可以把原来的蒙版层先隐藏 选中新蒙版层左边的文本对象 将其拖动到矩形的右边 使文本均看不见 8 文本排列好后将这两个蒙版层的铁链图标都点上 9 在 层 面板中选中这两个蒙版层 执行菜单命令 修改 元件 补间实例 输入步骤为25 把 分散到帧 前面的勾选上 这样整个实例就制作完毕了 最终效果如图5 168所示 5 8切片及导出 5 8 1切片的作用 切片就是将一幅大图像分割为一些小的图像切片 并将每部分导出为单独的文件 网页中有很多边边角角的小图片 如果对这些小图片一张张单独绘制 不仅很麻烦 而且也很难保证它们可以1像素不差的拼成一张大图片 而通过切片 只需绘制一张整体的大图片 再将它们按照布局的要求切割成需要的小图片即可 这样开发效率得到很大提高 在过去 切片还有一个作用 就是能通过对网页效果图进行切片 自动生成整张网页的HTML文档 但是这种方式生成的HTML文档是用表格排版的 而且代码有很多冗余 因此现在不建议采用切片生成的HTML文档 设计师一般都是在DW中重新制作网页 所以现在切片的唯一目的就是为了得到制作网页需要的小图片 有人还喜欢对切片添加链接或交互效果 如添加下拉菜单或图像翻转效果 但这些都可以在DW中通过编写JavaScript或CSS实现 而且代码更简洁 因此不推荐在Fireworks中为切片添加交互或链接 切片还能带来以下一些衍生的好处 当网页上的图片文件较大时 浏览器下载整个图片需要花很长时间 切片使得整个图片分为多个不同的小图片同时开始下载 IE浏览器可以同时下载5个文件 这样下载的时间就大大缩短了 如果使用Fireworks制作整幅的网页效果图 将网页效果图转换为网页的过程中 网页效果图中的很多区域需要丢弃 例如绘制了文本的区域需要用文本替代 网页效果图中单一颜色的区域可以用HTML元素的背景色取代等等 这时必须把这些区域的图片切出来 才能够将它们删除 或者使切片不包含这些区域 优化图像 完整的图像只能使用一种文件格式 应用一种优化方式 而对于作为切片的各幅小图片我们就可以分别对其优化 并根据各幅小图片的特点还可以存为不同的文件格式 这样既能够保证图片质量 又能够使得图片变小 5 8 2切片的基本操作 1 创建切片 2 导出切片的两种方法 1 用全选箭头单击切片对象选中它 按右键 在右键菜单中选择 导出所选切片 命令 如图5 173所示 可将当前选中的切片导出 这种方式适合于单独导出一些小图标文件 2 执行菜单命令 文件 导出 在弹出的图5 174所示的 导出 对话框中 可以选择导出切片 如果选中 包括无切片区域 则切片区域的图片和被切片引导线分割的区域都会导出成切片 如果不选中该项 则只有切片区域的图片会被导出 另外 最好选中 将图像放入子文件夹 这样图像就会存放在与网页同级目录的images文件夹下 3 切片的基本原则 1 绘制切片时一定要和所切内容保持同样的尺寸 不能大也不能小 这可以通过选中所切对象后 按右键 选择右键菜单中的 插入矩形切片 命令实现 2 切片不能重叠 3 各个切片之间的引导线尽量对齐 特别是要水平方向对齐 这样才容易通过网页代码将这些切片拼起来 4 单色区域不需要切片 因为可以写代码生成同样的效果 也就是说 凡是写代码能生成效果的地方都不需要切片 5 重复性的图像只需要切一张即可 例如网页中有很多圆角框都是采用的相同的圆角图片 就可以只切一个圆角框 又如导航条中所有导航项的背景图片都是相同的 就只要切一个导航项的背景图片就可以了 6 多个素材重叠的时候 需要先后进行切片 例如背景图像上有小图标 就需要先单独把小图标切出来 然后把小图标隐藏 再切背景图像 5 8 3切片的实例 1 隐藏网页效果图中可以用HTML文本替换的文本对象 2 把网页中的小图标先单独切出来 1 用切片工具在小图标上绘制一个刚好包含住它的切片 2 设置小图片的背景色透明 3 重复的图像只切一个 4 重复的图像区域只