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!
Următoarele bunuri au fost utilizate în timpul producerii acestui tutorial.
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.
Adăugați din nou texturi de hârtie, de această dată modificați modul de amestecare cu Multiply.
Adăugați stratul de ajustare Hue / Saturation pentru ao întuneca.
Adăugați o textură de carte de epocă cu modul de amestecare Multiplicare și Opacitate 48%.
Adăugați texturi vechi de hârtie. De data aceasta utilizați Overlay Mode Blend with Opacity 58%.
Adăugați stratul de ajustare alb-negru.
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.
Setați modul de amestecare la Multiplicare și reduceți opacitatea la 8%.
Creați un nou strat. Umpleți-l cu un gradient radial alb-negru.
Setați modul de amestecare la ecran cu Opacitate 67%.
Adăugați stratul de ajustare Hue / Saturation. Selectați Culoare pentru a-i oferi o culoare.
Î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%.
Deschideți Adobe Illustrator. Desenați un dreptunghi galben.
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.
Selectați forma și trageți-l pentru al duplica.
Apăsați Command / Ctrl + D pentru a repeta procesul de duplicare.
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.
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.
Adăugați o formă de dreptunghi în partea de sus și de jos a benzii.
Adăugați următoarele stiluri de straturi.
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.
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.
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.
Puteți vedea diferența înainte și după modificarea umbrei din imaginea de mai jos.
Desenați un alt dreptunghi. Acest timp mai mic decât cel precedent.
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%.
Creați un dreptunghi nou acoperind toată forma. Adăugați un dreptunghi mai mic în interiorul formei, setați-l să scadă.
Duplicați forma anterioară. Redimensionați calea interioară.
Adăugați următoarele stiluri de straturi.
Este prea mult umbră în partea de sus a ferestrei. În caseta de dialog Strat de strat, activați Efecte ascunde masca stratului.
Command / Ctrl-click path. Inversați selecția (Command / Ctrl + Shift + I) și vopsiți umbrele în partea superioară a ferestrei cu gri.
Mai jos, puteți vedea diferența înainte și după ce umbra este parțial ascunsă.
Desenați un dreptunghi acoperind toată interfața ferestrei. Setați Fill la 0% și adăugați următoarele stiluri de straturi.
Ultimul nostru pas este să adăugați o atenție subtilă pe interfața ferestrei.
Desenați un cerc întunecat și plasați-l pe colț. Adăugați umbra picăturii.
Utilizați o perie moale pentru a picta un alb pe partea superioară a orificiului.
Iată rezultatul vizualizării de 100%.
Puneți toate straturile care creează gaura într-un grup de straturi. Duplicați grupul și puneți-l pe fiecare colț.
În Illustrator, creați jumătate din forma titlurilor Window.
Faceți clic dreapta pe formă și selectați Transformați> Reflectați. Selectați Axa: Vertical și faceți clic pe Copiere.
Mutați forma duplicată.
Selectați punctele care se suprapun. Faceți clic dreapta și selectați Alăturați-vă.
Inserați calea pe Photoshop ca strat de formă.
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.
Adăugați un titlu de joc și adăugați următoarele stiluri de straturi. Fontul folosit aici este Celtic Garamond al doilea.
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.
Duplicați forma anterioară și redimensionați-o. Vedeți imaginea de mai jos pentru referință.
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.
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.
Trageți forma mai jos pentru a adăuga o perspectivă 3D asupra formei. Adăugați următorul text Gradient Overlay.
Trageți umbra sub formă.
Desenați forma de mai jos și completați umbra. Adăugați Suprapunere cu gradient pe formă.
Iată rezultatul vizualizării de 100%.
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ă.
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ță.
Mai jos puteți vedea rezultatul în vizualizare de 100%. Duplicați forma de două ori.
Creați un strat nou sub formă și pictați niște pixeli negri folosind o perie moale.
Duplicați toată forma. Împingeți-l orizontal și mutați-l în cealaltă parte a interfeței.
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ă.
Reduce opacitatea la 15%.
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.
Lipiți imaginea PNG a unui vehicul în interiorul cadrului.
În spatele cadrului se adaugă un strat nou și se umple cu un gradient de la gri până la alb.
Pictați niște umbre sub vehicul.
Adăugați un alt cadru sub previzualizarea vehiculului. Utilizați tehnici similare în etapele anterioare.
Adăugați câteva informații pe cadru.
Desenați un alt cadru, de data aceasta mai mare.
Desenați un dreptunghi simplu în interiorul cadrului. Adăugați stilul următor al stratului.
Adăugați un text pe dreptunghi.
Duplicați dreptunghiul pentru alte date. Eliminați stratul Strat exterior și reduceți opacitatea la 30% față de nivelul inactiv.
Duplicați toată forma pentru a crea un alt set de date.
Reveniți la Illustrator, creați această formă.
Lipiți forma în Photoshop ca strat de formă. Adăugați următoarele stiluri de straturi.
Vopsea evidențiați și umbrați manual folosind o perie moale, Duritate 0% și Opacitate 5-10%.
Duplicați forma și răsturnați-o orizontal.
Desenați un dreptunghi albastru deschis și puneți-l în spatele formelor. Adăugați următoarele stiluri de straturi.
Desenați câteva evidențieri în interiorul formei. Adăugați titlul butonului. Lampa de lumină de pe partea superioară a butonului.
Duplicați butonul și schimbați titlul.