发新话题
打印

[转贴][FW]教程示例24个

[转贴][FW]教程示例24个

引用:


目录:
Fireworks MX教程(一)制作虚线
Fireworks MX教程(二)制作环绕文字
Fireworks MX教程(三)改变图片大小
Fireworks MX教程(四)羽化图片
fireworks MX教程(五)缺角矩形的制作
fireworks MX教程(六)制作两头半圆的矩形
fireworks MX教程(七)制作渐变按钮
fireworks MX教程(八)制作圆角三角形
fireworks MX教程(九)制作抽线图
Fireworks MX教程(十)荧光按钮
Fireworks MX教程(十一)Mac按钮
Fireworks MX教程(十二)立体按钮
Fireworks MX教程(十三)制作虚线背景图片
Fireworks MX教程(十四)去背景图
Fireworks MX教程(十五)圆角矩形框
Fireworks MX教程(十六)制作阴影线
Fireworks MX教程(十七)制作圆角图片
Fireworks MX教程(十八)文字蒙盖图像
Fireworks MX教程(十九)使用“橡皮图章”工具修复图像
Fireworks MX教程(二十)给文字描边
Fireworks MX教程(二十二)使用蒙版减淡图片局部颜色
Fireworks MX教程(二十三)创建简单变换图象
Fireworks MX教程(二十四)制作替换动画
引用:



Fireworks MX教程(一)制作虚线

操作步骤:
1.启动Fireworks MX,新建一个文件,文件宽和高都设为200象素,也可以是任意大小,背景为白色。
2.单击“工具”面板“矢量”部分的“线条”工具,并且按住键盘上的“Shift”键,在编辑区任意绘制一条直线。


3.在“工具”面板的“选择”部分中选择“指针”工具,选中这条直线。

4.单击“属性检查器”中的“描边种类”下拉框。

5.选中“笔触选项”。

6。选择“铅笔”。

7.选择“彩色铅笔”。

8。在纹理中设置纹理为“0%”。

9。单击“高级”按钮。

10.在“间距”项输入“200%”,注意这里是手工输入,这个步骤是产生虚线效果的关键。在网页设计中,也常采用“300%”这个值。其实到这一步,虚线已经做好了。

11.在“形状”选项卡,如果不选中“正方形”,并且“大小”大于8,刷子尖端就显示为圆形。制作细虚线时需要选中“正方形”。刷子尖端也被称作笔触。

12。“大小”是用来设定刷子尖端的大小。网页制作中常选择“大小”为1来制作细虚线。

13。“方向”设置刷子尖端宽度。正圆或者正方形,选择“100”或者“0”。

14。“角度”只对正方形有影响。

15。为了方便以后使用这种自定义的虚线笔触,需要把这些步骤保存为命令。选中“历史记录”面板中的描边。

16。点击将“步骤保存为命令”。
17.在“保存命令”对话框中,输入名称。实例中输入“虚线”。

18。当需要应用虚线的时候,选择“命令”菜单下的“虚线”即可。

引用:


Fireworks MX教程(二)制作环绕文字

1.新建宽和高都是300像素的文件,背景设为白色。
2.点选“工具”面板中的

“文本”工具,在工作区输入文本“http://vip.5d.cn/fuguotao/,字体选择“Arial Black”,字号为20像素大小,颜色为黑色。

3.点选“工具”面板“矢量”部分的“椭圆”工具。

4.按住“Shift”键,在工作区画一个圆。

5.在“属性”检查器中输入新的宽度 (w) 或高度 (h) 值,这里都是130。

6.单击“填充颜色框”图标。

7.在颜色弹出窗口中选择

“透明按钮”。

8.选中“描边”工具。

9.在“描边种类”中选择“铅笔”>“一像素柔化”。

10.按住Shift键,使用“指针”工具同时选择圆和文字。

11.打开菜单栏的“文本”菜单,单击“附加到路径”。

12.环绕文字就做好了。

13.如果想旋转文字,选择“工具”面板中的“缩放工具”。

14.出现圆形箭头,就可以旋转文字。

15.如果希望文本沿路径的内侧排列,选择“文本”菜单中的“倒转方向”。


引用:


Fireworks MX教程(三)改变图片大小

1. 打开一个图片。此图片大小为宽2950,高2094。目的是要把这个图片变成宽400的图片。

2.打开“修改”菜单,单击“画布”里的“图象大小”。

3.在宽度中输入400。

4.选择“文件”菜单中的“导出”,给文件命名,保存即可。


引用:


