iLeichun

当前位置:首页Fireworks

Fireworks“外发光”特效的另类妙用

分类:Fireworks  来源:网络  时间:Aug 26, 2010 11:54:45 PM

  Fireworks软件的“外发光”是常用的一种特效,如果灵活运用可以解决不少平面设计中的小问题。

  一、用Fireworks“外发光”特效消除图像边缘锯齿

Fireworks“外发光”特效的另类妙用

  二、用Fireworks“外发光”特效为文字描边

Fireworks“外发光”特效的另类妙用

  三、用Fireworks“外发光”特效羽化图像

Fireworks“外发光”特效的另类妙用

  四、用Fireworks“外发光”特效表现水晶按钮的底光效果

Fireworks“外发光”特效的另类妙用

Fireworks绘制矢量风格精致手提纸袋

分类:Fireworks  来源:网络  时间:Aug 26, 2010 11:54:22 PM

Fireworks绘制矢量风格精致手提纸袋

Fireworks打造精致个性的Vista样式按钮

分类:Fireworks  来源:网络  时间:Aug 26, 2010 11:53:57 PM

第一步

第一步

第二步

第二步

第三步

第三步

第四步

第四步

EyeCandy滤镜打造旋转立体四叶草动画

分类:Fireworks  来源:网络  时间:Aug 26, 2010 11:52:42 PM

  完成效果如图。

  Fireworks打造旋转的四叶草

  效果图

  Fireworks打造旋转的四叶草

  Png图

  1. Fireworks中新建一个150*100px大小的画布,用“星型工具”画一个四叶草图案,为它加一个“纯色阴影滤”镜。

  按F8转换为“动画”元件,设为用21帧转过360度。不要忘了在帧面板中删除掉帧21。然后选中帧1。

  Fireworks打造旋转的四叶草

  图1

  2. 这一步是核心效果。为这个动画实例添加一个EyeCandy4.0的“运动痕迹”滤镜,参数就自由选择了。

  按下播放按钮就可以看到滤镜是如何模拟到3d效果的了。

  Fireworks打造旋转的四叶草

  图2

  3. 最后新建一个层,放标题和签名,将该层置于顶部,钩选“共享交叠帧”。

  一个仿3D动画的gif就3步被K.O.了。

  Fireworks打造旋转的四叶草

Fireworks绘制水晶五角星

分类:Fireworks  来源:网络  时间:Aug 26, 2010 11:52:02 PM

Fireworks绘制水晶五星_天极软件整理

Fireworks绘制水晶五星_天极软件整理

Fireworks绘制水晶五星_天极软件整理

Fireworks绘制水晶五星_天极软件整理

Fireworks绘制水晶五星_天极软件整理

Fireworks绘制水晶五星_天极软件整理

Fireworks绘制水晶五星_天极软件整理

Fireworks绘制水晶五星_天极软件整理

Fireworks绘制水晶五星_天极软件整理

Fireworks绘制水晶五星_天极软件整理

Fireworks绘制水晶五星_天极软件整理

Fireworks绘制水晶五星_天极软件整理

Fireworks绘制水晶五星_天极软件整理

Fireworks绘制水晶五星_天极软件整理

Fireworks绘制水晶五星_天极软件整理

Firework轻松绘制特殊切角图形

分类:Fireworks  来源:网络  时间:Aug 26, 2010 11:51:32 PM

 Firework小技巧轻松绘制特殊切角图形_天极软件整理

Fireworks巧用素材制作石头字效果

分类:Fireworks  来源:网络  时间:Aug 26, 2010 11:50:48 PM

  1、素材:烂墙壁照片一张以及胶片照片一张。

  

  素材

 

  

  素材

  2、Fireworks中新建500*350画布,插入背景图片。然后调整亮度和色调如下。

  

Firewoks打造液体金属表面

分类:Fireworks  来源:网络  时间:Aug 26, 2010 11:49:40 PM

效果如下:

  Firewoks打造液体金属表面特效_天极设计在线整理转载

  1、Fireworks中新建20*50的矩形,黑白线性填充,羽化10:

  Firewoks打造液体金属表面特效_天极设计在线整理转载

  2、选择笔触选项:

  Firewoks打造液体金属表面特效_天极设计在线整理转载

  3、笔触选项参数如下,再点击高级,选择形状,参数如下:

  Firewoks打造液体金属表面特效_天极设计在线整理转载

  4、选择内侧阴影,参数如下:

  Firewoks打造液体金属表面特效_天极设计在线整理转载

  5、选择曲线,参数如下:

  Firewoks打造液体金属表面特效_天极设计在线整理转载

Fireworks滤镜巧绘极光字

