网页设计与制作-第10章:Fireworks基础及基本操作PPT课件

合集下载

fireworks基础PPT课件

fireworks基础PPT课件

创建导航栏
1. 创建按钮元件后,可以从库面板中,将该元件的一 个实例拖到工作区域中,重复这个过程,创建多个按钮。
2. 为了对齐各个按钮,需要先作出引导线。选中“视 图”>“标尺”。
3.从标尺上,拖出水平和垂直的引导线。
4.反复从库面板中,把按钮的实例拖到文档中,并且对齐 到引导线。
5.选中不同的按钮实例,在属性面板上,修改文本 和链接地址。
6.单击“填充颜色框”图标。 7.在颜色弹出窗口中选择“透明按钮”。
8.选中“描边”工 具。
9.在“描边种类”中选择“铅笔”>“一像素柔化”。
10.按住Shift键,使用“指针”工具同时选择圆和文 字。
11.打开菜单栏的“文本”菜单,单击“附加到路径”。 12.环绕文字就做好了。
13.如果想旋转文字,选择“工具”面板中的“缩放工具”。 14.出现圆形箭头,就可以旋转文字。
3.打开层面板,选中当前图层,拖到“新建复制层”按 钮上,复制一个新层。
4.锁定层1。
5.选中层2,将填充方式变为实心,填充颜色为白色。 在菜单栏,选择修改,变形,数值变形,将宽高都设 置为90%。
6.使用“刀子工具”,在圆角矩形的上部四分之 一处,横向切割。
7.使用“指针”工具,点选下半部分,按键盘上的 DEL键,删除。如果无法选中,先导航
在 Fireworks 中,可以使用按钮编辑器快速创建一个按钮元件, 从库面板中,克隆多个按钮元件,就可以制作成导航栏。 创建带有样式的按钮 使用“按钮按钮编辑器”创建按钮,为了美化按钮,可以应 用样式面板中的样式,还可以应用“属性面板”上的各种效 果。
1.打开 Fireworks,通过“文件”>“新建”,新建一个文 档。
制作替换动画的原理:把一个GIF格式的图片变成切片,添 加“交换图象行为”,选择一个GIF动画文件。

fireworks课件

fireworks课件
Macromedia Fireworks 8
Macromedia Fireworks 8
一、Fireworks 工作界面介绍 二、动画制作 三、切片和热点 四、行为 五、优化和导出
Fireworks 工作界面介绍
绘图编辑区是编辑图形图像的工作区 工具箱与工具栏提供了常用的绘图工具和编辑工具 控制面板主要有【层】、【帧】、【优化】和【历史】 等面板组成,用于设置动画、优化和简化工作流程等 行为。 菜单栏主要包括【文件】、【编辑】、【视图】、 【选择】、【修改】、【文本】、【命令】、【滤 镜】、【窗口】和【帮助】10个菜单,主要负责工具 箱与工具栏没有的其他一些复杂命令与行为。
菜单栏 工具栏
控制 面板 绘图编 辑区 工具箱
属性检 查器
工具箱
选取工具组 变换工具组
部分选定工具 切割工具组
选取框工具组 魔术棒工具 铅笔工具 模糊工具组
套索工具组 刷子工具 橡皮擦工具 橡皮章工具
工具箱
直线工具 矩形工具组 自由路径工具组
钢笔工具组Байду номын сангаас文本工具 刻刀工具
热区工具组 隐藏热区和切片
行为——fireworks自带的行为 自带的行为 行为
简单变换图像行为 交换图像行为 添加状态栏信息 添加导航栏 添加弹出菜单
注:切换到fireworks
动画制作
行为
行为就是在网页中进行的一系列动作。通过这 些动作,可是实现用户同网页的交互或导致某 个任务的执行。通常一个行为由一个事件和一 系列动作组成。 举个例子,用户将鼠标移动到一副图像上,这 就产生了一个事件,如果这时候图像发生变化, 就导致了一系列动作发生。
行为
Fireworks的行为可以通过行为面板进行添加 和编辑。 不是所有对象都能添加行为的, Fireworks只 允许为热区或切片添加行为。

