学院首页 软件应用 编程开发 创意设计 认证培训 软件论坛
Flash Fireworks Dreamweaver Photoshop CorelDraw Illustrator FreeHand 3DsMAX AutoCAD

您的位置:学院 >> 创意设计 >> Fireworks >> Fireworks绘制愚人节Gif动画小贺卡


Fireworks绘制愚人节Gif动画小贺卡



  4月1日愚人节最典型的活动就是大家相互开玩笑,捉弄对方。本例中我们就用Fireworks来绘制一个可爱的小动画贺卡,基本构思是在愚人节这一天用动画贺卡的方式告诉朋友自己请客,结果却让他们哭笑不得,才知道自己是被愚弄了。

  这个动画贺卡中五彩缤纷的春季场景加上小猪憨厚无辜的表情,相信一定会给大家留下深刻的印象,大家可以把它添加到QQ表情里,聊天的时候发给朋友们。

  主要技术要点:我们主要用到了Fireworks矩形和椭圆工具,并对这些工具所绘制的路径进行了各种自由变形和组合(如打孔、交集、联合)以及颜色变化,从而得到较好的层层渐变的视觉效果。
  时在绘制大树的时候用到了复制的技巧,一棵看似复杂的大树,只要绘制好一个枝叶,其它的进行复制和变形就可以完成,整棵大树也用到了复制,这样就可以分布在整个画面的不同位置。
  绘制小猪的耳朵和猪蹄的时候,用到了水平翻转的小技巧,这样就节省了很多时间。另外添加高光效果能够使得图像生动和富有立体感,羽化的作用功不可没。

 
愚人节动画小贺卡

  下面就让我们从绘制五彩缤纷的春季场景开始吧!文章末尾提供原文件供大家下载参考。

   1、  首先在Fireworks中新建一个400×400的画布,颜色定义为白色。如图1所示。


图1 新建400×400的画布

   2、  接下来我们就在这张画布上绘制一个五彩缤纷的的春天的场景,首先是嫩绿色的草地,先绘制一个大的椭圆,使其一部分弧度作为地平线,然后再绘制两个小的椭圆,用部分选定工具对其形状进行改变,绘制成两棵小草的样子,如图2所示。


图2 绘制地平线和小草

   3、  按住shift键,将这三部分选定,选择修改菜单中的组合路径联合命令,就可以将这三部分联合成一个整体,设置填充颜色为#C6FF6B,笔触颜色为#319600,笔触大小为2,类型为柔化圆形,得到如图3所示的图像。


图3 绘制绿色草地

   4、  为了让草地看起来有渐变的效果,我们可以依次绘制两个更小一些的椭圆,并用不同的深度的绿色进行填充,这样一片原本单调的草地立刻就变得生动起来,如图4所示。


图4 为草地添加颜色渐变效果

   5、  要在草地上添加一棵大树,首先来绘制大树的树干,只要绘制一个多边形,用部分选定工具改变成树干的形状就可以了,树干上的阴影部分可以再绘制一个椭圆,选定两部分,用修改中的组合路径打孔命令来完成,如图5所示。


图5 绘制树干

   6、  这里我们用颜色渐变的球来代表大树的枝叶,球的绘制稍微复杂一点,先绘制一个圆形,用深绿色填充,然后再绘制一些圆形与其相交,选定两个圆形,用修改中的组合路径交集命令,然后依次用浅一些的颜色进行填充,这样一个球就做好了,如图6所示。


图6 绘制大树的枝叶

   7、  一个小球绘制好了,只要将其不停的复制,改变它们的大小以及叠放的层次,放在树干不同的位置上,一棵枝繁叶茂的大树就画好了,如图7所示。


