Accentsconagua

Faceți o pictogramă de dovleac animat utilizând pixel art în Adobe Photoshop

Design & Illustration
Share
Ce veți crea

În acest tutorial, veți crea un jack-o-lantern infricosator de la zero, redat în întregime în pixeli (blocuri de artă digitală). Aflați cum să utilizați panoul Timeline al aplicației Adobe Photoshop pentru a anima o față zâmbitoare, cu ochiul care lovește un pupic la vizualizator și se aprinde atât în ​​interior, cât și în exterior.

1. Desenați Dovleacul

Pasul 1

Pe parcursul acestui tutorial voi lucra în Adobe Photoshop CC 2014. Deschideți programul și creeaza o Document nou. Arta mea finală măsurată 36 px de 30 px, așa că mi-am făcut documentul 50 px de 40 px la 72 dpi cu Transparent fundal.

Pasul 2

Să începem prin construirea formei de dovleac de bază. Zoom (Z) în documentul dvs. 1600% sau așa.

  1. Utilizarea Instrumentul pentru creion (B) cu 1 px greu perie, trageți 7 pixeli pe o linie verticală.
  2. A desena 2 pixeli pe fiecare parte a primei linii.
  3. Pe partea de sus a proiectului până în prezent, trageți o linie verticală suplimentară de 2 pixeli urmat de 1 pixel la diagonala dreaptă a celor doi anteriori. În partea de jos a desenului, trageți 2 pixeli diagonal în succesiune (a se vedea mai jos).
  4. Completați această secțiune cu 1 pixel diagonal în partea de sus și încă doi pixeli în partea dreaptă, atât pe partea superioară cât și pe cea inferioară.

Pasul 3

Continuând cu Instrumentul creionului și forma noastră de dovleac de bază:

  1. Cu ceea ce a fost creat în Pasul 2, add-on 3 pixeli orizontal la partea de sus și de jos a proiectului. A desena 1 pixel diagonal deasupra liniei a trei trase anterior.
  2. Continuați să construiți forma dovleacului pe partea superioară a designului 3 pixeli orizontali. În partea de jos, trageți 1 pixel diagonal sub cealaltă și 2 pixeli la dreapta.
  3. Linia de sus este 8 pixeli peste. Linia de jos este 10 pixeli peste.
  4. Cealaltă jumătate este o imagine oglindă a tuturor lucrurilor din stânga celor două linii orizontale drepte. Folosește Instrument de marcaj dreptunghiular la Selectați, Copiați (Control-C), Lipiți (Control-V), și oglindă (Editați> Transformare> Flip orizontal) jumătatea stângă pentru a finaliza forma de dovleac de bază.

Pasul 4

Dovleacul nostru are nevoie de o față. Creeaza o Strat nou în straturi panou și folosind Instrumentul creionului, sa incepem:

  1. Ochiul începe cu 3 pixeli într - o linie și 1 pixel deasupra lor și în centru.
  2. Completați ochiul cu a treia linie de pixeli formată din 3 pixeli și a patra linie constând din 5 pixeli.
  3. Trei pixeli spre dreapta de la linia inferioară a ochiului pornesc nasul. Este alcătuită din trei rânduri: 1 pixel, 3 pixeli, și 3 pixeli.
  4. Repetați din nou forma ochiului pentru ochiul drept.
  5. Asigurați-vă că ochii și nasul au 3 pixeli spațiile care le separă. Gura începe cu două rânduri 3 pixeli peste.

Pasul 5

