我個(gè)人畫圖標(biāo)的一些步驟和習(xí)慣,和大家交流一下..
基本上平面軟件做立體圖標(biāo)也是先建模再渲染的過程,然而這些都得自己去做,雖然再逼真度上和3D軟件還是有差距,但是更多變的風(fēng)格和效果使平面軟件制作圖標(biāo)給了設(shè)計(jì)者更多發(fā)揮空間.下面是我畫一個(gè)USB接頭的過程(個(gè)人認(rèn)為圖標(biāo)不要太接近實(shí)物為好,更卡通風(fēng)格,選用更代表性的物體才是優(yōu)秀的圖標(biāo)...雖然我還做不到 -_-!)

上面為制作的流程和最終效果圖

首先我要說(shuō)的是..FW本身不帶直接透視功能,不過有透視輔助線(其實(shí)也不太方便)和3D插件.但是直接做更好的練習(xí)自己的透視能力.我這里畫的整套圖標(biāo)都是同一個(gè)角度透視的,所以我采用一個(gè)正方形而不是這個(gè)USB插頭本身 是為了適應(yīng)更多圖標(biāo)..

1 如上!很正的正方形

2 使用扭曲工具把他變形成從側(cè)面看的效果.這里可以用FW中的輔助線來(lái)制作或者使用3D插件透視一個(gè)正方形.完成變形以后千萬(wàn)記得把這個(gè)變形的歷史記錄保存到命令中..第四頁(yè)我提供了這個(gè)命令的JSF文件下載
tips:很多朋友在經(jīng)典問不知道扭曲工具是什么..為什么我的扭曲總是放大或者縮小而不能任意變形呢?? 扭曲工具是變形工具的第三個(gè)!假如你還不明白這一步的含義請(qǐng)看
FW制作移動(dòng)硬盤
FW繪制3D圖形(ipod)

3 復(fù)制一個(gè)然后向右邊移動(dòng)幾個(gè)象素,再縮小到99%,大致的畫出這里畫的USB插頭的正面和反面所在的平面..為了更準(zhǔn)確的達(dá)到立體效果不失真,真的能不失真嗎?請(qǐng)繼續(xù)向下看.
tips:后面的面要比前面的面稍小一點(diǎn)點(diǎn)..近大遠(yuǎn)小嘛.用過相機(jī)拍攝微距的朋友一定知道,鏡頭越近,前后大小差別越大

4 把畫好的兩個(gè)面收起來(lái)(隱藏)~~以后再用..然后畫上平面圖片.USB插頭的內(nèi)容都在一個(gè)面上,所以畫正面就好了.假如立體圖形的幾個(gè)面內(nèi)容都很多..那就要畫三視圖的 平面圖了..這張平面圖的內(nèi)容最好把所有你覺得可能出現(xiàn)的都畫上,甚至包括很明顯的色彩過渡.

5 同時(shí)選取你畫好的正面圖和正方形.然后再執(zhí)行菜單中的 [命令] - [你再第二步保存的變形命令] 好了..不但正方形變了,USB插頭的正面圖也變成透視圖了.完成以后 先不要?jiǎng)h除輔助線(被透視的正方形),先把第3步畫的兩個(gè)面拿出來(lái).正面對(duì)正面反面對(duì)反面.

6.對(duì)整潔以后再刪除輔助線.現(xiàn)在USB插頭的基本外形已經(jīng)出來(lái)了,哎呀.有點(diǎn)失真了.后面的那個(gè)面太下了.好了,現(xiàn)在你可以開始罵我第3步不做會(huì)更好了.我的錯(cuò)啊..對(duì),這就是教程和經(jīng)驗(yàn)交流的區(qū)別.我更希望大家能提出對(duì)我的制作過程中的看法,看貼回帖是一種美得!!

看看這個(gè)圖片,上一部做的東西真的失真了嗎?其實(shí)不然..但是真的有點(diǎn)怪怪的啊,原因是我們把USB插頭的金屬部分和塑料部分放在一個(gè)面上了..再仔細(xì)看看上圖..側(cè)面來(lái)看其實(shí)不是在一個(gè)面上的.怎么讓他們各自到各自的面上去呢?這個(gè)只有靠感覺去微調(diào)一下了..藍(lán)色的面向右移動(dòng)一象素,紅色的面向上移動(dòng)兩象素,左一象素
tips:很多地方我們需要用到微調(diào),比如在立體圖形上面有一個(gè)凸出的面,但是又凸出的不多..我們當(dāng)作他在原來(lái)的那個(gè)面上做透視,然后再微調(diào)一下

