banner制作过程

合集下载

banner制作过程

banner制作过程

Fireworks轻松绘制banner广告Banner,一般翻译为旗帜广告、横幅广告等。

Banner是网站用来作为盈利或者是发布一些重要的信息的工具。

Banner在设计上应该要做到制作美观、方便点击、与网页协调和整体构成合理。

本文中我们用Fireworks来制作一个变色的Banner,从中我们可以掌握符号(symbol)的使用、补间实例动画(tween instance)的制作、层(Layers)和帧(Frames)的基本用法,结尾进行精彩的技巧总结。

文章末尾提供原文件供大家下载参考。

完成效果如下:Banner制作具体过程(1)首先我们新建一个大小为468×60的文件,并设置画布颜色为黑色,如图1所示。

图1 新建一个文件(2)然后我们导入一个要进行变色效果的位图文件,如图2所示。

当然我们同样可以使用绘图工具绘制这个图像,这里是为了方便讲解选用外部图像的。

图2 导入位图(3)选中该幅图像按Ctrl+Shift+D两次,克隆图像两次。

然后选中其中的一幅图像,点击“Filters”,选择“Adjust Color”>>“Hue/Saturation”,这时在弹出对话框中调整色调的值,如图3所示。

同样方式调整另外一幅图像的颜色,最终得到图4所示的图像效果。

图3 调整色调图4 对克隆对象实行变色效果后的图像(4)选中其中的一个图片如左边的紫色图片,按快捷键F8或者右键在弹出菜单中选择Convert to Symbol准备将图像转换为符号。

在弹出的对话框内为符号命名并选择动画符号(Animation),如图5所示。

图5 将图像转换为符号(5)点击“OK”之后会弹出动画设置的对话框,如图6所示。

我们暂时对它不做设置。

图6 动画设置对话框(6)单击“OK”,这时回到工作区中,我们在画布上会看到带箭头的虚线边框的符号,如图7所示。

使用同样方式将另外两幅图像转换为符号,并分别命名为Symbol 2和Symbol 3,然后将三个符号都删除掉。

黑马程序员UI教程:钻戒banner制作

黑马程序员UI教程:钻戒banner制作

钻戒banner制作最终效果图如下:
1.新建画布750*400
2.调进来红色丝绸的素材,ctrl+T旋转90°
3.将素材ctrl+U,调成蓝色,副本一个,然后将混合选项改为叠加
4.新建图层,用画笔把四周喷成黑色,做出中间亮,四周暗的效果
5.拖进来戒指的素材,摆放在左边合适的位置
6.做出投影羽化的效果,及下边反光的效果
7.添加光效,新建图层,填充黑色,滤镜——渲染——镜头光晕(105毫米聚焦),添加蒙版,将多余的地方处理
8.右边文字,添加图层样式(渐变叠加)
9.文字做出投影效果
10.文字下面画一个矩形选框的形状
11.添加文字及素材,注意居中对齐
12.左上角画一个蓝色圆角矩形,作为标志形状
13.在蓝色圆角矩形内再添加文字及形状
14.将标志添加投影效果
15.将蓝色背景添加调整层,增强明暗对比
16.将图层编组,完整最终效果
最终效果图。

动态Banner的制作

动态Banner的制作

课题十 PHOTOSHOP在网页中的应用
——动态Banner的制作
操作步骤如下:
1.打开素材文件Banner.psd,在其
文件图标上单击鼠标右键,从弹出的快
捷菜单中选择使用ImageReady编辑命
令,即用ImageReady直接打开
Banner.psd。

2、在ImageRead中“动画”面板底
部单击新建按钮,复制第1帧的内容并
创建第2帧。

3、在“图层”面板中,隐藏图层“2”
的内容,显示图层“3”的内容。

4、在“动画”面板底部单击新建按钮,
将第2帧复制为第3帧,设置图层“3”
隐藏,图层“1”显示。

5、在“动画”面板中,选中所有的
帧(shift),设置所有帧的“延迟”值为0.2。

6、在“动画”面板中,选
中第1帧,单击“动画”面板
底部的过渡按钮,设置透明过
渡效果。

