像素畫設(shè)計(jì)與UI制作課件

像素畫設(shè)計(jì)與UI制作基礎(chǔ)繪制技法常耀中像素畫設(shè)計(jì)與UI制作基礎(chǔ)繪制技法常耀中像素畫知識(shí)概念：當(dāng)許多不同顏色的點(diǎn)一個(gè)個(gè)巧妙的組合與排列在一塊后便構(gòu)成了一副完整的圖象，這些點(diǎn)便稱為像素(pixel)，圖像稱之為Icon(圖標(biāo))或者稱為像素畫。特點(diǎn)：像素畫也屬于點(diǎn)陣式圖像，但它是一種圖標(biāo)風(fēng)格的圖像，更強(qiáng)調(diào)清晰的輪廓、明快的色彩，幾乎不用混疊方法來繪制光滑的線條。區(qū)別：普通點(diǎn)陣圖像同樣由像素組成，但不注重也沒必要注重某個(gè)像素的位置、數(shù)量、顏色，而像素圖上每個(gè)像素都很考究，精心安排，多一個(gè)點(diǎn)少一個(gè)點(diǎn)都會(huì)影響效果，可謂字字珠璣。像素畫知識(shí)概念：當(dāng)許多不同顏色的點(diǎn)一個(gè)個(gè)巧妙的組合與排列在一像素畫的應(yīng)用范圍所有顯示屏都必須用到像素技術(shù)。比如手機(jī)、電腦、電視、掌上游戲機(jī)、PSP、固定電話屏幕和電子鐘表屏幕和電子公告欄等。在電腦中所有類型操作系統(tǒng)、軟件系統(tǒng)都用到像素技術(shù)。如Windows、MacOS、Unix、Linux以及圖形化Dos系統(tǒng)的界面，再如每個(gè)軟件的外觀、按鈕和鼠標(biāo)造型都是像素畫。在這里的應(yīng)用被叫做UI系統(tǒng)。自從日本世嘉公司在70年代開發(fā)出電視游戲起，像素畫創(chuàng)作產(chǎn)業(yè)就出現(xiàn)了。現(xiàn)今是全球化的時(shí)髦的老產(chǎn)業(yè)。像素畫的應(yīng)用范圍所有顯示屏都必須用到像素技術(shù)。比如手機(jī)、電腦像素畫范例像素畫范例像素畫制作軟件選擇什么樣的軟件，因各人的習(xí)慣而定，無論你選擇了什么軟件，其制作像素畫的流程還都是一樣的。一般可分為兩種類型：一種是用來制作Icon圖標(biāo)的專用軟件，比如Microangelo、Iconcool、Articons等等；

另一種則是圖像處理類的軟件，比如：Photoshop、Fireworks、甚至Windows自帶的畫圖工具。

我們將會(huì)使用Photoshop來講解。像素畫制作軟件選擇什么樣的軟件，因各人的習(xí)慣而定，無論你選擇像素畫基本要點(diǎn)尺寸嚴(yán)謹(jǐn)：必須在給定的尺寸內(nèi)完成繪制。筆法固定：每個(gè)傾斜、彎轉(zhuǎn)、連接都有規(guī)則限定。色彩簡煉：顏色種類必須控制在256種以內(nèi)。邊界清晰：邊界必須十分肯定，稱“卡死”。動(dòng)感明顯：每個(gè)運(yùn)動(dòng)瞬間也要繪制清晰。像素畫基本要點(diǎn)尺寸嚴(yán)謹(jǐn)：必須在給定的尺寸內(nèi)完成繪制。像素畫基本要點(diǎn)

因此繪制前，按照尺寸要求建立新文件，顏色暫選RGB模式（在最后轉(zhuǎn)成索引模式(256色)），調(diào)整并使用標(biāo)尺、輔助線和網(wǎng)格。繪制時(shí)使用一個(gè)像素大小的鉛筆工具，畫出每一個(gè)像素點(diǎn)。也因此要求：1.按規(guī)矩繪制。2.細(xì)心考究每個(gè)像素點(diǎn)。3.耐心堅(jiān)持，不管時(shí)間長短。畫的時(shí)候要放大到300%以上再繪畫，在導(dǎo)航器中看效果或恢復(fù)100%查看。導(dǎo)航器像素畫基本要點(diǎn)因此繪制前，按照尺寸要求建立新文件像素畫繪制教程

第一節(jié)

基本線條像素畫繪制教程

第一節(jié)

基本線條基本線條

