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ì)整齊以后再刪除輔助線。現(xiàn)在USB插頭的基本形狀已經(jīng)出來(lái)了，可以看起來(lái)有點(diǎn)失真……后面的那個(gè)面太靠下了。現(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)