7、用同样的方法,对第2
帧、第3帧;第3帧、第1帧
之间也设置透明过渡效果。

最终效果图如下(共18帧,其中第1、7、13是3个关键的帧):
8、按住CTRL键的同时,点击第1、7、13帧,设置他们的延迟时间为2秒。

9、按shift+Ctrl+Alt+S,弹出“将优化结果存储为”对话框,将动态图片保存在桌面,并用“学号+姓名”来命名。

制作完成。

源文件不用保存。

作业提交只需提交GIF格式文件。

无基础制作电商淘宝BANNER

无基础制作电商淘宝BANNER

无基础制作电商淘宝BANNER首先构图什么是构图?百度百科里是这么解释的:构图是一个造型艺术术语,即绘画时根据题材和主题思想的要求,把要表现的形象适当地组织起来,构成一个协调的完整的画面。

在设计当中构图的重要性可谓十分重要,有一句话说的好:确定好了构图板式,也就成功了一半。

电商BANNER也不例外,首先我们来分析一下它的组成部分:一张电商BANNER基本有3部分组成,产品、背景、文案。

常见的板式有3种,左文右图、左图右文,两边图中间文,下面通过5个案例给大家一一说明点击使用模版1,左文右图式左文右图式的文案排版非常经典,主标题字体粗,副标题字体细,上下主次分明,形成对比。

文案四四方方构架非常稳重,平衡。

点击使用模版2,左图右文式左图右文式的排版也是淘宝BANNER中十分常见的,字体也是上粗下细,上大下小。

下面的促销部分突出价格。

3,两边图中间文字的排版在淘宝BANNER的设计中,也经常用文字在中间的排版,产品图一般是一边近景另外一边是远景,产生对比和呼应。

同时文字在中间使得信息更加突出,让客户第一眼就能看到。

点击使用模版4,半透明框框的排版方法在背景图比较复杂的情况下,文字直接打上去会显得太乱,所以我们可以直接画一个半透明的框框,如图所示。

然后再在里面排文案,同时这样也可以增加画面的层次感。

点击使用模版5,斜切式构图在淘宝BANNER设计中,斜切式构图会让画面显得时尚,动感活跃,但是画面平衡感不是很好控制,一般斜切式的文案倾斜角度最好不要超过30度,不然得歪着头阅读。

另外根据阅读习惯,文字一般是往右上方的倾斜,文字这样有一种上升感关于配色刚开始做设计遇到的另外一个难题就是配色了,关于配色的技巧有很多,常见的有对比色,临近色,冷暖色调搭配多种方式,关于配色知识有很多,没有思路的时候大家可以去百度找一些配色色谱网站,还可以利用一些小工具如Kuler等。

我这里说一个最简单的方式,也是一种最快的方法。

就是直接冲产品图上取色。

第25章 制作网页Banner

第25章  制作网页Banner

25.2 制作下雪Banner
本实例要制作的下雪效果,主要通过使用绘图工具制作 雪花图形,然后使用雪花图形制作下雪的动画,其具体 显示效果和相关内容如下所示.
25.2.1 制作雪花动画
图像的显示效果主要使用绘图工具,其制作步骤如下所 示.
25.2.2 制作动画
制作完雪花动画后,将动画拖放到背景上,完成动画的 制作,其制作步骤如下所示.
第25章 制作网页Banner
本章主要讲解制作网页Banner.Banner是指居于网页头 部,用来展示站点主要宣传内容,站点形象或者广告内 容的部分.Banner部分的大小并不固定.本章中制作的 网页Banner,包括制作家居Banner,下雪Banner,产品 Banner等.
25.1 制作家居Banner
25.3 制作产品Banner
本实例主要使用收集的素材图片和产品图片,结合文字 效果制作,其具体显示效果和相关内容如下所示.
25.4 专家总结
动画效果的网页Banner,在网页中很常见.在制作动画 Banner的时候要注意主题的突出,使浏览者能够很容易 地把握动画内容的主旨,同时要注意动画视觉效果,要 能够给浏览者留下深刻的印象.在制作网页Banner的时 候,要注意使用图片文件的数量,避免制作的动画占用 的空间过大,发生加载费时的问题.