22.6度的斜線，又稱雙格線30度的斜線，又稱單雙線選取鉛筆工具并選擇1像素的筆刷，以兩個(gè)像素的方式斜向排列，共分為雙點(diǎn)橫排、雙點(diǎn)豎排兩種排列方法。此類線條較常用于建筑的描繪，因此3D建筑的統(tǒng)一透視角度也為22.6度。選取鉛筆工具并選擇1像素的筆刷，以兩個(gè)像素間隔一個(gè)像素的方式斜向排列，當(dāng)豎向排列時(shí)則形成了60度的斜線，此類線條使用較為靈活，經(jīng)常與其它線條配合使用，以便完成一些特殊的造型?；揪€條22.6度的斜線，又稱雙格線選取鉛筆工具并選擇1像基本線條45度的斜線，又稱單斜線直線，又稱單直線選取鉛筆工具并選擇1像素的筆刷，以一個(gè)像素的方式斜向排列，此類線條掌握比較簡單，較常用于平面物體以及建筑斜面的繪制。選取鉛筆工具并選擇1像素的筆刷，同時(shí)按住Shift鍵，拖動(dòng)鼠標(biāo)就可準(zhǔn)確的繪制出直線來。

基本線條45度的斜線，又稱單斜線選取鉛筆工具并選擇1像素的筆基本線條弧線因?yàn)榛《却笮〉年P(guān)系，因此弧線畫法有很多種。選取鉛筆工具并選擇1像素的筆刷，分別以像素3-2-1-2-3、4-2-2-4、5-1-1-5的弧型排列，其排列必須具有一定的規(guī)律性以及對(duì)稱性，如圖所示。此類線條較常用于人物頭像、動(dòng)物的繪制。

4-2-2-45-1-1-53-2-1-2-3基本線條弧線因?yàn)榛《却笮〉年P(guān)系，因此弧線畫法有很多種。選取鉛定義筆刷一副像素作品如果總是要一個(gè)個(gè)點(diǎn)出來啊，實(shí)在是受不了，所以把常用的線條筆劃以及基礎(chǔ)圖形定義成筆刷，可以大大的提高工作效率。

定義筆刷一副像素作品如果總是要一個(gè)個(gè)點(diǎn)出來啊，實(shí)在是受不了，練習(xí)內(nèi)容在30x30像素的圖像中繪制出各種常用線條，自由拼合成圖樣。將各種規(guī)格的線條都制作成自定義畫筆。練習(xí)內(nèi)容在30x30像素的圖像中繪制出各種常用線條，自由拼合像素畫繪制教程

第二節(jié)

基本圖形像素畫繪制教程

第二節(jié)

基本圖形基本圖形掌握了像素畫基本線條的畫法之后，我們來嘗試基礎(chǔ)圖形的繪制。初步了解線條之間的組合規(guī)律?；緢D形掌握了像素畫基本線條的畫法之后，我們來嘗試基礎(chǔ)圖形的基本圖形等邊三角形矩形

選取鉛筆工具并選擇1像素的筆刷，繪制一條60度的斜線（圖示紅色部分）然后再繪制一條與之相對(duì)稱的斜線，最后連接兩條斜線，等邊三角型就完成。如果把60度的斜線換成45度斜線的話，則能完成直角三角型的繪制。眾所周知四條直線就能構(gòu)成一個(gè)矩形，但是在像素畫中當(dāng)矩形非水平位置時(shí)，畫法就有所不同。選取鉛筆工具并選擇1像素的筆刷，以雙點(diǎn)橫線與雙點(diǎn)豎線的畫法構(gòu)成矩形，如圖所示?；緢D形等邊三角形選取鉛筆工具并選擇1像素的筆刷，繪制一條6基本圖形圓角

圓形

選取鉛筆工具并選擇1像素的筆刷，任意畫一個(gè)矩形，選擇其中一個(gè)直角，在直角線內(nèi)畫弧線，最后刪除多余的部分，完成圓角?；【€的弧度決定著圓角大小，弧線的弧度越大則圓角就越大。在像素畫中四分之圓弧直接決定著整個(gè)圓型的大小。選取鉛筆工具并選擇1像素的筆刷，使用畫圓角的方法繪制一段弧線，把握好弧線的對(duì)稱性，最后通過水平翻轉(zhuǎn)和垂直翻轉(zhuǎn)那短弧線組合成圓形。

基本圖形圓角選取鉛筆工具并選擇1像素的筆刷，任意畫一個(gè)矩形練習(xí)內(nèi)容10、20、30、40、50像素大小的圓形、三角形、傾斜矩形。繪制出大小不同的幾個(gè)氣泡相重疊的效果。繪制出如下圖樣。繪制出一個(gè)五角星圖樣。練習(xí)內(nèi)容10、20、30、40、50像素大小的圓形、三角形、像素畫繪制教程

第三節(jié)

基本透視像素畫繪制教程

第三節(jié)

