像素圖標的繪制方法圖解

[第1頁]

如果讓你直接畫出這樣一個圖標我想難度有點大，不要緊接下來我們從第一筆開始教你將這個圖標完成。當然你要學習的只是繪制的方法而不是機械的模仿。 圖1　整個圖標繪制的全過程 　　繪制這樣的建筑當然不能憑空想象。為了更清楚的了解建筑的結構可以畫出下面的草圖。這只是幫助更好的理解結構。 圖2　四個不同方向的圖像 　　1. 借助線條和鉛筆工具畫出建筑的底層：一個立方體 　　對于像素繪畫來說并不是所有的角度都能很好的表現立方體。（下圖有11種不同角度立方體的圖形供大家參考）但這樣 45 度透視的角度正好表現。 ? ? 圖3　像素顯示的立方體圖形　　圖4　完成第一步的繪制 圖5　11種不同角度立方體的圖形 　　2. 現在在第一層的基礎上我們再加蓋一層，當然還是一個立方體而且角度要保持一致。 　　繪制完成第二層后將與第一個立方體重疊的線條刪除。留出一個清晰的畫面。下圖中已經標出間距的像素，是為繪制窗戶而規劃好的。 圖6　繪制完成第二個立方體 　　3. 為兩個立方體加一個兩面坡形的屋頂這樣看起來起碼有一點像房子:) 　　房頂比起立方體略微難掌握些，同樣要注意保證角度的一致。 　　將不要的線條刪除保證畫面的清爽，不要對細部過于苛刻這只是個像形狀的草圖，現在就把細部繪制的很完美，如果發現要做例如高度等的調整就要返工了。 　　總之繪制圖標也像畫畫一樣時刻記住“從整體出發”。 ? ? 圖7　完成屋頂的繪制 　　4. 在第二個立方體的兩個面上分別繪制窗戶。由于角度不同所以繪制出的窗戶的尺寸也有差異。 　　正面的窗戶寬為4個像素，側面墻上的窗戶寬為3個像素。 　　窗戶的繪制并不困難，但要注意避免幾個易犯錯誤。 圖8　3像素寬窗戶的畫法 圖9　4像素寬窗戶的畫法 　　繪制時首先要注意線條的角度統一，每扇窗戶的間距要保持一致。不能與上下邊緣線相連否則在縮小觀看時會很容易發現問題。

?

#p#副標題#e#

　5. 那就畫上窗戶好了，不用我再教門怎么畫了吧？自己畫上門吧！

　　當然門不能就像窗戶一樣貼在墻上，所以要為它在一層開個門洞，參看下圖。現在就要對房屋的形狀做一個調整,將那些不盡如人意的地方修改準確。(如將第一層的高度提高，這樣房屋看起來更加的堅固和美觀)再添棵小樹:)

? ?

圖10　畫上窗戶和門的房子　　圖11　對門進行修飾后的房子

　　6. 給房屋用“力邦”漆刷一遍，效果就好多了。

　　當然墻壁的顏色不能用一種，根據受光面的不同墻壁的顏色也分為“亮部色”“中間色”“暗部色”，立方體的正面為中間色，側面為暗部色，頂面為亮部色。

　　使用添色工具將房屋不同部分的墻壁添上顏色。(如圖所示)
　　屋頂，門窗也要粉刷，先均勻的添上單色給圖示一個整體的色彩效果。
　　上色同樣還是那句話“一切從整體出發”。

圖12　為房屋填充上顏色及色版

　　7.房屋的二樓平臺為了表現出又凹陷的效果所以還需要再加工。

　　將一層樓的上檐用白色線條提亮，以區分出與平臺的高度不同。再為平臺的右面加上陰影以突顯出凹陷效果。

　　同樣房屋兩層的正面與側面的交界線用亮色勾勒，但要注意兩層的交界線的顏色是不同的，因為第二層處在屋檐的陰影中所以顏色要暗一些。可以比較圖中(1)(2)所示的區別。

圖13　平臺的處理及交界線的描繪

　　8.現在要好好對待窗戶了。

　　處在不同受光面的窗戶玻璃當然顏色也會有區別，亮部的亮，暗部的暗。

　　先為不同面的玻璃添上明暗不同的顏色。窗戶要有窗框啊，這就要考慮到一些細微的變化，圖中展示了處在不同受光面的窗框及玻璃機構的細部分析。

　　根據分析的結果為房屋的窗戶畫上窗框以增加窗戶的立體感。

　　考慮到畫面的美觀去除了側面底排的一扇窗戶。

圖14　窗戶的細部分析及繪制

?

#p#副標題#e#

?

? 9.該修理屋頂了。

??? 沿著屋頂兩個坡面的角度每隔一個像素用朱紅色的線條繪制出屋檐的起伏。
??? 最后別忘記再屋檐下用較深的顏色勾勒出屋檐的陰影。這樣一來立體感和光線的感覺就更好了。

圖15　為屋頂畫上瓦楞和陰影

　　11.這是最后一步了！

　　現在做的幾乎都是“畫龍點睛”的工作,首先將屋頂的顏色過渡的更加圓潤,平臺也用亮色勾勒一下，顯出凹陷的效果。之后為亮面的玻璃加上光影效果,將畫面上的黑色線條徹底的覆蓋。再用同一色系的深色加以描繪。

圖17　做最后的調整

　　有了第一棟房子的“建筑經驗”多蓋幾棟也沒有什么問題吧？

圖18　改變顏色后的圖標

?