fireworks做矢量立體圖標(biāo)
fireworks做矢量立體圖標(biāo)
用平面軟件做立體圖標(biāo)的基本流程也是“先建模,再渲染”,然而這些都得自己去做,雖然在逼真度上和3D軟件還是有差距,但是平面軟件制作圖標(biāo)可以有更多變的風(fēng)格和效果,給了設(shè)計(jì)者更多發(fā)揮空間。那么下面小編給大家整理了關(guān)于fireworks做矢量立體圖標(biāo),希望大家喜歡。
下面是我畫(huà)一個(gè)USB接頭的過(guò)程。
fireworks做矢量立體圖標(biāo)的效果圖:
fireworks做矢量立體圖標(biāo)的方法步驟:
Fireworks本身不帶直接透視功能,不過(guò)有透視輔助線(其實(shí)也不太方便)和3D插件,但是直接做能夠更好地練習(xí)透視能力。我這里畫(huà)的整套圖標(biāo)都是同一個(gè)角度透視的,所以我采用一個(gè)正方形而不是這個(gè)USB插頭本身,主要是為了適應(yīng)更多圖標(biāo)。
步驟1 如上,在fireworks中畫(huà)一個(gè)很正的正方形。
2 在fireworks中使用扭曲工具把它變形,處理成側(cè)視圖的效果。這里可以用FW中的輔助線來(lái)制作,或者使用3D插件透視一個(gè)正方形。完成變形以后千萬(wàn)記得把這個(gè)變形的歷史記錄保存到命令中。最后我提供了這個(gè)命令的JSF文件下載。
扭曲總是放大或者縮小的解決方法:
在fireworks中的扭曲工具是變形工具的第三個(gè)圖標(biāo)!如果你還不明白這一步的含義請(qǐng)看下面。
3 復(fù)制一個(gè),然后向右邊移動(dòng)幾個(gè)象素,再縮小到99%,大致的畫(huà)出這里畫(huà)的USB插頭的正面和反面所在的平面。為了更準(zhǔn)確的達(dá)到立體效果不失真,真的能不失真嗎?請(qǐng)繼續(xù)向下看。
tips:后面的面要比前面的面稍小一點(diǎn)點(diǎn)。近大遠(yuǎn)小嘛.用過(guò)相機(jī)拍攝微距的朋友一定知道,鏡頭越近,前后大小差別越大。
4 把畫(huà)好的兩個(gè)面收起來(lái)(隱藏)~~以后再用。然后畫(huà)上平面圖片.USB插頭的內(nèi)容都在一個(gè)面上,所以畫(huà)正面就好了.如果立體圖形的幾個(gè)面內(nèi)容都很多。那就要畫(huà)三視圖的 平面圖了。這張平面圖的內(nèi)容最好把所有你覺(jué)得可能出現(xiàn)的都畫(huà)上,甚至包括很明顯的色彩過(guò)渡。
5 同時(shí)選取你畫(huà)好的正面圖和正方形.然后再執(zhí)行菜單中的 [命令] - [你再第二步保存的變形命令] 好了。不但正方形變了,USB插頭的正面圖也變成透視圖了。完成以后,先不要?jiǎng)h除輔助線(被透視的正方形),先把第3步畫(huà)的兩個(gè)面拿出來(lái),正面對(duì)正面,反面對(duì)反面。
6.對(duì)整齊以后再刪除輔助線?,F(xiàn)在USB插頭的基本形狀已經(jīng)出來(lái)了,可以看起來(lái)有點(diǎn)失真……后面的那個(gè)面太靠下了?,F(xiàn)在你可以開(kāi)始罵我第3步不做會(huì)更好了,的確是我的錯(cuò)啊!這就是教程和經(jīng)驗(yàn)交流的區(qū)別。我更希望大家能提出對(duì)我的制作過(guò)程中的看法。
看看這個(gè)圖片,上一步做的東西真的失真了嗎?沒(méi)有呀!但是真的有點(diǎn)怪怪的——原因是我們把USB插頭的金屬部分和塑料部分放在一個(gè)面上了。再仔細(xì)看看上圖。側(cè)面來(lái)看其實(shí)不是在一個(gè)面上的。怎么讓他們各自到各自的面上去呢?這個(gè)只有靠感覺(jué)去微調(diào)一下了。藍(lán)色的面向右移動(dòng)一象素,紅色的面向上移動(dòng)兩象素,左一象素。
tips:很多地方我們需要用到微調(diào),比如在立體圖形上面有一個(gè)凸出的面,但是又凸出的不多。我們當(dāng)作他在原來(lái)的那個(gè)面上做透視,然后再微調(diào)一下。
7.把那些面連接成立體形狀。既然已經(jīng)成了立體圖形,我們把側(cè)面也畫(huà)上去,這里有幾個(gè)凹入的槽。先畫(huà)三根線.效果后面做。到這里模型已經(jīng)全部完成了。大家畫(huà)畫(huà)的時(shí)候也會(huì)先畫(huà)線稿再上色,這個(gè)就是線稿了。
看過(guò)“fireworks做矢量立體圖標(biāo) “的認(rèn)還看了:
1.fireworks模板:制作精細(xì)PC圖標(biāo)