fireworks制作綠豆表情
fireworks制作綠豆表情
qq表情在情面學(xué)習(xí)了如何繪制，那么怎樣繪制可愛(ài)的綠豆表情呢?為此在本例教程中將帶大家嘗試著繪制一款外形統(tǒng)一且具有個(gè)性化的QQ表情。下面小編給大家整理了關(guān)于fireworks制作綠豆表情的方法，希望大家喜歡。
fireworks制作綠豆表情的方法步驟“大綠豆qq表情”
這次我們利用Fireworks中自帶的GIF動(dòng)畫制作功能，為大家講解動(dòng)態(tài)QQ表情的制作。從而也將個(gè)性化的QQ進(jìn)行到底!
在我們?nèi)粘Ｉ町?dāng)中，人的表情都被包含在“喜怒哀樂(lè)”當(dāng)中。但在網(wǎng)上的QQ聊天當(dāng)中，可用的表情動(dòng)作卻是豐富多彩，特別是動(dòng)態(tài)表情的出現(xiàn)，更能將某種情緒的表現(xiàn)生動(dòng)而有趣地展現(xiàn)出來(lái)，這種表現(xiàn)力有時(shí)比文字的表達(dá)還要入木三分。由于QQ本身自帶的聊天表情有限，因此，不少朋友都樂(lè)于從其它軟件或論壇中搜集各種聊天表情，然后再添加到QQ的表情庫(kù)中以備使用。但這樣一來(lái)難免會(huì)使風(fēng)格不同、尺寸不一的各類表情混合使用，造成了一種遺憾。
在動(dòng)手繪制之前，我們很有必要先將所要繪制的表情進(jìn)行挑選，只將聊天中較為常用或自己比較喜歡地表情列為設(shè)計(jì)目標(biāo)，當(dāng)然，繪制出更多具有自己原創(chuàng)風(fēng)格的表情動(dòng)作才是真正個(gè)性化的體現(xiàn)。另外，我們這次所要繪制的是GIF格式是動(dòng)態(tài)表情。因此盡可能地保持好動(dòng)作第一幀與最后一幀的連慣性也是非常重要的。
fireworks制作綠豆表情的效果圖：
fireworks制作綠豆表情的步驟一：“放大鏡”
啟動(dòng)Fireworks后，先新建一個(gè)分辯率為72，455*255大小的畫布。畫布較大是為了繪圖的方便，表情的尺寸大小我選擇的是65*65像素。也就是說(shuō)，不管這一表情的動(dòng)作如何，它都不能大于這個(gè)范圍，而且整套的其它表情也是如此。所以，我們首先是要在畫布上畫一個(gè)67*67的正方形，表情的繪制也就在這個(gè)方寸之內(nèi)展開。
我們先來(lái)畫綠豆的臉，用“橢圓形”工具畫一個(gè)59*59大小的正圓，然后用“部分選擇”工具將該圓下端的節(jié)點(diǎn)選中后，用方向鍵向上移動(dòng)7個(gè)像素。接著我們用“橢圓形”漸變對(duì)其進(jìn)行填充，漸變值由#9FEC00至#81B31A，描邊色為#669506的2像素柔化描邊。如圖01。
圖01 然后再為該對(duì)象添加“內(nèi)斜角”特效，各項(xiàng)設(shè)置參數(shù)如下。
圖02
為使該綠豆的外形更加鮮亮，我們?cè)賮?lái)添加一個(gè)亮度為12、對(duì)比度為20的“亮度/對(duì)比度”特效。完成后我們接著來(lái)畫綠豆的眼睛。用“橢圓形”工具畫出一個(gè)18*18的圓形，采用“橢圓形”漸變填充，漸變值從#FFFFFF至#979797，描邊色為#577811的1像素柔化描邊。如圖03。
圖03
為使眼球有立體感，我們?cè)谘矍蛏厦嬖佼嬕粋€(gè)12*12的正圓。采用全白色的實(shí)心填充，羽化值為2，并取消描邊。如圖04。
圖04
我們把組成眼球的這兩個(gè)對(duì)象選中，然后使用“修改—組合”命令。
然后我們?cè)賮?lái)畫上面黑色的眼珠。先畫一個(gè)9*9的圓形，并用全黑色進(jìn)行實(shí)心填充。然后再畫一個(gè)3*3大小的圓，采用全白色實(shí)心填充。這樣一來(lái)，整個(gè)眼珠的高光部分也就體現(xiàn)出來(lái)了，如圖05。
圖05
然后我們把構(gòu)成眼珠的這兩個(gè)對(duì)象同時(shí)選中后，使用“修改—組合”命令。之所以把眼球和黑色的眼珠部分進(jìn)行分開的組合。是因?yàn)榭ㄍㄐ蜗竦谋砬樵诤艽蟪潭壬鲜峭ㄟ^(guò)眼神來(lái)傳達(dá)的。而我們?cè)诶L制其它的表情動(dòng)作時(shí)，當(dāng)然是直接將該眼部復(fù)制過(guò)去即可，沒(méi)必要重新再畫一個(gè)。因此，為了使眼珠的移動(dòng)更加方便，從而配合其它表情動(dòng)作的需要，我們采用了這種分開組合的方法。
接下來(lái)我們就可以把構(gòu)成眼部的這兩個(gè)組合對(duì)象移到綠豆的臉部上來(lái)了。但我們又看到，眼睛在其臉部上，缺乏了投影。因此，我們?cè)賮?lái)畫一個(gè)19*19的橢圓形，使用線情填充，漸變色由#577811至#577811，而不透明度則是0%至100%。羽化值為2。然后將該對(duì)象通過(guò)對(duì)象層的調(diào)整，移到“眼部”對(duì)象的下方，形成一定的投影效果。如圖06。
圖06
或許有朋友會(huì)問(wèn)，為什么不直接對(duì)眼球使用“投影”特效，反而要另外繪制一個(gè)投影對(duì)象。其實(shí)這樣做的目的同樣是為了在對(duì)其它表情進(jìn)行繪制時(shí)，能夠更靈活地調(diào)整眼睛投影的大小、角度及深度等等。
我們將該眼睛再?gòu)?fù)制一份(投影不要復(fù)制)，然后用“縮放”工具將其拉伸至24*24大小，并移到綠豆臉部的左側(cè)中來(lái)。由于眼部位置的改變，也就使這一則的眼部高光位置發(fā)生改變，因此，我們可以用“部分選擇”工具對(duì)其進(jìn)行適當(dāng)?shù)奈恢谜{(diào)整，如圖07。
圖07
這樣一來(lái)，兩側(cè)的眼睛也都繪制完成了。此時(shí)看上去卻有點(diǎn)像“大眼青蛙”了，呵呵。。。接著我們?cè)搧?lái)畫放大鏡了。先畫一個(gè)5*12大小的矩形，采用“條狀”漸變，色彩值由# EBEBEB至# ABABAB，描邊色為# 8E90A5的1像素柔化。然后再畫一個(gè)9*21大小的矩形，設(shè)置其圓角度為60。同樣是用“條狀”漸變，色彩填充值由#FFFFFF至# E08915，描邊色為# 593E22的1像素柔化描邊。完成后將兩對(duì)象按圖08般進(jìn)行擺放對(duì)齊。
圖08
我們?cè)賮?lái)畫兩個(gè)直徑分別為31像素和25像素的正圓，然后將兩圓進(jìn)行水平和垂直對(duì)齊，并對(duì)這兩對(duì)象使用“修改—打孔”命令。從而得到一個(gè)放大鏡的鏡框外形。接著再為這個(gè)將環(huán)狀鏡框使用“條狀”的漸變填充，色彩由#FFFFFF至#CCCCCC，不采用描邊色。然后再為這一對(duì)象添加一個(gè)“內(nèi)斜角”特效，各項(xiàng)設(shè)置參數(shù)如圖09。
圖09
將組成放大鏡的這三個(gè)對(duì)象同時(shí)選中，并使用“修改—組合”命令，將其形成一個(gè)組合。然后點(diǎn)擊“修改—變形—數(shù)值變形”命令，從彈出的對(duì)話框的下拉列表中選擇“旋轉(zhuǎn)”，并設(shè)置旋轉(zhuǎn)角度為18。如圖11。
圖11
完成后即可將這個(gè)放大鏡移到綠豆左側(cè)的大眼上來(lái)了，如圖12。
圖12
我們?cè)賮?lái)給它畫一個(gè)簡(jiǎn)單的小手，好拿住放大鏡。用“橢圓形”工具畫一個(gè)20*11的橢圓。采用“橢圓形”漸變填充，色彩的漸變值由#FFFFFF至# 76AE00，描邊色為# 669309的1像素柔化。然后重新啟動(dòng)數(shù)值變形對(duì)話框，將該對(duì)像進(jìn)行40度的旋轉(zhuǎn)。然后將這個(gè)小手移到放大鏡左側(cè)位置，如圖13。
圖13
小手畫好后，接下來(lái)就該來(lái)畫小嘴了。用“鋼筆”工具在綠豆臉部下方位置畫一個(gè)如圖14般的外形。
圖14
對(duì)該外形使用全白色的實(shí)習(xí)填充，描邊色為# 4B7702的1像素柔化。為了使嘴部也能呈現(xiàn)歡ǖ牧⑻甯校?頤且慘????⒁桓鐾隊(duì)岸韻蟆O冉?飧雎肪對(duì)俑粗埔桓齔隼矗?緩蠖愿粗貧韻蟾撓? 4D7902的實(shí)心填充，羽化值為3，并取消掉原來(lái)的描邊色。然后將這個(gè)復(fù)制對(duì)象通過(guò)“層”面板的位置調(diào)整，移到綠豆“小嘴”對(duì)象的下方。然后用方向鍵將投影對(duì)象向上和向右分別平移3像素和1像素的距離。不過(guò)這樣還沒(méi)算完，再用“部分選擇”工具將這一投影對(duì)象左側(cè)的路徑節(jié)點(diǎn)選中，并將其向下移動(dòng)3個(gè)像素，如圖15。
圖15
這樣，一個(gè)放大鏡的靜態(tài)表情就繪制造完成了。為了使這一表情的一些色彩填充也能被其它的表情系列共享，我們可以把嘴部的色彩填充及投影對(duì)象的色彩填充等都建立一個(gè)樣式進(jìn)行保存
然后再添加一個(gè)亮度為-15，對(duì)比度為51的“亮度/對(duì)比度”特效。完成后將該鏡框移到放大鏡的手柄上來(lái)，如圖10。
圖10
為了使這個(gè)靜態(tài)表情能夠動(dòng)起來(lái)，我們要先建一個(gè)畫布大小為65*65大小的新文檔，然后將組成“放大鏡”表情的所有對(duì)象選中并復(fù)制到這個(gè)新畫布上來(lái)。接著再啟動(dòng)“幀”面板。在面板的右上方點(diǎn)擊其下拉菜單，從中選擇“重制幀”項(xiàng)，也就是復(fù)制幀的意思。如圖16。
圖16
隨后會(huì)彈出一個(gè)對(duì)話框，我們直接點(diǎn)擊“確定”按鈕。此時(shí)復(fù)制出來(lái)的幀也就列在“幀”面板中了。我們點(diǎn)擊“2幀”，然后在畫布中將綠豆左側(cè)大眼的黑色眼珠組合對(duì)象刪除。換以在上面用“鋼筆”工具繪制的直線路徑。如圖17。
圖17
該路徑的描邊色為全黑色的1像素柔化，但為了使這條路徑更加的明顯，我們點(diǎn)擊“復(fù)制”、“粘帖”按鈕，用兩條相同路徑的重疊來(lái)加深其色彩濃度。這樣，一個(gè)眨眼的動(dòng)作表情也就繪制完成了。我們可以點(diǎn)擊畫布下方的GIF動(dòng)畫播放按鈕來(lái)觀看。
圖18
是否覺(jué)得動(dòng)作太快了呢。我們?cè)?ldquo;幀”面板中將第一幀的延時(shí)時(shí)間設(shè)置為140/100秒。如圖19。
圖19
而第二帖的延時(shí)時(shí)間則設(shè)置為14/100秒。然后我們?cè)賮?lái)查看播發(fā)效果，可能有人又覺(jué)得慢了些。其實(shí)當(dāng)我們把這一動(dòng)畫導(dǎo)出為GIF動(dòng)畫圖片后，你再用ACDSee之類的看圖軟件去查看時(shí)會(huì)發(fā)現(xiàn)其播放速度要比在Fireworks中查看時(shí)稍快一些。因此還是先把該動(dòng)畫導(dǎo)出為GIF格式后再來(lái)查看。用“切片”工具將畫布范圍進(jìn)行框選。然后在“優(yōu)化”面板中選擇導(dǎo)出格式為“GIF動(dòng)畫”，顏色為256色，如圖20。
圖20
然后在切片上點(diǎn)擊右鍵，在彈出菜單中選擇“導(dǎo)出所選切片”，并為該動(dòng)畫選擇保存路徑即可。然后我們用看圖軟件來(lái)查看這一動(dòng)畫。我個(gè)人覺(jué)得其播放速度還是比較適中的。至此，我們所繪制的第一個(gè)表情也就大功告成了。盡管這一動(dòng)畫只有兩幀，而且表情變化也很簡(jiǎn)單，但卻為其它表情的繪制提供了一些樣式，可通過(guò)樣式面板直接使用。以及為其它表情動(dòng)作的夸張與變形帶來(lái)一定的原始參考。
fireworks制作綠豆表情的步驟二、“汗”
效果預(yù)覽
我們將“放大鏡”表情中綠豆的臉復(fù)制一份，作為“汗”表情的臉。而且同樣是在原來(lái)455*255大小的畫布上進(jìn)行繪制。這一表情的繪制較為簡(jiǎn)單，用“鋼筆”工具直接畫出四條線段，分別表示眉毛和眼睛，眉毛的描邊色為#567517，筆觸為3像素的柔化描邊。眼睛的描邊色為#3C5010，使用2像素的柔化描邊。然后再畫一個(gè)圓角度為100的矩形，用全白色的實(shí)心填充，描邊色為#5E7F19，使用2像素的柔化筆觸。完成后將這些對(duì)象按圖21般進(jìn)行擺放。
圖21
現(xiàn)在畫一個(gè)汗滴。先畫一個(gè)13*13大小的圓，采用“輪廓”漸變填充，色彩值為# BDEFFF至# 2EADD8，取消描邊色，并為其添加一個(gè)“進(jìn)一步模糊”的特效。然后用“部分選擇”工具將該圓上端的節(jié)點(diǎn)選中，使用方向鍵向上移動(dòng)12像素的距離。為使汗滴的上端更加尖銳，我們用“部分選擇”工具將上端節(jié)點(diǎn)的兩條控制手柄進(jìn)行縮小，如圖22。然后調(diào)整填充手柄的角度，如圖23。從而使汗滴的反光更加自然。
圖22
圖23
完成后將該對(duì)象移至綠豆額頭的左側(cè)即可。這樣一來(lái)，這個(gè)表情的靜態(tài)就完全畫完了，我們?yōu)樗陆ㄒ粋€(gè)65*65大小的空白文檔，然后將組成這一表情的所有對(duì)象都復(fù)制進(jìn)來(lái)。從而轉(zhuǎn)入該表情的動(dòng)態(tài)制作。
我們注意到，在這個(gè)表情中只有汗滴是需要做成運(yùn)動(dòng)的，而其它對(duì)象則仍保持著靜止?fàn)顟B(tài)。因此我們可以考慮將該汗滴轉(zhuǎn)成動(dòng)畫元件的方式來(lái)完成這一動(dòng)畫過(guò)程。我們點(diǎn)擊“層”面板中右上角的下拉菜單，從中選擇“共享此層”，如圖24。
圖24
然后選中“汗滴”對(duì)象，再點(diǎn)擊“修改—動(dòng)畫—選擇動(dòng)畫”命令。此時(shí)會(huì)彈出一個(gè)動(dòng)畫元件的設(shè)置窗口，我們?cè)谠摯翱谥休斎肴鐖D25般的相關(guān)數(shù)值。
圖25
點(diǎn)擊“確定”按鈕后“汗滴”對(duì)象即被轉(zhuǎn)成了動(dòng)畫元件。點(diǎn)擊畫布下方的“播放”按鈕即可進(jìn)行查看了。但播放速度稍快了點(diǎn)。我們打開“幀”面板，并將里面5個(gè)幀的延時(shí)時(shí)間設(shè)置為35/100秒，然后用“切片”工具為這一動(dòng)畫建立導(dǎo)出切片后保存為GIF動(dòng)畫，以便在看圖軟件中進(jìn)行查看或?qū)氲絈Q表情庫(kù)進(jìn)行使用。
fireworks制作綠豆表情的步驟三、“暈”
效果預(yù)覽
這一表情共有三個(gè)運(yùn)動(dòng)對(duì)象，除了兩只眼睛要不停地轉(zhuǎn)動(dòng)以外，嘴吧也是會(huì)動(dòng)的。但制作起來(lái)卻也不難。先從“放大鏡”表情中將我們所需要的對(duì)象都復(fù)制過(guò)來(lái)，為了使這一表情動(dòng)作再加的有趣，我們將原來(lái)的眼球投影對(duì)象用“縮放”工具拉伸至21*21。改用色彩為#648A13的實(shí)心填充，羽化值為3。眼白對(duì)象也用“縮放”工具拉伸至20*20，而黑色的瞳孔則不必做任何修改。然后按圖26般進(jìn)行擺放。
圖26
用相同的方法再?gòu)?fù)制出四個(gè)半圓形對(duì)象，并按圖29般進(jìn)行排列。將這并六個(gè)對(duì)象同時(shí)選中后使用“修改—組合”命令。
圖29
將該組合對(duì)象移至表情臉部位置后，這一表情的靜態(tài)繪制也就結(jié)束了。
圖30
新建一個(gè)65*65的空白文檔，將組成這一表情的所有對(duì)象都復(fù)制進(jìn)來(lái)，然后點(diǎn)擊“層”面板右上角的下拉菜單，將圖層1設(shè)置為“共享此層”。然后再新建一個(gè)圖層2，將“嘴吧”的組合對(duì)象移至圖層2中。
同時(shí)選中左側(cè)眼睛中的眼白和瞳孔組合，然后使用“修改—組合”命令，將這兩個(gè)組合合二為一。然后點(diǎn)擊菜單欄中的“修改—動(dòng)畫—選擇動(dòng)畫”，在彈出的對(duì)話框中進(jìn)行如圖31般的設(shè)置。
圖31
用同樣的方法，將右側(cè)眼白中的眼白和瞳孔組合合成一組后，點(diǎn)擊“修改—動(dòng)畫—選擇動(dòng)畫”命令，然后在彈出的對(duì)話框中也進(jìn)行圖31般的設(shè)置。
我們?cè)賮?lái)設(shè)置嘴吧的動(dòng)作，在圖層2中將“嘴”的組合對(duì)象選中，并點(diǎn)擊“復(fù)制”按鈕。然后在“幀”面板中依次選擇第2、3、4幀，將“嘴”的組合對(duì)象逐一復(fù)制過(guò)來(lái)。但第2和第4幀中還要將該對(duì)象進(jìn)行180度的水平翻轉(zhuǎn)。
最后別忘了還要將所有幀的延時(shí)時(shí)間設(shè)置為16/100秒。這個(gè)速度在導(dǎo)出為GIF文件后也有點(diǎn)慢，但這要是在QQ聊天中使用的話，速度會(huì)被加快近兩倍多的。到時(shí)候這個(gè)表情動(dòng)作看起來(lái)就變得舒服了。
通過(guò)以上三個(gè)實(shí)例，只是希望能為大家在繪制自己的QQ聊天表情時(shí)帶來(lái)一點(diǎn)技術(shù)上的幫助。同時(shí)也將我個(gè)人的一點(diǎn)經(jīng)驗(yàn)與大家共享。如果你已經(jīng)有了繪制一套屬于自己QQ聊天表情的初步構(gòu)想的話，那就趕快行動(dòng)吧!而且畫好后也別忘了送我一套哦!
我們?cè)賮?lái)繪制它的嘴吧。先畫一個(gè)5*5大小的圓，取消其填充色，選用2像素的柔化描邊，描邊色為# 4B7801。然后用“路徑切割”工具將該圓一分為二，如圖27。
圖27
然后將上半部分刪除，并將下半部分進(jìn)行復(fù)制后再進(jìn)行180度的水平翻轉(zhuǎn)。然后如圖28般進(jìn)行排列。
圖28