网页设计基础教程与上机指导利用fireworks制作动画

网页设计基础教程与上机指导利用fireworks制作动画

|
按钮 , 弹出Fireworks提示框。■ (3)单击
】对话框。■ (2)在对话框中选择要导入的GIF动画 , 单击
■ 导入现有GIF动画的具体操作步骤如下。■ (1)选择
25.3.2
】面板中添加新的帧。
】按钮 , 自动在
】命令 , 弹出
【文件
【确定
【打开
】检查器来更改动画元件的属性 。还可以在元件编辑器中编辑元件的图片 。元件编辑器可以在不影响文档其他部分的情况下编辑元件 。也可以通过移动元 件的运动路径来更改元件的运动。■ 因为动画元件被自动放到
】面板中 , 所以可以重新使用它们
来创建其他动画。
】对话框或
【动画
【属性
第7页/共12页
可以处理动画元件的属性 , 使网站富有生气 。可以更改元件动画的速度 、不透明度和旋 转的各种属性 。通过处理各种属性 , 可以使元件显示为旋转 、加速 、淡入淡出或者是这些动作的任意组合。可以通过
】对话框。■ (3)
】面板中选择需要设置帧延时的帧 , 按住Shift键可以同时选择多
】面板右上角的按钮 , 在弹出的菜单中选择
■ (2)单击
【 帧属性
【 帧延时
】命令,
【属性
第5页/共12页
弹出
■ 动画元件可以是创建或导入的任何对象, 并且在一个文件中可以有许多元件 。每个 元件都有它自己的属性并可独立运动。■
】 按钮 , Fireworks就会在单个文件中打开所需要的文件。
】文本框中。■ (3)在对话框中选中
】面板中可以看到每个文件都按选定的顺序放置
■ 在Fireworks
】复选框 , 单击
【 以动画打开
】命令 , 弹出

《Fireworks应用》课件

《Fireworks应用》课件

添加文本
在Fireworks中,您可以添加文本内容,并且可以对文本进行格式化,例如修改字体、颜色和大小等。 另外,还可以为文本添加描边、阴影等效果。
添加和编辑图像
添加图像
通过导入、拖放等方式添加图 像。
调整图像大小和位置
可以为图像设置大小和位置, 以便更好地集成到设计中。
图像编辑工具
提供裁剪、旋转、矫正等多种 图像编辑功能,确保图像符合 您的设计要求。
图像滤镜效果
通过应用各种滤镜,例如模糊、锐化、马赛克、变形等,可以为图像添加各种有趣和独特的视觉效果。
添加和编辑图层
通过添加图层,可以更好地管理设计元素,例如文本、图像、形状等。通过 调整图层属性,例如透明度、填充、边框等,可以更好地控制设计元素的外 观和信息。
制作按钮和动画
通过各种工具和技巧,您可以制作出各种按钮、标志、图标和动画效果。例如,您可以通过组合形状和 动画来创建下拉菜单或轮播图。
Fireworks应用
欢迎来到Fireworks应用的PPT课件。这个课件将会向大家介绍如何使用 Fireworks软件来创建惊人的图形和动画效果。
Fireworks软件简介
Fireworks是一款专为网页开发和创意设计制作的图像编辑软件,其功能强大 而且易于上手。通过这个课件,您将掌握Fireworks的基本操作和技巧,学会 制作精美的Web图形。
导出PPT
在完成设计工作后,您可以将Fireworks作品输出到PPT文件中,方便与他人进行分享和展示。
常见问题解答
1 如何复制图层?
可以通过选中图层,然后按Ctrl/Cmd+C和Ctrl/Cmd+V来复制和粘贴图层。
2 如何添加多个图像?
可以通过拖放方式将多个图像添加到Fireworks中,也可以通过导入功能来添加。

第2篇第9~13章 Fireworks的基本操作PPT课件

第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全套课件