Întreaga etapă constă în completarea gurii:

  1. Începutul gurii, construind ultimul pas, este 9 pixeli aranjat într-un 3 x 3 cutie.
  2. A desena 3 pixeli într-o linie verticală pe ambele părți ale cutiei desenate anterior.
  3. Mai jos sunt două coloane din 2 pixeli fiecare pe fiecare parte a gurii.
  4. Desenați două forme L pe fiecare parte alcătuită din 3 pixeli fiecare.
  5. Adăuga 1 pixel pe ambele părți, în diagonală și în exterior. Muchiile superioare ale gurii sunt compuse din 4 pixeli într-un rând orizontal.
  6. Pentru a completa gura, locul 1 pixel în diagonală și în jos, spre centrul gurii și umpleți laturile din stânga și din dreapta (vezi mai jos pentru forma exactă). În acest moment, gura pare un pic ca o bâtă zburatoare.
  7. Din moment ce dovleacul meu va fi alcătuit din diverse portocale și galben, am decis să schimb culoarea artei liniei mele în maro (# 6b0f02).

2. Culoarea dovleacului

Pasul 1

Culorile folosite în opera mea de artă finală diferă de cele pe care le-am început cu cele de mai jos (sunt mai saturate și au fost modificate mai târziu în acest proces). Considerați că aceasta este o mică lecție în crearea cu ușurință a unei palete de culori armonioase. Pentru a crea propriul dvs. (sau face acest lucru cu alte culori), reduceți Opacitate de culoare la procentul enumerat, puneți-l peste 100% Orange culoare și selectați culoarea nouă cu Instrumentul pentru picioare (I). Salvați culorile noi în Specimene panou și asigurați-vă că Opacitate este setat înapoi la 100% pentru restul tutorialului.

  1. Maro 100%: # 760b03
  2. Maro 75%: # 902b0d
  3. Maro 50%: # ae4a18
  4. Maro 25%: # d1692a
  5. portocale 100%: # f2842b Folosit ca bază de culoare.
  6. portocale 40%: # faa912
  7. portocale 20%: # ffcc01
  8. Galben 100%: # fff25d

contopi stratul de fata si arta de linie de dovleac si umpleti dovleacul folosind Instrumentul pentru găleți de vopsea și portocale (# f2842b).

Pasul 2

Dovleacul nostru are nevoie de o tulpină.

  1. Utilizarea Maro (# 760b03), si Instrumentul creionului, a desena două linii verticale de 3 pixeli fiecare, două rânduri separate.
  2. Completați cele două coloane cu Maro 75% (# 902b0d) și închideți forma cu 2 pixeli de Maro.
  3. Utilizare Maro 50% (# ae4a18) ca culoarea evidențiată pe partea superioară a tijei.

Pasul 3

Deoarece acesta este un jack-o-lantern, va trebui să tăiem deschis partea superioară a dovleacului. 

  1. Am început cu același lucru Maro folosit pe tulpină. Din partea de sus a tulpinei, mijlocul capacului dovleacului este 9 pixeli în jos. A desena 8 pixeli peste în acest punct central cu 3 pixeli pe rândul următor, de pe ambele părți ale liniei centrale.
  2. Conectați 3 pixeli peste pe ambele părți cu 1 pixel în sus.
  3. Acoperiți pixelul de colț cu portocale și umpleți capacul și sub el cu Maro 25% (# d1692a) de la Pasul 1 in aceasta sectiune.
  4. Plasați acei pixeli de culoare portocalie închisă în colțurile liniei de linie a capacului și sub tulpină (vezi mai jos).

Pasul 4

Concentrează-te pe ce se face cu umbrirea în dovleac de mai jos:

  1. Atrageți cu atenție linii curbate Maro 25% (# d1692a) începând de la linia de jos a dovleacului. Curbele trebuie să imite conturul dovleacului.
  2. Liniați partea inferioară a dovleacului și începeți să alunecați pixelii de culoare portocalie închisă și portocalii în jumătatea inferioară a dovleacului.
  3. Se conturează fundul gurii, nasului și ochilor.
  4. Opțional, puteți alege acum să utilizați o culoare galben-portocalie Sectiunea 2, Pasul 1 în scopul de a adăuga evidențiază capacul dovleac, ochii, nasul și gura.

Culorile pentru această porțiune a tutorialului sunt mai subtile decât cele pe care am ales să le folosesc în etapa următoare. Dacă vă place mai mult acest ton, pur și simplu utilizați pasul următor pentru sfaturi privind umbrirea ulterioară și evidențierea și păstrarea paletei de culori create în Secțiunea 2, Etapa 1.

Pasul 5

Dacă doriți un dovleac mai strălucitor și mai saturat, verificați pașii de mai jos:

  1. Înlocuiți toate instanțele din Maro 25% (# d1692a) pe suprafața dovleacului cu Rosu aprins (# ff1300).
  2. Schimbați culoarea portocaliu de bază la # ff7700.
  3. Asigurați-vă că tulpina de sus conține nuanțe de maro și maro deschis, mai degrabă decât roșu (schimbăm dovleacul mai degrabă decât culoarea lemnului tulpinei).
  4. Pentru linia care denotă capacul de dovleac, utilizați maro deschis Secțiunea 2, Etapa 1. Pentru evidențiere, utilizați Galbenii (# exepmplu FFCC00) și (# fba912) pentru a desena cutiile mici si de a aluneca linii de pixeli in partea stanga sus a desenului.
  5. Trageți mai întunecat dintre cei doi galbeni până la vârfurile fiecărei secțiuni de dovleac. Evidențiați partea inferioară a gurii. Se înmoaie pixelii de umbra roșu aprins Portocala rosie (# ff4500).
  6. Folosește o Maro inchis (# 3e0702) pe conturul fundului și al părții drepte a dovleacului. Îmbunătățiți partea stângă sus a artei liniei dovleacului cu maro asortate (vedeți mai jos).

3. Crearea cadrelor de animație

Pasul 1

Fiecare pas în pictograma animată pe care o realizăm va necesita un strat separat care conține modificarea în cadrul pictogramei. Acestea includ orice ochi strălucitori, modificări ale formei gurii sau strălucire în jurul dovleacului însuși.

Asigurați-vă că componentele dovleacului se află pe același strat. Folosește Magic Wand Tool (W) pentru a selecta în afara de dovleac și du-te la Selectați> Inverse (Shift-Control-I) și apoi Selectați> Modificare> Extindeți și Extinde de 1 pixel.

Creeaza o Strat nou sub pictograma dovleac în straturi panou. Completați selecția cu galben strălucitor folosind Instrumentul pentru găleți de vopsea. De asemenea, am umplut un alt strat sub celelalte două cu negru, astfel încât pictograma dovleacului să apară de pe ecran mai mult.

Pasul 2

Creeaza o Strat nou și acoperă primele două rânduri ale ochiului stâng cu pixeli portocalii. Acoperiți ultimul rând cu 5 pixeli de roșu (și rândul roșu anterior cu pixeli portocalii). Ochiul ar trebui să fie acum 4 pixeli peste, 1 pixel diagonal pe partea stângă și doi pixeli galbeni în centrul formei ochiului cu ochiul.

Pasul 3

Există trei noi straturi de gură pe care trebuie să le desenăm pentru a crea animația finală.

  1. A face o Strat nou deasupra celorlalte și folosiți Instrumentul creionului a desena trei coloane de pixeli compuse din 1 pixel, 3 pixeli, și 2 pixeli. Acesta este colțul stâng al gurii.
  2. Pentru centrul gurii, trageți 2 pixeli în partea dreaptă a colțului gurii tras în prealabil. Adăuga 1 pixel în jos de la ultimele două trase. În cele din urmă, trageți un pătrat de 3 pixeli de 3 pixeli pentru centrul gurii.
  3. Oglindeste coltul din stanga pentru partea dreapta.
  4. Utilizați portocaliu închis pentru a schița colțurile gurii. Vedeți imaginea de mai jos pentru plasarea exactă a pixelilor.
  5. Utilizați culoarea portocalie de bază pentru a umple cea mai mare parte a spațiului negativ din jurul gurii.
  6. Roșul aprins care a fost plasat în această parte va sta direct sub nasul dovleacului.
  7. În cele din urmă, completați spațiile goale cu evidențierea galbenă.
  8. Așezați noua gură peste gura originală. Gura anterioară ar trebui complet acoperită. Ascundeți acest nou strat pentru moment.

Pasul 4

Gura devine mai mică și se schimbă de la un zâmbet deschis la buze drăgălașe (minus buzele, deoarece acesta este un dovleac).

  1. Încă o dată, vom începe cu colțul stâng al gurii, din care face parte 5 pixeli în trei rânduri.
  2. Desenați un pătrat de 3 pixeli de 3 pixeli pentru centrul gurii.
  3. Oglindeste partea stanga a gurii pentru partea dreapta.
  4. Folosind portocaliu închis, desenați două linii 4 pixeli și plasați pixeli adiționali în colțurile formei gurii.
  5. Încă o dată, folosiți roșu strălucitor pentru partea inferioară a nasului dovleacului (acest lucru vă va ajuta să vă aliniați) și partea de jos a gurii.
  6. Completați spațiul negativ cu portocaliu.
  7. Plasați acest strat peste gura dovleacului, asigurându-vă că gura originală nu se arăta prin. Ascundeți acest nou strat pentru moment.

Pasul 5

Gura este acum în modul complet de suflare. Încă o dată, creați un Strat nou și să mergem.

  1. Întreaga gură este de două rânduri de 3 pixeli și un singur pixel în centrul rândului final.
  2. 5 pixeli sunt desenate pe partea stângă: 2 pixeli în jos, 2 pixeli în diagonală, săriți un spațiu și 1 pixel din colțul gurii. Oglindeste asta pe partea dreapta si trage 5 pixeli peste pe partea superioară a gurii.
  3. Utilizând roșu, desenați 3 pixeli peste care va fi din nou partea inferioară a nasului dovleacului. A desena 5 pixeli în partea de jos a gurii și împrăștia câțiva pixeli în colțurile designului.
  4. Umpleți zona cu portocaliu.
  5. Puneți noua gură peste gura veche, asigurându-vă că gura originală a dovleacului este complet acoperită. Încă o dată, ascundeți acest strat în straturi panou pentru moment.

Pasul 6

Pentru ochii și gura luminată, este necesar un strat.

  1. Zoom în fața feței dovleacului 1600%, sau așa.
  2. Creeaza o Strat nou și umpleți ochii și nasul cu galben. Liniați părțile laterale ale acestora cu roșu pentru a vedea cu ușurință marginea interioară a caracteristicilor faciale.
  3. Utilizați maro deschis pe marginea din stânga a ochilor și a gurii. Utilizați un maro mai deschis pe marginea inferioară.
  4. Umpleți gura cu galben strălucitor, repetând pașii anteriori pentru ce culori sunt utilizate în cadrul designului.
  5. O lovitură de dovleac atunci când "luminat complet".

4. Animarea dovleacului

Pasul 1

Deschide Cronologie panou și alegeți Creați animație cadru din meniul derulant din centrul său.

Pentru a schimba ceea ce se întâmplă în fiecare cadru, va trebui să loviți Noul cadru în opțiunile panoului și ajustați designul în straturi panou de fiecare dată. Observați modificarea de mai jos cu cel de-al doilea strat gura vizibil în al doilea cadru și ascuns în primul.

Pasul 2

Vedeți imaginea de mai jos pentru o defalcare vizuală a cadrelor folosite în animație. Fiecare pas corespunde cu un strat. De asemenea, am împărțit ce se întâmplă în fiecare rama de mai jos:

  1. Dovleacul de bază cu toate straturile suplimentare ascunse. Timpul este setat la 1 secunda.
  2. Stratul de contur galben (de la Secțiunea 3, Etapa 1) Este vizibil în acest cadru, dar este la 25% opacitate. Timpul este setat la 0,1 secunde.
  3. Al treilea cadru are stratul de contur galben la 50% Opacitate și stratul de gură de la Secțiunea 3, Etapa 3 este acum vizibilă. Timpul este setat la 0,1 secunde.
  4. Stratul galben al conturului este la 100% opacitate. Gura de la Secțiunea 3, Etapa 4 este vizibil. Timpul este setat la 0,1 secunde.
  5. Gura de la Secțiunea 3, Etapa 5 este vizibil. Timpul este setat la 0,1 secunde.
  6. Stratul de ochi al ochiului Secțiunea 3, Etapa 2 este acum vizibilă. Timpul este setat la 0,1 secunde.
  7. Acest cadru este identic cu Cadrul 5. Timpul este setat la 0,1 secunde.
  8. Acest cadru este identic cu Cadrul 4. Timpul este setat la 0,1 secunde.
  9. Acest cadru este identic cu Cadrul 3 cu excepția stratului contur galben al cărui Opacitate este setat sa 100%. Timpul este setat la 0,1 secunde.
  10. Toate straturile suplimentare ale ochilor și gurii sunt ascunse în acest strat. Timpul este setat la 0,1 secunde.
  11. Stratul de ochi și gură luminat este acum vizibil în acest cadru. Timpul este setat la 1 secunda.
  12. Toate straturile suplimentare ale ochilor și gurii sunt ascunse. Stratul de contur galben este setat la 50%. Timpul este setat la 0,1 secunde.
  13. Stratul de contur galben este setat la 25%. Timpul este setat la 0,1 secunde.

Pasul 3

Când setați intervalul de timp pe cadrele dvs., puteți selecta mai multe cadre și le puteți schimba simultan. Asigurați-vă de asemenea Opțiuni bucle sunt setate la Pentru totdeauna.

Pasul 4

Când vă exportați fișierul animat, mergeți la Fișier> Salvare ca și selectați .gif. Deoarece nu există multe culori în acest fișier și nu suntem prea preocupați de o dimensiune mare a fișierului, păstrați culorile la 256 și celelalte setări la valorile implicite.

Dacă vă lărgiți fișierul (în cazul în care doriți să fie la fel de mare ca imaginea mea finală), asigurați-vă Calitate este setat sa Cel mai apropiat vecin astfel încât nu există nici o pierdere în calitatea pixelilor cu muchii ascuțite. Din nou, Opțiuni de buclă ar trebui setat la Pentru totdeauna (dacă nu vrei tu .gif pentru a bifa o sumă stabilită pentru orice motiv).

Lucrare fantastică, ai trecut!

O treabă bună în crearea unui dovleac distractiv și animat. Am amândouă versiunile mele originale mărite mai jos, astfel încât să puteți vedea diferența dintre dimensiuni precum și detalii în pictograma pixel.

Pentru mai multe tutoriale de artă pixel aici tuts+, verificați această listă mică:

  • Creați o serie de pictograme Pixel Art de mic dejun în Adobe Photoshop
  • Creați arta pixelilor cu o paletă limitată în 10 pași cu Photoshop
  • Cum se creează o animație Pixel Art Sprite în Adobe Photoshop
  • Kandi Runner: Creați un Pixel Art Sprite de la Scratch
Design & Illustration
×