本实例要制作的效果是使用上下拉帘的方式显示家居图像,然后显示图像 上的文本内容,其具体显示效果和相关内容如下所示.
25.1.1 制作图像显示效果
图像的显示效果主要使用拉帘的效果,由中间向上下展开,显示隐藏在拉 帘后面的图像内容,其制作步骤如下所比较简单,由于本实例中要使用的发光 文字是在Photoshop中制作的,所以只需要制作文字的 显示效果即可,其制作步骤如下所示.

制作横幅需要哪些操作流程

制作横幅需要哪些操作流程

制作横幅需要哪些操作流程
制作横幅是一种常见的广告宣传手段,可以吸引人们的注意力,传达信息。

制作横幅需要经过一系列的操作流程,包括设计、选择
材料、印刷等步骤。

首先,制作横幅的第一步是设计。

设计是横幅制作的关键环节,好的设计能够吸引人们的眼球,传达信息。

在设计横幅时,需要考
虑横幅的尺寸、颜色、字体、图片等元素,确保整体效果美观大方。

设计师可以利用设计软件进行设计,也可以根据客户的要求进行定
制设计。

接下来,选择材料是制作横幅的重要一环。

横幅的材料选择直
接影响到横幅的质量和使用寿命。

常见的横幅材料有布料、塑料、
纸张等,不同的材料有不同的特点和用途。

在选择材料时,需要考
虑横幅的使用环境、持续时间等因素,选择适合的材料。

然后,进行印刷是制作横幅的关键步骤。

印刷是将设计好的图案、文字等内容印刷到横幅材料上的过程。

在印刷时,需要选择合
适的印刷设备和技术,确保印刷效果清晰、色彩鲜艳。

印刷完成后,还需要进行后续的加工处理,如裁边、装裱等,使横幅更加美观。

最后,横幅制作完成后,需要进行安装和悬挂。

安装横幅时,
需要选择合适的位置和方式,确保横幅能够被人们看到。

横幅的悬
挂方式有多种,可以使用吊绳、挂钩等工具进行悬挂。

在悬挂时,需要注意横幅的平整度和稳固性,避免出现松动或掉落的情况。

总的来说,制作横幅需要经过设计、选择材料、印刷、安装等一系列操作流程。

只有每个环节都做到位,才能制作出高质量的横幅,达到预期的效果。

希望以上内容对您有所帮助。

宣传栏制作工艺流程

宣传栏制作工艺流程宣传栏制作工艺一、准备工作•确定宣传栏的设计样式和尺寸,包括宽度、高度和颜色等要素。

•收集素材,如文字、图片、图标等,并进行优化处理,确保清晰度和质量。

•准备设计软件,如Adobe Photoshop、Illustrator等,用于进行宣传栏的设计和制作。

二、设计与布局•使用设计软件打开新建文件,并设置宣传栏的尺寸和分辨率。

•进行宣传栏的整体布局,包括确定各个元素的位置、大小和排列方式。

•使用合适的字体、颜色和效果,设计宣传栏的标题、副标题和正文等文字内容。

•插入图片和图标,根据需要进行调整和编辑,以增强宣传栏的视觉效果。

三、排版与编辑•将设计好的宣传栏导出为图片或PDF格式,便于后续的编辑和排版。

•使用Markdown格式进行文本编辑,包括标题、段落、列表、表格等元素的添加和格式调整。

•添加链接和代码片段,以增加文章的互动性和可读性。

•检查文本内容的语法和格式错误,并进行相应的修正和调整。

四、发布与分享•根据需求选择适当的发布渠道,如微信公众号、博客、论坛等。

•将制作好的宣传栏文章上传至对应的发布平台,如Markdown编辑器或博客平台。

•定期分享宣传栏文章的链接到社交媒体平台,如微博、微信朋友圈等,以扩大文章的影响力。

•关注和回复读者的评论和反馈,以提升宣传栏文章的互动性和用户体验。

五、维护与更新•定期检查和更新宣传栏文章的内容,确保信息的准确性和时效性。

•跟踪宣传栏文章的阅读量和用户反馈,以进行优化和改进。