Fireworks MX教程(四)羽化图片




1. 打开一个图片。
2.点击“工具”面板“位图”部分的“选取框”工具。也可以选择“椭圆选取框”工具。

3.选择部分图象。

4.在属性检查器中,“边缘”项中选择“羽化”

5.调整羽化大小。

6.打开“选择”菜单,单击“反选”。

7.反选过的图片:

8.按键盘上的Delete键删除。
9.羽化后的图片:


引用:


fireworks MX教程(五)缺角矩形的制作

1. 新建一个宽为150象素,高为100像素的文件,背景色任意。
2. 选中工具面板中的矩形工具,在编辑区画一个矩形。

3. 选择工具面板矢量部分的“刀子工具”,并且按住Shift键,把矩形右上角的边框进行切割。

4.切割后的图片:

5.点选“工具”面板中的“部分选定”工具。

6.选择顶点。

7.按键盘上的DEL键删除。

8.继续把左角变成缺角。选择“工具”面板矢量部分的“钢笔”工具。

9.在左下角的两个边框等距离各单击一下。

10.使用“部分”选定工具选择左下角的顶点。

11.按键盘上的DEL,删除左下角顶点后如图。


引用:


fireworks MX教程(六)制作两头半圆的矩形




1.在“工具”面板的“矢量”部分中选择“圆角矩形”工具。

2.在属性检查器中,单击矩形圆度旁边的滑块,拖动滑块到100。

3.在工作区画一个两头半圆的矩形。


引用:


fireworks MX教程(七)制作渐变按钮

1.使用矩形工具在工作区画一个矩形。

2.在“工具”面板“位图”部分中的“油漆桶”工具上单击并按住鼠标按钮。从出现的弹出菜单中选择“渐变”工具。

3.单击属性检查器中的“填充颜色”框。选择“线性”填充。

4。打开“编辑渐变”弹出窗口,在色阶下面单击添加一个色样。实例中添加的色样在中间。

5.单击色样,分别设置几个色样的颜色。

6.在矩形上,由上向下拖动,一个渐变按钮就做好了。


[ 本帖最后由 行云 于 2006-6-16 09:59 编辑 ]
突然之间很舍不得大家!!晓风的朋友们,再会了!!

TOP

引用:


fireworks MX教程(八)制作圆角三角形

1.选择“多边形”工具。


2.在“属性”检查器中,在“边”文本框中输入3。

3.按住 Shift 键,在画布上从上到下拖动,画出一个正三角形。

4.打开菜单:修改>改变路径>伸缩路径。

5.方向选择“外部”,宽度为15,也可以是其它数值,角选择圆弧,如下图。

6.做好的圆角三角形。



fireworks MX教程(九)制作抽线图

1.打开一幅图像。

2.选择“矩形”工具。

3.点击属性检查器上的填充类别下拉框。

4.单击“填充选项”。

5.在如下图中,设置“填充类别”为实心,也可以试试其它项。纹理为水平线4。纹理总量为100%,只要不为0就可以。选择透明项。在纹理总量中不为0,就可以选中透明项。

6.使用矩形工具在图像上拖动,覆盖图像,抽线图就做好了。



Fireworks MX教程(十)荧光按钮

1.新建一个文件,大小任意,背景为透明。
2.在透明画布上,使用圆角矩形工具画一个两头半圆的按钮,颜色为黑色。制作方法见《制作两头半圆的矩形》一文。

3.选中当前图层,单击层面板右上角的弹出菜单按钮,在弹出的菜单中选择复制图层命令,复制当前选定图层,在弹出对话框中选择“在顶端”,将复制的图层命名为“效果层”。


4.在层面板中,选中刚才命名的效果层,把效果层中的按钮变成白色。用缩放工具对其进行缩放操作,缩放后的效果:

5.对缩放后的图形应用透明渐变效果。在属性面板中选择“线性”渐变。

6.点击油漆桶旁边的颜色块,弹出渐变颜色设置面板。

7.设置左边的颜色块颜色为白色,右边透明块的不透明为0。

8.在效果层上从上到下拖动应用白色到透明的渐变。

9.最终效果如下图。



Fireworks MX教程(十一)Mac按钮

1.新建一个文件,背景色自定。使用圆角矩形工具,在编辑区绘制一个圆角矩形,矩形宽120象素,高40象素,矩形圆度为50。

2.选中这个圆角矩形,在属性面板上,描边设为无,填充方式为线性,填充颜色设置为灰色到白色。选取油漆桶工具,从上向下拖动。

