在Fireworks中繪製QQ聊天表情,視覺,平面,fireworks,課程,書籍,封面,設計

前段時間，為大家講解了如何在Fireworks中繪製QQ皮膚的教程實例，相信大家已有所收穫。這次我們再利用Fireworks中自帶的GIF動畫製作功能，為大家講解動態QQ表情的製作。從而也將個性化的QQ進行到底！

　　在我們日常生活當中，人的表情都被包含在「喜怒哀樂」當中。但在網上的QQ聊天當中，可用的表情動作卻是豐富多彩，特別是動態表情的出現，更能將某種情緒的表現生動而有趣地展現出來，這種表現力有時比文字的表達還要入木三分。由於QQ本身自帶的聊天表情有限，因此，不少朋友都樂於從其它軟件或論壇中搜集各種聊天表情，然後再添加到QQ的表情庫中以備使用。但這樣一來難免會使風格不同、尺寸不一的各類表情混合使用，造成了一種遺憾。為此在本例教程中將帶大家嘗試著繪製一款外形統一且具有個性化的QQ表情。

　　在動手繪製之前，我們很有必要先將所要繪製的表情進行挑選，只將聊天中較為常用或自己比較喜歡地表情列為設計目標，當然，繪製出更多具有自己原創風格的表情動作才是真正個性化的體現。另外，我們這次所要繪製的是GIF格式是動態表情。因此盡可能地保持好動作第一幀與最後一幀的連慣性也是非常重要的。

　　在本例教程中選用的是我自己繪製的一套名為「大眼綠豆」的聊天表情，由於表情較多，加之教程篇幅所限，也就不可能將全部表情的繪製過程逐一講述。但萬變不離其宗，繪製方法卻是有限的。因此，我將以下三款集中了較多的FireworksGIF動畫製作功能的表情，作一個詳細講解。

放大鏡	汗	暈

　　本教程源文件下載(ZIP壓縮文件，127K)

一「放大鏡」

　　啟動Fireworks後，先新建一個分辯率為72，455*255大小的畫布。畫布較大是為了繪圖的方便，表情的尺寸大小我選擇的是65*65像素。也就是說，不管這一表情的動作如何，它都不能大於這個範圍，而且整套的其它表情也是如此。所以，我們首先是要在畫布上畫一個67*67的正方形，表情的繪製也就在這個方寸之內展開。

　　我們先來畫綠豆的臉，用「橢圓形」工具畫一個59*59大小的正圓，然後用「部分選擇」工具將該圓下端的節點選中後，用方向鍵向上移動7個像素。接著我們用「橢圓形」漸變對其進行填充，漸變值由#9FEC00至#81B31A，描邊色為#669506的2像素柔化描邊。如圖01。

圖01 然後再為該對像添加「內斜角」特效，各項設置參數如下。

圖02

　　為使該綠豆的外形更加鮮亮，我們再來添加一個亮度為12、對比度為20的「亮度/對比度」特效。完成後我們接著來畫綠豆的眼睛。用「橢圓形」工具畫出一個18*18的圓形，採用「橢圓形」漸變填充，漸變值從#FFFFFF至#979797，描邊色為#577811的1像素柔化描邊。如圖03。

圖03

　　為使眼球有立體感，我們在眼球上面再畫一個12*12的正圓。採用全白色的實心填充，羽化值為2，並取消描邊。如圖04。

圖04

　　我們把組成眼球的這兩個對像選中，然後使用「修改—組合」命令。

　　然後我們再來畫上面黑色的眼珠。先畫一個9*9的圓形，並用全黑色進行實心填充。然後再畫一個3*3大小的圓，採用全白色實心填充。這樣一來，整個眼珠的高光部分也就體現出來了，如圖05。

圖05

　然後我們把構成眼珠的這兩個對像同時選中後，使用「修改—組合」命令。之所以把眼球和黑色的眼珠部分進行分開的組合。是因為卡通形像的表情在很大程度上是通過眼神來傳達的。而我們在繪製其它的表情動作時，當然是直接將該眼部複製過去即可，沒必要重新再畫一個。因此，為了使眼珠的移動更加方便，從而配合其它表情動作的需要，我們採用了這種分開組合的方法。

　　接下來我們就可以把構成眼部的這兩個組合對像移到綠豆的臉部上來了。但我們又看到，眼睛在其臉部上，缺乏了投影。因此，我們再來畫一個19*19的橢圓形，使用線情填充，漸變色由#577811至#577811，而不透明度則是0%至100%。羽化值為2。然後將該對像通過對像層的調整，移到「眼部」對象的下方，形成一定的投影效果。如圖06。

圖06

　　或許有朋友會問，為什麼不直接對眼球使用「投影」特效，反而要另外繪製一個投影對象。其實這樣做的目的同樣是為了在對其它表情進行繪製時，能夠更靈活地調整眼睛投影的大小、角度及深度等等。

　　我們將該眼睛再複製一份（投影不要複製），然後用「縮放」工具將其拉伸至24*24大小，並移到綠豆臉部的左側中來。由於眼部位置的改變，也就使這一則的眼部高光位置發生改變，因此，我們可以用「部分選擇」工具對其進行適當的位置調整，如圖07。

圖07