•根据需要进行宣传栏文章的重新设计和制作,以适应不同的宣传目标和市场需求。

•学习和掌握最新的设计技术和工具,以提升宣传栏文章的制作效率和质量。

以上是关于宣传栏制作工艺的详细流程,通过合理的设计与布局、文本编辑与排版,以及发布与分享等步骤,可以制作出具有吸引力和阅读性的宣传栏文章。

不断维护和更新宣传栏文章,将帮助提升品牌形象和传播效果,实现相关宣传目标。

六、评估与反馈•定期对已发布的宣传栏文章进行评估和分析,了解读者对文章内容和设计的反馈。

拓展实训:简单的Banner广告条的制作

强化拓展实训:简单的Banner广告条的制作制作的注意事项与大致步骤如下:注意:先在Photoshop中创建所需要呈现动画效果的图像原文件(包括动画制作需要的各个元素)。

但需要注意的是,静态元素不能与动态元素放置在同一层中,每个元素必须单独创建一个图层。

运动的元素可以放在不同的多个图层中。

1)新建一个文件,命名为“Banner.psd”,宽468像素,高60像素,使用#6699cc填充背景,打开“世界地图.psd”文件将其拖入到效果图中,调整位置,如图5-12所示。

图5-12 世界地图在Banner中的位置2)打开“小高尔夫球.psd”文件将其拖入到效果图中,调整其位置,然后使用文本输入工具输入“From the home of the Masters...”文本,如图5-13所示。

图5-13 小高尔夫球与文本在Banner中的位置3)连续点击“复制当前帧”按钮新增加5帧(目前共6帧),选择第1帧,然后选中“From the home of the Masters...”文本图层,设置文本图层的“不透明度”为0%,依次设置第2-6帧依次为20%,40%,60%,80%,100%(淡入效果,这种方式可以实现过渡动画),然后在第2、3帧将“小高尔夫球”图层移出图外,第4、5、6帧将不断移动小球的位置,这样就形成了前6帧的动画,如图5-14至5-19所示。

图5-14 第1帧的图像效果图5-15 第2帧的图像效果图5-16 第3帧的图像效果图5-17 第4帧的图像效果图5-18 第5帧的图像效果图5-19 第6帧的图像效果4)点击“复制当前帧”按钮新增加1帧(产生第7帧),在第7帧中隐藏“From the home of the Masters...”文本图层,同时将“地图”图层向右移动10像素(按住<Shift>键同时点击向右的方向箭头一次可以移动10像素),如图5-20所示。

图5-20 第7帧的图像效果5)点击“复制当前帧”按钮新增加1帧(产生第8帧),输入“To one of the most beautiful places in the world...”文本,然后设置不透明度为10%,将“小高尔夫球”图层向左移动10像素,将“地图”图层再次向右移动10像素,如图5-21所示。

banner的制作流程

banner的制作流程下载温馨提示:该文档是我店铺精心编制而成,希望大家下载以后,能够帮助大家解决实际的问题。

文档下载后可定制随意修改,请根据实际需要进行相应的调整和使用,谢谢!并且,本店铺为大家提供各种各样类型的实用资料,如教育随笔、日记赏析、句子摘抄、古诗大全、经典美文、话题作文、工作总结、词语解析、文案摘录、其他资料等等,如想了解不同资料格式和写法,敬请关注!Download tips: This document is carefully compiled by theeditor. I hope that after you download them,they can help yousolve practical problems. The document can be customized andmodified after downloading,please adjust and use it according toactual needs, thank you!In addition, our shop provides you with various types ofpractical materials,such as educational essays, diaryappreciation,sentence excerpts,ancient poems,classic articles,topic composition,work summary,word parsing,copy excerpts,other materials and so on,want to know different data formats andwriting methods,please pay attention!1. 确定 banner 的目标和受众明确 banner 的宣传目的,例如推广产品、活动、品牌等。

经典教程:photoshop制作网页banner广告设计

导言:在这篇Photoshop教程中,我将教给你如何制作一个专业的banner广告。

教程浅显易懂,你一定可以做得到的。

下面教程开始我们这篇教程的效果如下。