3.打开层面板,选中当前图层,拖到“新建复制层”按钮上,复制一个新层。

4.锁定层1。

5.选中层2,将填充方式变为实心,填充颜色为白色。在菜单栏,选择修改,变形,数值变形,将宽高都设置为90%。

6.使用“刀子工具”,在圆角矩形的上部四分之一处,横向切割。

7.使用“指针”工具,点选下半部分,按键盘上的DEL键,删除。如果无法选中,先在编辑区其它部分点击一下。

8.选中切割后的图形,打开效果面板,选择模糊,高斯模糊,数值为2.7。

9.点击层1前的锁图标,给层1解锁,选中层1下的图层,调整效果选项,选择“斜角和浮雕”,“内斜角”,设置如下图。

10.继续选择效果命令,选择“阴影和晕光”,“发光”命令,将颜色设置为灰色,具体设置如下图。

11.按CTRL+A,选中所有对象,在菜单栏上,选择“修改”,“组合”,Mac按钮就做好了。



Fireworks MX教程(十二)立体按钮

1.新建一个文件,使用矩形工具在画布上绘制一个矩形,宽90,高20,填充颜色为#656565。

2.单击属性检查器中的“添加效果”按钮,然后从“效果”弹出菜单中选择“斜角和浮雕”/“内斜角”。

3.在弹出的对话框中设置如下图。

4.做好的效果。



Fireworks MX教程(十三)制作虚线背景图片

1.新建一个文件,设置如下图。

2.导出文件,在dreamweaver中,就可以把这个图像作为单元格的当前图像。
3.使用

“缩放”工具,把画布放大800%。

4.使用

矩形工具,在最中间处画一个点。导出这个文件,在dreamweaver中,把这个图像作为单元格的背景,就可以做出虚线效果。



Fireworks MX教程(十四)去背景图

1.打开要去背景的图片,使用

魔术棒工具,选择图片中的背景。

2.在属性面板中设置容差,边缘可以选择羽化。

3.删除选中的背景,反复进行这个过程,最后的图片如下。



Fireworks MX教程(十五)圆角矩形框

1.在工具面板上选择

圆角矩形工具,在画布上绘制一个圆角矩形。

2.在属性检查器中设置如下。

3.做出的圆角矩形框。



Fireworks MX教程(十六)制作阴影线

1.新建一个文档,画布颜色为黑色。


2.选中“线条”工具,按住SHIFT键,画一条直线,颜色为黑色。

3.按Ctrl+Shift+D键,克隆这条线,点击键盘上的向下键一下,然后把这条线的颜色变为白色。最终的效果如下图。



Fireworks MX教程(十七)制作圆角图片

使用圆角矩形作为蒙版,可以轻松的把图片变成圆角形状。
1.打开一个图片 。

2.使用圆角矩形工具在画布上画一个圆角矩形,在属性检查器上,输入它的大小,大小和上图的大小一样。选中上图就可以知道它的大小。

3.调整圆角矩形的填充颜色为白色。把圆角矩形和实例中的“花”图片完全重合。

4.在层面板中,选中这两个图片,如果只有这两个图片,可以按CTRL+A全选。选择菜单中的“蒙版”/“组合为蒙版”。

5.如果要输出有透明背景的图片,必须选择GIF或者PNG格式,PNG对照片级图片支持更好。这里选择GIF,Alpha透明。

6.做好的圆角图片。



Fireworks MX教程(十八)文字蒙盖图像

文本蒙版是一种矢量蒙版,只需将文本用作蒙版对象即可。要取得成功的效果,文字的颜色需要改成白色,并且选择的字体尽量粗,实例中使用的是“汉仪超粗黑繁”。
1. 打开一副图像。


2.使用“汉仪超粗黑繁”字体输入文字。

3.把文字的颜色改成白色,如果增加效果,产生的效果也要改成白色,实例中给文字增加白色投影。

4.同时选中文字和图片,使用菜单命令中的“修改”/“蒙版”/“组合为蒙版”命令。

5.创建的效果如图。



Fireworks MX教程(十九)使用“橡皮图章”工具修复图像

“橡皮图章”工具克隆位图图象的部分区域,可以将其压印到图象中的其它区域。当要修复有划痕的照片或去除图象上的灰尘时,克隆象素很有用。可以复制照片的某一象素区域,然后用克隆的区域替代有划痕或灰尘的点。
1.打开一个有划痕的图像。

2.选择“橡皮图章”工具

,单击近似区域将其指定为源。