　　這樣一來，兩側的眼睛也都繪製完成了。此時看上去卻有點像「大眼青蛙」了，呵呵。。。接著我們該來畫放大鏡了。先畫一個5*12大小的矩形，採用「條狀」漸變，色彩值由# EBEBEB至# ABABAB，描邊色為# 8E90A5的1像素柔化。然後再畫一個9*21大小的矩形，設置其圓角度為60。同樣是用「條狀」漸變，色彩填充值由#FFFFFF至# E08915，描邊色為# 593E22的1像素柔化描邊。完成後將兩對像按圖08般進行擺放對齊。

圖08

　　我們再來畫兩個直徑分別為31像素和25像素的正圓，然後將兩圓進行水平和垂直對齊，並對這兩對像使用「修改—打孔」命令。從而得到一個放大鏡的鏡框外形。接著再為這個將環狀鏡框使用「條狀」的漸變填充，色彩由#FFFFFF至#CCCCCC，不採用描邊色。然後再為這一對像添加一個「內斜角」特效，各項設置參數如圖09。

圖09

　　然後再添加一個亮度為-15，對比度為51的「亮度/對比度」特效。完成後將該鏡框移到放大鏡的手柄上來，如圖10。

圖10

將組成放大鏡的這三個對像同時選中，並使用「修改—組合」命令，將其形成一個組合。然後點擊「修改—變形—數值變形」命令，從彈出的對話框的下拉列表中選擇「旋轉」，並設置旋轉角度為18。如圖11。

圖11

　　完成後即可將這個放大鏡移到綠豆左側的大眼上來了，如圖12。

圖12

　　我們再來給它畫一個簡單的小手，好拿住放大鏡。用「橢圓形」工具畫一個20*11的橢圓。採用「橢圓形」漸變填充，色彩的漸變值由#FFFFFF至# 76AE00，描邊色為# 669309的1像素柔化。然後重新啟動數值變形對話框，將該對像進行40度的旋轉。然後將這個小手移到放大鏡左側位置，如圖13。

圖13

　　小手畫好後，接下來就該來畫小嘴了。用「鋼筆」工具在綠豆臉部下方位置畫一個如圖14般的外形。

圖14

　　對該外形使用全白色的實習填充，描邊色為# 4B7702的1像素柔化。為了使嘴部也能呈現歡ǖ牧８甯校�挫[且慘�m�j�Z疇⒁桓鐾隊岸韻蟆Ｏ冉�艨詮晡桯麉M粗埔桓齔隼矗�里w蠖願粗貧韻蟾撓? 4D7902的實心填充，羽化值為3，並取消掉原來的描邊色。然後將這個複製對像通過「層」面板的位置調整，移到綠豆「小嘴」對象的下方。然後用方向鍵將投影對像向上和向右分別平移3像素和1像素的距離。不過這樣還沒算完，再用「部分選擇」工具將這一投影對像左側的路徑節點選中，並將其向下移動3個像素，如圖15。

圖15

　　這樣，一個放大鏡的靜態表情就繪製造完成了。為了使這一表情的一些色彩填充也能被其它的表情系列共享，我們可以把嘴部的色彩填充及投影對象的色彩填充等都建立一個樣式進行保存。

為了使這個靜態表情能夠動起來，我們要先建一個畫布大小為65*65大小的新文檔，然後將組成「放大鏡」表情的所有對象選中並複製到這個新畫布上來。接著再啟動「幀」面板。在面板的右上方點擊其下拉菜單，從中選擇「重制幀」項，也就是複製幀的意思。如圖16。

圖16

　　隨後會彈出一個對話框，我們直接點擊「確定」按鈕。此時複製出來的幀也就列在「幀」面板中了。我們點擊「2幀」，然後在畫布中將綠豆左側大眼的黑色眼珠組合對像刪除。換以在上面用「鋼筆」工具繪製的直線路徑。如圖17。

圖17

　　該路徑的描邊色為全黑色的1像素柔化，但為了使這條路徑更加的明顯，我們點擊「複製」、「粘帖」按鈕，用兩條相同路徑的重疊來加深其色彩濃度。這樣，一個眨眼的動作表情也就繪製完成了。我們可以點擊畫布下方的GIF動畫播放按鈕來觀看。

圖18

　　是否覺得動作太快了呢。我們在「幀」面板中將第一幀的延時時間設置為140/100秒。如圖19。

圖19

　　而第二帖的延時時間則設置為14/100秒。然後我們再來查看播發效果，可能有人又覺得慢了些。其實當我們把這一動畫導出為GIF動畫圖片後，你再用ACDSee之類的看圖軟件去查看時會發現其播放速度要比在Fireworks中查看時稍快一些。因此還是先把該動畫導出為GIF格式後再來查看。用「切片」工具將畫布範圍進行框選。然後在「優化」面板中選擇導出格式為「GIF動畫」，顏色為256色，如圖20。

圖20

　　然後在切片上點擊右鍵，在彈出菜單中選擇「導出所選切片」，並為該動畫選擇保存路徑即可。然後我們用看圖軟件來查看這一動畫。我個人覺得其播放速度還是比較適中的。至此，我們所繪製的第一個表情也就大功告成了。儘管這一動畫只有兩幀，而且表情變化也很簡單，但卻為其它表情的繪製提供了一些樣式，可通過樣式面板直接使用。以及為其它表情動作的誇張與變形帶來一定的原始參考。

二、「汗」

效果預覽

　　我們將「放大鏡」表情中綠豆的臉複製一份，作為「汗」表情的臉。而且同樣是在原來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聊天表情的初步構想的話，那就趕快行動吧！而且畫好後也別忘了送我一套哦！