(图01)图01好了,让我们开始吧,在Photoshop中,新建一个文档,尺寸是500×300px,白色背景。

(图02)图02选择圆角矩形工具,圆角半径设为5px,在你的画布中画出一个圆角矩形,填充绿色#6d9e1e。

(图03)图03双击图层面板中的该图层缩略图,弹出图层属性面板,设置渐变叠加。

参数如下图。

(图04)图04 现在的效果应该是如下图的样子。

(图05)图05好了,这一步就完成了。

然后我们开始创建banner的“头部”。

按住Ctrl用鼠标左键单击图层缩略图,载入图层选区;点击矩形选区工具,消减掉下面一部分选区(按住Alt进行拖拽即可)。

剩余的部分填充白色,如下图。

(图06)图06点击Ctrl+D去掉选区。

改变这个图层的图层渲染模式为叠加,透明度设置为20%。

(图07)图07好了,进入下一步吧。

我希望在我们的头部中,有一个小的图形。

在网上我找到了一个小的钟表的图标,打开图片,把它拷贝到我们的文件中,按住Ctrl+T把图形变小一些。

(图08)用锐化工具稍微让图形清晰一些。

(图09)图09接下来,我们用文字工具写下了头部的标题。

(图10)在这里,我用的字体是Myraid Pro,白色。

但是实际上你可以选择你喜欢的字体。

打开图层属性面板,设置投影,参数如下图。

(图11)图11效果如下。

(图12)图12好了,头部的部分我们就已经完成了。

我希望给我们的banner添加更多的设计元素。

选择用户自定义形状,选择一个Photoshop里面自带的一个形状,如下图。

(图13)图13在我们的banner上面添加两个白色的形状。

(图14)图14合并两个形状到一个图层中。

好了,我们把banner外面的形状要删除。

如何做到这点呢?按住Ctrl左键点击形状的那个图层缩略图,载入选区。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

/2005/03/07/11764.htmlFireworks轻松绘制banner广告Banner,一般翻译为旗帜广告、横幅广告等。

Banner是网站用来作为盈利或者是发布一些重要的信息的工具。

Banner在设计上应该要做到制作美观、方便点击、与网页协调和整体构成合理。

本文中我们用Fireworks来制作一个变色的Banner,从中我们可以掌握符号(symb ol)的使用、补间实例动画(tween instance)的制作、层(Layers)和帧(Frames)的基本用法,结尾进行精彩的技巧总结。

文章末尾提供原文件供大家下载参考。

完成效果如下:Banner制作具体过程(1)首先我们新建一个大小为468×60的文件,并设置画布颜色为黑色,如图1所示。

图1 新建一个文件(2)然后我们导入一个要进行变色效果的位图文件,如图2所示。

当然我们同样可以使用绘图工具绘制这个图像,这里是为了方便讲解选用外部图像的。

图2 导入位图(3)选中该幅图像按Ctrl+Shift+D两次,克隆图像两次。

然后选中其中的一幅图像,点击“Filters”,选择“Adjust Color”>>“Hue/Saturation”,这时在弹出对话框中调整色调的值,如图3所示。

同样方式调整另外一幅图像的颜色,最终得到图4所示的图像效果。

图3 调整色调图4 对克隆对象实行变色效果后的图像(4)选中其中的一个图片如左边的紫色图片,按快捷键F8或者右键在弹出菜单中选择Convert to Symbol准备将图像转换为符号。

在弹出的对话框内为符号命名并选择动画符号(Animation),如图5所示。

图5 将图像转换为符号(5)点击“OK”之后会弹出动画设置的对话框,如图6所示。

我们暂时对它不做设置。

图6 动画设置对话框(6)单击“OK”,这时回到工作区中,我们在画布上会看到带箭头的虚线边框的符号,如图7所示。

使用同样方式将另外两幅图像转换为符号,并分别命名为Symbol 2和Sy mbol 3,然后将三个符号都删除掉。

图7 位图转换为动画符号的效果(7)我们再在Banner的左边加些图片并做适当调整使Banner更加生动,如图8所示。

