Proiectarea unei aplicații iPhone Bank în Photoshop Partea 2 Cod Dezvoltare site web, Jocuri pe computer și

Distribuiți pe Facebook
Tweet
Distribuiți pe Google+
Postați pe Tumblr
Fixează-l
Adăugați la Pocket
Trimite email

Acesta este al doilea dintr-o serie din două părți de tutoriale pentru proiectarea unei aplicații bancare iPhone. În această parte a seriei vom proiecta aspectul principal/conținutul fiecăreia dintre aceste pagini: meniul/pagina principală, pagina extras și ecranele pentru adăugarea conturilor. Ai ratat prima parte? Ține-te la curent citind-o aici.

Pasul 1

Apoi, de unde am rămas, selectați Instrumentul de selectare dreptunghi. În bara de instrumente, alegeți dimensiunea fixă din meniul derulant Stil și utilizați setările de 50 x 50 pixeli. Faceți clic oriunde pe pânză pentru a crea o selecție de 50 x 50 pixeli. Trageți selecția la marginea pânzei, apoi glisați un ghid de pe riglă (View> Ruler) și fixați-l la selecția dvs. Repetați procesul până când există două linii directoare pe ambele părți ale pânzei.

Așezați un ghid în mijlocul pânzei - ar trebui să îl puteți fixa automat.

Acum scoateți ghidajele și puneți-le în mijloc între cele două pe care le-am creat deja.

Acum avem o grilă foarte simplă pentru a plasa pictogramele/butoanele noastre odată ce le-am proiectat. Alegeți meniul Instrument de selecție dreptunghiulară și stil și alegeți dimensiunea normală în loc de dimensiunea fixă. Trageți un pătrat între ghidajele din stânga (țineți apăsată tasta Shift). Umpleți-l cu negru.

Repetați procesul de încă două ori, asigurându-vă că completați fiecare formă pe un strat nou.

Duplicați toate cele trei straturi și poziționați-le la 50 de pixeli sub formele anterioare.

Folosind instrumentul de selecție dreptunghiulară, creați un bloc negru solid în partea de jos a ecranului meniului și redenumiți stratul „anunț”.

pasul 2

Acum că structura principală a ecranului nostru de pornire este gata, este timpul să adăugăm toate micile detalii care dau viață designului. Comandă + faceți clic (Ctrl + faceți clic pe Windows) pe miniatura primului nivel de simbol pentru a o selecta din nou. Mergi la Selectați> Modificare> Smooth Introduceți 4 pixeli și faceți clic pe OK. Faceți clic dreapta și alegeți Selectare inversă din meniu.

Apăsați tasta Ștergere de pe tastatură pentru a elimina colțurile selecțiilor. Accesați Vizualizare> Ștergere ghiduri pentru a elimina toate ghidajele.

Deschideți fereastra de stil strat pentru primul dvs. simbol. Aplicați o umbră, suprapunerea culorilor și linia. Toate setările pot fi văzute în următoarele capturi de ecran:

Duplicați stratul și alegeți Editare> Transformare> Scară. Ținând apăsate atât tastele Shift, cât și Alt, veți reduce forma un pic.

Deschideți fereastra Stiluri de strat pentru noul dvs. strat și efectuați următoarele setări pentru efectele noastre existente. Îndepărtați complet umbra.

Duplicați din nou stratul și eliminați complet stilurile stratului făcând clic dreapta pe strat și alegând Ștergeți stilul stratului din meniu. Mergi la Filtru> Zgomot> Adăugare zgomot. Am adăugat 10% zgomot și am redus opacitatea stratului la 5%.

Repetați întregul proces pentru toate simbolurile dvs.

pasul 3

Este timpul să creăm pictogramele pe care le vom plasa apoi deasupra butoanelor noastre. Creați un strat nou și alegeți instrumentul de selectare a dreptunghiului. Primul simbol pe care îl vom proiecta este un teanc de monede care reprezintă „sold”. Creați un mic dreptunghi cu instrumentul de selecție și umpleți-l cu negru.

Mutați selecția cu câteva crestături și apoi la dreapta - umpleți selecția cu negru pe același strat. Repetați pasul până când ceva seamănă cu partea de jos.

Deschideți fereastra Stiluri de strat pentru noul strat de monede. Adăugați o monopol de gradient auriu destul de subtil.

Acum adaugă o formă de umbră și o umbră interioară. Puteți vedea setările pe care le-am folosit în capturile de ecran de mai jos.

Completați toate celelalte simboluri folosind tehnici pe care le-am folosit în ambele părți ale acestui tutorial. Voi crea următoarele pictograme: extras de hârtie (pentru extrase de cont), plic (pentru notificări), telefon mobil (pentru reîncărcări de telefon), card de credit (pentru extrase de card de credit) și o siluetă (pentru adăugare cont).

Pasul 4

