当前位置:首页>网络学院>网页制作>Fireworks教程>文章内容

Fireworks制作动态banner流程

[ 来源:www.it55.com | 作者: | 时间:2007-07-12 | 收藏 | 推荐 ] 【

itgao老总是我朋友,前几天要我帮忙做个banner,拖到今天终于有点不好意思了,动手!
好久没有用fw做动画了,有些生疏。有不合适的地方希望大家不要扔鸡蛋砸我,要扔就扔石头,一把砸死我得了,我这人脸皮薄,呼呼。
好,废话不多说,咱们开始吧:
效果图: 45398 www.it55.com it55学习IT知识,享受IT生活 4dfkjn

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图一) it55.com


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

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图二) http://www.it55.com/


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

http://www.it55.com/

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图三) it55.com

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图四) vd;k;l www.it55.com rdfg


将填充颜色改为线性渐变,调整颜色如下; http://www.it55.com/

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图五) http://www.it55.com/

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图六) 免费资源www.it55.com


免费资源www.it55.com


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

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图七)

www.it55.com在线教程


并调整布局及搭配,结果如下图: IT资讯之家 www.it55.com

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图八)

45398 www.it55.com it55学习IT知识,享受IT生活 4dfkjn


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

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图九)

45398 www.it55.com it55学习IT知识,享受IT生活 4dfkjn

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图十)

www.it55.com


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

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图十一) sflj www.it55.com kg^&fgd

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图十二)

www.it55.com


  it55.com


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

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图十三)

it55.com

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图十四)

http://www.it55.com/


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

it55.com

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图十五)

it55.com


调整参数如下:

www.it55.com

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图十六) www.it55.com


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

免费资源www.it55.com

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图十七) 免费资源www.it55.com


调整参数如下:

vd;k;l www.it55.com rdfg

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图十八) IT资讯之家 www.it55.com


  it55.com


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

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图十九)

IT资讯之家 www.it55.com


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

it55.com

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图二十)

45398 www.it55.com it55学习IT知识,享受IT生活 4dfkjn


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

Fireworks<a href='/html/xueyuan/wangyezhizuo'><u>制作</u></a><a href='/html/news/xingyedongtai'><u>动态</u></a>banner流程(图二十一) 免费资源www.it55.com

(阅读次数:

返回顶部
共2页: 上一页 1 [2] 下一页  
上一篇:美食糕点矢量素材图片0064   下一篇:没有了

网友评论

[以下评论为网友观点,不代表本站。请自觉遵守互联网相关政策法规,所有连带责任均有评论者自负。]
[不超过250字]