Fireworks处理位图3
fireworks教案课件第4章矢量图像和位图图像
在Fireworks CS3中，共有13种笔触类型可供选择。 1．【无】 表示不设置笔触。 2．【铅笔】 铅笔笔触没有任何修饰，是Fireworks默认的笔触类型，共有4种，效
果如图所示。
【1 像素】：绘制硬线条时使用，有可能产生锯齿。 【1 像素柔化】：绘制软线条时使用，不会产生锯齿效果。 【彩色铅笔】：绘制4像素宽的彩色线条，会根据压力和速度调整线
对于已绘制好的自由路径，使用钢笔工具还可调整其形状。将鼠标移 到自由路径的路径点上，按住并拖动鼠标，即可调整路径的形状。
4.2.3 笔触
绘制路径时，可以在工具的属性设置面板中设置路径的笔触和填充效 果。对于绘制完毕的路径，选中后也可在属性设置面板中修改其笔触 和填充效果。
笔触的设置是在属性设置面板中完成的。选中需要设置笔触的对像， 可以在属性设置面板中看到用于笔触设置的各项属性，如图所示。
4.1.2 位图图像
位图图像是对区域中每个像素点的信息进行描述，一个位图图像实际 上记录了所有像素点的位置和颜色信息，这种方式是【一对一】的， 可以如实地反应需要的任何画面。
位图图像的分辨率不是独立的，缩放位图图像会改变其显示效果。例 如在放大位图图像时，由于增加了未定义的像素点个数，因此会出现 马赛克效果，如图所示。
下拉列表中设定自由路径的宽度，单位是像素；在第2个下拉列表中
设定自由路径的样式，单击右侧的下拉列表按钮，从下拉列表中选择
需要的路径样式。
【边缘】：设置笔尖的柔和度。单位是％，范围是0～100。
【纹理】：设置路径的纹理。单击右侧的下拉列表按钮，从下拉列表 中选择需要的路径质地。
【保持透明度】：选中该项可以限制刷子工具，只在有像素的区域绘 制路径，不能进入图像中的透明区域。
网页制作及应用3Fireworks
21
返回目录
3.3 位图操作—位图蒙版
4．使用“色相/饱和度”调整图像颜色 “色相/饱和度”是简单调色工具，多用来做各种添 加 颜色的琐碎工作。 方法如下： （1）打开一个位图图像。 （2）用“滤镜 →调整颜色→色相/ 饱和度”命令打 开 “色相/饱和度”对话框。 （3）在“色相/饱和度”对话框中进行设置，单击确 定 22 可看到调整后的效果。
9
返回目录
3.2 Fireworks MX 基本操作—辅助工具的使用
1．网格 网格是一种设计工具，在画布上显示为由横线和竖线构成的网状体系， 只在工作环境中可见，图像输出时不可见。利用网格可以给对象进行精确定 位。可通过“视图→网格→显示网格”命令显示和隐藏网格。 2．标尺 要测量、组织和计划作品的布局可通过标尺来实现。 Fireworks中的标 尺以象素为单位。显示和隐藏标尺，可通过“视图→标尺”命令来实现。 3．辅助线 辅助线是从标尺拖到文档画布上的线条，可以帮助精确对齐目标。要显 示辅助线，首先要显示标尺，执行“视图→辅助线→显示辅助线”命令，然 后 在水平标尺或垂直标尺上按住鼠标向文档视图中拖动，就可以产生一条辅助 线。要锁定辅助线，不允许随意调整辅助线的位置，可以执行“视图
他格式的文件以便在网页中使用。还能导出
与Photoshop等软件类型匹配的文档。
3
返回目录
3.1 Fireworks MX 基础—工作窗口
主要由标题栏、菜 单栏、工具栏、工 具箱、工作区、属 性面板、面板组和 状态栏等部分组成。 其中菜单栏包含创 建与编辑图片的全 部命令，工具栏包 含菜单中常用命令 的按钮，状态栏显 示当前文档的主要 信息。 工作区：位于工具箱右边，在工作区中显示和编辑图像。 Fireworks MX
fireWork应用
Firework的主要用途Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks 都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。
新推出的Fireworks 3 更是增加了许多脍炙人口的新功能：1. 可以输出SWF和Illustrator7文件；2. 与Dreamweaver紧密的配合；3. 与网页编辑器的结合；4. 可以直接编辑点阵图；5. 更方便的Roll over；6. 向量模式编辑；7. 即时预览；8. 允许加入Photoshop滤镜；9. 可以读入Photoshop文件；10. 提供MAC Gamme预览功能；11. 提供GIF编辑环境；12. 提供History panel来记录动作；13. 提供全新的按钮制作工具；14. 可编辑的操作环境；15. 资料库（Library）的运用；16. 提供图形与文字的样式库（Style）。
怎么样？Firework 3如此强大的网页编辑功能是不是很令人眼馋呀？！是不是恨不得马上就掌握这个网页编辑利器呀？！别急！就让我们一起来深入地研究它吧！第二节基本概念firework的矢量图像一、矢量图像矢量图像是用包含颜色和位置属性的直线或曲线（即称为矢量）来描述图像属性的一种方法。
比如说一个椭圆，它就包括由通过椭圆边缘的一些点组成的轮廓和轮廓内的点两部分。
对于矢量图像，椭圆的颜色取决于椭圆轮廓曲线的颜色和轮廓封闭的区域颜色，与轮廓内单独的点无关。
我们可以通过修改描述椭圆轮廓的直线或曲线来更改椭圆的性质，也可以移动、放缩、变形，或者在不改变图形显示质量的前提下，改变具有矢量性质的椭圆的颜色。
矢量图形具有独立的分辨率，也就是说我们以各式各样的分辨率来显示矢量图形，它都不会失真。
Firework图像处理【精选】
2019/9/23
2. 色彩的作用
1
色彩的冷暖 红、橙、黄等 颜色使用联想到 阳光、烈火，故 称为“暖色”， 绿、青、蓝等颜 色与黑夜、寒冷 相连，故称为 “冷色”。
2
3
4
色彩的轻重 各种色彩给人 的轻重感不同， 从色彩得到的重 量感，是质感与 色感的复合感觉。 浅色密度小，给 人质量轻的感觉； 深色密度大，给 人分量重的感觉。
可以选择“导出”按钮。
2019/9/23
举例
在fireworks 8.0中画一个房子，由三角形和长 方形组成；保存文件名为“房子.png”,要求导出 文件名为“房子. gif”。
在fireworks 8.0中导入一张明星图片，图片宽 度为400像素，保存件名为“明星.png”,要求导 出文件名为“明星.jpeg”。
2019/9/23
Firework图像处理
1 图像基础及色彩应用 2 Fireworks 8.0图像制作
2019/9/23
一、图像基础及色彩应用
在进行网页设计之前，首先要掌握色彩的应用和图像基础。因此 本节内容是通过实例围绕这两个方面展开的。
• 认识色彩
1
• 色彩的作用
2
• 色彩的配色应用方案实例
项按钮时，先单击颜色框，然后从弹出窗口中选择一种自定义 画布颜色。
2019/9/23
打开按钮
在 Fireworks 中，通过“打开按钮”可以很容 易地打开和编辑矢量和位图图形。
若要打开文件而不覆盖前一版本，请选择“打开 为‘未命名’”，然后用其它名称保存该文件。
2019/9/23
打开按钮（续）
二、 Fireworks 8.0图像制作
1 • Fireworks8.0简介 2 • 矢量编辑 3 • 文本编辑 4 • 特效和样式 5 • GIF动画制作 6 • 位图处理 7 • 图像切片
第5章 Fireworks基本操作
【例5.6】粘贴为蒙板
（1）打开一张图片文件，选择“椭圆”工具，边按住键盘上的Shift 键边拖动鼠标可以在图片上画一个圆，然后克隆一个一样的圆，用 “指针”工具调整两个圆的位置,如下图所示。
（2）按住键盘上的Shift，同时选中这两个圆。 （3）执行“修改”→“组合”菜单命令，将两个圆组合在一起。 （4）执行“编辑”→“剪切”菜单命令，剪切两个圆。
【例5.3】位图的编辑
【例5.3】位图的编辑
（1）执行“文件”→“打开”菜单命令打开文档 “car.jpg”。 （2）选择工具面板上的“魔术棒”工具，在图片空白 处点击一下，即选中空白区域。 （3）选择工具面板上的“渐变”工具。 （4）在“属性”面板上，按下“填充颜色”按钮向下 的箭头，设置渐变色，点击左边的颜色样本改为黄色， 右边的颜色样本改为白色。 （5）再将“属性”面板上的纹理设置为“钢琴键” 。 （6）在选中的空白区域内单击，即将渐变色运用到选 区中。
【例5.5】文字蒙板
（1）创建一个空白文档（400*300像素），画布颜色为黑色，选择工具 面板中的“刷子”工具在属性面板中设置笔触属性。 （2）使用笔刷在文档中拖动，绘制位图图像 (3)使用“文字”工具在文档中输入：HAPPY LIFE，在属性面板中设置文 字属性。 (4)按住键盘上的CTRL键，在层面板中选择文字层和位图层后松开，执行 “修改”→“蒙板”→“组合为蒙板”命令，即可完成蒙板效果的创建。
Fireworks的工作界面
样式面板的使用
通过创建样式，可以保存 并重新应用一组预定义的 填充、笔触、滤镜和文本 属性。将样式应用于对象 后，该对象即具备了该样 式的特性。Fireworks 提供 了许多预定义的样式。可 以添加、更改和删除样式。 还可将样式导出以便与其 他 Fireworks 用户共享，或 者从其它 Fireworks 文档导 入样式。
Fireworks介绍
任务二：选区操作实例
FW的位图操作模式，指的是FW可以使用其软件自带的位图工具，对于 任何格式的位图进行处理，也就是说，位图操作模式就是指FW的图像 处理功能，其主要操作对象就是有所有格式的位图．
•位图处理案例—恐龙危机
操作步骤： 操作步骤： •导入两张位图，使用数值变形命令和缩放工具，将 它们缩放到合适尺寸； •选择天鹅图片，将其图层透明度降至50%， •选择电视图片，拉出四条辅助线，将电视屏幕区域 勾出， •再次选中天鹅图片，克隆后，选择第一张天鹅图， 使用矩形选区工具，沿辅助线作出选出，然后，反 选，将多余部分删除， •选中克隆后的天鹅图，使用多边形套索工具，将覆 盖在电视上的部分（除翅膀和脖子外）选中后删除。 （这里使用反抠法：即选中不需要的部分，然后删 除。） •最后，选择橡皮擦工具，设置柔化度为100，在天
本讲练习
理论作业： 理论作业： 1、Fireworks中创建位图可以怎么做？ 2、本讲的实例中，均未说明图像制作完成后，该如何输出，请你说明下该如何输出？输出为什么格 式？为什么要用这种格式？（提示：运用上一讲中的内容就可以解决） 3、简述一下Fireworks中的选区运算．并分别用这几种运算操作作一下操作，抓图后，提交到服务器 上． 上机操作： 上机操作： 制作本讲中所有的实例
鹅脖子处及翅膀处进行边缘擦除。
•将两层天鹅图的透明度调回100%，即完成。
任务三：位图的创建与修改
■创建位图
1.创建新的位图对象 1.创建新的位图对象 选择“刷子”或“铅笔” 工具，在画布上，即可 创建新位图． 2. 创建空位图对象 在层面板中，选择点 击 ＂新建位图图 像＂按钮，即可创 建．创建后，可使 用＂刷子＂或＂铅 笔＂工具来绘制．
任务四：位图创建与修改实例
Fireworks图像处理操作步骤(精)
Fireworks 图像处理操作步骤一、图像造型1、创建文档。
在Fireworks中新建一个文档,设置画布宽度为500像素,高度为350像素,分辨率为72像素/英寸,画布颜色为白色。
2、选取椭圆形位图。
选择“文件/导入”菜单项,在弹出的对话框中选择图像文件,打开,返回Fireworks画布,移鼠标至画布左上角单击,导入图像到画布中。
3、羽化选区边缘。
选择“选择/羽化”菜单项,对话框中设置半径为30像素为过渡宽度,确定。
4、清除选区外图像。
选择“选择/反选”菜单项,按Del键清除图像。
5、裁剪图像。
点击工具箱中裁剪工具,在图像中按鼠标左键拖动,框选出需要保留的图像部分,将出现画布裁剪框。
方框四周有8个黑色小方块,为裁剪控制点,拖动控制点能调整裁剪边线。
在裁剪框中双击,完成画布裁剪。
二、图像合成:将3张图片的部分画面合成一幅风景照。
1、打开图片文件。
在Fireworks中打开背景图片文件。
2、导入图片到合成文件中。
打开层面板,点击层面板下端“新建/重制层”按钮,将产生一个新的层。
双击该层名称,在弹出“层名称”对话框中输入“草地”作为该层名称。
按Ctrl+R,在弹出的“导入”对话框中选择有草地的图像文件,将其导入到画布中,此图像的位图层将放置在“草地”层文件夹中。
同样方法,建立“人物”层文件夹,将另一张含有人物的图像导入到该层文件夹中。
单击“人物”层左边“层显示/隐藏”图标,掩盖该层上的图像。
3、制作合成图像的草地。
点击草地图像,在位图工具箱中选择“选取框”工具,框选择图片中草地之外要清除的部分,按删除键清除多余图像。
按Ctrl+D释放选区,用指针选择工具移动图像与画布的左下角对齐。
右击该图片,选择快捷菜单中的“变形/缩放”菜单项,图像四周出现缩放控制框,调整图像大小,覆盖背景图右端,双击图片,退出缩放状态。
草地上边缘过于平直,使用橡皮擦工具修描上边缘,形成较为自然边界。
可在属性检查器中设置橡皮擦大小为30 像素,边缘为90像素。
fireworks图像图形处理
位图蒙版
导入图片/用矢量路径画出轮廓/ 导入图片/用矢量路径画出轮廓/同 时选中图片和矢量图形/修改/ 时选中图片和矢量图形/修改/蒙版 组合成蒙版/选中图标/ /组合成蒙版/选中图标/路径轮廓
导入图片/ 导入图片/用形状工具画出轮廓 并设置渐变等填充效果, 并设置渐变等填充效果,纹理 选阴影线/ 选阴影线/同时选中图片和矢量 图形/修改/蒙版/组合成蒙版/ 图形/修改/蒙版/组合成蒙版/ 选中图标/ 选中图标/灰度等级
8、全选场景中图形，选择菜单“修改 全选场景中图形，选择菜单“ 组合路径-联合” 结合全部图形。 -组合路径-联合” ，结合全部图形。 然后再次画出一个小圆形， 然后再次画出一个小圆形，放置在 图形中间，用打孔命令打穿底图。 图形中间，用打孔命令打穿底图。 完成齿轮平面图的制作。 完成齿轮平面图的制作。
关于文字 •文字实例 •文字矢量 •文字位图
1 文字实例
填充字 选择文字/属性面板中的油漆桶/ 选择文字/属性面板中的油漆桶/ 填充选项/图案/幻想1/ 1/纹理选粗 填充选项/图案/幻想1/纹理选粗 麻布
练习： 练习：用学过的知识制作描边字
输入文字/笔触选白色 填充选透明 输入文字 笔触选白色/填充选透明 笔触选白色 填充选透明/ 再换一种字体
修饰效果
• 添加边框 • 导入图片/选择图片/滤镜菜单中的阴 导入图片/选择图片/ 影和光晕/投影/距离,不透明度,柔化, 影和光晕/投影/距离,不透明度,柔化, 角度的设置
• 颜色填充 • 导入图片/选择图片/滤镜菜单中的 导入图片/选择图片/ 调整颜色/颜色填充/色彩增殖/ 调整颜色/颜色填充/色彩增殖/不透 明度, 明度,颜色的设置
图形图像处理
• • • • 图形的制作 图像的处理 菜单和按钮 首页布局
第2篇第9~13章 Fireworks的基本操作PPT课件
11.1 绘制矢量对象
1、绘制规则路径
– “直线工具”（Line） – “矩形工具”（Rectangle） – “圆角矩形工具”（Rounded Rectangle） – “椭圆工具”（Ellipse）
– “多边形工具”（Polygon） 2、绘制自由路径
– “钢笔工具”（Pen） – “矢量路径工具”（Vector Path）
• 用数值控制变形
– “修改”|“变形”|“数值变形” （ Numeric Transform ）
9.6.3 组织对象
• 组合与解除组合：将多个对象组合起来作为一个对象
处理
– 组合：“修改”|“组合” （Group） – 解除组合：“修改”|“解除的排列
1、 选择规则形状区域
– 矩形工具（Marquee tool） – 椭圆形工具（Over Marquee tool）
2、选择不规则形状区域
– 套索工具（Lasso tool） – 多边形工具（Polygon Lasso Tool）
3、选择相似色彩区域
– “魔术棒”工具（Magic Wand Tool）
每个滤镜的设置窗口均不相同，但在调整各个参 数时，均可立即看到“预览”效果。 【例10-2】在一个心形图形上应用斜面处理
10-2制作方法
• 用钢笔画一半心性曲线，克隆一次，水平
翻转一次。
• 选择两个后组合并平面化所选（成为位图） • 用橡皮擦除多余部分 • 用油漆桶对其填充红色 • 使用滤镜-eye candy/bevel boss
– Eye Candy 滤镜又名眼睛糖果/ Bevel Boss （浮雕滤镜），它可以生成各式的斜面与雕刻 外型，并能把之变成浮雕效果。
第2篇 第11章 用Fireworks制作和处理矢量图
Fireworks_03基本操作
45
3. 删除图层
要将图层删除，有以下两种方法：
（1）将所要删除的图层选定，单击“图层”面板 中的“删除所选”按钮。 （2）将所要删除的图层选定，单击并拖动图层到 “删除所选”按钮上。 4. 选定图层 选定图层方法有以下两种：
（1）单击“图层”面板中所要选定的图层的名称
9
3.1.3 变换对象
Fireworks的工具箱中提供了“缩放”工具 、 “倾斜”工具 和“扭曲”工具 ，用于对选中 的对象或选区中像素变形。 选择 “修改→变形”命令，也可以对所选对 象进行变形。
10
1.“缩放”工具 对对象进行水平方向、垂直方向或锁定比例 放大或缩小，方法如下：
（1）选中对象，在工具面板上选择缩放工具 。
第3章 Fireworks基本操作
3.1 对象的选择和编辑
在画布上对位图、路径、文本等对象执行操作 之前，必须选择该对象。
可以使用“指针”工具 、“部分选定” 工具 或者“图层”面板来选择对象。
1
3.1.1 选择对象
1．“指针”工具
选取单个对象：单击要选择的对象。
选取多个对象：在选中一个对象后，按住 “Shift”键，单击其他对象。 或者拖动鼠标出现一个矩形框，所有在修改选区 （1）扩展和收缩选区
在图像中创建选区后，选择“选择→扩展/ 收缩选取框”命令，输入扩展/收缩的像素 值，单击[确定]。
（a）原选区
（b）扩展5像素
（c） 收缩5像素
36
（2）平滑选区
选择“选择→平滑选取框”命令，输入取样半 径的像素值，单击[确定]。