论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Fireworks教程
Tag:切片,gif,动画,文字,图标,照片,网页,效果图,表情,按钮,工作,8.0,cs,视频教程

炫出我的个性——QQ聊天表情的绘制(下)

文章类别:Fireworks | 发表日期:2008-9-20 19:32:23

本教程源文件下载(ZIP压缩文件,127K)

二、“汗”

效果预览


  我们将“放大镜”表情中绿豆的脸复制一份,作为“汗”表情的脸。而且同样是在原来455*255大小的画布上进行绘制。这一表情的绘制较为简单,用“钢笔”工具直接画出四条线段,分别表示眉毛和眼睛,眉毛的描边色为#567517,笔触为3像素的柔化描边。眼睛的描边色为#3C5010,使用2像素的柔化描边。然后再画一个圆角度为100的矩形,用全白色的实心填充,描边色为#5E7F19,使用2像素的柔化笔触。完成后将这些对象按图21般进行摆放。

图21

  我们再来画一个汗滴。先画一个13*13大小的圆,采用“轮廓”渐变填充,色彩值为# BDEFFF至# 2EADD8,取消描边色,并为其添加一个“进一步模糊”的特效。然后用“部分选择”工具将该圆上端的节点选中,使用方向键向上移动12像素的距离。为使汗滴的上端更加尖锐,我们用“部分选择”工具将上端节点的两条控制手柄进行缩小,如图22。然后调整填充手柄的角度,如图23。从而使汗滴的反光更加自然。

图22

图23

  完成后将该对象移至绿豆额头的左侧即可。这样一来,这个表情的静态就完全画完了,我们为它新建一个65*65大小的空白文档,然后将组成这一表情的所有对象都复制进来。从而转入该表情的动态制作。
  我们注重到,在这个表情中只有汗滴是需要做成运动的,而其它对象则仍保持着静止状态。因此我们可以考虑将该汗滴转成动画元件的方式来完成这一动画过程。我们点击“层”面板中右上角的下拉菜单,从中选择“共享此层”,如图24。

图24

  然后选中“汗滴”对象,再点击“修改—动画—选择动画”命令。此时会弹出一个动画元件的设置窗口,我们在该窗口中输入如图25般的相关数值。

图25

  点击“确定”按钮后“汗滴”对象即被转成了动画元件。点击画布下方的“播放”按钮即可进行查看了。但播放速度稍快了点。我们打开“帧”面板,并将里面5个帧的延时时间设置为35/100秒,然后用“切片”工具为这一动画建立导出切片后保存为GIF动画,以便在看图软件中进行查看或导入到QQ表情库进行使用。




三、“晕”

效果预览


  这一表情共有三个运动对象,除了两只眼睛要不停地转动以外,嘴吧也是会动的。但制作起来却也不难。先从“放大镜”表情中将我们所需要的对象都复制过来,为了使这一表情动作再加的有趣,我们将原来的眼球投影对象用“缩放”工具拉伸至21*21。改用色彩为#648A13的实心填充,羽化值为3。眼白对象也用“缩放”工具拉伸至20*20,而黑色的瞳孔则不必做任何修改。然后按图26般进行摆放。

图26
  我们再来绘制它的嘴吧。先画一个5*5大小的圆,取消其填充色,选用2像素的柔化描边,描边色为# 4B7801。然后用“路径切割”工具将该圆一分为二,如图27。

图27

  然后将上半部分删除,并将下半部分进行复制后再进行180度的水平翻转。然后如图28般进行排列。

图28

  用相同的方法再复制出四个半圆形对象,并按图29般进行排列。将这并六个对象同时选中后使用“修改—组合”命令。

图29

  将该组合对象移至表情脸部位置后,这一表情的静态绘制也就结束了。

图30

  新建一个65*65的空白文档,将组成这一表情的所有对象都复制进来,然后点击“层”面板右上角的下拉菜单,将图层1设置为“共享此层”。然后再新建一个图层2,将“嘴吧”的组合对象移至图层2中。

  同时选中左侧眼睛中的眼白和瞳孔组合,然后使用“修改—组合”命令,将这两个组合合二为一。然后点击菜单栏中的“修改—动画—选择动画”,在弹出的对话框中进行如图31般的设置。

图31

  用同样的方法,将右侧眼白中的眼白和瞳孔组合合成一组后,点击“修改—动画—选择动画”命令,然后在弹出的对话框中也进行图31般的设置。

  我们再来设置嘴吧的动作,在图层2中将“嘴”的组合对象选中,并点击“复制”按钮。然后在“帧”面板中依次选择第2、3、4帧,将“嘴”的组合对象逐一复制过来。但第2和第4帧中还要将该对象进行180度的水平翻转。

  最后别忘了还要将所有帧的延时时间设置为16/100秒。这个速度在导出为GIF文件后也有点慢,但这要是在QQ聊天中使用的话,速度会被加快近两倍多的。到时候这个表情动作看起来就变得舒适了。

  通过以上三个实例,只是希望能为大家在绘制自己的QQ聊天表情时带来一点技术上的帮助。同时也将我个人的一点经验与大家共享。假如你已经有了绘制一套属于自己QQ聊天表情的初步构想的话,那就赶紧行动吧!而且画好后也别忘了送我一套哦!
上一篇:炫出我的个性——QQ聊天表情的绘制(上) 人气:1803
下一篇:雾化效果 人气:1949
Fireworks视频教程

Fireworks视频教程
Windows视频教程
Windows操作
[文]
WORD教程
Word教程
[文]
Excel教程
Excel教程
[文]
PowerPoint教程
PowerPoint
[文]
Dreamweaver
Dreamweaver
[文]
FIREWORKS
Fireworks
[文]
FLASH教程
Flash教程
[文]
photoshop平面设计
PhotoShop
[文]
CorelDraw
CorelDraw
[文]
C语言教程
C语言教程
[文]
html
Html教程
[文]
DivCss布局
Div+Css布局
[文]
Javascript
Javascript
[文]
ACCESS数据库
ACCESS数据库
[文]
ASP教程
ASP教程
[文]
SQLServer数据库
SQLServer
[文]
ASP.NET教程
ASP.NET教程
[文]
FlashAS
FlashAS
[文]
视频教程列表
计算机基础入门及办公自动化: 网页制作开发视频教程: 平面广告设计视频教程 初级程序设计及ASP动态网站开发 Asp.net动态网站开发视频教程 Flash 动画角本编程视频教程
文章教程搜索
 
Fireworks推荐教程
Fireworks热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058