基本透視基本透視像素畫中繪制一點(diǎn)、兩點(diǎn)以及三點(diǎn)透視的線條很難有規(guī)律可尋循，因此像素畫中的透視法簡化變通了上述的透視規(guī)律。根據(jù)像素線條的特有屬性，一種沒有滅點(diǎn)的俯視平行透視被廣泛的運(yùn)用起來?；就敢曄袼禺嬛欣L制一點(diǎn)、兩點(diǎn)以及三點(diǎn)透視的線條很難有規(guī)律可基本圖形22.6度透視

因?yàn)橄袼禺嬐ǔＪ怯脕砝L制精致小巧的造型，并且我們知道像素畫中線條運(yùn)用十分講究，因此為了符合人們的視覺印象和便于繪畫，這種以22.6度雙點(diǎn)線組合而成的俯視平行透視成了像素畫透視繪制的最常用透視。如圖所示，正方體的透視就是以22.6度的雙點(diǎn)線構(gòu)成，左右兩個(gè)面透視角度一樣，并且每個(gè)面都是平行四邊型；整體結(jié)構(gòu)清晰明朗，造型表現(xiàn)直觀，并且易于掌握。

基本圖形22.6度透視因?yàn)橄袼禺嬐ǔＪ怯脕砝L制精致小巧的造基本透視45度透視

雖然轉(zhuǎn)變了角度，但是每個(gè)面都是一個(gè)平行四邊形這個(gè)透視規(guī)律是不會(huì)改變的。但是由于左右兩個(gè)面透視角度一不同，所以在實(shí)際的繪制中很難把握好，大家應(yīng)該多觀察多動(dòng)手。基本透視45度透視雖然轉(zhuǎn)變了角度，但是每個(gè)面都是一個(gè)平行四基本透視圓柱的透視錐體的透視以頂面的橢圓的圓度來決定俯視角度的高低，如果橢圓越接近圓則俯視角度就越高，反之橢圓越扁則俯視角度就越低，如圖所示。錐體分為四面錐型，圓錐型等等，但是畫法是沒有區(qū)別的，底面決定錐體的大小，斜線控制著錐體的高度?；就敢晥A柱的透視以頂面的橢圓的圓度來決定俯視角度的高低，練習(xí)內(nèi)容多加練習(xí)，嘗試用不同角度的斜線來繪制各種幾何體。

完成以下圖樣。練習(xí)內(nèi)容多加練習(xí)，嘗試用不同角度的斜線來繪制各種幾何體。像素畫繪制教程

第四節(jié)

基礎(chǔ)造型像素畫繪制教程

第四節(jié)

基礎(chǔ)造型基礎(chǔ)造型造型是體現(xiàn)像素畫特征的基本要素。造型的能力一方面來自于平時(shí)生活中知識(shí)的積累；另一方面則可以借助圖片資料作為參照；甚至通過臨摹優(yōu)秀的像素作品以及對(duì)素描、速寫等藝術(shù)學(xué)科的參透也能提高我們的造型能力。通俗一點(diǎn)來說造型就是用來表現(xiàn)作品形態(tài)的一種構(gòu)圖概念。學(xué)習(xí)造型沒有捷徑可尋，只有通過多看、多記、多學(xué)、多練才能有所提高，因此本節(jié)學(xué)習(xí)的并不是教你如何去造一個(gè)型，而是引導(dǎo)你有一個(gè)正確的造型思維方式去造更多的型。基礎(chǔ)造型造型是體現(xiàn)像素畫特征的基本要素。造型的能力一方面來自方法一把復(fù)雜的東西簡單化

把復(fù)雜的東西簡單化

如圖所示，這是一個(gè)打開的盒子。在構(gòu)思一個(gè)打開的盒子時(shí)，首先想到的不是打開的盒子如何難畫，而是盒子的整體形態(tài)是什么，根據(jù)這個(gè)形態(tài)再去想象出盒子的大體的形狀，最后才去考慮把盒蓋如何打開。此種方法雖然過程煩瑣，但是有利于把整體不至于產(chǎn)生嚴(yán)重的變形，非常適合初學(xué)者。方法一把復(fù)雜的東西簡單化把復(fù)雜的東西簡單化如圖所方法二逐步深入刻畫

逐步深入刻畫

在鼠標(biāo)隨意繪制出來的草圖基礎(chǔ)上，一步一步的深入下去。如圖所示，海豚的造型過程，粗糙的草圖通過一步步形態(tài)調(diào)整、線條考究之后出現(xiàn)了精致的造型。方法二逐步深入刻畫逐步深入刻畫在鼠標(biāo)隨意繪制方法三尋找圖片資料作為參照

尋找圖片資料作為參照

當(dāng)你為表達(dá)不出心中所想而困惑時(shí)，不妨試著找找相關(guān)的圖片資料。如圖所示，那是一臺(tái)筆記本電腦的圖片，通過對(duì)圖片的提煉與加工，很容易一幅像素畫就完成了。其實(shí)通過圖片繪制像素畫更有小竅門，比如在Photoshop中打開一個(gè)圖片實(shí)例，縮小并且降低該圖片的透明度。隨后新建一層，選取鉛筆工具并選擇1像素的筆刷勾勒出造型的輪廓，這樣就把一造型簡單繪制出來了。

