Fireworks网页设计综合实例7

2016-02-19 19:12 1 1 收藏

下面图老师小编要跟大家分享Fireworks网页设计综合实例7,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!

【 tulaoshi.com - fireworks教程 】

十一、 创建变形动画 

    给一个网站添加动画对于访问者的时间和金钱都是一个不小的花销,因此在添加您的动画前,一定要先考虑好如下问题:动画能否增进您的信息传达力度,访问者下载和播放动画是否迅速、方便,是否有足够的组成动画的内容和资源。尽管网络动画及其传递方式正在不断的发生改变,但传统的GIF动画依然有着不可忽视的优势,我们在这里介绍一下创建GIF动画的两种途径。 

1、 在层面板新建一个Logo层,将其置于Web Layer层下方。 
2、 我们需要将背景层修改为一个共享图层,打开层面板,切换到背景层,在弹出菜单中选择Share This Layer,将背景层共享,此层上的内容将在所有帧都可见,此层的后面将出现一个共享图标,如下图:


3、 切换到Logo层,在文档的右上角创建www.karsong.com文字。 
4、 按F8将其转换为图形符号Graphic Symbol。 
5、 打开Effect面板,对此符号的实例添加红色Glow效果,如下图所示:


6、 选中此实例,在右键弹出菜单中执行EditClone,复制出一个新的实例,并且带有相同的Glow特效。 
7、 在Effect面板修改第二个实例的特效,将其改为黄色,并改变Glow的范围和大小,如下图:


8、 选择这两个实例,在右键弹出菜单中执行SymbolsTween Instances创建变形动画,设定插入帧数为6帧,并勾选Distribute to Frames分布到帧,如下图所示:


9、 打开Web Layer图层的显示,在此动画位置创建一个切片。 
10、 打开Optimize优化面板,设定此切片的类型为Animated GIF,并设定颜色数为32色,如下图所示:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com)


11、 此动画完成,您可以打开帧面板设定动画帧之间显示的时间。 

十二、 创建实时动画Live Aniamation 

4新增了一种实时动画创作方式,这种方式可以快速的创建一个动画符号,生成的动画具有即时编辑性能,及您可以在任意时间修改形成动画的各种元素属性。 

1、 在文档左上角新增一个切片,点击工具面板最下方的 按钮关闭切片显示[点击旁边的 按钮可以打开切片显示]。 
2、 在层面板中切换到Logo层,在刚才的左上角位置处输入文字“Karsong”。 
3、 选择此文字对象,按F8快捷键将其转换为一个动画符号,将其命名为“Animate Logo”,符号类型为“Animation”,如下图所示:


4、 在弹出的设置窗口中设置插入帧数为8,并进行如下设置:

    

十一、 创建变形动画 

    给一个网站添加动画对于访问者的时间和金钱都是一个不小的花销,因此在添加您的动画前,一定要先考虑好如下问题:动画能否增进您的信息传达力度,访问者下载和播放动画是否迅速、方便,是否有足够的组成动画的内容和资源。尽管网络动画及其传递方式正在不断的发生改变,但传统的GIF动画依然有着不可忽视的优势,我们在这里介绍一下创建GIF动画的两种途径。 

1、 在层面板新建一个Logo层,将其置于Web Layer层下方。 
2、 我们需要将背景层修改为一个共享图层,打开层面板,切换到背景层,在弹出菜单中选择Share This Layer,将背景层共享,此层上的内容将在所有帧都可见,此层的后面将出现一个共享图标,如下图:


3、 切换到Logo层,在文档的右上角创建www.karsong.com文字。 
4、 按F8将其转换为图形符号Graphic Symbol。 
5、 打开Effect面板,对此符号的实例添加红色Glow效果,如下图所示:


6、 选中此实例,在右键弹出菜单中执行EditClone,复制出一个新的实例,并且带有相同的Glow特效。 
7、 在Effect面板修改第二个实例的特效,将其改为黄色,并改变Glow的范围和大小,如下图:


8、 选择这两个实例,在右键弹出菜单中执行SymbolsTween Instances创建变形动画,设定插入帧数为6帧,并勾选Distribute to Frames分布到帧,如下图所示:


9、 打开Web Layer图层的显示,在此动画位置创建一个切片。 
10、 打开Optimize优化面板,设定此切片的类型为Animated GIF,并设定颜色数为32色,如下图所示:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com)


11、 此动画完成,您可以打开帧面板设定动画帧之间显示的时间。 

十二、 创建实时动画Live Aniamation 

4新增了一种实时动画创作方式,这种方式可以快速的创建一个动画符号,生成的动画具有即时编辑性能,及您可以在任意时间修改形成动画的各种元素属性。 

1、 在文档左上角新增一个切片,点击工具面板最下方的 按钮关闭切片显示[点击旁边的 按钮可以打开切片显示]。 
2、 在层面板中切换到Logo层,在刚才的左上角位置处输入文字“Karsong”。 
3、 选择此文字对象,按F8快捷键将其转换为一个动画符号,将其命名为“Animate Logo”,符号类型为“Animation”,如下图所示:


4、 在弹出的设置窗口中设置插入帧数为8,并进行如下设置:

    


5、 拖动生成的动画符号中心的小红点,将其向右拖动到适当位置,注意不要将其拖出刚才创建的切片范围之外。


6、 打开优化面板Optimize设定此切片的类型为“Animated GIF”,颜色数为32,如下图所示:

 

    

来源:https://www.tulaoshi.com/n/20160219/1620284.html

延伸阅读
标签: 设计
总有人在那里炫耀自己的ps(photoshop)技术,好象是平面就要用ps做,结果很多做网页的设计师也用ps做平面图然后切割导图,再做网站,今天我就来说说用fireworks一样可以做出好的网页设计,只要你有心! 先看最终效果图: 总有人在那里炫耀自己的ps(photoshop)技术,好象是平面就要用ps做,结果很多做网页的设计师也用ps做平面图然后切...
完成图: 步骤: 1.画布:200×200,点椭圆工具,按住shift画一个正圆,在属性面板中将圆的宽和高均设为96,边缘消除锯齿,颜色为#870d94,如图1; 图1 2.选中正圆,在原位复制一个(ctrl+c,ctrl+v),颜色改为#333333,用矩形工具画一个长度大于此圆的矩形,如图2位置摆放。按住shift,选中圆形和矩形,修改-组合路径-打孔,效...
网页设计中我们会用到很多种样式的分隔线,下面我们就来看看在Fireworks中设计网页虚线有哪些妙招。 方法一、用Fireworks中自带的虚线样式 Fireworks中自带的虚线样式有:三条破折线、加粗破折线、双破折线、基本破折线、实边破折线、点状线。 在网页设计中,我通常的用的是实边破折线。因为它和网页CSS中border的dotted、...
如何 设计 完美勾引用户点击的按钮好的按钮设计一定会是醒目且能勾引用户眼球的。以下是好的按钮设计必不可少的5个特征: 1、颜色 颜色一定要能与平静的页面相比更加与众不同,因此它要更亮而且有高对比度的颜色。 图1 2、位置 它们应当座落于用户期望更容易找到它们的地方。产品旁边、页头、导航的顶部右侧这些都...
当我们谈论到设计,图片就是设计元素之中最不可少的一个元素。小编今天在这里跟大家分享的并不是实体摄影的趋势,而是2015年在网页设计中运用图片的趋势。 有些趋势是显而易见的,有些就相比而言不那么容易被发现。当我观察和分析了大量的优秀作品和网页案例,发现图片的巧妙运用总是有一些共同点的。当你看完这篇文章的分析和案例...

经验教程

772

收藏

21
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部