Cum de a proiecta o interfață de joc video în Photoshop

Unul dintre cele mai importante aspecte ale jocului este modul în care sunt prezentate informațiile. Modul în care grafica este prezentată face o diferență majoră în modul în care jucătorii vor percepe jocul în timpul jocului. În tutorialul de astăzi vom demonstra cum să proiectăm o fereastră de interfață pentru jocuri video. În timpul procesului vom arăta cum să atragem manual anumite aspecte, să aplicăm stiluri de straturi, texturi și chiar și cum să încorporăm Adobe Illustrator. Să începem!


Tutorial Active

Următoarele bunuri au fost utilizate în timpul producerii acestui tutorial.

  • Texturi de hârtie de la Vandelay Premier
  • Texte din cartea Vintage din Lost and Taken
  • texturi vechi de hârtie de la WeGraphics
  • Texturi metalice zgâriate de la WeGraphics
  • Textură de rugăciune de la WeGraphics
  • Carivan Setați png de la mizerie

Pasul 1: Contextul

Creați un fișier nou cu dimensiunea de 1152 px x 864 px. Primul nostru pas este crearea fundalului pentru interfața noastră. Acest proces este pur și simplu este doar experimentarea cu textura. Practic, tocmai am aruncat niște texturi pe care le-am găsit și le-am experimentat cu modul de amestecare. Prima mea încercare este o textura de hârtie.


Pasul 2

Adăugați din nou texturi de hârtie, de această dată modificați modul de amestecare cu Multiply.


Pasul 3

Adăugați stratul de ajustare Hue / Saturation pentru ao întuneca.


Pasul 4

Adăugați o textură de carte de epocă cu modul de amestecare Multiplicare și Opacitate 48%.


Pasul 5

Adăugați texturi vechi de hârtie. De data aceasta utilizați Overlay Mode Blend with Opacity 58%.


Pasul 6

Adăugați stratul de ajustare alb-negru.


Pasul 7

Creați un nou strat. Apăsați D pentru a seta culoarea primului și a fundalului în alb și negru. Faceți clic pe Filter> Render> Clouds.


Pasul 8

Setați modul de amestecare la Multiplicare și reduceți opacitatea la 8%.


Pasul 9

Creați un nou strat. Umpleți-l cu un gradient radial alb-negru.


Pasul 10

Setați modul de amestecare la ecran cu Opacitate 67%.


Pasul 11

Adăugați stratul de ajustare Hue / Saturation. Selectați Culoare pentru a-i oferi o culoare.


Pasul 12

În cele din urmă, adăugați o frumoasă textura metalică zgâriată. Setați modul de amestecare la Multiplicare și reduceți Opacitatea la 20%.


Pasul 13: Linia industrială

Deschideți Adobe Illustrator. Desenați un dreptunghi galben.


Pasul 14

Pe partea de sus a dreptunghiului, trageți un dreptunghi negru mai mic. Selectați punctele de top cu Direct Selection Tool și deplasați-le.


Pasul 15

Selectați forma și trageți-l pentru al duplica.


Pasul 16

Apăsați Command / Ctrl + D pentru a repeta procesul de duplicare.


Pasul 17

Selectați toate formele. Apăsați Comandă / Ctrl + C. Lipiți-o în Photoshop, Command / Ctrl + V. Selectați caseta de dialog Smart Object in Paste.


Pasul 18

Dublu clic pe strat pentru a da caseta de dialog Open Layer Style. Adăugați suprapunerea modelului, încărcați culoarea hârtiei și selectați un model murdar.


Pasul 19

Adăugați o formă de dreptunghi în partea de sus și de jos a benzii.


Pasul 20

Adăugați următoarele stiluri de straturi.


Pasul 21: Interfața de bază a ferestrelor

Vom începe prin crearea bazei ferestrei. Creați o formă dreptunghiulară cu Culoare: # # 313029, Opacitate: 100% și Umpleți: 50%. Adăugați stilul următor al stratului.


Pasul 22

Stilul stratului pe care tocmai l-am adăugat este prea plat. Vom folosi o tehnică simplă pentru ao rezolva. În caseta de dialog Layer Style (Strat de stil) activați Efecte ascunde masca stratului.


Pasul 23

Adăugați masca de strat. Command / Ctrl-click pentru a crea selecție. Inversați selecția prin apăsarea comenzii / Ctrl + Shift + I. Adăugați un gradient întunecat moale deasupra și vopseaua neagră pe linia industrială pentru a ascunde umbra.


Pasul 24

Puteți vedea diferența înainte și după modificarea umbrei din imaginea de mai jos.


Pasul 25

Desenați un alt dreptunghi. Acest timp mai mic decât cel precedent.


Pasul 26

Adăugați texturi de rugină pe partea de sus a acesteia. Utilizați masca de strat pentru a ascunde zonele inutile. Setați modul de amestecare la Multiplicare și reduceți Opacitatea la 10%.


Pasul 27

Creați un dreptunghi nou acoperind toată forma. Adăugați un dreptunghi mai mic în interiorul formei, setați-l să scadă.


Pasul 28

Duplicați forma anterioară. Redimensionați calea interioară.


Pasul 29

Adăugați următoarele stiluri de straturi.


Pasul 30

Este prea mult umbră în partea de sus a ferestrei. În caseta de dialog Strat de strat, activați Efecte ascunde masca stratului.


Pasul 31

Command / Ctrl-click path. Inversați selecția (Command / Ctrl + Shift + I) și vopsiți umbrele în partea superioară a ferestrei cu gri.


Pasul 32

Mai jos, puteți vedea diferența înainte și după ce umbra este parțial ascunsă.


Pasul 33

Desenați un dreptunghi acoperind toată interfața ferestrei. Setați Fill la 0% și adăugați următoarele stiluri de straturi.


Pasul 34

Ultimul nostru pas este să adăugați o atenție subtilă pe interfața ferestrei.


Pasul 35: găuri

Desenați un cerc întunecat și plasați-l pe colț. Adăugați umbra picăturii.


Pasul 36

Utilizați o perie moale pentru a picta un alb pe partea superioară a orificiului.


Pasul 37

Iată rezultatul vizualizării de 100%.


Pasul 38

Puneți toate straturile care creează gaura într-un grup de straturi. Duplicați grupul și puneți-l pe fiecare colț.


Pasul 39: Titlul ferestrei

În Illustrator, creați jumătate din forma titlurilor Window.


Pasul 40

Faceți clic dreapta pe formă și selectați Transformați> Reflectați. Selectați Axa: Vertical și faceți clic pe Copiere.


Pasul 41

Mutați forma duplicată.


Pasul 42

Selectați punctele care se suprapun. Faceți clic dreapta și selectați Alăturați-vă.


Pasul 43

Inserați calea pe Photoshop ca strat de formă.


Pasul 44

Vopsea evidențiază și umbrează forma. Puteți vedea progresul pe care l-am făcut mai jos. Folosesc o perie foarte moale (Duritate: 0%, Opacitate: 5-10%) și aproximativ 10 straturi.


Pasul 45

Adăugați un titlu de joc și adăugați următoarele stiluri de straturi. Fontul folosit aici este Celtic Garamond al doilea.


Pasul 46: Accesați

Desenați un dreptunghi rotunjit în partea stângă a interfeței. Utilizați culoarea: # 605847. Adăugați suprapunere Gradient subtil de la gri la alb.


Pasul 47

Duplicați forma anterioară și redimensionați-o. Vedeți imaginea de mai jos pentru referință.


Pasul 48

Desenați un alt dreptunghi. De data aceasta folosiți culori mai deschise. Adăugați suprapunere în gradient. Duplicați-l și plasați-l pe partea inferioară a dreptunghiului mai mare.


Pasul 49

Desenați o linie de 1 px pentru a evidenția și umbra. Vom transforma această formă într-o formă 3D. În cele din urmă, veți vedea că acest mic detaliu de 1 pixel este necesar pentru a obține un rezultat realist.


Pasul 50

Trageți forma mai jos pentru a adăuga o perspectivă 3D asupra formei. Adăugați următorul text Gradient Overlay.


Pasul 51

Trageți umbra sub formă.


Pasul 52

Desenați forma de mai jos și completați umbra. Adăugați Suprapunere cu gradient pe formă.


Pasul 53

Iată rezultatul vizualizării de 100%.


Pasul 54

Selectați toate straturile și puneți-le pe un strat de grup. Duplicați grupul, răsturnați-l orizontal și puneți-l pe partea opusă.


Pasul 55: Accesați

Desenați forma așa cum se vede mai jos. Vopsea evidențiază și umbrează pe ea. Nu uitați să adăugați umbra moale a formei pe fereastra de interfață.


Pasul 56

Mai jos puteți vedea rezultatul în vizualizare de 100%. Duplicați forma de două ori.


Pasul 57

Creați un strat nou sub formă și pictați niște pixeli negri folosind o perie moale.


Pasul 58

Duplicați toată forma. Împingeți-l orizontal și mutați-l în cealaltă parte a interfeței.


Pasul 59: Adăugați textura ruginii

Adăugați texturi de rugină acoperind întreaga interfață. Command / Ctrl-click pentru a crea o selecție în funcție de forma lor. Adăugați o mască de strat nou. Vopsea de formă neagră de titlu cu perie de opacitate scăzută, deoarece nu vrem să vedem prea multă rugozitate pe ea. Mai jos, puteți vedea masca creată.


Pasul 60

Reduce opacitatea la 15%.


Pasul 61: Previzualizarea vehiculului

Creați un cadru în interiorul interfeței ferestrei. Aceasta este realizată din două căi, cu calea interioară setată la "Extragere". Adăugați următoarele stiluri de straturi.


Pasul 62

Lipiți imaginea PNG a unui vehicul în interiorul cadrului.


Pasul 63

În spatele cadrului se adaugă un strat nou și se umple cu un gradient de la gri până la alb.


Pasul 64

Pictați niște umbre sub vehicul.


Pasul 65: Datele vehiculului

Adăugați un alt cadru sub previzualizarea vehiculului. Utilizați tehnici similare în etapele anterioare.


Pasul 66

Adăugați câteva informații pe cadru.


Pasul 67: Cercetare și actualizare de date

Desenați un alt cadru, de data aceasta mai mare.


Pasul 68

Desenați un dreptunghi simplu în interiorul cadrului. Adăugați stilul următor al stratului.


Pasul 69

Adăugați un text pe dreptunghi.


Pasul 70

Duplicați dreptunghiul pentru alte date. Eliminați stratul Strat exterior și reduceți opacitatea la 30% față de nivelul inactiv.


Pasul 71

Duplicați toată forma pentru a crea un alt set de date.


Pasul 72: Butoanele de desenare

Reveniți la Illustrator, creați această formă.


Pasul 73

Lipiți forma în Photoshop ca strat de formă. Adăugați următoarele stiluri de straturi.


Pasul 74

Vopsea evidențiați și umbrați manual folosind o perie moale, Duritate 0% și Opacitate 5-10%.


Pasul 75

Duplicați forma și răsturnați-o orizontal.


Pasul 76

Desenați un dreptunghi albastru deschis și puneți-l în spatele formelor. Adăugați următoarele stiluri de straturi.


Pasul 77

Desenați câteva evidențieri în interiorul formei. Adăugați titlul butonului. Lampa de lumină de pe partea superioară a butonului.


Pasul 78

Duplicați butonul și schimbați titlul.


Imagine finală