3.把蓝色圆圈形状放在需要修改的部分,单击或者拖动。这部分图像就会变得和源图像一样。

4.还需要把划痕其它部分修改过来。按住 Alt 键,单击另一个象素区域,将其指定为源, 把蓝色圆圈形状放在需要修改的部分,单击。重复这个过程,最后修复的图片如下图。



Fireworks MX教程(二十)给文字描边


给文字描边是常见的图像处理功能。
1.在画布上,使用

输入文字,实例中字体选择



2.单击指针工具

,然后选中画布上的文字,属性检查器中的描边颜色框就会出现。

3.单击描边颜色框,在出现的对话框中单击“笔触选项”。

4.在出现的对话框中,根据需要设置。

5.描边后的文字。


Fireworks MX教程(二十二)使用蒙版减淡图片局部颜色

实现这个效果主要使用了空位图蒙版。
1.打开图像。

2.在层面板中,选中对象,点击右下角的“添加蒙版”按钮。这样就创建了一个空蒙版。

3.使用

“选取框”工具,在画布上选择一定大小的区域。

4.使用

“油漆桶”工具,选择一种灰色。

5.使用“油漆桶”工具在选定区域单击,填充后的效果如图。


Fireworks MX教程(二十三)创建简单变换图象

简单变换图象就是直接把第一帧上的图像替换为它下面第二帧的图象。在创建这个效果前,最好准备两张相同大小的图片。
1.使用“指针”工具选中图片,选择“编辑”>“插入”>“切片”在图象或对象上方创建切片。

2.单击“新建 / 复制帧”按钮在“帧”面板中创建一个新帧。

3.打开另一幅图片,使用“剪切”和“粘贴”命令把这幅图片粘贴到创建的新帧中。

4.在“帧”面板中选择“第 1 帧”,本例中因为切片重叠,所以可以选择任意一帧。将指针放在行为手柄上方,指针更改为手柄,将行为手柄拖到切片的左上边缘。

5.出现一条从切片中心延伸到左上角的蓝色行为线,同时打开“交换图象”对话框。在“交换图象自”弹出菜单中,选择要交换的图象所在的帧,这里选择帧2。

6. 简单变换图象做好了,主要起作用的是javascript代码,所以必须导出为html格式。选择“文件”/“导出预览”,在“保存类型”中选择“HTML和图像”。

7. 在Dreamweaver中,单击“Fireworks HTML”按钮,选择之前导出的html文件即可。

8. 最终的效果:



Fireworks MX教程(二十四)制作替换动画


制作替换动画的原理:把一个GIF格式的图片变成切片,添加“交换图象行为”,选择一个GIF动画文件。
1.打开要作为切片的图象,实例中把一个JPG格式的图片改成GIF格式,背景透明。


2.在优化面板中选择GIF格式,Alpha透明。


3.选中图片,执行“编辑”/“手稿”/“切片”命令,把图片变成切片。

4.打开“行为”面板,给切片增加“交换图象”动作。

5.在“交换图象”对话框中,不要选择“预载图象”,点击图象文件右边的文件夹图标。

6.在打开对话框中,选择事先做好的GIF动画文件。GIF动画文件尺寸应该和切片的尺寸一样。

7.到这里替换动画就做好了。

8.在导出对话框中,保存类型选择“HTML和图象”。

最终效果:


3.选中图片,执行“编辑”/“手稿”/“切片”命令,把图片变成切片。

4.打开“行为”面板,给切片增加“交换图象”动作。

5.在“交换图象”对话框中,不要选择“预载图象”,点击图象文件右边的文件夹图标。

6.在打开对话框中,选择事先做好的GIF动画文件。GIF动画文件尺寸应该和切片的尺寸一样。

7.到这里替换动画就做好了。

8.在导出对话框中,保存类型选择“HTML和图象”。

最终效果:


[ 本帖最后由 行云 于 2006-6-16 10:00 编辑 ]
本帖最近评分记录
  • 甜柠檬 财富 +14 精品文章 2006-10-6 00:45
  • eric007 财富 +40 辛苦了 2006-6-20 21:02
  • 烧包少爷 财富 +16 我很赞同 2006-6-16 10:24
突然之间很舍不得大家!!晓风的朋友们,再会了!!

TOP

辛苦了,很基础的东西,适合新手,谢谢支持!

TOP

好东西!支持一个~
【冰石门】副门主!★★股市大盘走势有奖竞猜★★

TOP

还不错了.比较全面了

TOP

发新话题