****標(biāo)題是我YY的啦~不過作者這篇文章倒真的是蠻清晰的。上手簡(jiǎn)單，完了還很適合給自己做個(gè)頭像啥的哈哈****
原文Create an Isometric Pixel Art Character in Adobe Photoshop
這是系列文章Isometric Pixel Art 像素藝術(shù)其中的一篇。
如果你和小朋友一樣喜歡玩樂高的話（或者你長(zhǎng)大后還是喜歡玩也好），像素畫可能是你的菜；它可以很有科技感，感覺更像是建造而不是畫插畫，因?yàn)檫@玩意兒沒有透視，你可以按照你的想法進(jìn)行布局。
接下來(lái)的教程里，我們會(huì)一起來(lái)做一個(gè)像素小人。它在像素畫里算得上是一個(gè)邏輯起點(diǎn)，因?yàn)樗軒椭覀兌x接下來(lái)要做的元素的比例。但是呢，在做像素小人之前，我們得先了解一些像素畫的基礎(chǔ)；如果你想直接開始做像素小人的話，可以直接跳到第3步。接下來(lái)我們開始。
1. 像素線
這些線是像素畫的基礎(chǔ)，也是等距風(fēng)格像素畫中最尋常（and有趣）的部分，我們將會(huì)用到的有：
這一類型的線，由兩個(gè)像素向下疊加組成，看起來(lái)相對(duì)平穩(wěn)，常被用來(lái)做正方形的表面。
最常用的結(jié)構(gòu)線還有像下面的這些，不過它們看起來(lái)會(huì)更有鋸齒感一些，每一節(jié)用的像素也更多。
相反地，這邊有些不規(guī)則的線：
非常鋸齒感的線，非常地不美觀。請(qǐng)盡量避免這樣。
2. 體積感
我們的像素小人不會(huì)嚴(yán)格地按照等距視圖的所有規(guī)則來(lái)做，所以我們先做個(gè)簡(jiǎn)單的立方體來(lái)掌握體積感。
在 Adobe Photoshop 中 新建 一個(gè)400px x 400px的文件。
通常我喜歡另開一個(gè)相同的窗口 (窗口>排列 > 為XX新窗口…) ，一個(gè)顯示大約為600%，另一個(gè)保持在100%用來(lái)檢查進(jìn)度。是否使用像素網(wǎng)格由你決定，但是我會(huì)覺得開啟之后有時(shí)候會(huì)讓人分心?，F(xiàn)在，讓我們放大，開始做2:1的線吧：
我喜歡用5%的灰色，而不是純黑，這樣我之后就可以加上一些陰影（用黑色，調(diào)低透明度）并且能夠用魔棒工具分別選中顏色。
以下是一些做線條的方法：
方法1.選擇直線工具 選中 像素模式, 取消勾選消除鋸齒 ，選用1px 粗細(xì)。畫的時(shí)候，直線工具會(huì)提示我們線的角度，選擇26.6?。（有時(shí)候，直線工具也不是很靠譜，如果角度不對(duì)的話，畫出來(lái)的線也可能很凌亂，需要加以注意。）
方法2.創(chuàng)建一個(gè)40 x 20px的矩形，然后選擇 鉛筆工具 (依舊是1px 粗細(xì)) ，在左下角畫一個(gè)單獨(dú)的像素，然后按住shift鍵,在右上角畫另一個(gè)獨(dú)立的像素。PS會(huì)自動(dòng)在這兩點(diǎn)之間連起一根線。以我的經(jīng)驗(yàn)來(lái)說，不用矩形選擇工具就可以把這些線做得很準(zhǔn)（或者說幾乎是準(zhǔn)的，只要再微調(diào)下就可以）。
方法3.用鉛筆工具畫兩個(gè)連起來(lái)的像素，選中它們之后，按住Alt ，用鍵盤方向鍵或鼠標(biāo)拖動(dòng)（以下簡(jiǎn)稱alt-移動(dòng)），到新的像素和之前的像素首尾相連。接下來(lái)復(fù)選已有的像素，重復(fù)操作，讓線條變長(zhǎng)即可。
按照上面的方法，我們得到了第一條線。我們選中，然后alt-移動(dòng)它，，或者復(fù)制一份，粘貼后向下合并圖層。水平翻轉(zhuǎn)。(編輯 > 變換 > 水平翻轉(zhuǎn)) 。（我用這個(gè)操作很多，所以把它做成了快捷鍵?。≒S：翻譯君這邊用的是F5水平翻轉(zhuǎn)，F(xiàn)6垂直翻轉(zhuǎn)）
讓我們把兩根線接在一塊兒：
然后，再次選中全部線段，alt-移動(dòng)，垂直翻轉(zhuǎn)，然后將兩段拼起來(lái)，這樣我們就有了一個(gè)正方形平面（透視面哈哈）：
是時(shí)候加入 "第三個(gè)維度"了。alt-移動(dòng)或者復(fù)制正方形平面，將復(fù)制的面放在原來(lái)的那個(gè)上方44px遠(yuǎn)：
小提示：如果你用方向鍵移動(dòng)的時(shí)候按住shift，可以一次移動(dòng)10像素。
為了創(chuàng)建一個(gè)整齊的立方體，接下來(lái)我們連接起立方體最左側(cè)和最右側(cè)的像素。之后，補(bǔ)上中間的垂直線即可：
現(xiàn)在將立方體背后的線擦掉。開始加顏色了，選一個(gè)你喜歡的顏色（盡量選亮色），將它填充在立方體頂部。
Now increase 10% brightness to that color (I recommend using the HSB sliders on the color panel)
現(xiàn)在將之前的顏色增加10%的明度（我建議使用調(diào)色板上的HSB 滑塊）
將前面的高光區(qū)域填充出來(lái)。我們把立方體的邊線刻畫出來(lái)，用亮色在黑線上的1像素做填充，效果是最好的，像這樣：
現(xiàn)在，將亮藍(lán)色下方的黑線去掉。按住shift鍵使用鉛筆的小技巧對(duì)橡皮擦同樣適用。你可以選中橡皮擦（鉛筆模式，1px粗細(xì)）后，點(diǎn)起點(diǎn)，按住shift，再點(diǎn)終點(diǎn)，中間連線部分就被擦掉了。
用吸管工具從頂部吸取顏色（使用鉛筆或填充工具時(shí)，吸管工具的快捷鍵是Alt），將立方體中間的黑線變?yōu)榱了{(lán)色。然后將藍(lán)色降低15%亮度，填充左側(cè)面；再降低10%亮度，填充右側(cè)面。
這樣我們的立方體就完成了。在100%的尺寸下看起來(lái)應(yīng)該是清晰，邊緣光滑的。我們可以接著進(jìn)行下去了。
- Let's Add Some Character
3. 讓我們創(chuàng)建一個(gè)角色吧
角色的風(fēng)格依據(jù)個(gè)人喜好而定，你可以按你覺得合適的比例和元素做調(diào)整。我傾向于做一個(gè)瘦瘦的身體，有點(diǎn)大的腦袋。瘦瘦的身體可以讓線條看起來(lái)簡(jiǎn)單/直接。
首先從眼睛開始做。嚴(yán)格來(lái)說的話，屏幕上像素小人的眼睛是不一樣高的，但是這個(gè)小小的戲法能讓我們的角色看起來(lái)更美觀，而且保證小尺寸下的清晰。
我們會(huì)做一個(gè)小小的人，因?yàn)樵诤竺?，我們可能?huì)給它搭配上一輛車，一幢房子，一個(gè)廣場(chǎng)或者甚至是做一個(gè)城市。在那個(gè)時(shí)候；在這樣可以拓展的情況下，人物角色應(yīng)該是插畫里面最小的元素。
出于圖形效率考慮：你要在盡可能少用像素的情況下，創(chuàng)建一個(gè)精美的角色（能有一些面部細(xì)節(jié)）并且，小尺寸比大尺寸要簡(jiǎn)單很多。除非你想要畫的，是精美寫實(shí)的肖像之類，我們擅長(zhǎng)的是小尺寸。
讓我們新建一個(gè)圖層。我們用兩個(gè)像素點(diǎn)做出眼睛；一邊一個(gè)，中間空出一個(gè)像素的間隔。在左側(cè)的像素點(diǎn)邊，畫一條垂直線：
現(xiàn)在，新建一個(gè)圖層，在眼睛下畫一條2像素的水平線，當(dāng)做嘴巴。將它移到下面你覺得合適的地方，向下合并圖層。你可以用同樣的方式把下巴做出來(lái)，用一條稍微長(zhǎng)一點(diǎn)的水平線就可以了：
如法炮制發(fā)際線和頭頂，然后把邊緣像這樣較為圓潤(rùn)的連起來(lái)：
現(xiàn)在，在右邊眼睛的邊上，留一像素的空格，增加鬢角（也幫助了角色耳朵部分的塑造），將鬢角移到和發(fā)際線相接。接著給耳朵的區(qū)域留一像素空白，用線連接邊角，將頭的邊緣封閉起來(lái)：
在耳朵上面的地方，增加一個(gè)像素點(diǎn)，按你喜歡的方式改變角色的頭型；腦袋在脖子的地方通常比較窄一些：
在下巴下面畫一條線，作為胸部。脖子的部分是在耳朵下面畫一組像素，然后一列對(duì)角線，作為角色肩膀的可見部分：
現(xiàn)在，在肩膀下面，畫一條12px的垂直線段，作為手臂，另一邊在2像素外。在底部用一組像素連接起來(lái)，做出手的樣子/第一步（講真，這些手沒有細(xì)節(jié)，但是沒啥大問題），在手的底部，上面一些，畫兩條2:1的水平像素，作為腰，然后完成胸部的線條?，F(xiàn)在你有整個(gè)上身體的輪廓了。在身體左側(cè)其實(shí)還有一只胳膊，但是被胸部擋住看不見了，所以也還OK。做完之后，看起來(lái)是這樣的：
It should be looking like this:
當(dāng)然，你也可以按你的喜歡選擇不同的比例；我喜歡在決定做之前，試試各種不同的選擇。
現(xiàn)在，我們可以添加幾根垂直的線段作為下半身。我喜歡在鞋和腰之間留下大概12px的間距。腳很簡(jiǎn)單，比腿出來(lái)一個(gè)像素就可以了，并且根據(jù)軸測(cè)圖來(lái)的話，屏幕上的右腳要比左腳低一個(gè)像素。
現(xiàn)在，我們給小人加點(diǎn)色彩。給小人找個(gè)合適的膚色不算容易，如果你想選和我一樣的膚色設(shè)置，那么試試看#FFCCA5.給身體的其他部分加上色彩比較簡(jiǎn)單。在這之后，你應(yīng)該定義下袖長(zhǎng)，衣領(lǐng)的位置和樣式，然后加上一些深一些的陰影，將衣服和身體區(qū)分開來(lái)。我喜歡把內(nèi)部的線條做得比純黑色亮一些（特別當(dāng)不同的區(qū)塊處在近似的水平時(shí)，比如從衣服到皮膚的交界處，或者衣服到褲子的交界處）這樣一來(lái)，各個(gè)線條的對(duì)比不會(huì)太強(qiáng)烈，不同的體積感也更明顯。
你可以在每個(gè)不同的顏色區(qū)塊加上一些高光。避免過多的陰影或是用漸變?nèi)ケ憩F(xiàn)陰影；幾筆(10% to 25%) 亮色或是深色就能幫元素跳出來(lái)，而不是看起來(lái)扁扁的。如果你想加一個(gè)100%明度的色彩，試著減少它的飽和度。有些情況下（比如頭發(fā)），改變顏色之間的飽和度可能是個(gè)不錯(cuò)的主意。
你可以試試各種發(fā)型，下面是一些小參考：
如果你還要做更多的角色小人兒，一些小的變化，比如改變下衣服的樣式，袖子的長(zhǎng)度，褲腿的長(zhǎng)度，配件，服裝和膚色，各式各樣的人物也是手到擒來(lái)了。
現(xiàn)在，剩下一點(diǎn)點(diǎn)步驟，就是把各種元素集合在一起，看他們?cè)谕画h(huán)境里的展現(xiàn)了：
如果你想導(dǎo)出的話， PNG的格式最理想。
OK了，你已經(jīng)成功做出屬于自己的像素小人了！
我希望這篇教程不會(huì)太復(fù)雜；我想我已經(jīng)盡我所能把需要的步驟以及風(fēng)格的解釋說清楚了。我們會(huì)持續(xù)探索像素藝術(shù)的世界；建筑物，車輛，內(nèi)飾，外飾。像素畫有無(wú)限多的可能和樂趣，不過也可能有點(diǎn)點(diǎn)難啦。
René Alejandro Hernández住在薩爾瓦多，已經(jīng)從事像素藝術(shù)（尤其是等間距像素風(fēng)格）超過10年。
http://tutsplus.com/authors/rene-alejandro-hernandez
--------------------------------------------分割線--------------------------------------------
附上原文評(píng)論的一些作業(yè)。如果評(píng)論關(guān)注的人多的話，我會(huì)把剩下的系列也搬搬完~XD
