如何用fireworks做漂亮的logo动画

[原创]如何用fireworks做漂亮的logo动画(1)

//BK(blue1000.com)原创，转载请注明出处
//http://www.blue1000.com

    blue1000做了3天的logo，累得够呛，即使连续让blue1000吃三天肉我也会倒胃的：）
    好了，闲话少说，书归正传，blue1000今天就把所有关于logo的东西都拿出来让大家伙分享，也希望每一位朋友都能做出漂亮的logo来：）
    blue1000今天就假设大伙从没有用过FW(fireworks),从最最基本的讲起。
    做logo最常用的工具有两个：Adobe公司的ImgReady和Macromedia公司的Fireworks,blue1000今天讲的是后者fw.
    首先介绍fw中最常用的工具菜单名称及用途.先看个图：

此主题相关图片如下：

点击看大图，或者右键“另存为”放到本机看，呵呵~~

    实箭头:选取操作对象\移动操作对象
    中间有箭头的方框(scale tool):选取操作对象并对操作对象进行形状调整,可以对图片进行放缩\旋转等,鼠标左键在它上面按压2秒钟(别松手),就会弹出另外两种工具,做logo常用的是弹出菜单中的第二种(平行变形).
    虚线的方框:选取区域然后CTRL+X可以剪切图片.这个工具通常是当在一张素材图片上选取logo背景时最常用的.
    黑色粗写的"A"工具:最简单不过了,写字用的,呵呵~~
    矩形工具：画矩形的，呵呵，当然，也包括方形。
    blue1000提醒您（你？:)）注意：这些工具在没有创建新文档或者没有选取对象的时候是死灰色的,也就是说:那个时候它们是不能用的.
    工具介绍完了,下面说一下属性面板，就是中间偏下的那个横放的面板。它的作用是：对选取对象进行：颜色、长宽、透明度、模糊效果(要做好的logo，透明度、模糊效果必不可少)等属性进行精确修改和设定的。属性面板会因选取对象的不同而有所不同。
    模糊效果在属性面板上点击“效果（effects）”即可弹出。
    模糊效果的分类：模糊(Blur)、更强模糊(Blue More)、高斯模糊(Gaussian)、运动模糊(Motion Blur)、环向模糊(Radial Blur)和缩放模糊(Zoom Blur)。各类的作用顾名思义，大家可以分别尝试一下。

    好，下面介绍两个概念：层(layer)和祯(frame)（位置如图中所示）
    举个例子：在某一个很短的瞬间１，你的两只手放在前胸；在接下来的瞬间２，你又将手放在了腰间。那么针对瞬间１，瞬间１具有两个元素：即你放在前胸的左手和右手；如果说瞬间１是一祯的话，那么你的左手和右手分别是瞬间１这一祯的一个层。
    同样对于瞬间２这个祯来说，它也具有两个层，就是你此时放在腰间的两只手。再来个如果，如果将这两个瞬间连续起来，你将会看到你的双手从前胸到腰间的连贯过程，几乎是完整的、连续的过程，而感觉不到任何的间断和停顿，这其实和电影的原理是一样的。
    logo动画正是由几个或几十个这样的祯连起来组成的。
    呵呵，blue1000的口才不好，累了我一身汗：）

    再补充一下资源：
    04字体：logo制作最常用的字体，字体的安装：解压后，将字体文件复制到系统盘windows或win目录下的font文件夹内即可。
    背景素材：http://www.dabaoku.com  ，网上其实还有很多，大家可以在摆渡上搜索一下。

上一节听我罗嗦了那么多，大家都有些想吐了~~（嗯？刚才谁在骂我？？？！！！）~好了，这节就直接开说了。
本节，blue1000就给大家做一个very easy的logo出来，恶心一下刚才骂我的那位。
请大家注意整个过程，这才是本节的重点！

先看动画，边看边读下面的同步说明．
说明：1.因为动画比较大，所以分成了几块。
      2.建议大家全屏播放，这样有些数值可以看得清晰些。
      3.在观看的过程中，你可以点击动画上的开始及暂停按钮，以方便你对照后面的文字教程。

[全屏观看动画1]    [我想把动画下载到本地机子上观看(右键"目标另存为……")]

[全屏观看动画2]    [我想把动画下载到本地机子上观看(右键"目标另存为……")]

1.打开FW。（我感觉又有人骂我了:( ,可是我还是坚持我第一节声明过的假设。）请看大屏幕（哦,上边那两个小的:)）

2.打开素材图片。用"虚线框"选取工具,选取你的logo背景图,选哪一块呢?看你的意思了.然后右键"编辑">>>"剪切"或者(CTRL+X).

3.新建文档,设置画布大小为: 宽88高31.然后右键"粘贴"或者(CTRL+V),调整背景图片位置;
用矩形工具做个背景边框,调整填充色为无,边线颜色为黑色或者其它.

