当前位置:学会吧培训频道电脑知识学习网页制作Fireworks教程炫出我的个性——QQ聊天表情的绘制» 正文

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

[08-08 00:45:19]   来源:http://www.xuehuiba.com  Fireworks教程   阅读:8419
概要:图17该路径的描边色为全黑色的1像素柔化,但为了使这条路径更加的明显,我们点击“复制"、“粘帖"按钮,用两条相同路径的重叠来加深其色彩浓度。这样,一个眨眼的动作表情也就绘制完成了。我们可以点击画布下方的GIF动画播放按钮来观看。图18是否觉得动作太快了呢。我们在“帧"面板中将第一帧的延时时间设置为140/100秒。如图19。图19而第二帖的延时时间则设置为14/100秒。然后我们再来查看播发效果,可能有人又觉得慢了些。其实当我们把这一动画导出为GIF动画图片后,你再用ACDSee之类的看图软件去查看时会发现其播放速度要比在Fireworks中查看时稍快一些。因此还是先把该动画导出为GIF格式后再来查看。用“切片"工具将画布范围进行框选。然后在“优化"面板中选择导出格式为“GIF动画",颜色为256色,如图20。图20然后在切片上点击右键,在弹出菜单中选择“导出所选切片",并为该动画选择保存路径即可。然后我们用看图软件来查看这一动画。我个人
炫出我的个性——QQ聊天表情的绘制,标签:fireworks教程下载,fireworkscs5教程,http://www.xuehuiba.com
图17
  该路径的描边色为全黑色的1像素柔化,但为了使这条路径更加的明显,我们点击“复制"、“粘帖"按钮,用两条相同路径的重叠来加深其色彩浓度。这样,一个眨眼的动作表情也就绘制完成了。我们可以点击画布下方的GIF动画播放按钮来观看。

图18
  是否觉得动作太快了呢。我们在“帧"面板中将第一帧的延时时间设置为140/100秒。如图19。

图19
  而第二帖的延时时间则设置为14/100秒。然后我们再来查看播发效果,可能有人又觉得慢了些。其实当我们把这一动画导出为GIF动画图片后,你再用ACDSee之类的看图软件去查看时会发现其播放速度要比在Fireworks中查看时稍快一些。因此还是先把该动画导出为GIF格式后再来查看。用“切片"工具将画布范围进行框选。然后在“优化"面板中选择导出格式为“GIF动画",颜色为256色,如图20。

图20

  然后在切片上点击右键,在弹出菜单中选择“导出所选切片",并为该动画选择保存路径即可。然后我们用看图软件来查看这一动画。我个人觉得其播放速度还是比较适中的。至此,我们所绘制的第一个表情也就大功告成了。尽管这一动画只有两帧,而且表情变化也很简单,但却为其它表情的绘制提供了一些样式,可通过样式面板直接使用。以及为其它表情动作的夸张与变形带来一定的原始参考。
本教程源文件下载(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表情库进行使用。

上一页  [1] [2] [3] [4]  下一页


Tag:Fireworks教程fireworks教程下载,fireworkscs5教程电脑知识学习 - 网页制作 - Fireworks教程
《炫出我的个性——QQ聊天表情的绘制》相关文章
Copyright 学会吧 All Right Reserved.
在线学习社区!--学会吧
1 2 3 4 5 6 7 7 8 9 10 11 12 13