Share
Acesta este cel de-al doilea dintr-o serie de tutoriale din două părți privind proiectarea unei aplicații bancare iPhone. În această parte a seriei, vom proiecta aspectul / conținutul principal al fiecărei pagini: meniul / pagina de pornire, pagina de instrucțiuni și ecranul de adăugare a contului. Ai pierdut prima parte? Ridicați viteza citit-o aici.
În continuare, de la locul unde am rămas, selectați Instrumentul de marcaj dreptunghiular. Din bara de instrumente deasupra capului, selectați dimensiunea fixă din meniul drop-down stil și utilizați setările de 50 x 50 pixeli. Faceți clic undeva pe pânză pentru a crea o selecție de 50 x 50 pixeli. Glisați selecția până la marginea pânzei dvs. și glisați un ghid din rigla dvs. (Vizualizați> Ruler) și trageți-o în sus față de selecția dvs. Repetați procesul până când aveți două ghidaje pe ambele părți ale pânzei.
Plasați un ghid în centrul pânzei dvs. - ar trebui să aveți posibilitatea să îl prindeți automat.
Acum trageți ghidajele și faceți-le central între cele două pe care le-am făcut deja, ca mai jos:
Acum avem o grilă foarte simplă pregătită pentru a plasa pictograma / butoanele după ce le-am proiectat. Selectați Rectangular Marquee Tool și meniul de stil, selectați dimensiunea normală, mai degrabă decât cea fixă. Trageți un pătrat (țineți apăsată tasta Shift pentru ao păstra în pătrat) între ghidajele din stânga. Umpleți-l cu negru.
Repetați procesul de două ori mai mult, asigurându-vă că completați fiecare formă pe un nou strat.
Duplicați toate cele trei straturi și poziționați-le cu 50 de pixeli sub forma anterioară.
Cu ajutorul instrumentului Marct rectangular, creați un bloc negru solid în partea de jos a ecranului meniului și redenumiți stratul la "ad".
Cu structura principală a ecranului nostru de pornire, este timpul să începeți să adăugați toate aceste mici detalii care fac designul să vină la viață. Cmd + Faceți clic pe (Ctrl + Faceți clic pe Windows) pe prima dvs. miniatură cu straturi de icoane pentru a o reselectați. Mergi la Selectați> Modificare> Netedă și introduceți 4 pixeli, apoi faceți clic pe OK. Faceți clic dreapta și selectați Selectați inversă din meniu.
Apăsați tasta Ștergere de pe tastatură pentru a elimina colțurile selecției. Accesați Vizualizare> Ștergeți ghidurile pentru a elimina toate ghidurile.
Deschideți fereastra stilurilor straturilor pentru prima dvs. pictogramă. Aplicați o umbră de picătură, o suprapunere de culoare și un accident vascular cerebral. Toate setările pot fi văzute în capturile de ecran de mai jos:
Duplicați stratul și mergeți la Edit> Transform> Scale. În timp ce țineți atât Shift-Key, cât și Alt-Key, scalați puțin forma.
Deschideți fereastra de stiluri de straturi pentru noul dvs. strat și aplicați următoarele setări efectelor noastre existente și eliminați umbra complet ...
Duplicați stratul încă o dată și eliminați complet stilurile de straturi făcând clic dreapta pe strat și selectând stilul stratului clar din meniu. Mergi la Filtru> Zgomot> Adăugați zgomot. Am adăugat 10% zgomot și apoi am redus opacitatea straturilor la 5%.
Repetați întregul proces la toate pictogramele.
Este timpul să începem să creăm icoanele pe care le vom plasa apoi pe butoanele noastre. Creați un nou strat și selectați Instrumentul de marcaj dreptunghiular. Prima icoană pe care o vom proiecta este un teanc de monede care vor reprezenta "echilibru". Creați un mic dreptunghi cu instrumentul de marcare și apoi completați-l cu negru.
Reglați selecția cu câteva crestături și apoi spre dreapta - completați această selecție cu negru pe același strat. Continuați să repetați pasul până când aveți ceva care arată mai jos.
Deschideți fereastra stilurilor straturilor pentru noul dvs. strat de monede. Adăugați o suprapunere de subtilă gradient de aur la monedele dvs..
Acum, adăugați o umbră și o umbră interioară în forma dvs., puteți vedea setările pe care le-am folosit în capturile de ecran de mai jos.
Folosind tehnici pe care le-am folosit în ambele părți ale acestui tutorial, completați toate celelalte icoane. Voi crea următoarele pictograme: Declarație de hârtie (pentru declarații), Plic (pentru notificări), Telefon mobil (pentru reîncărcări telefonice), Card de credit (pentru declarații de card de credit) și Silhouette.
După ce mi-am completat icoanele, am decis că umbra de sub picioarele principale albe trebuie să se întunece puțin. Deschide fereastra de stil strat și până opacitatea umbrei la 15%. De asemenea, am mărit dimensiunea umbrei de la 2px la 5px.
Faceți același lucru pentru toate celelalte forme ale butoanelor.
În loc să folosim dreptunghiul inferior pentru o reclamă, cred că ar fi un mic plus pentru a avea un grafic simplu în locul său, oferind utilizatorilor o imagine de ansamblu rapidă asupra faptului dacă soldul contului lor este în sus (sau în jos). Folosind aceeași tehnică pe care am folosit-o mai devreme, trageți niște ghiduri de la conducător.
Prindeți instrumentul eliptic Marquee și trageți un mic cerc în timp ce țineți Shift-Key pentru a păstra i16t rotund. Umpleți-l cu negru pe un nou strat.
Duplicați stratul și plasați un punct pe următorul ghid vertical. Repetați pasul până când aveți ceva care arată astfel:
Mergi la Vizualizați> Goliți ghidajele pentru a elimina ghidajele de pe panza noastră. Deschideți opțiunea de stiluri de strat pentru prima dvs. blob și aplicați următoarele stiluri:
Copiați stilurile de straturi făcând clic dreapta pe stratul dvs. și selectând Stilul stratului de copiere. Selectați toate celelalte straturi ale cercului dvs., Faceți clic dreapta și selectați Inserare stil strat. Acest lucru ar trebui să adauge automat stilurile pe care tocmai le-ați creat tuturor celorlalte straturi.
Prindeți instrumentul Linie și trageți o linie de la un punct la altul. Fa acest lucru sub straturile tale.
Cu asta, așa este ecranul de navigare! Puneți toate straturile recente într-un dosar numit "Ecran de navigare" pentru a păstra lucrurile frumoase și ordonate!
Glisați straturile până la marginea pictogramelor pe ecranul dvs. de navigare, apoi ascundeți întregul dosar. Creați un dosar nou și numiți-l "Ecran de declarație".
Selectați Instrumentul Linie și, din bara de instrumente, faceți clic pe meniul derulant și asigurați-vă că sunt selectate capete de săgeată (capăt).
Trageți o săgeată foarte mică, ca mai jos:
Faceți clic dreapta pe stratul săgeților, selectați raster, apoi redenumiți stratul pe "săgeată verde". Deschideți fereastra cu opțiuni de strat pentru săgeata dvs., apoi aplicați o umbră de umplere, umbra interioară, suprapunere în gradient și cursa. Toate setările pot fi văzute mai jos:
Așa cum probabil ați ghicit, această săgeată va fi pictograma pe care o folosim pentru tranzacțiile primite (banii plătiți în contul utilizatorilor). Duplicați stratul și împingeți-l în jos câteva spații utilizând Shift-Key și Cursor-Keys. Mergi la Editați> Transformare> Rotire în timp ce țineți apăsată tasta Shift, rotiți săgeata astfel încât să fie îndreptată spre stânga.
Schimbați numele straturilor în săgeată roșie, apoi deschideți fereastra stilului straturilor și aplicați un gradient roșu la acesta.
Păstrați duplicarea celor două săgeți și plasați-le sub ele în ordine aleatorie.
Selectați unealta de marcaj cu un singur rând și faceți o selecție sub prima sa săgeată, umpleți-o cu negru pe un nou strat numit "separator".
Duplicați stratul, apoi mutați-l în jos cu un pixel apăsând butonul în jos de pe cursorul dumneavoastră. Recolorați linia la alb.
Mergeți cele două straturi împreună selectându-le pe ambele, făcând clic dreapta și selectând straturile de îmbinare din meniu. Schimbați opacitatea stratului la 15% și apoi deconectați capătul liniilor până la linii directoare utilizând Instrumentul de marcaj dreptunghiular și tasta de ștergere.
Duplicați stratul și plasați-l între următoarele două săgeți. Continuați să repetați pasul până când aveți o linie între toate săgețile. Mergi la Vizualizați> Goliți ghidajele.
Luați Instrumentul de Text și trageți o casetă de text între cele două linii de separare de sus, asigurându-vă că este centrală. Introdu un text. Am folosit textul "$ 107.62 de la Company Name pe 04/06/2010". Am folosit Helvetica pentru asta, setat la 4pt.
Asigurați-vă că anumite fragmente ale textului dvs. apar mai mult, utilizând diferite subtipuri, cum ar fi caracterele aldine și italice.
Duplicați stratul de text și mutați-l până la următoarea tranzacție - continuați să repetați acest pas până când ați completat toate golurile.
Pentru a vă face macheta de design mai realistă, treceți prin straturile de text și modificați suma, numele companiei și datele.
Folosind tehnici pe care le-ați utilizat deja în ambele părți ale tutorialului, începeți și finalizați ecranul de adăugare a contului. Mai jos sunt câteva screenshot-uri luate pe parcursul proiectării ecranului final al tutorialului.
Acasă / Ecran de navigare:
Ecran de afisare:
Adăugați ecranul contului:
Accentsconagua