Share
În acest tutorial, vom proiecta interfața utilizator a unei aplicații iPhone bazate pe date financiare în Photoshop. Vom folosi un camion de tehnici moderne pentru a face acest design pop! Tutorialul va fi împărțit în două părți, așa că asigurați-vă că vă abonați prin RSS sau E-mail pentru a verifica restul tutorialului!
Cu orice design, ar trebui să începeți cu o schiță, chiar dacă este foarte dur. Vom proiecta o interfață potrivită pentru o aplicație financiară, cum ar fi o bancă, unde vă puteți verifica soldul, declarațiile etc. Vom crea câteva ecrane ale aplicației în cele două părți ale acestei tutorial series: pagina de pornire, pagina de instrucțiuni și pagina de adăugare a contului. Aceste trei pagini vor consta din icoane / navigație, o listă și câteva câmpuri de text. Dacă doriți să creați mai multe pagini după tutorial, acestea vor fi în principiu alcătuite din aceleași elemente pe care le vom învăța cum să creați.
Mai jos este o schemă scanată în UI pe care am creat-o pentru a vă baza proiectul aplicației pe:
Vom proiecta aplicația la cele mai recente dimensiuni ale iPhone 4, care măsoară rezoluția de 640x960 pixeli la o rezoluție de 326ppi. Deschideți Photoshop și mergeți la Fișier> Nou. Creați noul document utilizând următoarele setări:
Treceți la Teehan + Lax pentru a descărca pachetul iPhone 4 GUI PSD (Retina Display). Acest pachet ne va permite să luăm elemente pentru aplicația noastră, deși nu vom folosi foarte multe dintre ele, deoarece majoritatea designului nostru este foarte personalizat.
Deschideți fișierul pe care tocmai l-ați descărcat în Photoshop. În panoul straturilor, găsiți folderul numit "bară de sus (aplicație)". Selectați acest dosar și trageți-l în proiectul de aplicație PSD.
Intrați în fișierul PSD al elementelor GUI și trageți peste stratul "Bar (Grey-Blue)":
În cele din urmă, trageți deasupra directorului "partea de jos a barei". Vom modifica foarte mult aceste. Dacă citiți acest tutorial, probabil că deja știți să jucați cu forme simple, astfel încât ar trebui să puteți crea ceva asemănător cu acestea, oricum. Primul lucru este să eliminați cele două butoane "înapoi" și "editați" din bara noastră superioară, deoarece nu vom avea nevoie de acestea. Eliminați dosarele "butonul din spate" și "butonul albastru" din directorul "Bar (Gray - Blue)".
Vom începe acum să ne jucăm cu culorile noastre și să ne bazăm restul aplicației asupra culorilor pe care le decidem să le folosim în barele pe care le avem deja. Deschideți fereastra de stiluri de strat pentru stratul intitulat "fundal" din directorul "Bar (Albastru - Gri)".
Voi folosi o schemă de culori verde și argintiu pentru designul aplicației mele. Din fereastra stilurilor de straturi, deschideți secțiunea de suprapunere a gradientului și apoi deschideți fereastra editorului de gradienți, după cum se vede mai jos:
Modificați culorile într-o culoare aleasă de dvs. Folosesc două culori în gradientul meu, mergând de la întuneric (# 719100) la lumină (# A1CF00).
Următorul strat, intitulat "umbra întunecată de fund", este mult prea vizibil pentru aspectul subtil pe care îl voi folosi pentru designul meu, astfel încât opacitatea să scadă la aproximativ 50%. Faceți același lucru pentru următorul strat denumit "evidențiere de top".
Acum vom adăuga un zgomot în bara noastră superioară. Selectați toate cele 4 straturi în dosarul nostru "top bar", apoi faceți clic dreapta și selectați "Răsfoiți straturile".
Creați un strat nou și numiți-l "zgomot de sus", plasați-l deasupra stratului "fundal", după cum se vede mai jos:
Țineți apăsată tasta Cmd (sau tasta Ctrl-cheie din Windows) și faceți clic pe miniatură în panoul straturilor de lângă stratul "fundal". Aceasta ar trebui să facă o selecție a formei tale. Faceți clic pe stratul "zgomot superior", apoi completați forma cu alb.
Mergi la Filtru> Zgomot> Adăugați zgomot, și utilizați următoarele setări:
După apăsarea butonului OK, schimbați modul de amestecare a straturilor în "Suprapunere" și reduceți opacitatea la 25%. Acest lucru vă ajută să adăugați un pic de detaliu design-ului aplicației noastre. Vom folosi zgomot subtil ca textură în tutorial, așa că nu uitați să vă amintiți cum am făcut asta!
Acum vom schimba culoarea barei de stare (bara superioară care afișează semnalul telefoanelor etc.). Folosind aceeași tehnică pe care am folosit-o mai devreme pentru a schimba culoarea barei de sus, schimbați bara de stare la un gradient verde închis.
Treceți prin straturile diferite și modificați toate obiectele barei de stare în alb (cum ar fi bateria, ora etc.). Acest lucru este foarte ușor de făcut, pur și simplu trebuie să eliminați toate gradienții și să le înlocuiți cu o suprapunere de culoare în fereastra stilului stratului.
Măriți în bara dvs. superioară și selectați Instrumentul de marcaj dreptunghiular. Faceți o selecție lungă și lungă în partea de sus a barei de sus, asigurându-vă că este de numai 2px înălțime.
Faceți un nou strat în dosarul "top bar", asigurându-vă că acesta este plasat peste toate celelalte straturi. Sunați-l "top stroke" și, în sfârșit, completați selecția cu alb, scăzând opacitatea noului strat la 45%.
Este timpul să schimbați textul care citește în prezent "Etichetă". Selectați Instrumentul pentru text și faceți clic pe text, ceea ce ne permite să îl editați. Introduceți ceva potrivit pentru a corespunde ideii dvs. de aplicare, în cazul meu, care este "Bankapp".
Joaca-te in jur cu fonturi si dimensiuni - o sa folosesc un font numit "Blue Highway" setat la 10pt.
Deschideți fereastra de stiluri de straturi pentru textul dvs. și eliminați complet setările Drop Shadow. Faceți clic pe OK.
Duplicați stratul de text și modificați culoarea textului original într-un verde închis. Treceți textul vechi în jos cu 2 pixeli, apoi spre dreapta 2 pixeli. Reduceți opacitatea la 25%.
Vom lucra acum pe bara inferioară. O să-mi fac argintul. Privind înapoi peste schiță, bara va fi împărțită în două butoane. Folosind același proces pe care l-am folosit mai devreme, schimbați bara albastră de jos într-o bară de argint. Am folosit un foarte mic indiciu de verde în culorile mele pentru a-i oferi acel pic mai mic. Culorile pe care le-am folosit sunt # B9BFB7 și # E8EDE6.
Folosind aceeași tehnică pe care am folosit-o mai devreme, adăugați un zgomot în bara de jos.
Umpleți fundalul principal cu un gri deschis (am folosit # F9F9F9). Mergi la Filtru> Zgomot> Adăugați zgomot și adăugați un anumit zgomot în fundal.
Selectați instrumentul dreptunghiular de marcaj și faceți două selecții mici deasupra barei inferioare și sub bara superioară. Completați-le cu negru pe un strat nou direct deasupra stratului principal de fundal.
Mergi la Filtru> Blur> Gaussian Blur și distrugeți noile forme cu aproximativ 15 pixeli.
Schimbați opacitatea straturilor la 15%. Aceste noi forme neclară vor acționa ca umbre sub barele noastre, după cum se vede mai jos:
Este timpul să ne îngrijiți straturile - aceasta este o parte esențială a designului UI mobil, nu numai a designului. Un panou de straturi murdare duce la un creier dezordonat, iar tu te vei lovi când nu găsești stratul de care ai nevoie! Organizați-vă straturile într-un mod structurat care funcționează pentru dvs.; al meu poate fi văzut mai jos:
Înainte de a finaliza acest tutorial, vom crea pictogramele pentru bara de jos. Creați un nou strat și selectați Instrumentul de marcaj dreptunghiular. Trageți o mică selecție în timp ce țineți apăsată tasta Shift pentru ao păstra. Umpleți-l cu negru.
Mutați selecția spre dreapta utilizând tastele cursor și apoi reumpleți cu negru. Repetați procesul până când aveți ceva care arată astfel ...
Mișcați înapoi. Dacă sunteți conducători care nu se arată deja, permiteți-i să mergeți la Vizualizare> Administratori. Din conducători, trageți ghidajele în documentul dvs., astfel încât să știți unde este centrul (căile de lățime) din ecranul principal, precum și bara inferioară.
Utilizați ghidajele pentru alinierea pictogramei meniu / home - este posibil să fie necesar să redimensionați pictograma pentru a se potrivi frumos în bara de jos, puteți face acest lucru accesând Editați> Transformare> Scală.
Deschide fereastra stilurilor stratului pentru pictogramă. Aplicați o suprapunere de gradient, o umbră de picătură, o umbră interioară și un accident vascular cerebral. Toate acestea pot fi văzute mai jos:
Creați o pictogramă pentru a reprezenta ecranul de setări și pentru a aplica din nou aceleași efecte.
Prindeți instrumentul de marcaj dreptunghiular și faceți o selecție verticală de numai 1px, așa cum se vede mai jos.
Creați un nou strat și completați selecția cu negru. Duplicați stratul și mutați-l cu un pixel în dreapta utilizând tastele dvs. de cursor. Completați această linie cu alb.
Schimbați modul de amestecare al celor două straturi cu Overlay și aliniați liniile spre centrul barei de navigare.
Asta e pentru prima parte a acestui tutorial! Am creat structura principală și schema de culori a designului aplicației noastre. În tutorialul următor, vom crea conținutul pentru acasă, declarație și vom adăuga ecrane de cont și vom fi blocați în toate micile elemente de design care vor face ca designul să se unească frumos.
Accentsconagua