7.把那些面連接成立體外形.這個(gè)很簡(jiǎn)單..具體請(qǐng)看"FW制作3D圖形"
既然已經(jīng)成了立體圖形,我們把側(cè)面也畫上去,這里有幾個(gè)凹入的槽.先畫三根線.效果后面做

到這里模型已經(jīng)全部完成了.大家畫畫的時(shí)候也會(huì)先畫線稿再上色對(duì)把,這個(gè)就是線稿了.

8.上色.假如是用馬克筆,一般就直接在線稿上面畫質(zhì)感了,是的,馬克筆五塊錢一支,電五毛錢一度....SO.我們不用直接畫漸變,先畫個(gè)基本色,然后再一個(gè)一個(gè)部分修改為漸變.

9.調(diào)整漸變來(lái)表現(xiàn)光感(誰(shuí)能告訴我一個(gè)更專業(yè)的詞語(yǔ)),不同的質(zhì)感對(duì)光的反映是有講究的,塑料比較圓滑,金屬比較直爽,玻璃比較活躍.塑料的轉(zhuǎn)角是一個(gè)緩慢變化的過程,而金屬的轉(zhuǎn)角不能用單一的漸變來(lái)表現(xiàn),一般我會(huì)再轉(zhuǎn)角多加幾條黑色和白色的線條....

10.還是光感.
塑料部分的正面進(jìn)行羽化:羽化塑料的正面,達(dá)到從正面到側(cè)面的色彩緩慢過渡的目的.你可以和上圖比較下,可見上圖的菱角是很明顯的.
半透明漸變:把手握的位置的反光畫出來(lái),具體是上面透明,下面白色的漸變,再羽化一下.
同上:同上制作手握位置的角的高光
白色實(shí)心填充:制作一條細(xì)線來(lái)表現(xiàn)整個(gè)塑料部分的菱角的高光,上一部的作用和這一步是同樣的,只是手握的位置的高光線條比較粗,所以我用兩步來(lái)實(shí)現(xiàn)
金屬部分表面內(nèi)容的內(nèi)側(cè)陰影:金屬部分表面有一個(gè)槽和兩個(gè)洞..內(nèi)側(cè)陰影是為了表示他們是凹進(jìn)去的.
一象素白色線條:金屬部分的高光,金屬部分的菱角是很直爽的.直接變到另外一個(gè)面

11.細(xì)節(jié)部分.操作解釋如下理解
USB標(biāo)志的原角舉行邊框:使用1PX內(nèi)側(cè)陰影表現(xiàn)它們是凹入的
USB標(biāo)志:使用1PX投影,表示它是凸出的,投影和陰影的目的是畫出那個(gè)很薄的側(cè)面.
金屬質(zhì)感修改:這里加一個(gè)黑色的或者你也可以再加一條白色的再左邊.為什么??你從凸出的鏡子看自己,自己被壓扁了.,那么從一個(gè)到90度的菱角看景物..每個(gè)景物就剩下一根線了,所以金屬的原角有一系列無(wú)規(guī)律的線條..

12.來(lái)看看金屬部分的另外一些細(xì)節(jié)和全部組成內(nèi)容
塑料再金屬上的投影:使用表面做內(nèi)側(cè)陰影,然后選上[去底色],這是塑料擋住了部分照到金屬的光.
自身的邊緣:金屬的邊緣,由于11步說(shuō)的原理,所以金屬的邊緣加兩條深線條

13.過份仿真的圖標(biāo)在使用起來(lái)是沒有太大意義的,真正的圖標(biāo)要使用起來(lái)必須顏色清楚,輕易區(qū)分,有體量感(胖一點(diǎn)).而且實(shí)際制作中,一套圖標(biāo)要風(fēng)格統(tǒng)一.你可以使用同樣角度的透視或者同樣的配色或者同樣的表現(xiàn)風(fēng)格.這里我使用了同樣的透視,這就意味著整套圖標(biāo)的透視都用同一個(gè)透視的命令.如下另一例子

14.這里使用了上一個(gè)圖標(biāo)制作所保存的命令,這樣兩個(gè)圖標(biāo)就是從同一個(gè)角度透視了,這個(gè)例子中,我也把 [光影漸變]和[渲染質(zhì)感]作為兩步,這樣能更好的調(diào)整色彩

兩個(gè)實(shí)例的源文件和這里使用的透視的命令下載

透視命令下載

放到:
....../user/Application Data/Macromedia/Fireworks MX 2004/Commands 目錄下面,然后進(jìn)入FW,選取正方形,然后執(zhí)行菜單的 [命令]-[我提供的命令]就可以直接透視了.也就是直接完成了第2張圖片的操作

來(lái)源：藍(lán)色理想

推薦:Fireworks視頻教程