După ce mi-am terminat icoanele, am decis că umbra sub principalele noastre forme albe trebuie să fie puțin mai întunecată. Deschideți fereastra Layer Style și măriți opacitatea umbrei la 15%. De asemenea, am mărit dimensiunea umbrei de la 2 px la 5 px.

Faceți același lucru pentru toate celelalte forme de butoane.

Pasul 5

În loc să folosiți dreptunghiul de jos pentru o reclamă, cred că ar fi un pic delicios dacă ați folosi în schimb o grafică simplă care să ofere utilizatorilor o idee rapidă despre echilibrul lor ridicat (sau în scădere). Folosind aceeași tehnică pe care am folosit-o anterior, scoateți câteva linii de ghidare de pe riglă.

Apucați instrumentul Elliptical Marquee și trageți un cerc mic în timp ce țineți apăsată tasta Shift. Umpleți-l cu negru pe un strat nou.

Duplicați planul ș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 Vizualizare> Ștergere ghiduri pentru a elimina liniile directoare de pe pânza noastră. Deschideți opțiunea Stiluri strat pentru primul dvs. blob și aplicați următoarele stiluri:

Copiați stilurile stratului făcând clic dreapta pe stratul dvs. și selectând Copiere stil strat. Selectați toate celelalte straturi de cerc, faceți clic dreapta și alegeți Lipire stil strat. Aceasta ar trebui să adauge automat stilurile pe care tocmai le-ați creat la toate celelalte straturi.

Apucați instrumentul pentru linii și trageți o linie dintr-un punct în altul. Faceți acest lucru sub straturile de puncte.

Cu aceasta, ecranul nostru de navigare este de asemenea făcut! Puneți toate straturile finale într-un folder numit „Ecran de navigare” pentru a menține lucrurile ordonate!

Pasul 6

Trageți straturile până la marginea pictogramelor de pe ecranul de navigare, apoi ascundeți întregul folder. Creați un folder nou și denumiți-l „Ecran de instrucțiuni”.

Selectați Instrumentul de linie și faceți clic pe meniul derulant de pe bara de instrumente pentru a vă asigura că vârfurile de săgeată (capăt) sunt selectate.

Scoateți o săgeată foarte mică ca mai jos:

Faceți clic dreapta pe stratul de săgeată, selectați „Rasterizați” și redenumiți stratul în „săgeată verde”. Deschideți fereastra Opțiuni strat pentru săgeata dvs., apoi aplicați o umbră, o umbră interioară, o suprapunere în gradient și o linie. Toate setările pot fi văzute mai jos:

După cum probabil ați ghicit deja, această săgeată va fi simbolul pe care îl vom folosi pentru tranzacțiile primite (bani care vor fi depuși în contul de utilizator). Duplicați stratul și mutați-l câteva spații cu tasta Shift și tastele cursor. Mergi la Editați> Transformați> Rotiți și țineți apăsată tasta Shift și rotiți săgeata pentru a indica stânga.

Schimbați numele stratului cu o săgeată roșie, deschideți fereastra Stil strat și aplicați un gradient roșu.

Duplică cele două săgeți și plasează-le una sub cealaltă în ordine aleatorie.

Selectați instrumentul de selectare a unui singur rând și efectuați o selecție sub prima săgeată. Umpleți-l cu negru pe un nou strat numit „Separator”.

Duplicați stratul, apoi mutați-l în jos cu un pixel apăsând tasta în jos de pe tastele cursorului. Colorează linia în alb.

Îmbinați cele două straturi împreună selectându-le pe ambele. Faceți clic dreapta și alegeți Alăturați straturilor din meniu. Schimbați opacitatea stratului la 15% și utilizați instrumentul Rectangular Marquee și tasta Ștergere pentru a tăia capătul liniilor până la liniile directoare.

Duplicați stratul și plasați-l între următoarele două săgeți. Repetați pasul până când aveți o linie între toate săgețile. Mergi la Vizualizare> Ștergere ghiduri.

Apucați instrumentul de text și trageți o casetă de text între primele două separatoare pentru a vă asigura că se află în centru. Introduceți ceva. Am folosit textul „107,62 USD din numele companiei pe 06.06.2010”. Am folosit Helvetica pentru acest lucru, setat la 4pt.

Asigurați-vă că anumite părți ale textului sunt mai accentuate folosind diferite subtipuri, cum ar fi: B. bold și italic.

Duplicați stratul de text și mutați-l până la următoarea tranzacție. Repetați acest pas până când ați completat toate golurile.

Pentru a face designul designului dvs. mai realist, parcurgeți straturile de text și modificați numărul, numele companiei și data.

Pasul 7

Lansați ecranul Adăugare cont și completați-l folosind tehnicile pe care le-ați folosit în ambele părți ale tutorialului. Mai jos sunt câteva capturi de ecran pe care le veți face pe măsură ce proiectați ecranul final al tutorialului.

Rezultate finale

Ecran de pornire/navigare:

Ecranul de instrucțiuni:

Adăugați ecran de cont: