Cum se creează un interfață de jocuri Pixel în Adobe Photoshop

Există multe lucruri pe care le puteți face atunci când creați un meniu sau unul dintre numeroasele interfețe care există într-un joc video. În cazul acestui tutorial, vom avea timp să jucăm din nou cu arta pixelului pentru a face ceva inspirat de RPG care revine la ecrane de meniu pe 16 biți.

1. Configurați documentul și fundalul

Pasul 1

Arta pixelului este mică. În cazul acestui design, nu suntem prea îngrijorați cu privire la ceea ce s-ar potrivi sau cum ar fi afișat (în cazul în care lucrați la un anumit joc, ați lucra în limitele acestor constrângeri, desigur).

Deschide Adobe Photoshop și de a crea un Document nou care măsoară 254 px de 117 px la 72 ppi. Acesta va fi fișierul principal de lucru pe care îl folosim pe tot parcursul tutorialului.

Pasul 2

Am ales să vă ajute să setați tonul acestui design pornind mai întâi cu modelul de fundal. 

Creeaza o Document nou asta 10px de 10px la 72 ppi. Am ales nuanțe de verde în menta și salvie (# daf5d2, # 8ca784, și # 748f6c de la cea mai ușoară la cea mai întunecată).

Utilizarea Instrumentul pentru creion (B) cu peria implicită la 1px începeți în centrul designului cu cea mai ușoară verde. Desenați o cutie mică de patru pixeli cu doi pixeli pe fiecare parte (păstrați colțurile deschise). Trei pixeli up începe liniile diagonale care se extind 5 pixeli, în diagonală pe fiecare parte a documentului mic. Pentru a termina culoarea verde, plasați trei pixeli în fiecare colț al documentului. Pentru cele două nuanțe de salvie, umpleți spațiul în jurul fiecăruia cu dungi diagonale de culoare.

Pentru a face acest design într-un model simplu, du-te la Editați> Definiți modelul și dați modelului dvs. un nou nume. Reveniți la documentul creat în Pasul 1 și utilizați Instrumentul de găurit cu vopsea (G) pentru a completa stratul de fundal al interfeței dvs. cu model selectat în loc de prim plan în opțiunile instrumentului. Puteți salva sau șterge documentul de model original realizat în acest pas.

2. Creați cureaua din piele

Pasul 1

1. Creeaza o Strat nou (Control-N) și apucați Instrumentul creionului și trageți o linie diagonală de 20 un singur pixel și o linie perpendiculară de 11 pixeli în maro (# 6c0e04).
2. pe fiecare parte a liniei scurte, perpendiculare, trageți 3 adiţional pixeli (vezi mai jos unghiul).
3. Săriți două linii de pixeli diagonali și trageți o altă linie de pixeli  9 pixeli.
4. Săriți o altă linie de pixeli diagonali și închideți micul dreptunghi diagonal (vezi mai jos). Desenați cealaltă parte a curelei de piele cu 20 adiţional pixeli diagonal (cu siguranță, puteți trage acest lucru după prima parte a acestei secțiuni).

Pasul 2

1. Completați partea inferioară a curelei cu 7 pixeli (mergând de la stânga la dreapta, în diagonală).
2. În partea superioară a curelei, săriți un pixel de pe ambele părți ale încuietorii și trageți 3 pixeli în colțul din dreapta al documentului și 1 pixel pe ambele părți mergând de la stânga la dreapta.
3. Linia diagonală din partea de sus a clapetei este 11 pixeli peste.
4. Pentru a încheia încheierea, desenați 1 pixel pe fiecare parte și adăugați altul 11 pixeli de-a lungul unei linii perpendiculare.

Pasul 3

1. Finalizați cureaua cu două linii diagonale cu un singur pixel.
2. Fie umpleți secțiunile curelei cu maro deschis (# bb5f15) cu Instrumentul creionului sau faceți acest lucru cu Instrumentul pentru găleți de vopsea.
3. Nu uitați să umpleți centrul curelei.
4. Pentru încuietoare am folosit galben auriu (# fbc423).

Pasul 4

1. În acest moment am decis să creez o Strat nou de dragul de a lucra la realizarea curelei din piele. Începeți cu evidențiați folosind un brun mai deschis decât culoarea de bază (# d67b1b) cu linii diagonale formate din 2 sau 3 pixeli gros.
2. Pentru umbre, linia laterală a curelei cu maro închis (# 9b3f0e), precum și linii subțiri de lângă clapetă și de-a lungul curelei (vezi mai jos) în diagonală, peste lățimea curelei.
3. Repetați pe cealaltă parte a curelei.
4. Utilizați maro închis în centrul curelei, căptușind marginea superioară și inferioară a acelei secțiuni de pixeli. Pentru încuietoarea de aur, trageți linii diagonale de ocru galben (# c27b17) pe marginea superioară și inferioară și smântână (# f8dd92) A eșalonat în secțiunea centrală a încuietorii. Merge (Control-E) straturile de curea împreună (păstrând-o separată de stratul de fundal).

3. Lanț și hârtie

Pasul 1

Să începem cu linia de artă pentru lanț. Acesta va conecta cureaua de piele la meniul navigabil.

1. Începeți cu partea de sus a primului link: 2 pixeli în linie cu 2 pixeli mergând în diagonală în jos pe două rânduri.
2. Conectați primul rând de pixeli diagonal prin 2 pixeli și trageți 3 pixeli în patru coloane, sărind una sau două linii de spațiu (vezi mai jos). Completați forma (înainte de a lucra la următorul link) cu 2 pixeli diagonal pe fiecare parte intră spre centrul formei.
3. Prima legătură este în esență un mic dreptunghi 3 pixeli de 5 pixeli cu pixelul din colțul din dreapta sus al remorcii scoase și adăugat în colțul din stânga jos.
4. De aici, repetăm ​​forma de bază a lanțului de legătură creat în primele două secțiuni ale acestui pas cu 4 pixeli lățime, A singur pixel diagonal pe fiecare parte, 3 pixeli în jos, și 2 pixeli în jos în diagonală, care conduc în următoarea legătură în lanț.
5. Repetați secțiunile 3-4 din acest pas așa că există 8 lanțuri în total (a se vedea mai jos).

Pasul 2

1. Începând cu culoarea umbrei (# c27b17), concentrați culoarea din stânga jos a fiecăruia dintre lanțurile circulare.
2. Apoi, completați partea de mijloc a desenului cu galben auriu (# fbc423).
3. În cele din urmă, desenați câțiva pixeli în partea dreaptă sus a fiecărui lanț în galben crem (# f8dd92).  
4. Pentru hârtia cu care este conectat lanțul, veți desena un dreptunghi care nu are pixelii de colț de sus. Dimensiunea totală pe care am folosit-o este 53 pixeli de 36 de pixeli. Am găsit mai ușor să desenez dreptunghiul pe a Strat nou, mișcarea lanțului în centrul superior al dreptunghiului. Gaura din hârtie este 4 pixeli de 5 pixeli. 
5. "Foldul" din hârtie este 6 pixeli în sus și în dreapta. Ștergeți pixelii de colț sau pixelii inutili cu Instrumentul de ștergere (E) setați fie la Creion (perie implicită la 1px) sau bloc (Zoom (Z) pentru a șterge unul sau mai mulți pixeli la un moment dat).

Pasul 3

1. contopi stratul de lanț pe stratul de hârtie. Folosește Instrumentul de găurit cu vopsea (G) pentru a umple hârtia cu cremă ușoară (# fefbd8).
2. Pentru liniile de umbre pe hârtie, utilizați Instrumentul creionului din nou și o culoare cremă mai închisă (# f8de93).
3. Plasați lanțul sub cureaua din piele în straturi panou. Lanțul este destinat să stea de pe cureaua curelei.

4. Elemente de meniu

Pasul 1

Cursorul pentru mănuși de carton apare de două ori în cadrul designului. Creeaza o Strat nou și să tragem o mână.

1. Începeți cu Instrumentul creionului, maro (# 6c0e04) ca culoarea primului plan, și 7 pixeli în jos.
2. Linia de sus este 13 pixeli peste, linia de jos este 11 pixeli peste, iar linia verticală care denotă manșeta mănușii este 7 pixeli în jos.
3. Pentru degetul de indicare, adăugați 2 pixeli în jos de la sfârșitul liniei de sus și 4 pixeli la stanga. În centrul formei degetului creat, trageți 3 pixeli suplimentari în jos pentru a închide forma.
4. Adăuga 3 pixeli pentru a defini încă două degete în mănușă (vezi mai jos).
5. Pentru degetul mare, trageți un mic dreptunghi 5 pixeli din stânga 2 pixeli de 5 pixeli cu pixelii de colți șterși.
6. În cele din urmă, umbra de sub mâna este aceeași culoare maro redusă la 50% opacitate. Umpleți mâna și manșeta cu alb folosind Instrumentul pentru găleți de vopsea.

Pasul 2

Puneți mâna peste selecția de meniu aleasă. Oricare ar fi mănușa dvs. din acest meniu, se va corela direct cu cel de-al doilea meniu. Păstrați mâna pe o parte separată mai târziu, pentru că vom avea nevoie de o copie a acesteia mai târziu.

Folosește Instrumentul tip (T) pentru a scrie textul folosind fonturi mici Regular, sau un alt pixel mic, prietenos, la 10pt mărimea. Fiecare cuvânt era un strat separat de text. Verificați alinierea lor de mai jos.

Pasul 3

Copiați (Control-C) și Lipiți (Control-V) hârtia și o jumătate din lanț folosind Instrument de marcaj dreptunghiular (M). Alungați centrul hârtiei fie prin redirecționarea acesteia, fie prin redarea acesteia copierea și Lipire porțiuni ale hârtiei deja desenate pentru a umple spațiul. Al doilea meniu este în esență dublu față de dimensiunea primului meniu.

5. Desenați inima roșie

Pasul 1

1. Pentru inimă, creați un Strat nou și începeți pe partea de lăsare a inimii cu 4 pixeli peste, în maro.
2. Desenați o mică formă V formată din 3 pixeli în centrul și 4 pixeli din nou pentru a finaliza chiar partea superioară a inimii.
3. Apoi vine 2 pixeli în diagonală pe ambele părți, ieșind și coborând.
4. Adăuga 5 pixeli de o parte și de alta, care coboară spre laturile inimii.
5. A desena 6 pixeli diagonal înclinat spre centrul inimii.
6. Completați inima cu 3 pixeli peste pe fundul formei.
7. Începeți să umpleți inima cu roșu închis (# bb0708) în colțurile interioare ale vârfului formei.
8. Continuați căptușirea inimii de-a lungul părții drepte și inferioare.

Pasul 2

1. Umpleți inima cu roșu strălucitor (# fa0000) și linia inimii cu un al doilea strat de roșu mediu (# e10507) (Între roșu aprins și roșu închis din pasul anterior).
2. Porniți evidențiați cu roșu deschis (# fa6964) pe partea stângă a inimii.
3. Desenați cercuri mici în roșu roșu care se mișcă spre stânga.
4. Cu ajutorul culorilor albe, adăugați un pixel fierbinte în centrul (sau aproape de acesta) al formelor de evidențiere (a se vedea mai jos).

6. Desenați comoara de comori

Pasul 1

Tezaurul de comori este un dreptunghi modificat (are un vârf rotunjit). Încă o dată, creați un Strat nou.

1. Pentru partea stângă a pieptului, trageți o linie verticală cu Instrumentul creionului constând din 17 pixeli. Începutul începe cu 2 pixeli peste, urmat de 3 pixeli pe următoarea linie, 19 pixeli pe următoarea linie, 3 pixeli pe linia următoare, și 2 pixeli pe următoarea linie.
2. Completați partea dreaptă cu 17 pixeli pe o linie verticală, mergând în jos. Săriți pixelii de colț și conectați-vă la două laturi cu 30 de pixeli peste. Pentru împărțirea centrului, trageți 30 de pixeli de-a lungul rândului care este 8 pixeli în jos de la partea de sus a liniilor laterale.
3. În centrul spărturii pieptului, desenați partea superioară a încuietorii pieptului 4 pixeli peste și 4 pixeli în jos, întâlnindu-se la diagonalele lor. Pentru începutul centrului încuietorii, Şterge 1 pixel pe ambele părți ale centrului doi.
4. Începând să adăugați culori, umpleți încuietoarea cu galben auriu (# 953608). În timp ce sunteți la el, desenați 3 coloane de galben de pe ambele părți ale pieptului 3 pixeli în partea stângă și respectiv dreapta. Utilizați maro (# bb5f15) pentru a linia partea de jos a split-ului în piept, sărind pixeli galbeni de-a lungul drumului.
5. Scânteia galbenă (# fbf348) Pixeli în centrul benzilor de aur de pe jumătatea inferioară a pieptului.
6. Liniați partea de jos a pieptului cu aceeași culoare brună utilizată anterior. Finalizați încuietoarea pieptului 4 pixeli de aur galben în partea de jos a formei de blocare și 6 pixeli maro sub acestea.

Pasul 2

1. Umpleți centrul și partea superioară a toracelui cu maro deschis (# fbc423) folosind Instrumentul pentru găleți de vopsea.
2. Umpleți părțile laterale ale pieptului cu același brun deschis.
3. Desenați o altă linie de pixeli maro sub diviziunea în piept, precum și în colțurile marginea superioară.
4. Desenează maro mediu (# a84913) linii verticale de sus în centrul pieptului. Liniați centrul fundului toracelui cu linii medii de culoare maro de pixeli (notați ambele săgeți și pixelii spre care se îndreaptă spre plasare).
5. Folosind o culoare mult mai ușoară ca înainte (# fdaa74), Desenați o linie orizontală de-a lungul vârfului pieptului, apropiindu-i de pixelii mediu maro. Coborâți pixeli maro deschis prin linia următoare (vedeți mai jos).
6. Adăugați un cuplu de pixeli galbeni la blocarea pieptului ca o atingere finală. 

7. Desenați Axa

Pasul 1

Creeaza o Strat nou și să lăsăm să tragem toporul.

1. A desena 3 pixeli peste în mediu gri (# 5c5c5c).
2. Curba din partea stângă a axului este 5 pixeli în jos, urmat de 2 pixeli în jos, atunci 2 pixeli peste, și 5 pixeli peste. Multe dintre liniile și formele din această icoană sunt oglindite, deci este plină de repetări.
3. Utilizarea gri (#afafaf), trageți cu capul în jos forma L formată din 3 pixeli peste și 5 pixeli în jos începând de la centrul liniei de sus. Cu gri închis (# 333333), avem un pic de fantezie în formă, dar este   1 pixel în diagonală și în partea dreaptă a liniei inferioare, 2 pixeli la stânga, Încă 2 pixeli sus, și 1 pixel la dreapta în diagonală.
4. Pornind de la colțul latului L, trageți o linie diagonală de 4 pixeli. Conectați pixelii gri închis la gri cu ajutorul 3 pixeli peste și 1 pixel în diagonală.
5. Folosind mediu gri, locul 1 pixel pe diagonala celor doi pixeli de vârf și din dreapta (vedeți mai jos pentru plasarea exactă). Continuați cu adăugarea gri deschis 1 pixel în dreptul celor gri și 2 în jos diagonal.
6. Completați restul desenului cu un gri mai deschis (# d7d7d7).
7. Pentru începutul mânerului axului, desenați două linii diagonale 7 pixeli în maro (# 6c0e04). Utilizați culoarea albă pentru a adăuga câteva evidențieri în partea stângă a lamei axului.
8. Continuați mânerul diagonal în lumină maro (# 93360b) și terminați-l cu a 90 ° unghi.

Pasul 2

1. Umpleți centrul mânerului cu maro medie (# 993511).
2. Umpleți restul mânerului cu un brun mai deschis (# bb5f16). Să lucrăm pe partea dreaptă a toporului. Direct spre stânga, trageți 3 pixeli în sus, 5 pixeli peste, 2 pixeli peste (la nivelul de sub ultimul), 2 pixeli în jos, și 5 pixeli în jos toate în gri. Cu gri închis, închideți forma 1 pixel pe diagonala ultimului miză trasată, doi pixeli în sus, si adauga Încă 2 pixeli peste la stanga. Oglindeste cei doi pixeli gri inchisi care se potrivesc cu manerul central (vezi mai jos pentru plasarea exacta).
3. Cu gri deschis, porniți de la punctul de sus al pixelului închis 3 pixeli în sus, 5 pixeli peste, 1 pixel în diagonală, și 3 pixeli în jos. Atunci, trageți o linie diagonală de 4 pixeli în centrul axului urmat de plasare 3 pixeli de gri deschis de-a lungul mânerului (vezi mai jos).
4. Umpleți restul axului cu gri mai deschis (cod hexagonal în pasul anterior) și folosiți culoarea albă pentru evidențierea.
5. Pentru partea superioară a toporului, folosiți un sortiment de pixeli de aur, maro și galben (aceleași culori folosite pentru pieptul comorii).
6. Repetați pe partea inferioară (în formă mai închisă decât cea din partea de sus), cu griuri asortate utilizate în lama axului.

8. Desenați moneda de aur

Pasul 1

Pictograma noastră finală pentru al doilea meniu este moneda de aur. Încă o dată, creați un Strat nou și ia-ți Instrumentul creionului gata.

1. A desena 7 pixeli peste pentru marginea superioară a monedei.
2. Pe ambele părți ale liniei de sus, veți merge 2 pixeli peste, 1 pixel în diagonală (exterior), și 2 pixeli în jos.
3. Partile sunt 6 pixeli în jos în acest design și în partea de jos este o repetare a jumătății superioare a pixelilor (mi sa părut că este mai ușor Copie, Pastă, și Rotiți vertical, atunci contopi straturile liniei monede ale monedelor).
4. În colțurile curbei cercului, plasați pixeli în ocru galben (# bb6403).
5. Continuați să utilizați ocru galben pentru a crea un cerc mai mic în centrul monedei. Fiecare parte este formată din 5 pixeli în centrul și 2 pixeli pe fiecare parte. Repetați în jurul pentru a închide cercul mai mic.
6. În jumătatea inferioară a cercului mai mic, plasați ocru închis (# 974000) În colțurile fiecărei linii (vedeți mai jos pentru plasarea exactă).
7. Începeți să umpleți moneda folosind aur (# ffaa1b) în jumătatea de jos și o linie mică de 3 pixeli în centrul inferior al designului.

Pasul 2

1. În centrul monedei se află o literă de majusculă G. Lucrarea de la 3 pixeli trasată în etapa anterioară, continuați cu ocru galben, ocher închis și maro. Vedeți mai jos pentru plasarea exactă a fiecărei culori. Forma consta din 4 pixeli verticali, 2 pixeli pe fiecare parte, 5 pixeli peste formând marginea de jos, și 2 pixeli în sus.
2. Pentru marginea superioară a lui G, trageți 4 pixeli peste și 1 pixel pe diagonală.
3. Completeaza G cu 3 pixeli peste brațul scrisorii. Umpleți a doua linie între G cu pixelii de culoare galben auriu.
4. Umpleți centrul monedei, acoperind restul G cu un galben auriu mai deschis (# f9c325).
5. Utilizând aceeași brichetă galben auriu și galben strălucitor (# ffef51), de lucru pentru a umple partea de sus a monedei.
6. Utilizați cremă (# fff7b6) Pentru evidențierea în partea dreaptă sus a designului de monede pentru ao completa.

Pasul 3

Plasați pictogramele completate într-o linie aflată în centrul celui de-al doilea meniu. Copie și Pastă pictograma de mână și asigurați-vă că indică pictograma corespunzătoare primului meniu (în acest caz, "elementul" corespunde cu pieptul comorii).

8. Măsurători la nivel de inventar

Pasul 1

Fiecare ecartament începe cu același design de cadru. Creeaza o Strat nou și finalizați următoarele:

1. Desenați un dreptunghi lung cu Instrumentul creionului în aceeași maro folosită pentru celelalte elemente de linie și care acoperă cea mai mare parte a restului spațiului UI. Păstrați-l rotunjit prin ștergerea pixelilor de colț.
2. Desenează cutii mici de pixeli 2 de 2 pixeli de aur galben în fiecare colț al dreptunghiului mare.
3. Plasați un singur pixel galben în fiecare colț. Utilizați maro pentru a desena un dreptunghi mai mic, lăsând o linie 1 pixel pe fiecare parte.
4. Umpleți centrul dreptunghiului mai mic cu cremă ușoară (# fffcd3) folosind Instrumentul pentru găleți de vopsea.
5. Completați cadrul cu maro deschis (# c45d12).
6. Utilizați maro mediu (# 9e3e14) a adauga 2 pixeli pe fiecare parte a fiecărui colț al designului cadrului. Linia de jos a interiorul cadrului cu o culoare tan (# cfa984).
7. Folosind același mediu maro, adăugați fiecare câte un pixel sau două 5-8 pixeli în jurul cadrului.

Pasul 2

Copie și Pastă proiectarea ramei de 3 ori. Alegeți un nivel arbitrar pentru fiecare gabarit și completați cu culoarea corespunzătoare a fiecărui element:

• Roșu (# fe0211) pentru inima.
• Brown (# d47d1e) pentru pieptul comorii.
• Gri (# b1b1b1) pentru topor.
• Aur (# ffc643) Pentru moneda.

Pasul 3

Fiecare ecartament de nivel obține o linie sau două pixeli într-o culoare de culori și într-o culoare umbroasă. Utilizați următoarele pentru fiecare:

• Red Highlight: # ff6563; Shadow roșu: # bd0704
• Marcaj maro: # f4912c; Maro Shadow: # f4912c
• Grey Highlight: # dee4e0; Gray Shadow: # 5c5a5d
• Evidențierea aurului: # ffe33a; Shadow de aur: # d87e06

Bine terminat, tu!

S-a terminat! Unhide stratul de fundal din straturi panou și aliniați gabaritele de nivel în modul descris mai jos. Împingeți mai departe designul de artă pixel, creând o machetă a jocului din care provine acest UI, schimbând cantitatea de informații afișate sau alegeți propria schemă de culoare pentru piesa globală. Arătați-ne versiunea dvs., fie credincioasă în designul acestui tutorial, fie în propria dvs. orientare, în secțiunea de comentarii de mai jos!

Pentru mai multe tutoriale de artă pixel, verificați următoarele:

• Creați un caracter izometric de pixeli în Adobe Photoshop
• Ce este vorba de arta Pixel??
• Kandi Runner: Creați un Pixel Art Sprite de la Scratch