图8 在Banner左边添加图片(8)接着我们点击“Window”菜单,分别把“Layers”、“Frames”和“Library”三个面板打开,为了我们将来创建动画服务。

在Layers(层)面板中选中Layer 1图层双击鼠标给图层命名为Background,并选中“Share across frames”复选框即共享这个图层,如图9所示。

图9 命名并共享图层(9)单击层面板右下角的按钮新建一个图层。

然后将如图10所示的Library(库)面板中的Symbol 1拖到画布中去,并放置到Banner的最右角,如图11所示。

同时记住它属性面板中的位置信息(X:282,Y:0)。

图10 Library面板图11 将符号拖到画布上(10)选中这个符号,然后点击“Modify”菜单,选择“Animation”>>“Settings...”,在弹出的动画对话框设置帧数为10,如图12所示。

图12 设置动画参数(11)单击OK,这时弹出图13所示的对话框,询问是否要自动添加帧。

图13 提示是否自动添加帧的对话框(12)选择OK这时候我们发现帧面板中出现了10个帧,如图14所示。

图14 帧面板中出现了新帧(13)接着使用同样方式新建一个图层3,并将Symbol 2拖到场画布中,符号的位置应当Symbol 1的位置一样,即都为X:282,Y:0。

点击“Modify”菜单,选择“Ani mation”>>“Settings... ”,在弹出的对话框设置动画同样是10帧,但是将透明度由0变到100,如图15所示。

图15 设置动画属性(14)点击“OK”即可。

我们这时候发现第一帧的层面板如图16所示。

图像效果如图17所示,一种渐变效果已经形成了。

图16 第一帧层面板图17 第一帧的效果(15)下面我们就来制作第二个渐变效果了。

也就是由红色变成绿色的了。

在帧面板中选择第10帧,这时我们发现画布右边的图像是红色的,如图18所示。

(16)单击帧面板右上角的按钮,在弹出菜单中选择“Duplicate Frame”,这时弹出了复制帧对话框,我们在其中选择After current frame单选框将复制的帧放置到当前帧之后,如图19所示。

图19 复制帧对话框(17)选择“OK”回到画布,出现第11帧的图像,这时后我们发现画布变为背景图了,如图20所示。

图20 第11帧图像(18)此时在层面板中选中Layer 2,将绿色的Symbol 3拖到画布中,在属性面板中设置与前面相同的XY坐标。

点击“Modify”菜单,选择“Animation”>>“Settings... ”,在弹出的对话框设置动画同样是10帧,这时同样会弹出图25所示的提示对话框。

选择“O K”这样新的帧就被添加到了帧面板之上了,如图21所示。

图21 新帧被添加到了帧面板之上(19)接着选择Layer 3,将红色的Symbol 2拖到画布中,在属性面板中设置与前面相同的XY坐标。

点击“Modify”菜单,选择“Animation”>>“Settings... ”,设置其不透明度由100到0,帧数为10,如图22所示,使得红色逐渐淡去,绿色显示出来。

图22 设置动画属性(20)接着便是由绿色再变回紫色的了。

同上,在帧面板中选中20帧,再添加一帧,选中Layer 3,将紫色符号拖到画布中,设置透明由0到100,选中Layer 2,拖入绿色符号,透明度不变,帧数也是10帧。

点击播放按钮浏览,发现速度快了一些,按住Shift 键选择帧面板上的所有帧,双击鼠标,设置帧延时为15/100 sec即可。

下面来为Banne r添加文字效果。

(21)在帧面板中选择第1帧,然后在层面板中选择Layer 3,接着新建一个Layer 4,选择工具箱上的文本工具为图像添加“天极软件网”文字,如图23所示。

图23 添加文本(22)选中文本然后按F8键将文本转换为符号,在符号属性中为其命名为nuoli,选择转换为动画符号,如图24所示。

由于要将文本保持静止状态5帧,所以在设置动画时和前面不变色的图片符号一样,只输入帧数就可以了,其他的设置不变,如图25。

图24 命名符号图25设置动画属性(23)同理添加诺利网的网址“/”这个文本,并将其转换为符号,设置动画属性如图26所示。

选择“OK”回到画布中,如图27所示。

