Fireworks制作网站动态banner教程

资讯 驱动中国 若水 2,785 次阅读 0 条评论
分享 Q

效果图:

Fireworks制作网站动态banner教程(图一)

 


本文涉及知识点:
1、fw创建gif动画的基本过程;
2、fw帧动画中共享层的使用;
3、fw形状渐变动画的制作;
4、fw缩放动画的制作;
5、fw帧帧动画的制作;
...
第一步:做背景层
大家知道,大多动画的背景图片都是固定的,变化的只是动画里的文字阿、图标等等。我们可以事先将背景部分做好,然后将其设为共享层,其他帧里我们就不用再复制背景层了。
新建468*60文档;

Fireworks制作网站动态banner教程(图二)


用矩形工具画一个矩形,大小同画布;

Fireworks制作网站动态banner教程(图三)

Fireworks制作网站动态banner教程(图四)


将填充颜色改为线性渐变,调整颜色如下;

Fireworks制作网站动态banner教程(图五)

Fireworks制作网站动态banner教程(图六)

 

通过“文件”菜单里的“导入”功能,将修饰图片导入场景;

Fireworks制作网站动态banner教程(图七)

并调整布局及搭配,结果如下图:

Fireworks制作网站动态banner教程(图八)


将层面板中层1设置为共享层,并新建层2;

Fireworks制作网站动态banner教程(图九)

Fireworks制作网站动态banner教程(图十)


选择层2,场景中输入“海量”两个字,大小为120px,调整透明度为60%;调整颜色及倾斜角度;

Fireworks制作网站动态banner教程(图十一)

Fireworks制作网站动态banner教程(图十二)

 

在帧面板中讲帧1鼠标拖拉之新建图标,复制创建帧2,并将文字大小设置为44;

Fireworks制作网站动态banner教程(图十三)

Fireworks制作网站动态banner教程(图十四)

 


在画布中输入“免费”,在滤镜的“阴影和光晕”中选择“发光”;

Fireworks制作网站动态banner教程(图十五)


调整参数如下:

Fireworks制作网站动态banner教程(图十六)


再对“免费”两个字进行模糊处理:在滤镜的“模糊”中选择“缩放模糊”;

Fireworks制作网站动态banner教程(图十七)


调整参数如下:

Fireworks制作网站动态banner教程(图十八)

 

复制该帧,并将新帧中的“免费”的模糊参数修改如下:

Fireworks制作网站动态banner教程(图十九)


再复制该帧,删除“免费”的模糊滤镜。

Fireworks制作网站动态banner教程(图二十)

 


复制帧,添加输入“教”;
复制帧,添加输入“程”;
重复复制帧,添加输入“.”
实现如下图的效果:

Fireworks制作网站动态banner教程(图二十一)

Fireworks制作网站动态banner教程(图二十二)#p#分页标题#e#

Fireworks制作网站动态banner教程(图二十三)


...

Fireworks制作网站动态banner教程(图二十四)


新建帧(直接点新建帧图标,不用复制帧的操作),输入“尽在”,导入图片,调整位置、文字字体等,如下:

Fireworks制作网站动态banner教程(图二十五)


重复复制帧,调整图片位置:

Fireworks制作网站动态banner教程(图二十六)

Fireworks制作网站动态banner教程(图二十七)

 

输入“Www.ITGao.Com”,并使用发光滤镜:

Fireworks制作网站动态banner教程(图二十八)

Fireworks制作网站动态banner教程(图二十九)

版权声明:本文由驱动中国整理发布,转载需注明出处与原文链接。如有疑问请联系 editor@qudong.com
本文价值 成为第一个评分的人
登录后为本文打分
网友评论0 条评论
正在回复 的评论取消
评论加载中…
🔐

登录后参与互动

评论、点赞均可赚积分
连续签到、邀请好友也有奖励 🎁

电脑端: 微信扫码登录 微信内: 一键登录

微信扫一扫

打开微信「扫一扫」,分享本文到朋友圈或好友