图7 复制大树的枝叶

  • 第1页:背景绘制:草地和大树
  • 第2页:背景绘制:天空与太阳
  • 第3页:动画制作:玩笑文字
  • 第4页:动画制作:悬念与揭晓
  •    8、  同样的方法,我们可以将大树的树干和枝叶子组合到一起,使它们联合成为一个整体,然后对这个整体进行复制,改变大小放在画面的不同位置,并且添加远处的草地,这样一片生机盎然的草地就跃然纸上了,如图8所示。


    图8 复制整棵大树

       9、  地面画好了,为了做图方便,我们可以将地上的所有树木草地都组合到一起,然后就该绘制天空了,通常我们认为天空是蓝色的,但愚人节的天空可就不一样了,我们设想它在夕阳的光辉下变成了渐变的红色,只要绘制不同大小的矩形,然后用不同深度的红色填充,就可以形成一种层层渐变的视觉效果。如图9所示。


    图9 绘制夕阳映照下的天空

       10、 我们再给天空添加一轮金黄的太阳,只要绘制一个椭圆就可以了,然后给天空添加几朵雪白的云彩,整个天空是不是瞬间生动明亮起来呀?如图10所示。


    图10 给天空添加太阳和云彩

  • 第1页:背景绘制:草地和大树
  • 第2页:背景绘制:天空与太阳
  • 第3页:动画制作:玩笑文字
  • 第4页:动画制作:悬念与揭晓
  •   11、接下来我们开始做动画效果。首先,单击【窗口】选择【帧】面板,可以弹出【帧】面板,如图11所示。


    图11 【帧】面板

      12、单击【帧】面板右上角处的小黑三角,出现弹出菜单,选择【重置帧】这个选项,如图12所示。


    图12 选择重置帧

      11、选择以后就会出现一个对话框,要求输入帧的数量以及确定帧的位置,我们选择添加7帧,并且插入在当前帧之后,如图11所示。


    图11 重置帧对话框

      12、点击确定之后,原先的帧面板上就发生了变化,新增加了六个帧,如图12所示。


    图12 变化的帧面板

      13、而在原来图像的下方状态栏上,也出现了相应的变化,下面的数字由1变成了2,虽然我们所看到的图像没有什么变化,但实际上已经是另外一个与前一个帧画面相同的画面了,如图13所示。


    图13 建立新帧的图像

      14、在这个新的画面上,我们可以对原先的图画做一些改动,添加一些比较暧昧的文字,“有句话一直想对你说”,选择一种比较俏皮的字体,并给字添加一点发光的效果,如图14所示。


    图14 给第二帧添加文字

      15、打开第三帧,选择一个适当的位置添加 “今天”两个字,并且添加发光效果,设置发光宽度为2,如图15所示。


    图15 为第三帧添加“今天”两个字

      16、同样的道理,第四帧在前一帧的基础上再添加一个“我”字,但位置稍有变化,如图16所示。


    图16 为第四帧添加“我”字

      17、为第五帧添加“请客”两个字,位置与上面两帧都不同,如图17所示。

     
    图17 为第五帧添加“请客”两个字

  • 第1页:背景绘制:草地和大树
  • 第2页:背景绘制:天空与太阳
  • 第3页:动画制作:玩笑文字
  • 第4页:动画制作:悬念与揭晓
  •   18、在接下来让人充满期待的一帧里,我们让整个画面都黑掉,只在中间设置白色闪电一样的光亮,只要绘制一个矩形填充为黑色,在中间绘制一个扁长的椭圆,选择放射填充,希望产生出一种让人惊心动魄的视觉效果,如图18所示。


    图18 绘制白色闪电

      19、最后一帧里,谜底就揭晓了,也是最让人感觉受愚弄的一个场景了,在这里我们绘制一只可爱的小猪,几个大小不同的圆形分别用不同的颜色填充,就可以很形象的勾画出小猪的脸蛋,如图19所示。


    图19 勾勒小猪的脸蛋

      20、要给小猪增添两只耳朵,只需要先绘制一只,把一个椭圆进行变形,成为近似的三角形,然后绘制一个椭圆与三角形相交一部分,将两部分选定用修改组合路径中的交集命令就可以得到,并用较深一点的粉色填充,这样一只耳朵就绘制好了,另外一只耳朵就不用再重复绘制了,只要将耳朵的两部分组合起来水平翻转就可以了,是不是节约了很多时间呀?如图20所示。


    图20 给小猪添加两只耳朵

      21、同样的方法我们可以给小猪添加一个圆滚滚的身子还有可爱的小猪蹄,小猪蹄的画法同样用到了水平翻转的技巧,如图21所示。


    图21 绘制小猪的身子

      22、为了让小猪看起来有立体感,我们可以在它的头部以及小猪蹄上都绘制几个椭圆,然后用白色填充,设置羽化半径为20,取消笔触,这样一个非常有立体感的沮丧的小猪就画好了,如图22所示,是不是很可爱呀?


    图22 给小猪添加高光效果

      23、最后我们给这个画面添加一个有趣的文字说明“过节了猪头”,并添加发光效果加以修饰,一番愚弄的滋味是不是立刻涌上心头啊?本来还满怀期待,结果是不是很让人沮丧呀?呵呵:)如图23所示。


    图23 添加文字效果

      24、这样整个动画的7帧就全部绘制好了,最后一个过程就是将它们联合到一起组成一个小动画。按住Shift键将帧面板中的帧1帧2选中,双击鼠标,出现帧延时的时间设置,我们将时间设为150/100秒,如图24所示。


    图24 设置帧延时的时间

      25、同样的方法我们可以对其它相邻的两帧进行设定,根据剧情的需要来设置不同的延时时间,如图25所示。


    图25 设置每一帧的延时时间

      26、全部设置好了以后,点击画面下边状态栏中的播放按钮,就可以对动画效果进行预览,满意以后就可以将图片导出了,由于文件中包含动画,我们不能简单的对其进行保存,在这里我们选择将图片保存为GIF格式,来看看导出以后的动画效果吧,如图26所示。.png原文件下载

     
    图26 导出后的动画效果

  • 第1页:背景绘制:草地和大树
  • 第2页:背景绘制:天空与太阳
  • 第3页:动画制作:玩笑文字
  • 第4页:动画制作:悬念与揭晓
  • 技术文章快速查找

    栏目导航
    软件应用
    ·操作系统 ·杀毒防黑 ·应用软件
    ·聊天软件 ·网络软件  
    Web开发
    ·ASP ·JavaScript ·CGI
    ·JSP ·VbScript ·Web服务器
    ·PHP ·XML  
    开发语言
    ·VB ·VC ·ASP.NET
    ·Java ·C/C++ ·Delphi
    数据库开发
    ·MySQL ·SQL/Access ·PowerBuilder
    ·Oracle ·DB2  
    网站设计
    ·Flash ·Dreamweaver ·HTML/CSS
    ·Fireworks ·FrontPage  
    平面设计
    ·Photoshop ·CorelDraw ·AutoCAD
    ·FreeHand ·Illustrator ·3DsMAX
    媒体动画
    ·Director ·Authorware ·Maya
    ·视频处理    


    相关软件 产品库推荐
    ·笔记本 ·台式机 ·服务器
    ·数码相机 ·手机 ·GPS
    ·DV摄像机 ·MP3 ·MP4
    ·CPU ·硬盘 ·内存
    ·主板 ·显卡 ·显示器
    ·打印机 ·投影机 ·路由器

    还没人留言,抢个先,哈哈!
    对"Fireworks绘制愚人节Gif动画小贺卡"的评论 - 快速回贴
    内容:
      [完成后可按Ctrl+Enter发布]

    百度中 Fireworks绘制愚人节Gif动画小贺卡 相关内容
    Google搜索中 Fireworks绘制愚人节Gif动画小贺卡 相关内容
    雅虎中 Fireworks绘制愚人节Gif动画小贺卡 相关内容
    Sogou搜索中 Fireworks绘制愚人节Gif动画小贺卡 相关内容

    相关软件 最新回复帖子:

    ·nesox让电子邮件营销原来如此轻松!
    ·Windows Vista 中卸载软件的不同方式
    ·没有mysql支持时的替代方案
    ·一个可以发送附件及HTML格式邮件的PHP类
    ·AutoCAD打造精致三维鸟笼实例详解
    ·Photoshop自定义水晶字特效样式
    ·AutoCAD三维基础实例教程
    ·PS为黑背景长发美女照片抠图换背
    ·用Photoshop自制个性摩托车贴花小经验
    ·轻松几步将美女照片处理为手工素描


      相关软件 Fireworks绘制愚人节Gif动画小贺卡相关文章
    Fireworks交互式填充绘精致网页导航菜单 用Fireworks快速调整人像照片色调
    用Fireworks做数字连续翻滚动画 Fireworks制作妇女节主题宣传动画
    Fireworks 8绘制情人节卡通桌面 Fireworks 8实例绘制:娃娃贺岁图
    Fireworks绘制送鸡年迎狗年卡通桌面 轻松制作显示输入朋友名字的贺卡网页
    绘制可爱的圣诞新年Kitty猫咪卡通桌面 Fireworks绘制可爱卡通狗狗桌面
    Fireworks实例:绘制矢量风格时尚手提袋 Fireworks MX 2004 视频教程(连载中)
    Fireworks样式的应用、创建和修改 Fireworks 8 全新功能图文快报
    Fireworks 2004绘制写实移动硬盘 Fireworks轻松制作眨眼睛动画
    从FW的色彩面板看设计软件的色彩管理 从Fireworks看设计软件的色彩使用方式
    Fireworks制作钟摆式公告牌摇摆动画 详解Fireworks MX 2004丰富的图像导出功能