Fireworks全套课件
1. 操作系统为 Windows 98 SE/Me/NT 4 (Service Pack 6) /2000/Xp; 2. 300 MHz Intel Pentium∥以上的处理器 3. 64 MB可用内存(建议使用128 MB)外加80 MB可用磁盘空间,硬盘可
用空间至少60 MB 4. 只读光驱CD-ROM 5. 800× 600像素分辨率,256色或更高的显示模式 6. Adobe Type Manager 4或更高版本,以便处理Type1字体。
《网页设计与制作》
——《Fireworks》
主要内容
• Fireworks简介 • 用Fireworks切割图形 • 用Firework制作有动态效果的切图 • 用Fireworks制作动画 • 用Fireworks的绘图工具的使用 • 文字工具及文字特效
一、Fireworks简介
Fireworks是一个创建、编辑和优化网页图形的多功能应用程序,可以创 建和编辑位图及矢量图形,设计网页效果、如变换图像和弹出菜单、修剪 和优化图像,以压缩其大小 特点: 活效果:在对象的效果改变后,仍然保存着路径的可编辑性 自动应用纹理和填充效果 完整的文本控制组件
一、合并图像形成动画 文件—打开,在打开图片对话框中,勾选“以动画打开”
第四节、用Fireworks制作动画
二、使用元件生成动画 • 创建一个动画元件:编辑—插入—新建元件,类型选择为“动画” • 编辑元件,在元件中插入文字或图片,完成后,使用“属性检查器输入动
画元件的设置,如角度、方向、缩放等 • 查看“帧”面板,通过调整“帧延时”来设置速度 • 将文档优化为GIF动画:窗口—优化,设置参数即可 • 也可以到处为SWF文件
谢谢同学们!
第四节、用Fireworks制作动画

Fireworks.ppt

Fireworks.ppt
选择“滤镜”>“模糊”>“运动模糊”,参数设置如下:角度 = 127; 距离 = 5。(改变水滴出来的位置)选择“滤镜”>“模糊”>“高斯模糊”,参数设 置为:模糊范围 = 3.3,(改变水滴的大小 )
选择“滤镜”>“颜色调整”>“亮度/对比度”,参数设置如下:亮度 = -16; 对比度 = 100。这个效果是为了得了一个纯黑白对象。
实例一环绕文字
新建宽和高都是300像素的文件,背景设为白色。 点选“工具”面板中的“文本”工具,在工作区输入文本
“/fuguotao/,字体选择“Arial Black”,字号 为20像素大小,颜色为黑色。 点选“工具”面板“矢量”部分的“椭圆”工具。按住 “Shift”键,在工作区画一个圆。在“属性”检查器中输入 新的宽度 (w) 或高度 (h) 值,这里都是130。 单击“填充颜色框”图标。在颜色弹出窗口中选择“透明按 钮” (无填充) 选中“描边”工具。在“描边种类”中选择“铅笔”>“一像 素柔化”。按住Shift键,使用“指针”工具同时选择圆和文 字。打开菜单栏的“文本”菜单,单击“附加到路径”。 如果想旋转文字,选择“工具”面板中的“缩放工具”。出 现圆形箭头,就可以旋转文字。 如果希望文本沿路径的内侧排列,选择“文本”菜单中的 “倒转方向”。
一 文件窗口
fireworks 的文件窗口上有四个标签,可以同 时编辑和预览图象,你可以同时预览四种不 同的优化设定所产生的效果,选择最理想的 一种选 择、创建、编辑图象 的工具,有的工具按钮 的右下角有一个小三 角,说明这个工具包 含有几种不同的形式, 按住这个工具不放就 能显示其他的形式。
实例二 羽化图片
打开一个图片。点击 “工具”面板“位图” 部分的“选取框”工具。 也可以选择“椭圆选取 框”工具,选择部分图 象。

Fireworks 全套教学课件