要注意的是這樣做雖然有了造型的形，但是還是缺少造型的神。還是那句話多看、多記、多學(xué)、多練才是造型的學(xué)習(xí)方法。方法三尋找圖片資料作為參照尋找圖片資料作為參練習(xí)內(nèi)容臨摹兩張像素圖。其中一張要求有明顯的創(chuàng)作性修改。練習(xí)內(nèi)容臨摹兩張像素圖。其中一張要求有明顯的創(chuàng)作性修改。像素畫繪制教程

第五節(jié)

色彩過渡像素畫繪制教程

第五節(jié)

色彩過渡色彩過渡方法之一、均勻過渡

針對(duì)像素畫色彩運(yùn)用，我們大致可以簡單的理解成為：平面的純色填充、中間色的過渡、色彩明暗關(guān)系的確立。而其中平面的純色填充，并沒有任何技巧性的東西，只要有足夠的耐心就可以了。因此本章著重于像素畫顏色過渡規(guī)律的學(xué)習(xí)。

同一色系中把顏色由深至淺或者有淺至深的排列，以起到均勻漸變的效果。此種過渡方法普遍運(yùn)用于小范圍的像素繪畫中。如圖所示：此法大多為手工點(diǎn)畫。有時(shí)也用漸變填充的方法實(shí)現(xiàn)。具體的漸變方法接下來進(jìn)行講解。色彩過渡方法之一、均勻過渡針對(duì)像素畫色彩運(yùn)用色彩過渡方法之二、雙色過渡根據(jù)其中一種顏色點(diǎn)的疏密排列，產(chǎn)生過渡效果，此種過渡方法較常用于平面的繪制上。繪制這些點(diǎn)因?yàn)榫哂幸?guī)律性，所以這時(shí)你可以使用一下復(fù)制與粘貼功能，將會(huì)大大改善你的工作效率。如圖所示：

色彩過渡方法之二、雙色過渡根據(jù)其中一種顏色點(diǎn)的疏密排列，色彩過渡方法之四、網(wǎng)點(diǎn)漸變過渡

另一種平面的過渡方法，在一種顏色的基礎(chǔ)上再疊加網(wǎng)格，繪制出的物體過渡自然，顏色飽滿，但是難度較高，不易掌握。如圖所示：色彩過渡方法之四、網(wǎng)點(diǎn)漸變過渡另一種平面的過色彩過渡——漸變方法設(shè)置應(yīng)用漸變填充

1.首先要控制填充的區(qū)域，可以用魔棒工具選取需要填色的區(qū)域。

2.然后使用漸變工具，調(diào)整漸變色。

3.在填色區(qū)域內(nèi)拖動(dòng)，填充漸變色。第一步驟第二步驟第三步驟色彩過渡——漸變方法設(shè)置應(yīng)用漸變填充1.首先要控制填充的區(qū)色彩過渡生成雙色過渡的方法1.首先要使產(chǎn)生漸變的兩種顏色反差加大。

2.更改顏色模式：選擇‘圖像’→‘模式’→‘索引顏色’。

3.修改參數(shù)，查看效果。

4.對(duì)一些暇疵或紕漏給予修正。1234少了三個(gè)橙色點(diǎn)色彩過渡生成雙色過渡的方法1.首先要使產(chǎn)生漸變的兩種顏色反差色彩過渡生成網(wǎng)點(diǎn)過渡的方法

1.新建像素圖文件后，再新建一個(gè)120px大小的大文件。

2.對(duì)大文件應(yīng)用濾鏡制作出網(wǎng)格?！疄V鏡’→‘素描’→‘半調(diào)圖案’。

3.將網(wǎng)格復(fù)制到小文件中，縮小并保證成方格狀。

4.設(shè)置圖層混合模式為“疊加”，根據(jù)情況調(diào)整對(duì)比度和透明度。第二步驟第四步驟色彩過渡生成網(wǎng)點(diǎn)過渡的方法1.新建像素圖文件后，再新建一個(gè)像素畫繪制教程

第六節(jié)

明暗關(guān)系像素畫繪制教程

第六節(jié)

明暗關(guān)系明暗關(guān)系不可或缺的明暗關(guān)系在像素畫中僅僅把握住了明快的色調(diào)還不夠，有時(shí)畫面的色彩仍然不夠生動(dòng)，這是因?yàn)樵谏实倪\(yùn)用還缺少明暗的變化。只有遵循物體與光源之間的變化關(guān)系，才能表現(xiàn)出既生動(dòng)又符合