Share
În primul rând, recuzită la Dan Wiersema (prietenul meu și directorul Creative la Guifx) pentru a fi creierele din spatele acestui tutorial. Conceptul și scheletul au fost dezvoltate de el. De asemenea, el mi-a ajutat să mănânc cretele în ceea ce privește evaluarea muncii mele de la început până la sfârșit.
În acest tutorial, vom crea o interfață de meniu principal pentru un joc iPhone fictiv. Vom trece prin configurarea Photoshop-ului pentru a afișa cu precizie dimensiunea ecranului țintă, configurarea unui cadru de sârmă pentru proiect, crearea unui fundal, crearea unui logo, crearea texturii rock pentru bara laterală și textura lemnului pentru butonul și butoanele salvate . Vom adăuga, de asemenea, crearea de verdeață pentru detalii și măsuri bune. Acesta va fi unul lung, deci răbdarea este o virtute. De asemenea, cafeaua ajută!
Uitați-vă la imaginea pe care o vom crea.
Mergeți pe pxcalc.com și urmați instrucțiunile. Făcând acest lucru vă va permite să vizualizați design-ul în mărimea finală a acestuia - dimensiunea reală a ecranului real iPhone - pe propriul computer.
Creați un document nou cu o înălțime de 480px la 320px, cu o rezoluție de 164,83 pixeli / inch. Setați modul de culoare la RGB 8bit.
Vă recomandăm să creați un cadru wireframe pentru proiectul dvs., precum cel din imaginea de mai jos. Cea mai bună modalitate de a face acest lucru este să faceți clic dreapta cu instrumentul de zoom selectat și să alegeți dimensiunea de imprimare. Dacă ați urmat Pasul 1, veți examina acum documentul dvs. la dimensiunea exactă pe care utilizatorul final o va folosi pe iPhone. Acest lucru vă ajută să stabiliți cât de mari ar trebui să fie butoanele pentru a lucra suficient pe un dispozitiv cu ecran tactil. Notă: Încercați fizic să faceți clic pe ecran și nu uitați să luați în considerare degetele groase.
Utilizați Instrumentul dreptunghi și trageți ghidajele de poziționare pentru elementele diferite. Păstrați culoarea albă a culorilor și adăugați o curbă interioară neagră 1px. Este, de asemenea, o idee bună să bateți conceptul folosind creion și hârtie. Chiar dacă nu ești un artist bun (nu sunt, dar încă o fac), schițele de șervețel te ajută să ții ochii pe premiul!
Creați un nou strat și denumiți-l "Fundal". Setați culoarea prim-planului la # 5e1114 și fundalul pentru # 140306. Selectați Gradient Tool (Instrument de înclinare) și cu setările imaginate mai jos trageți de sus în jos, așa cum indică săgeata.
Pentru stratul "Fundal", aplicați următoarele stiluri de straturi.
Resetați culorile din prim-plan și fundal la negru și în timp ce faceți clic pe tasta D de pe tastatură. Creați un strat nou și denumiți-l "bg_clouds". Acum mergeți la Filter> Render> Clouds. Setați modul de amestecare al acestui strat pentru a suprapune. Îndepărtați-l în zone aleatorii cu instrumentul de ștergere, setați la o opacitate de 30-50% cu o perie moale pentru a crea momente interesante. Încercați să potriviți rezultatul meu mai jos.
Descărcați această imagine din sxc.hu (Vă mulțumim Javier González). Sunați stratul "castel", redimensionați-l și plasați-l aproximativ în centrul de sus al scenei. Setați modul de amestecare a stratului la Multiplicare și opacitatea la 60%. Utilizați instrumentul Eraser pentru a șterge orice margine aspru. Mai jos este rezultatul meu după acest pas.
Bine, până acum atât de bine. Să începem să ne creăm logo-ul. Luați-vă instrumentul Pen și creați conturul capului unui dragon. Pentru a face acest lucru puteți fie să urmăriți o imagine aleatorie dragon, fie să creați-vă propriul. Cu toate acestea, acest lucru se va încheia cu unele efecte de stil de strat greu, așa că încercați să păstrați forma destul de simplă.
Există o mare varietate de forme libere și dingbats pe care le puteți folosi în schimb, dacă nu doriți să vă petreceți timpul urmărind sau să veniți cu un cap de dragoni. Unde este vointa este si o cale.
Duplicați-vă forma de 2 ori (strat> strat duplicat ...), astfel încât să aveți 3 straturi de dragonhead. Denumiți partea inferioară "dragon_1", cea de mijloc "dragon_2" și cea de sus "dragon_3".
E timpul să-i facem dragonul să strălucească. Această tehnică se bazează în mare măsură pe tutorialul Elliot AKA TrueLovePrevails despre modul în care se repetă stilul de logo-ul Warcraft, astfel încât o mare imensă îi vine pentru a dezvolta această tehnică fantastică și pentru că m-am lăsat să o folosesc. Faceți clic aici pentru a vizita tutorialul original.)
Aplicați următoarele stiluri de strat fiecărui strat, începând cu stratul "dragon_1"
Aplicați acum următoarele stiluri de straturi la "dragon_2" și setați opacitatea umplerii acestui strat la 0%.
Și din nou la "dragon_3" și setați opacitatea umplerii acestui strat la 0%.
Bine, dragonul arată bine - verifică! Următorul text este textul.
Mergeți pe Fontcraft.com și descărcați sau cumpărați Scurlock. Scurlock este gratuit ca un font demo, deci asigurați-vă că citiți termenii de utilizare și cumpărați o licență dacă doriți să utilizați acest font în scopuri comerciale.
Selectați Instrumentul Tip și setați dimensiunea la 60pt. Introduceți textul "Dragon." Faceți clic dreapta pe strat și selectați Conversie în formă. Motivul pentru aceasta este că vrem să eliminăm sublinierea "o". Pentru a face acest lucru vom folosi Instrumentul de selecție directă. Activați masca vectorială făcând clic pe miniatură și selectați toate nodurile de subliniere, apoi apăsați tasta de ștergere de pe tastatură. Dacă nu reușiți să le luați pe toate, țineți apăsată tasta Shift pentru a adăuga la selecție.
Apoi, apucați Instrumentul de selecție a traseului și faceți clic pe "o". Accesați editarea> Transformați gratuit și trageți nodul central de jos în jos, astfel încât "o" să pară că aparține restului textului. Acum duplicați stratul de două ori, la fel cum am făcut-o și cu dragonhead-ul. Denumiți straturile din partea inferioară și în sus "dragontext_1", "dragontext_2" și, respectiv, "dragontext_3".
Să ascundem stratul de "castel" pentru moment, deoarece este puțin important pentru aspect și, în principal, provoacă un pic de distragere a atenției în timp ce proiectarea.
Faceți clic dreapta pe stratul "dragon_1" și selectați "stil strat de copiere". Acum faceți clic dreapta pe stratul "dragontext_1" și selectați Paste Style Layer. Faceți clic dreapta pe stratul "dragon_2" și selectați Copiere stil strat. Acum faceți clic dreapta pe stratul "dragontext_2" și selectați Paste Layer Style. Schimbați opacitatea modului de umbri sub conic și embos la 43%.
Selectați "dragontext_3" și setați opacitatea de umplere la 0%. Aplicați apoi stilurile prezentate în imaginea de mai jos. Când ați terminat, repetați pașii 9 și 10 pentru textul "Storm" (denumirea straturilor stormtext_ #) și plasați textul în modul descris mai jos.
Command-cick miniatură vector mască a stratului "dragontext_2" pentru a încărca selecția. Veți vedea furnicile marșante care apar în jurul textului. Asigurați-vă că "dragontext_2" este stratul dvs. activ, deoarece acest lucru ne va face să plasăm stratul de ajustare pe care urmează să-l creăm chiar deasupra "dragontext_2".
Acum faceți clic pe butonul Creare umplutură nouă sau strat de ajustare aflat sub paleta de straturi. Din listă selectați Color Balance și aplicați setările de mai jos. Apoi, dați clic pe Comandă + D pentru a deselecta. Faceți același lucru pentru stratul "swordtext_2".
Detaliile vorbesc de la sine, deci vă permit să aruncați ceva mai mult text pentru efectul suplimentar. Introduceți din nou "Scroll the Wicked" folosind fontul Scurlock, la o dimensiune de 18,5 pt. Pentru textul "Scroll" și "Wicked", setați dimensiunea textului la 14,5 pt. Pentru textul "de", utilizați # C9C9C9 drept culoarea textului și aplicați următoarele stiluri de straturi.
Sper că sunteți încă cu mine. Să trecem la bara laterală.
Utilizând instrumentul Pen, creați o formă asemănătoare blocului ca cea din imaginea de mai jos. Fii creativ aici. Nu există nici un drept sau rău atunci când faci chestii de genul acesta, așa că aruncați o formă împreună fără a acorda prea multă atenție detaliilor. Duplicați acest strat și apelați partea superioară "sidebar_base". Denumiți partea de jos a părții "sidebar_perspective". Aplicați acum următoarele stiluri de straturi la stratul "sidebar_base".
Împingeți stratul "sidebar_perspective" 6px spre stânga, faceți clic dreapta pe el și selectați Rasterize Layer.
Setați Instrumentul Burn Up utilizând setările de mai jos și vopsiți marginea perspectivă - ținând cont de sursa de lumină de la schița conceptuală - în cazul în care lumina este cel mai puțin probabil să o atingă. Cu instrumentul Dodge, vopsiți zonele opuse. Atunci când fac acest lucru pentru texturi de piatră, am constatat că este eficient pentru a dab, mai degrabă decât accident vascular cerebral, deoarece aceasta creează iluzia de o suprafață dur. În cele din urmă, dați stratului o umbră de picătură.
Descărcați acest set de perii de Lee Richardson. Creați un strat nou deasupra "sidebar_base" și denumiți-l "sidebar_texture_1". Acum, faceți clic pe comanda "layer sidebar_base" pentru a încărca selecția de formă. Fără a elibera comanda apăsați Shift pentru a adăuga selecția și faceți clic pe stratul "sidebar_perspective". Apoi apucați instrumentul de perie și selectați a doua perie a setului pe care tocmai l-ați descărcat. Cu culoarea din prim-plan setată pe negru, faceți clic o dată în interiorul selecției și apăsați Command + D de pe tastatură. Setați Opacitatea acestui strat la 50%.
Setați culoarea primului câmp la # 160A02 și creați un alt strat. Denumiți-o - ați ghicit-o - "sidebar_texture_2". Repetați procesul de la Pasul 15, de această dată utilizând a patra perie a setului. Este mai mic, deci veți avea nevoie de două clicuri pentru a acoperi întreaga suprafață. Cu acest layer selectat, mergeți la Filter> Blur> Gaussian Blur. Setați-l la o rază de 1,5, apoi faceți clic pe OK. Ar trebui să aveți ceva asemănător imaginii de mai jos.
Să adăugăm unele imperfecțiuni pe suprafața rocilor. Creați un nou strat și denumiți-l "fisuri". Selectați instrumentul perie și variați între o rază de master 2 x 5 pixeli, duritate 60% până la 80% și păstrați opacitatea periei la 55%. Încearcă să nu-ți faci griji pentru a-l obține dreapta. Stratul de stil va face cea mai mare parte a muncii, iar cea mai ciudată formă se poate dovedi grozavă. Când sunteți mulțumit de crăpături, aplicați următorul stil și deveniți mai fericiți.
Creați încă un alt strat, acesta deasupra stratului "fisuri", și îl numiți "edge_bumps". Selectați instrumentul creion cu un diametru principal de 1px și trageți unele imperfecțiuni în culoarea neagră de-a lungul liniei evidențiate de mai jos. setați opacitatea la 76%, apoi aplicați următorul strat de strat pe strat.
Creați un strat nou deasupra stratului "edge_bumps". Apăsați comanda pe stratul "sidebar_perspective". Prindeți oricare dintre pensulele de spatter implicite din Photoshop și dați-le în jos pe margine, păstrând în același timp opacitatea periei la 55%. Copiați stilul stratului din stratul "edge_bumps" și lipiți-l pe acest strat. Setați opacitatea straturilor la 55%.
Să trecem la crearea pădurii. Faceți o formă ca cea de mai jos pentru placa noastră mare de jocuri salvate din lemn. Setați culoarea formei la # 463118. Apelați stratul "saved_games_base" și aplicați următoarele stiluri.
Folosind instrumentul Pen, încercați să replicați forma pe care o vedeți mai jos și plasați-o sub stratul "saved_games_base". Marginile importante sunt evidențiate cu roșu. Denumiți-l "saved_games_perspective" și setați culoarea acestei forme la # 14100D. De asemenea, aplicați o umbră de picătură după cum se arată.
Descărcați prima textură de pe această textura setată de cgtextures.com. Puneți-l pe scenă și redimensionați / rotiți-l până când vă place cum arată. Plasați-o deasupra și peste stratul "saved_games_base" și redenumiți-le "wood_texture_1". Apăsați comanda "saved_games_base", apoi Command + Shift faceți clic pe "saved_games_perspective" pentru a adăuga la selecție. Selectați "wood_texture_1" și faceți clic pe butonul Add mask layer, situat sub paleta de straturi. Setați acest mod de amestecare a straturilor la Soft Light.
Duplicați acest strat o dată, denumiți-l "wood_texture_2", setați modul de amestecare la Overlay și Opacity la 15%.
Repetați pașii 20-22 pentru butoanele. Încercați să modificați un anumit gradient, iar utilizarea se va reflecta în loc de radial. Pentru a urmări straturile dvs., este recomandat să adăugați straturile de butoane unui grup. Încercați să potriviți rezultatele afișate mai jos.
Să facem lucrurile mai ușoare. selectați stratul superior al documentului și faceți clic pe Stratul de creare a noului strat sau ajustare, la fel ca în pasul 11 pentru text. De această dată selectați nivelurile din listă și trageți nodul central la 1.39, care este puțin spre stânga.
Faceți clic pe butonul "stormtext_1", apoi apăsați butonul Command-Shift și faceți clic pe straturile "dragontext_1" și "dragon_1". Selectați miniaturile nivelului de nivel și mergeți la Editare> Umplere și completați selecția cu negru. Acum, textul și capul dragonului nu vor fi afectate de stratul de niveluri.
Apoi vom adăuga un strat de ajustare a luminozității / contrastului, folosind exact aceeași metodă pe care am folosit-o pentru niveluri, inclusiv pentru a vă asigura că "Dragon Storm" DOAR TEXT acest timp nu este afectat de acest strat prin mascarea acestuia. Setați luminozitatea la 25 și contrastul la 35.
Cu instrumentul dreptunghi, deasupra stratului "wood_texture_2", creați o formă pătrată ca în imaginile de mai jos. Denumiți acest strat "inset_rim", duplicați acum acest strat și sunați la cel de sus "inset_base".
Aplicați următoarele stiluri, începând cu "inset_rim" și utilizând o Opacitate de umplere de 0%.
Pentru "inset_base", utilizați aceleași setări și o Opacitate de umplere de 60%.
Duplicați ambele "inset_rim" și "inset_base" de două ori și plasați după cum se arată în partea de jos a imaginilor de mai jos.
Descărcați "Livingstone" de PrimaFont de la dafont.com. Introduceți tot textul pe care îl vedeți mai jos, utilizând #ECDECB ca fiind culoarea textului. Dimensiunea nu este prea importantă, încercați doar să potriviți aproximativ ceea ce este arătat mai jos. Apoi, aplicați următorul stil tuturor acestor straturi de text.
Setați culoarea primului câmp la # 636363 și creați un strat nou sub butoanele. Utilizând instrumentul perie setat la 85% Duritate cu un diametru principal de 1px, vopsea a O forma, ca în imaginea de mai jos. Vedeți selecția marsupirii. Duplicați-l și plasați copiile după cum se arată.
Faceți pasul de mai sus pentru toate zonele din imaginea de mai jos care are lanțuri și aplicați următorul stil tuturor straturilor. Vor fi mai multe straturi, deci folosiți grupuri pentru a le urmări.
Să facem din nou vizibilă "stratul" castelului. De când ne îndreptăm spre etapa detaliată a acestui proiect, este bine să vedem clar ce va fi rezultatul final.
Acum, folosindu-vă din nou instrumentul stiloului tău, cu setul negru pe culoarea din prim-plan, creați o formă asemănătoare celei din caseta de jocuri salvate de mai jos. Asigurați-o în principal pătrat, dar tăiați colțurile pentru ao oferi o formă mai interesantă. Apelați acest strat "tabletă". Aplicați următoarele stiluri de straturi:
Folosind din nou fontul Livingstone, tastați textul pe care îl vedeți în tabelul cu pietre pentru jocuri salvate de mai jos și aplicați următoarele stiluri de straturi. Când ați terminat, duplicați întreaga tabletă și plasați-o în cea de-a doua casetă, după cum se arată în imaginea de mai jos.
Setați culoarea prim-planului la # 2E343A, iar cu instrumentul Pen creați o formă mică de diamant (aproximativ 10px-10px). Aceasta va fi baza pânzelor noastre. Denumiți stratul "rivet_inset" și duplicați-l de două ori. Denumiți stratul nitului mijlociu "rivet_base" și cel de sus "rivet_style". Adăugați următoarele stiluri, începând cu "rivet_inset".
Acum, aplicați următoarele stiluri de strat stratului "rivet_base".
Acum, aplicați următoarele stiluri de strat stratului "rivet_style".
Acum duplicați întregul nit de trei ori și plasați unul în fiecare colț al cutiei de joc salvate, la fel ca în imaginea de mai jos.
Creați 4 cercuri mici (aproximativ 4 pixeli până la 4 pixeli) la baza casetei salvate, utilizând instrumentul de elipsă și # CCB55A ca pe culoarea prim planului. Acestea vor fi indicatorii de pagină adesea găsiți în aplicațiile iPhone. Pentru primele trei, aplicați aceste stiluri.
Modificați culoarea celui de-al patrulea cerc în # FFA200, făcând dublu clic pe miniatura de culoare a formei. Apoi aplicați următorul stil.
Este timpul să vă aruncați în ultimul și probabil cel mai dificil pas. Acest lucru ar putea fi, de fapt, un întreg tutorial în sine, dar voi încerca să-l păstrez fundamental. Voi încerca să explic acest lucru cât mai bine cu ajutorul imaginilor, dar va fi o învățare prin a face experiență pentru oricine este nou în această tehnică.
Opțional, puteți adăuga o mască neclar pe frunze dacă doriți detalii mai clare. Setările ar fi în funcție de suma de 50%, raza de 0,5px și pragul de 0 nivele.
Adăugați verdeață, aici și acolo pentru a face să pară mai interesant. Ați putea merge mai departe decât am făcut și adăugați și altele pe caseta de jocuri salvate. Vă mulțumim mult pentru urmăriri împreună cu acest tutorial și sper că ați învățat câteva tehnici noi. Mai jos este rezultatul final.
Accentsconagua