分类:Fireworks  来源:网络  时间:Aug 26, 2010 11:49:12 PM

  第一步:在Fireworks中新建文件,大小自定,在这里我建的是(531*433)。背景为黑色,输入字体A(字体为ARIAL BLACK),颜色为(白色),选中字体A,将字体转换为路径(CTRL+SHIFT+P)。充填:(空),描边:大小(6),描边颜色:(白色),描边种类:(1素象柔化),边缘为(0)。得到如下效果:

  Fireworks绘制极光特效字1_天极设计在线

  第二步:选中字体,再选“效果--->Aline skin splat LE---->Edges”,属性如图:

  Fireworks绘制极光特效字2_天极设计在线

  得到如下效果:

  Fireworks绘制极光特效字3_天极设计在线

  第三步:选中字体点选“效果--->EYE CANDY4000---->动作轨迹滤镜”,属性如下图:

  Fireworks绘制极光特效字4_天极设计在线

  得到效果如下:

  Fireworks绘制极光特效字5_天极设计在线

  第四步:复制4个做好的字体效果,(选中字体CTRL+C)粘贴(CTRL+V),把复制出来的字体效果里的动作轨迹滤镜里面的角度属性分别更改为(90)(180)(0)度。得到效果如图:

  Fireworks绘制极光特效字6_天极设计在线

  第五步:将4个不同方向的运动轨迹字体效果合并在一起,得到效果如下图:

  Fireworks绘制极光特效字7_天极设计在线

  最后在给效果做一个前景效果点缀一下。制作方法是为第一步修改一下字体的描边属性如下图。也可以直接复制做好的效果后,在把里面的滤镜效果去掉。

  Fireworks绘制极光特效字8_天极设计在线

  得到效果如下

  Fireworks绘制极光特效字9_天极设计在线

  最后把所有效果合并在一起就完成了。要是想要给图片上色,请将所有效果图组合(CTRL+G)在一起在,用色相饱和度来调整。上色效果图:

  Fireworks绘制极光特效字10_天极设计在线

  以上教程纯属提供思路,大家还可以试一下其他角度的变化,可以得到更多的效果。原文链接
 

  Png源图:

  Fireworks绘制极光特效字11_天极设计在线

Fireworks CS3切片工具

分类:Fireworks  来源:网络  时间:Aug 26, 2010 11:48:36 PM

  在Fireworks或者是PhotoShop中设计好的网页效果图,需要导入到Dreamweaver中进行排版布局。在导入到Dreamweaver之前,可以使用Fireworks对效果图进行切片和优化,然后才能够把优化好的切片输出到Dreamweaver的站点中进行布局。切片的目的是为了获得图像素材,也就是说能够通过写XHTML语言脚本实现效果的部分,就不需要切片,而必须用图像的地方,则一定要切片。下面通过一个实例来给大家介绍一下Fireworks CS3的切片和优化功能,具体操作步骤如下:

  1. 在Fireworks CS3中打开制作好的网页设计效果图,如图所示。

  Fireworks CS3切片工具的使用

  在Fireworks CS3中打开制作好的效果图

  【说明】效果图中的辅助线是在效果图设计之初就添加完毕的。

  2. 选择Fireworks CS3中的【切片】工具,对效果图进行切片,切片完成后的效果如图所示。

  Fireworks CS3切片工具的使用

  切片完成后的效果

  【说明】切片的时候,尽量保证所有的切片和被切片的图像尺寸一致,不要切片大于或者小于被切片的图像,同时切片之间尽量保持不要重叠。

  3. 几个特别需要注意的地方来详细给大家说一下,首先是在内容区域,文本的前方有小的黑色三角箭头,这是用图像来制作的,所以必须要切片,但是由于所有文本前方的箭头图标都是一样的,所以只需要切一张即可。如图所示。

  Fireworks CS3切片工具的使用

  切片小图标

  4. 同样的道理,在这个效果图中,有很多的圆角效果,但是在切片的时候同样的效果仍旧只切片一张即可。如图所示。

  Fireworks CS3切片工具的使用

  切片圆角图像

  5. 切片完成后,选择Fireworks CS3中的【2幅】窗口,如图1-27所示。在这个窗口的左侧,是可编辑的原图,而在这个窗口的右侧,则是优化以后的图像。在这个窗口的下方,可以看到详细的关于每一个切片的文件量和下载时间等信息。

  Fireworks CS3切片工具的使用

  Fireworks的【2幅】窗口

  6. 按快捷键【F6】,打开Fireworks CS3的【优化】面板,使用【指针】工具,在【2幅】窗口的左侧依次选择切片,然后在【优化】面板中进行相应的优化操作,最终优化后的图像效果,可以在【2幅】窗口的右侧进行观察,如图所示。

  Fireworks CS3切片工具的使用

  对切片进行优化