其中绿色点为动画起始位置,红色点为终止位置。

然后在帧面板中选中第5帧,双击后面的数字,将帧速设为200。

图26 设置动画符号属性图27 文本转换为动画符号后的图像(24)下面来实现一个“动感模糊”效果。

选中第6帧,这时我们发现所做的前5帧动画看不到了。

点击工具箱上的矩形工具绘制一个矩形,将矩形填充设为Folds填充,如图28所示。

图28 将矩形填充设为折叠填充(25)在折叠填充浮动框中设置第一个颜色块为白色,第二个颜色块为黑色,如图29所示,最终得到图30所示的图像效果。

图29 设置折叠填充属性图30 设置填充属性后的填充效果(26)使用鼠标调整折叠填充的控制柄,得到图31所示的图像效果。

图31 调整控制柄后的图像效果(27)选中这个矩形,点击属性面板上的按钮,在弹出菜单中选择“Eye Candy 400 0LE”>>“Motion Trail”,设置Motion Trail属性如图32所示。

(图32 Motion Trail设置图片较大,请拉动滚动条观看)(28)再一次使用Motion Trail特效,不过将方向设为180度,其他的设置和上面一样,得到图33所示的图像效果。

图33 两次使用Motion Trail特效后的效果(29)然后打开库面板,将“天极软件网”字样的符号拖到场景中,右击鼠标选择“Sy mbol”>>“Break Apart”,断开和库的联系,然后选中文字,点击属性面板上的按钮,在弹出菜单中选择“Blur”>>“Gaussian Blur”对其进行高斯模糊,模糊度设置为2.0就可以了,然后将处理好的矩形放到模糊文字的上面,适当调节透明度,这样两个文字过渡时候的动感模糊效果就实现了,如图34所示效果。

图34 动态模糊效果(30)选中第7帧,输入文字“真诚为您服务”,转化为动画符号,也设置5帧的动画,设置不同的动画属性,如图47所示。

得到图35所示的图像。

图35 设置动画属性图36 设置动画属性后的图像(31)选中第12帧,输入文字“设计在线”,复制一下,然后在14帧粘贴,然后在16帧也粘贴,并将该帧帧速改为100,这样文字就有闪烁的效果了,如图37所示。

图37 Banner的第16帧图像(32)选择第17帧,将文字复制一个,选中后再用Motion Blur特效,设置其属性如图38所示。

然后按F8将其转化为动画符号,设置其属性如图39所示。

图38 设置Motion Blur属性图39 设置动画属性(33)选择“OK”回到工作区,得到第17帧图像如图40所示。

然后选择第30帧,设置帧延时为200/100 second即可。

图40 第17帧图像(34)回到图像第1帧,点击下面工作区状态栏的图标就可以预览图像效果了。

适当进行调整然后就可以选择导出向导,在导出向导对话框中选择导出类型为GIF动画,如图4 1所示,这样就可以将图像导出为GIF动画了。

图41 将图像导出为GIF动画小结:在上面的这个例子中,我们主要学会了渐变颜色动画的制作。

在这个Banner 的制作过程中,我们通过使用层面板、帧面板和库面板进一步熟悉Fireworks MX 2004中这些面板的使用方法。

在帧面板中我们学会了如何选择各帧编辑,如何复制帧、添加帧等,还学会了如何去设置帧的时间长短。

在层面板中我们了解了如何新建图层和设置共享图层等。

在库面板中我们熟悉如何将图像和文本转换为动画元件,通过动画属性对话框设置动画的大小、透明度等来控制动画效果以及怎么样将库文件放置到场景之中。

我们通过对不同符号对象的不同设置实现了不同的动画效果,这里读者可以在即尝试着设置动画属性对话框中的不同参数来设置动画图像的效果,包括Frame(帧数)、Move (运动的距离)、Direction(方向)、Scale to(尺寸大小)、Opacity(不透明度)、Rotate(旋转)等值,从而产生不同的效果。

另外,在这个Banner的制作过程中,我们有进一步熟悉了指针工具、文本工具、缩放工具、矩形工具等工具的使用方法和技巧。

相关文档
最新文档