昨天作了張圖瑰谜，作圖的時(shí)候看了點(diǎn)故障藝術(shù)的文章，順便加入了一個(gè)小組Glitch Art?
這個(gè)網(wǎng)站是關(guān)于獨(dú)立游戲indienova.com 的兔簇，瀏覽途中看到了像素畫塘装，3年前用Photoshop+Flash作過一幅作品，瞬間來了興趣备图，看了像素畫的起源之類的文章灿巧，在教程區(qū)域發(fā)現(xiàn)了很多像素畫的教程赶袄，發(fā)現(xiàn)基本都是英文，今天工作強(qiáng)度一般抠藕，就來試著翻譯一篇饿肺。
原文鏈接?Pixel Art Tutorial?（需要翻墻）
作者 Derek ?
正文開始
note?
這篇教程是我在2007年于個(gè)人網(wǎng)站上創(chuàng)作的。從那之后有一些細(xì)微的調(diào)整盾似，但沒有重大的更改敬辣。
在這10個(gè)步驟下，我將教你如何去創(chuàng)造一個(gè)“sprite（精靈）”零院，它是一個(gè)獨(dú)立的角色或者說是對象（object）溉跃。當(dāng)然，這個(gè)術(shù)語來源于電子游戲告抄。
創(chuàng)造像素畫是一種技能撰茎，我去學(xué)習(xí)它是因?yàn)槲业挠螒蛐枰＝?jīng)過一些嘗試之后打洼，我變得得心應(yīng)手龄糊，開始把它當(dāng)作真正的藝術(shù)。如今募疮，像素藝術(shù)在游戲開發(fā)以及插圖中非常流行炫惩。
這個(gè)像素畫是我?guī)啄昵皠?chuàng)作的，用來教學(xué)像素畫的基本概念阿浓，我已經(jīng)進(jìn)行了大量的精簡他嚷。還有一些像素的教程，我覺得它們太復(fù)雜太啰嗦芭毙。像素藝術(shù)不是一種科學(xué)爸舒，你沒必要在創(chuàng)作的時(shí)候去計(jì)算矢量。
1.工具
像素畫的好處之一就是你不需要任何花哨的工具稿蹲，使用你電腦自帶的畫圖工具就已經(jīng)足夠了扭勉！據(jù)說有專門為像素畫制作的工具，比如 Pro Motion苛聘，對于Mac用戶來說 Pixen涂炎。雖然我沒嘗試過它們，但聽說它們很棒设哗。在本教程中唱捣，我將使用Photoshop，它很昂貴网梢，但是它能應(yīng)付各種藝術(shù)創(chuàng)作震缭，同樣它有許多非常有用的功能用來創(chuàng)作像素畫。
在使用PS的時(shí)候，你的主要工具是鉛筆工具（pencil tool）快捷鍵 "B"巡社，畫筆工具（brush tool）是你的備用工具膛堤。鉛筆工具可以讓你畫出純粹的像素點(diǎn)，不會(huì)反鋸齒（anti-aliasing）晌该。
另外兩種工具是選框工具（marquee tool）快捷鍵 “M”肥荔，以及魔法棒（快捷鍵 “W”），選擇朝群、拖動(dòng)燕耿、復(fù)制和粘貼。記住選擇時(shí)按住 “Shift” 或 “Alt” 可以切換新增或減去選區(qū)姜胖。當(dāng)你試圖獲取不規(guī)則的選區(qū)時(shí)誉帅，這很方便。
你同樣可以使用吸管工具（eyedropper）快捷鍵 “I” 谭期，來吸取顏色堵第。顏色轉(zhuǎn)換在創(chuàng)作過程中很重要吧凉，所以你盡量要吸取相同的顏色并使用它們隧出。
最后，確保你學(xué)會(huì)這些快捷方式阀捅。它們可以節(jié)省你很多時(shí)間和精力胀瞪。還有一個(gè)快捷鍵 “X” ，用來快速切換你的主色和輔色饲鄙。
2.線條
像素其實(shí)是很小的顏色塊凄诞。第一年你需要學(xué)會(huì)的是如何有效使用這些塊用來生成你想要的線條。我們將探討2種最基礎(chǔ)的線條忍级，直線和曲線帆谍。
直線
我知道你在想什么——這看上去易如反掌！但對于像素來說轴咱，直線也有可能有問題汛蝙。我們要避免 “鋸齒” —— 一些小的鋸齒使線看上去不均勻。合理運(yùn)用鋸齒可以使一段線比其他線段看上去大或者小朴肺。
曲線
對于彎曲處窖剑，要確保上下弧度始終保持一致。在接下來的例子中戈稿，比較順滑的曲線像素依次為 6>3>2>1 西土，而帶有鋸齒的曲線是 3>1<3。
結(jié)論
制作出舒適的線條是像素畫的關(guān)鍵鞍盗。稍后需了，我們將學(xué)習(xí)如何使用反鋸齒來使我們的線條看起來非常順滑跳昼。
3.概念
首先要有一個(gè)好的創(chuàng)意！試著想象出你想用像素畫畫什么援所，無論是在腦海中還是畫在紙上庐舟。稍微做一些準(zhǔn)備工作可以使你在后面的創(chuàng)作中更專注。
思考
1.你想要讓這個(gè)精靈用來做什么住拭？是用在網(wǎng)頁上挪略，還是游戲中？以后會(huì)作出動(dòng)畫嗎滔岳？如果你以后要讓它動(dòng)起來杠娱，那你應(yīng)該把它做的盡量小且細(xì)節(jié)豐富。相反的話谱煤，你可以把豐富的細(xì)節(jié)放進(jìn)這個(gè)精靈中去摊求，這樣你就不必再去重復(fù)處理它了。設(shè)想一下刘离，這個(gè)精靈將去哪里室叉，怎么去把它做的更好。
2.我會(huì)受到什么限制硫惕？早期茧痕，我說過限制顏色的很重要的。理由之一是顏色受到硬件或其他相關(guān)的限制（如今不存在）恼除。準(zhǔn)確來說踪旷，如果你想模擬一些特定的風(fēng)格（C64、NES等）豁辉，考慮一下你講繪制的精靈尺寸以你它將要適應(yīng)的環(huán)境（軟硬件）令野。
讓我們狂歡把！；占丁气破！
在本教程中，我沒有作任何限制餐抢，但我希望你作出盡可能大的精靈现使，這樣你就可以清晰的看到每一步都發(fā)生了什么。為此弹澎，我決定用摔跤律師（Lucha Lawyer）作為我的原型朴下！他可以被用在格斗游戲，或者類似于 "Habeus Corpse Blaster" 之類的電影中苦蒿。
4.輪廓
黑色的輪廓為你的精靈提供了一個(gè)好的基本結(jié)構(gòu)殴胧，這是一個(gè)好的起點(diǎn)。我們選擇黑色的理由是因?yàn)檫@很暗。稍后团滥，我將展示給你如何更改輪廓的顏色以獲得更逼真的效果竿屹。
兩種處理方法
我傾向于兩種繪制輪廓的方法。你可以徒手先把輪廓畫好灸姊，然后把它清理干凈拱燃，或者你一開始就用像素來繪制。就不斷的點(diǎn)擊點(diǎn)擊點(diǎn)擊力惯，你懂的碗誉。。父晶。
我認(rèn)為你用哪種方法取決于你將繪制精靈的大小以及你的技術(shù)哮缺。如果這個(gè)精靈特別大，那么徒手繪制它的形狀再清理一下會(huì)容易的多甲喝，特別是你第一次接觸的時(shí)候尝苇。
在本叫承重，我們創(chuàng)作了一個(gè)相當(dāng)大的精靈埠胖，因此我將演示第一個(gè)方法糠溜。用文字圖片來說明比較容易。
步驟 1：粗糙的輪廓
使用你的鼠標(biāo)或者數(shù)位板直撤，為你的精靈勾勒出一個(gè)粗略的輪廓非竿。不過，要確保它不要太過于粗糙——它或多或少是你想要的最終成品谊惭。
步驟 2：清理輪廓
第一侮东，滑動(dòng)滾輪放大到 6倍 或者 8倍 大小圈盔，以至于我們能清楚的看到每一個(gè)像素。然后清理輪廓悄雅！特別是驱敲，你要擦除雜亂的像素（輪廓的線條只能有一個(gè)像素寬），處理所有的鋸齒宽闲，并且添加在 “步驟一” 中繪制的細(xì)節(jié)众眨。
即使最大的精靈也不會(huì)超過 200 x 200 像素∪菸埽“事半功倍”（doing more with less）在繪制過程中永遠(yuǎn)不會(huì)錯(cuò)娩梨。你將很快發(fā)現(xiàn)一個(gè)像素會(huì)產(chǎn)生多大的變化。
保持你簡單的輪廓览徒。細(xì)節(jié)會(huì)在之后出現(xiàn)狈定，但現(xiàn)在，集中精力在 “大的線條部分”，比方說肌肉的區(qū)分纽什。這可能對于你有些難措嵌，但要有耐心。
5.色彩
隨著輪廓的完成芦缰，我們有了一本填色書來填色企巢。油漆桶和其他填色工具使我們更容易填色。選擇顏色會(huì)比較困難让蕾，現(xiàn)在不可能指導(dǎo)你們學(xué)習(xí)色彩理論浪规。不過我會(huì)介紹一些很好的基本概念。
HSB色彩模型
HSB代表（Hue）色相探孝，（Saturation）飽和度罗丰，（Brightness）明度。這是計(jì)算機(jī)色彩模型中的一種（即顏色的數(shù)值表示）再姑。還有比如RGB和CMYK這些你們一定聽說過萌抵。大多數(shù)程序都是使用HSB色彩來進(jìn)行渲染的，我們將打破慣例：
Hue 色相 —— 你理解的顏色是什么元镀？就比如“紅色”绍填，“橙色”，“藍(lán)色”等等栖疑。
Saturation 飽和度 —— 飽和度高顏色就越鮮艷讨永。100%的飽和度就給你最鮮艷的顏色遇革，隨著飽和度的降低，顏色會(huì)變得越來越灰萝快。
Brightness 亮度 —— 顏色的明暗，0%的亮度就是純黑色旋恼。
選擇顏色
選擇什么顏色取決于你自己，但有一些事你要記妆：
1.低飽和度和低亮度的顏色看上去更“土”更“卡通”昂勒。
2.想一下色環(huán)，兩個(gè)顏色看上去差距越大戈盈，它們（在色環(huán)上）距離就越遠(yuǎn)奠衔。另一方面，像紅色和成色的顏色涣觉，它們在色環(huán)上的距離很接近痴荐，看上去很棒。
3.你用的顏色越多官册，你的精靈就看上去越不像一個(gè)整體生兆。要讓你的精靈脫穎而出，就要只使用2~3種主色膝宁。（想一想超級馬里奧吧Ｑ荒选）
應(yīng)用顏色
實(shí)際在填色過程中非常容易。如果你使用PS來填色员淫，首選使用魔棒工具（快捷鍵 “W” ）選擇你要填充的區(qū)域合蔽，然后按住快捷鍵 “ALT+F” （原色）或按 “CTRL+F” （輔色）來進(jìn)行填充。
6.陰影
陰影是我們塑造像素逼真的關(guān)鍵之一介返，精靈變得更加生動(dòng)拴事，或糟糕的可怕。不過圣蝎，按照我說的做刃宵，你一定會(huì)成功的。
步驟一：選擇一個(gè)光源
首先徘公，我們需要選擇一個(gè)光源牲证。如果你的精靈是一個(gè)較大場景的一部分，可能會(huì)有各種各樣的光源（比如燈泡关面、火坦袍、自然光等）照在上面。它們會(huì)在精靈上混合的非常復(fù)雜等太。然而在大多數(shù)情況下捂齐，選擇一個(gè)較遠(yuǎn)的光源是個(gè)好注意（比方說：太陽）。對于游戲來說澈驼，你需要?jiǎng)?chuàng)建一個(gè)盡可能適應(yīng)各種地方的精靈辛燥。
我通常會(huì)選擇一個(gè)較遠(yuǎn)的光源筛武，放在它上方徘六，稍微在它前面漠其，這樣就能照亮頂部或前面和屎，其余的地方就都被遮蔽了柴信。這種光源可以使精靈看上去最自然潜沦。
步驟二：陰影
我們一旦確定了一個(gè)光源唆鸡，就可以用最暗的顏色來遮擋離光源最遠(yuǎn)的區(qū)域争占。上方以及前方的光源照射到模型后的區(qū)域，比如手臂下方刻蟹、腿下方等地方應(yīng)該畫陰影舆瘪。
記住英古，在光和陰影之間的區(qū)域不會(huì)是均勻的漸變召调。把一張白紙揉成一個(gè)球唠叛，再把它鋪平在桌上——你還能確定它是平整的嗎艺沼？因?yàn)槟憧梢钥吹今薨櫶幱泻苄〉年幱罢习恪Ｓ藐幱皝碇圃斐鲆路薨櫟母杏X，應(yīng)用在肌肉藐石、頭發(fā)贯钩、皮毛角雷、裂縫等勺三。
步驟三：柔性陰影
之后的陰影，比之前的更輕一些商源，應(yīng)該用更加柔和的陰影牡彻。這些區(qū)域是間接被照射到的庄吼。它也可以同樣應(yīng)用在從黑到明的過渡中总寻，特別是畫一些曲面的時(shí)候渐行。
步驟四：高光
直面光源的區(qū)域可以在它們上增加高光。高光應(yīng)該適度使用（比陰影小的多）旁理，因?yàn)樗鼈儠?huì)分散人的注意力孽文。
總在畫好陰影之后畫高光芋哭，會(huì)讓你少一些煩惱减牺。如果陰影沒有畫到位的話拔疚，你會(huì)把高光畫的偏大一些稚失。
必須做的和不必做的事情
陰影是大多數(shù)初學(xué)者掉坑的地方。下面是一些當(dāng)你畫陰影時(shí)應(yīng)該遵循的方法：
1.不要用漸變凿宾。新手最大的錯(cuò)誤初厚。漸變看上去很可怕孙技，甚至表現(xiàn)不出表面上光的樣子下愈。
2.不要用枕式陰影（pillow-shading）枕式陰影是由外到內(nèi)的陰影势似。它被稱為枕式陰影是由于它看起來柔和以及不確定履因。
3.不要使用過多的顏色。大家通常認(rèn)為 “顏色越多越真實(shí)” 皆怕。然而，在現(xiàn)實(shí)生活中，我們傾向于看到物體上的明暗 —— 我們的大腦過濾了這一切吮成。在你的基礎(chǔ)色中多使用這兩種明暗程度粱甫，暗（灰或者深灰）茶宵，以及明（明亮或更明亮）。
4.不要使用太相似的顏色属韧。除非你想畫一個(gè)很模糊的精靈糠赦，不然沒有理由使用兩種非常相似的顏色拙泽。
7.抖動(dòng)顯示
保持原色是像素畫藝術(shù)家不得不擔(dān)心的問題顾瞻。在不用更多的顏色來顯示陰影荷荤，有一種方法叫 “抖動(dòng) dithering” 的技術(shù)蕴纳。類似于傳統(tǒng)的繪畫手法 “十字線” 或 “點(diǎn)彩” ，你把兩種顏色交織起來稻薇，保持它們的均勻颖低。
簡單的例子
復(fù)雜的例子
相對上方用PS漸變工具處理過的圖片來說暇昂，下方是用三種顏色抖動(dòng)做出來的圖片莺戒。注意用不同的顏色搭配來創(chuàng)建圖案。你可以嘗試用不同的排列組合來創(chuàng)建新的紋理急波。
應(yīng)用
抖動(dòng)顯示能讓你精靈呈現(xiàn)復(fù)古的感覺从铲，因?yàn)楹芏嗬嫌螒蛑荒芤揽慷秳?dòng)顯示來創(chuàng)作出有限的調(diào)色板（看看Sega Genesis的例子）。這不是我常用的方式澄暮，為了讓你學(xué)習(xí)它名段，我把這個(gè)方式應(yīng)用在了這個(gè)精靈身上。
你可以嘗試一下抖動(dòng)顯示泣懊。老實(shí)說伸辟，我就看到過很少的人能用好這個(gè)方法。
8.選擇性輪廓
選擇性輪廓馍刮，或叫 “selout” 信夫，是一種類似陰影的輪廓振湾。我們不用黑色梗掰，而是用一種更接近精靈本身的顏色苛白。此外躏率，我們沿著輪廓改變明度嚷缭，讓光源來決定應(yīng)該用什么顏色付翁。
現(xiàn)在，我們把輪廓涂成黑色。這沒有什么問題，它看上去不錯(cuò)而且挺和諧的挣跋。但在用黑色的時(shí)候，我們舍棄了真實(shí)感，讓它更有 “卡通” 的感覺弛矛。選擇性輪廓真的不錯(cuò)，看下圖：
你會(huì)注意到我同樣用選擇性輪廓把它的肌肉紋理處理的更自然。終于精靈開始看上去像一個(gè)整體而不是一堆獨(dú)立的部分。
我們做一個(gè)比較：
9.抗鋸齒
抗鋸齒有一個(gè)前提：添加中間色來使線條更自然。舉個(gè)例子幅恋，如果你把一條黑線放在白背景上窒舟，那你可以在線的邊緣添加點(diǎn)灰色讓它看上去更自然一些。
技巧1：使線條更平滑
通常你要在斷裂和不自然的地方添加一些中間色。如果看上去還是不自然，涂點(diǎn)明度更高的顏色您炉。沿著曲線的方向處理中間區(qū)域氓扛。
我解釋的很明白了淫痰。看圖片你會(huì)明白我的意思：
技巧2：處理凸起
技巧3：線條盡頭漸弱
應(yīng)用
現(xiàn)在我們用一下抗鋸齒犹菇。記住如果你想讓你的精靈在任何背景上效果很好筷转，不要用抗鋸齒處理輪廓袭蝗。否則涩哟，你將看到你精靈周圍有一圈很難看的 “光暈”贴彼。
為什么要手工制作
你可能會(huì)問為什么我們不用油漆工具直接填色，讓它變得更光滑器仗？回答是融涣，除了手工制作沒有一種工具可以實(shí)現(xiàn)讓它變得很自然。你有完整控制權(quán)精钮，不單單是顏色的數(shù)量威鹿，還有從哪里獲取這些顏色。而且你知道在哪些區(qū)域處理的光滑轨香、哪些區(qū)域使用抗鋸齒后會(huì)失去細(xì)節(jié)（丟失像素）忽你。
10.完成它
哇哦，終于到了關(guān)電腦來一瓶冰啤酒的時(shí)候了”廴荩現(xiàn)在還不是時(shí)候科雳！這是區(qū)分新手和專家的最后一步！
退一步脓杉，仔細(xì)看一下你的精靈糟秘。有可能它依然有點(diǎn)粗糙∏蛏ⅲ花一些時(shí)間去完善它尿赚，確保每一個(gè)細(xì)節(jié)都完美。不管多累蕉堰，實(shí)際上這是最有意思的環(huán)節(jié)凌净。添加一些小細(xì)節(jié)會(huì)讓你的精靈更有趣。這是真正顯示你經(jīng)驗(yàn)和技巧的時(shí)候嘁灯。
你可能有疑問泻蚊，為什么 Lucha Lawyer 全程都沒有眼睛，或者這個(gè)頭巾一直包裹著他的頭丑婿。這是因?yàn)槲蚁朐谧詈筇幚磉@些小細(xì)節(jié)性雄。包括在它手臂上添加臂環(huán)没卸，褲子增加拉鏈等……還有，男人怎么可以沒有乳頭秒旋？约计？我還加深了他的下半身、他的左手迁筛，來突出他的軀干部分煤蚌。
你終于完成了他！Ｏ肝浴尉桩！Lucha Lawyer 用了45種顏色，算是比較簡單的（難度取決于你的調(diào)色板限制）贪庙，尺寸在150 x 115 個(gè)像素≈├纾現(xiàn)在你可以去暢飲啤酒了！
回顧全程
這總是最有意思的止邮，在GIF圖片（點(diǎn)擊查看） 里可以看到它的變化这橙。
總結(jié)
1.學(xué)習(xí)繪畫的基本原理，用傳統(tǒng)的方法練習(xí)导披。所有的繪畫填色技巧和經(jīng)驗(yàn)都可以用在像素畫中屈扎。
2.從畫小的精靈開始。最難的部分是學(xué)習(xí)用像素來畫一些小細(xì)節(jié)撩匕，而不是畫一個(gè)超大的精靈（真的浪費(fèi)時(shí)間）鹰晨。
3.學(xué)習(xí)去臨摹一些藝術(shù)家的作品，不要怕去臨摹滑沧。在工作之余去學(xué)習(xí)它并村，你需要時(shí)間去找到你自己的風(fēng)格。
4.如果你沒有數(shù)位板滓技，那就買一塊把。重復(fù)的點(diǎn)擊鼠標(biāo)很乏力棚潦，一定不會(huì)給你留下什么好印象令漂。我用一塊小的數(shù)位板，很適合我 —— 我喜歡在小房間里用它丸边，在書桌上叠必，便攜性很好。你可能喜歡更大的數(shù)位板妹窖，不過你一定得先去店里試試纬朝！
5.向大家分享你的作品，獲得反饋骄呼。你可能會(huì)碰到一些新朋友共苛，或者一些鍵盤俠判没，誰知道呢！隅茎！