4.做logo下方网址栏的白色背景矩形图:矩形工具画一个矩形图,设置边线颜色为无,填充色为白色;
用文字输入工具在白色背景矩形图内点一下,输入网址，这里输入www.blue1000.com ；
用实心箭头选取工具选中字体" www.blue1000.com "，调整颜色为黑色，字体为04_3字体，大小为8号；
点击属性面板中下方的下拉菜单（在铅笔图标的右边，动画中也有演示），选择“No anti_alias”，也就是最上面那个。这样做的话，字体清晰度比较高。

5.按着Shift键，用鼠标依次点击所有层，选中所有子层。然后点击layer层右上角的微型菜单。选择“平面化所选”，使我们刚才画的图变成一张位图，便于管理；
再次点击layer层右上角的微型菜单，选择“共享所选层”，因为背景层在以后的所有祯中都要用到。
点击新建层图标，新建一个父层

6.选中新建的父层，点击祯面板中的新建祯按钮，系统自动生成两祯。
选中第二祯，用文字工具输入"BK设计"四个字，字体为04_3字体，大小12号。这里注意：要保证属性面板中下方的下拉菜单中显示的是“No anti_alias”。
调整文字到左边缘。

7.用鼠标把第二祯拖放到新建祯图标上，复制第二祯。然后将“BK设计”四个字向右移动一个汉字的距离，第三祯就完成了。

8.然后把第三祯拖放到新建祯图标上……，依次类推，完成以后的几祯，直到“BK设计”四个字为于画布的正中间．

9.双击最后一祯的右边的数字“7”,在弹出的设置栏里将这一祯的动画停滞时间设置为200。
点击工作区下方正中的动画调试开始按钮，查看你做的动画；修改各祯，直到满意为止。

10.打开file文件菜单中的导出预览面板，将输出类型改为：“Animated gif”动画格式,然后Export输出，OK!欣赏你的logo动画吧。

终于讲完了，我要水～～～～．好了，大家先试者自己做一个看看，是不是很有成就感啊？呵呵．
先别说谢谢，精彩的还在后面．．．不要告诉别人，下一节是logo动画的精髓哦～～
请关注：如何用fireworks做漂亮的logo动画(3)－－精髓所在～～

这一节讲logo制作的精髓--特效制作。呵呵，例子比较多哦~~可是都是精髓！

特效应用主要有以下几种：（当然还有其它的）
１.高斯模糊的应用
２.运动模糊的应用
３.环形模糊的应用
４.缩放模糊的应用
５.透明度的应用

这里以运动模糊和透明度的应用为例重点讲解，其它几种处理手法都一样，只是效果不一样而已．
一.运动模糊的应用：
动画： [全屏观看]   [我想把动画下载到本地机子上观看(右键"目标另存为……")]
制作过程：
1-6步和第二节一样，略过，blue1000太懒了~~
7.选择“BK设计”四个字，鼠标点击属性面板上的效果菜单“+”按钮(Effects)，选择blur>>>motion blur;
探出一个属性面板，在角度一栏输入"0",在距离一栏输入“5”，好了，点击“ok”按钮。

8.将第二祯拖入新建祯图标上复制第二祯形成第三祯，将“BK设计”四个字移动到场景中间，然后在effects下面的白色列表框里选中“motion blur”效果，然后点击上方的减号“-”,出去运动模糊效果；
将第三祯的停滞时间改为200。

9.好了，调试，运行，看到什么效果了？是不是比第一节做的那个logo更加具有动感。

呵呵，你可以尝试着把第7步中的角度和距离改一下，看看会是什么效果。

二.透明度的应用:
动画： [全屏观看]   [我想把动画下载到本地机子上观看(右键"目标另存为……")]
刚才作了个运动效果，现在接着做logo里经常见到的闪耀效果，这就用到了透明度。
10.接着第9步，将第三祯的停滞时间改回来，改为默认值7。
11.复制第三祯，形成第四祯。用矩形工具做个白色无边线的小矩形，将透明度设为60，并放置于场景左边；
12.复制第四祯，形成第五祯。将白色小矩形移至场景中间，并将透明度设为80。
13.复制第五祯，形成第六祯。将白色小矩形移至场景右端，并将透明度设为60。
14.复制第六祯，形成第七祯。将白色小矩形删除，并将停滞时间改为200。

其它的几种模糊效果用法和上面一样，但效果不一样，大家自己试试看,这里只简单提示一下:

三.高斯模糊的应用:可以产生对象“从无到有”显示过程的动感效果
例图：
此主题相关图片如下：

四.环形模糊的应用:可以产生对象的高速旋转视觉效果
例图：
此主题相关图片如下：

五.缩放模糊的应用:可以产生对象高速扩散或收缩的视觉效果
例图：
此主题相关图片如下：

好了，blue1000的话说完了，相信大家现在对做logo已经跃跃欲试了，呵呵~~那剩下的时间就交给大家了，祝你好运哦~~~

//BK(blue1000.com)原创，转载请注明出处
//http://www.blue1000.com