Fireworks 全套教学课件
FireWorks
北京工商大学 计算机与信息工程学院
毛典辉 maodianhui@
一、Fireworks的工作环境
启动Fireworks Fireworks的人机交互界面
Fireworks的启动
FireWorks的工作环境
Fireworks的工作模式
矢量绘图模式 位图编辑模式
算,选区会扩大; 按住Alt键再选取则两个区域作差运算,
选区会缩小; 同时按住Shift和Alt再选取则两个区域
作乘积运算;
选区的反转
执行[反选]命令
选区边缘范围的调整
扩展或收缩选区 对选区扩边 对选区平滑处理 扩大选取与选取
相似
扩展或收缩选区
对选区扩边
对选区平滑处理
扩大选取与选取相似
一、设置绘图颜色
颜色是创作的重要组成部分,使用绘图工 具进行创作时必须选择一种颜色;
颜色包含前景色和背景色两种; 颜色的设置通过调色板或拾色器来完成。
前景色和背景色
前景色是指当前绘画工具所使用的颜色; 背景色是指图像的底色。
1、使用“拾色器”
是最基本的颜色设置工具; 可以直接在颜色区取色(单击前景色按钮,
五、位图图片的处理
导入位图图片 使用选区工具 位图图片的效果处理 使用图层 使用蒙板
六、创建图片动画
图片动画的概念 帧的种类及其作用 元件和实例 动画的创建
七、网页图片的输出
关于Web图片的切片 图片格式的选择与优化 图片的输出
设计举例
设计一个北京工商大学的宣传图片
2、学习内容
创建选区的工具介绍 选区的编辑 柔化选区边缘
3、创建选区的工具
[选框]工具
[矩形]选框工具; [椭圆]选框工具;
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
2 使用混合 混合操作主要是改变对象的透明度和混合模式。设置对象的混合 模式可以较好的使多个对象重合的部分产生一定的效果,而改变原 来的完全遮挡关系。
.
6
10.2.2 网络 网格可以精确放置对象。选择【视图】|【网格】|【显示网格】命令, 可以显示网格。
.
7
10.2.3 辅助线 辅助线可以在文档中创建用于定位的辅助线,使对象对准某个位置。
在水平标尺或者垂直标尺上按下鼠标左键向文档内拖动,即产生一条水平 方向或垂直方向的辅助线,到合适位置时松开鼠标,完成辅助线的创建。
第10章:Fireworks基础及基本操作
• 10.1 Fireworks CS4窗口及界面 • 10.2图像的布局工具 • 10.3位图图像的处理 • 10.4 绘制位图 • 10.5编辑位图 • 10.6案例制作----制作图片窗格效果
.
《网页设计与制1作》
10.1 Fireworks CS4窗口及界面
建立图像。
.
《网页设计与制2作》
10.1.3图像基本操作
一、改变画布 选择【修改】|【画布】|【画布大小】命令,在“宽度”和“高度”文本框中 输入新的尺寸。“锚定”按钮以指定在画布的哪一边添加或删除,最后单击“确 定”按钮。
.
《网页设计与制3作》
二、改变图像大小 选择【修改】|【画布】|【图像大小】命令,打开如图10-5所示的对话框。
10.1.1窗口及界面 10.1.2新建文件
单击【文件】|【新建】命令: 1. 图像宽度和高度:可以先选择单位,一般用像素。 2.图像分辨率:指单位长度中所含像素量的多少。如72Pixel/inch 就是一英寸
长度单位中有72个像素。 3.画布的颜色:使用白色比较符合一般习惯。选择透明,就可以在透明背景上
另外,可以用刷子工具使用“笔触颜色”框中的颜色绘制刷子笔触。
.
15
10.4.2 色彩填充 色彩填充主要通过油漆桶工具来完成。油漆桶工具可以把相应范围内的像 素都填充成颜色或图案。
10.4.3 擦除 1. 橡皮擦工具 使用橡皮擦工具,可以擦除位图中的像素,达到修改位图图像的目的。
.
16
2.橡皮图章工具 使用橡皮图章工具可以完成图像局部区域的复制。按住Alt键,使用 橡皮图章工具在位图图像中单击可以确定要复制的区域,再次涂抹就可 以产生当前区域的复制图像。
.
8
10.3位图图像的处理
10.3.1 位图的选取 设计图像时,经常需要从图像中选择一个区域,就是所说的“抠图”。 选择区域工具在位图编辑模式中是重要的工具,选择区域工具可以确定位 图中像素的编辑范围,也可以产生复杂曲线。
10.3.2 选择框工具和椭圆选择框工具
.
9
10.3.3 不规则选择套索工具. 1.套索工具
.
13
(3)边框选取:以原有选区的边缘为中心线,向两侧扩展制定的宽度建 立选区。建立一个选区,选择【选择】|【边框选取框】,输入的像素是指选 区边框的宽度。
(4)平滑选区:可以使已经建立的选区的边缘变得更加光滑。选择【选 择】|【平滑选取框】。
.
14
10.4 绘制位图
10.4.1 绘制位图 铅笔和画笔工具可以绘制位图。使用方法是选择相应的颜色,设置笔触, 按下鼠标左键,拖动鼠标即可。 选择铅笔工具后, 在属性检查器中:“消除锯齿”平滑绘制的直线的边缘 。“自动擦除”在“铅笔”工具在笔触颜色上单击时使用填充色。“保持透 明度”限制“铅笔”工具只绘制到现有像素中,而不绘制到图形的透明区域 中。
相反,如果想在一个区域里减去另外一个区域,先选定一个区 域,按Alt键,再次进行区域选择,则从原区域中减去新区域。
如果想选取两个区域重合的地方,则建立第一个区域后,按 Shift+ Alt键选择新区域,则两区域的交集部分保留。
2.取消选区 对区域内的图像进行编辑之后,就可以取消选区。可用选取工具在其他 地方单击鼠标左键,或按ctrl+D键。
2.“加深”工具和“减淡”工具可加深或减淡图像的局部,这类似于给照片加强 光照或挡住光线的暗室技术。
3.“涂抹”工具可以像创建图像倒影时那样逐渐的将颜色混合起来。涂抹工具的 使用是将手指按下那点的颜色涂抹到其他位置。
.
18
10.5编辑位图
10.5.1 使用蒙版 使用蒙版可以有选择地显示文档中对象的部分。顾名思义,蒙版就是将不必 显示的部分蒙起来。与剪切操作不同的是,蒙版将保留图像内容,以便调整显 示区域。而剪切是将图像的某些部分删除。
.
12
3.调整选区 对于复杂的图像,选区不是一蹴而就的,通常要经过一些调整。
(1)反向选择:如果要选择的区域比较复杂,而其他部分比较简单时,可以 先选择其他部分,然后使用反向选择。反向选择的快捷键是ctrl+shift+I。
(2)扩展或缩小选区是指在原有选区的基础上保持形状比例对选区进行扩展 或者缩小。在【选择】|【扩展选取框】或 【选择】|【收缩选取框】,设置需要 扩展或收缩的像素值即可。
2.多边形套索工具
.
10
10.3.4魔术棒工具
在属性中“容差”用于设置魔术棒工具对颜色区分的灵敏度。魔术棒对选 择图像内像素的颜色,容许有一定范围的偏差。容差的值越大,在相同文 档中,将被选中区域也会越大。
.
11
10.3.5 选区的调整 1.增减选区
在建立一个选区后,如果想在加上一个区域,则按下Shift键, 选择新的区域,新区域会添加到原来的区域上。
●像素尺寸用于设定图像的显示大小。 ●打印尺寸用于设定打印时的输出大小。
.
4
三、修整画布
如果输入的图像上下颠倒或者左右颠倒,就要进行旋转画布的处理。可 以把画布旋转180°、顺时针90°或者逆时针90°。
选择【修改】|【画布】命令,在子菜单中进行选择即可。
.
5
10.2图像的布局工具
10.2.1 标尺 默认状态下,标尺是不显示的。选择【视图】|【标尺】命令,文档窗 口就会显示标尺,单位是像素。
.
17
10.4.4 修饰 这一组工具可以完成图像的减淡、加深、模糊、锐化以及涂抹操作。
1.“模糊”工具和“锐化”工具影响像素的焦点。模糊”工具通过有选择地模糊 元素的焦点来强化或弱化图像的局部区域。模糊工具的作用是使鼠标绘制处的图案 效果变得模糊。“锐化”工具对于修复扫描问题或聚焦不准的照片很有用。锐化工 具的作用是使鼠标涂抹过的地方变得清晰。
相关文档
最新文档