Share
Acesta este cel de-al doilea dintr-o serie de tutoriale din două părți despre reșchimbarea unei aplicații iPhone cu Photoshop. Trebuie să ne prindă? Citiți o parte din PSDTuts +! Vom acoperi restul aplicației UI în acest tutorial, acordând o atenție deosebită detaliilor mici și delicate, cum ar fi tipografia, designul butonului și câmpurile de introducere a textului, care vor face designul general.
Am terminat tutorialul anterior cu pagina noastră de lansare a aplicațiilor, precum și fundalul principal pentru ecrane și bara de navigare / navigare pentru fiecare ecran.
După ce vă deschideți documentul în Photoshop, vom merge direct să lucrăm la icoanele noastre. În tutorialul anterior, am creat deja fundalul, bara de instrumente și textul de fundal (unde vom plasa textul, butoanele și orice altceva). Vrem patru icoane diferite, toate acestea reprezentând același lucru în cererea inițială. Cele patru icoane sunt:
Pentru a crea icoanele noastre, vom folosi câteva ghiduri de conducători pentru a vă asigura că sunt de aceeași dimensiune. Mergi la Vizualizare> Administratori dacă nu se află deja pe ecran. Glisați câteva ghidaje de la conducători și le așezați lângă fundalul alb.
Selectează Instrument de marcaj dreptunghiular și să creați o selecție de dimensiuni fixe de 100x75 px. Faceți clic pe undeva pe pânză și plasați selecția lângă ghidajul din stânga în zona barei de instrumente.
Glisați un alt ghid de la riglă și încheiați-l direct la sfârșitul selecției (ar trebui să se fixeze automat).
Repetați pasul, tragând un ghid spre partea de sus și de jos a selecției.
Continuați să repetați acest pas până când avem patru dreptunghiuri diferite formate din ghiduri.
Aceste forme vor fi utilizate pentru a plasa icoanele noastre. Motivul pentru care sunt mai largi decât sunt înalți este că vom plasa și titlul de icoane sub el. Vom centraliza fiecare pictogramă și element de text în grila noastră.
Folosind aceeași tehnică pe care tocmai am folosit-o, adăugăm mai multe ghiduri, astfel încât să știm unde să plasăm icoanele și textul nostru, așa cum se vede mai jos:
Deși pare confuz, odată ce începem să proiectăm icoane și să introducem textul nostru, lucrurile vor părea mult mai simple.
Acum ne-am înființat ghizii, putem începe proiectarea icoanelor și a textului. Voi începe cu textul. Prindeți Instrument de text și selectați un font curat și ușor de citit. Textul va fi foarte mic, deci trebuie să fie curat! O să folosesc Helvetica pentru tot corpul meu. Completați lacunele pe care le-ați creat pentru textul dvs., asigurându-vă că plasați casetele de text în folderul barei de instrumente.
Vă recomandăm să vă aliniați textul manual utilizând tastele de cursor, deoarece opțiunile de aliniere ale Photoshop-ului încorporate (text) pot fi câteodată oprite și este important ca aceste titluri scurte să fie bine centrate. După ce ați plasat textul, trebuie să adăugăm câteva stiluri. Deschideți fereastra Șabloane strat (Blending Opțiuni) și asigurați-vă că este bifată pictograma de previzualizare.
Primul stil pe care îl vom aplica este o suprapunere de culoare simplă. Folosesc culoarea # 955425, o nuanță medie brună pe care am luat-o de la titlul header-ului aplicațiilor.
Următorul stil pe care îl adăugați este un simplu clic 1 pixel utilizând culoarea # E5C39B. Asigurați-vă că cursa este aplicată în afara textului dvs. și nu în interior.
Pentru a face textul mai ușor de citit și de a se potrivi cu stilul nostru de lemn mai mult, vom aplica un stil de umbra interior. Setați opacitatea stilului dvs. la 65%, iar distanța și dimensiunea dvs. la 2px. Mi-am înghițit umbra interioară la 45 de grade.
După aplicarea stilurilor, dar făcând clic pe butonul OK, trebuie să aplicăm aceleași stiluri celorlalte titluri de pictograme. Pentru a face acest lucru, selectați layerul de text "Iesire" și apoi mergeți la Faceți clic dreapta> Stocare stil strat. Selectați toate celelalte straturi de text toate în același timp, ținând apăsată tasta Shift și apoi treceți la Faceți clic dreapta> Paste Style Layer pentru a aplica același stil celorlalte titluri.
Odată cu finalizarea tuturor titlurilor de pictograme, este timpul să creați câteva pictograme simple. Pentru a crea icoanele noastre vom folosi diferitele Marquee Tools. Prima icoană pe care o vom produce este pictograma rapoartelor, deoarece aceasta va fi cea mai ușoară! Creați un nou strat și numiți-l "Icon Rapoarte".
Vrem ca icoana să se așeze frumos în ghidul nostru pătrat pe care l-am creat pentru el. Selectează Instrument de marcaj dreptunghiular și faceți o mică selecție în interiorul pătratului dvs., după cum se vede mai jos:
Completați selecția cu negru, apoi împingeți selecția cu câțiva pixeli și repetați procesul. Continuați să faceți acest lucru până când aveți un rând frumos de forme negre.
Faceți o selecție nouă, de data aceasta mergând pe orizontală în loc de verticală.
Apăsați tasta ștergere pentru a elimina zonele inutile ale rândurilor pe care tocmai le-am creat. Aceasta va crea o pictogramă care va reprezenta cu ușurință un document de tip listă sau tip de raport. Inserați stilul stratului pe care tocmai l-am creat pe pictogramă.
Înainte de a trece la alte pictograme, glisați un nou ghid de la riglă și plasați-l direct sub noua noastră pictogramă, așa cum se vede mai jos:
Pentru pictograma setărilor noastre, vom crea o simplă pictogramă. Creați un nou strat și numiți-l "Setări pictogramă". Selectează Instrument poligonal Lasso și în timp ce tineți apăsată tasta de schimbare, creați o jumătate de formă de chei așa cum se vede mai jos:
Umpleți forma cu negru, apoi duplicați stratul.
Mergi la Editați> Transformare> Flip vertical pentru a răsturna forma cheii dublate. Mergi la Editare> Transformare liberă și în timp ce mențineți cheia de schimb, rotiți a doua cheie în jur.
Utilizând tastele cursor, împingeți-vă forma cheii de chenar împreună și apoi îmbinați cele două straturi de chei împreună.
Deplasați, rotiți și scalați cheia până când arată bine și apoi aplicați stilul (straturile) de strat copiat al acestuia.
Folosind tehnici similare, creați propriile icoane "spendometre" și "ieșire". Îți poți elimina ghizii după aceea mergi la Vizualizați> Goliți ghidajele.
Selectați individual fiecare dintre cele patru pictograme și reduceți opacitatea acestora până la aproximativ 80%. Acest lucru va permite o parte din boabele de lemn să treacă printr-un șir și să dea puțină adâncime barei de instrumente de navigație.
Selectați fiecare dintre pictogramele și titlurile pictogramelor și duplicați-le. Mergeți pe toți împreună, mergând la Layer> Mergeți în jos. Deschideți Opțiunile stilului stratului (Opțiuni de amestecare) pentru noul strat îmbinat și eliminați toate acestea în afară de Color Overlay. Schimbați culoarea suprapunerii în alb și faceți clic pe OK.
Plasați stratul nou de strat alb sub toate celelalte pictograme și straturile de titlu ale pictogramelor, apoi, folosind tastele de cursor, împingeți stratul pe un pixel. Reduceți opacitatea stratului la aproximativ 20%. Aceasta este o schimbare foarte subtilă, dar toate contribuie la calitatea aspectului final al aplicațiilor.
Cu pictogramele de navigare făcute și cu praf, este timpul să treceți la zona principală de conținut. După cum sa menționat în prima parte a tutorialului, o mulțime de ecrane sunt destul de asemănătoare (doar titluri diferite), așa că ne vom concentra doar pe câteva ecrane:
Vom începe cu ecranul Spendometru. Selectați-vă Instrument de text și utilizând aceleași caractere pe care le-ați folosit pentru titlurile pictogramelor, tastați "Cheltuiți din nou numerar? Cât de mult de data asta?" în partea de sus a casetei albe. Dimensiunea fontului meu a fost setată la 4pt. Asigurați-vă că creați această casetă de text nouă în folderul stratometers.
Deschide fereastra Style Layer (Blending Options) pentru următorul layer de text. Aplicați un stil de acoperire cu culori, utilizând culoarea # 613111 (un maro închis). Adăugați, de asemenea, o Shadow Drop utilizând setările standard cu o opacitate de 15%.
Următoarea sarcină este crearea casetei de introducere a textului și a butonului nostru. Selectează Instrument de marcaj dreptunghiular și să creați o dimensiune fixă de 550x100 pixeli. Faceți clic pe pânză și centralizați-vă selecția. Creați un strat nou și numiți-l "Intrare în bani". Mergi la Selectați> Modificare> Netedă și introduceți o rază de 5px și faceți clic pe OK.
Completați selecția cu negru. Înainte de deselectarea formei, mergeți la Selectați> Modificare> Contract și contractați-vă forma cu 10 pixeli. Creați un strat nou și numiți-l "Câmp de intrare în bani", completați noua dvs. selecție cu negru.
Selectați-vă stratul "Introducere în bani" și deschideți fereastra Opțiuni de amestecare. Aplicați o suprapunere de culoare utilizând culoarea # E4DCD5. De asemenea, vom adăuga o umbra interioară foarte subtilă, folosind opțiunile de mai jos:
Reduceți opacitatea stratului pe care tocmai lucrăm la aproximativ 50%. Deschideți fereastra Opțiuni de amestecare pentru stratul dvs. numit "Câmp de intrare în bani". Aplicați o suprapunere de culoare pur albă în câmpul de text și o cursă de 1px utilizând culoarea # C0B8B0.
Duplicați cele două forme pe care tocmai le-am făcut și le ștergeți. Redenumiți-le la "Spent Background" și "Spent Button". Deschideți fereastra Opțiuni de amestecare pentru stratul pe care îl numiți "Spent Button". Eliminați toate opțiunile curente și aplicați o suprapunere de gradient. Voi folosi culorile verzi mergând de la # 50911B la # A0D327. Odată ce sunteți mulțumit de suprapunerea cu gradient, apăsați butonul OK.
Vom adăuga câteva mai multe atingeri butonului nostru, dar, pe măsură ce vom fi foarte preciși cu ei, și vom acorda atenție tuturor detaliilor mici pe care le vom face manual. Selectați conținutul stratului de butoane.
Creați un strat nou deasupra butonului dvs. și numiți-l "Buton Outer Stroke". Mergi la Editați> Stroke și aplicați un accident de 1px folosind orice culoare în afara selecției.
Deschideți fereastra Blending Options și aplicați un gradient implicit, cu culori mergând de la # 30580F la # 86BD23.
Repetați ultimii câțiva pași din nou, dar de data aceasta folosiți o curbă de 1px în interiorul selecției dvs. și folosind un gradient variind de la # 53941B la # E2E8D4.
Selectează Instrument de text și trageți o cutie de text peste butonul dvs. Introduceți "SPEND IT" în caseta de text. Am folosit Helvetica Bold setat la 8 puncte (dimensiune). Aliniați textul în centrul butonului.
Aplicați o suprapunere de gradient pe textul dvs., trecând de la o culoare gri foarte deschisă (am folosit #EBEBEB) în alb (#FFFFFF). De asemenea, dorim să aplicăm o Shadow Inner folosind setările de mai jos:
Faceți o selecție a formei butonului original și apoi creați un strat nou deasupra tuturor celorlalte straturi ale butoanelor. Sunați-l "Zgomot de buton". Completați selecția cu alb, apoi mergeți la Filtru> Zgomot> Adăugați zgomot. Adăugați zgomot aproximativ 25%, apoi faceți clic pe OK.
Schimbați modul de amestecare a straturilor pe Soft Light și reduceți opacitatea stratului la aproximativ 50%. Aceasta adaugă un buton subtil de textură butonului nostru. Acum am făcut asta, am terminat cu designul butonului nostru! O modalitate rapidă, simplă și eficientă de a face ca butonul să arate ca și cum a fost apăsat este prin simpla rotire a butonului în jurul valorii de 180 de grade, astfel încât verdele mai întunecat să fie în partea de sus și nu în partea de jos.
În designul original al aplicației, au fost afișate ecrane separate pentru statistici de cheltuieli (pagina care afișează cât ați cheltuit și cât de mult ați lăsat să cheltuiți) și pagina pe care tocmai am proiectat-o. Simt că nu este necesar să ai două ecrane, așa că o să o reduc doar la una și să pun toate acele informații pe același ecran ca cel pe care tocmai l-am proiectat.
Informațiile pe care trebuie să le afișăm sub butonul nostru sunt următoarele:
După ce am mărit din nou suma de bani pe care o cheltuiesc din nou? Cât de mult de data asta? text, voi trece la "statisticile" de sub buton. Trageți câteva ghidaje pe pânza dvs. după cum se vede mai jos:
Prindeți Instrument de text și trageți o casetă de text în spațiul rămas pe ecran. Introduceți primul titlu ("Rata de cheltuieli curente") și apoi aplicați același stil pe care l-am folosit pentru "Cheltuielile în numerar din nou?" text la noul dvs. tip.
Repetați de două ori pasul utilizând celelalte titluri de stat.
Reduceți opacitatea celor trei tipuri de straturi la aproximativ 90% pentru a le face puțin mai ușoare decât celelalte. Acest lucru nu face o mare diferență, dar le diferențiază ușor. Duplicați stratul de tip "Rata de cheltuieli curente" și loviți-l în coloana din dreapta. Schimbați textul la "$ XX.XX pe zi". Măriți puțin dimensiunea fontului și aliniați-l la centrul coloanei utilizând tastele de cursor.
Repetați din nou pasul astfel încât să ajungeți la ceva similar cu ecranul de mai jos:
Pentru a finaliza aceste statistici, vom adăuga o graniță frumoasă și subtilă de 2px mângâiată. Creați un strat nou și numiți-l "Stroked Border White". Selectați-vă Instrumentul unic de marcaj și faceți o selecție între butonul "Cheltuiți-vă" și titlul "Rata de cheltuieli curente". Umpleți selecția cu o culoare puțin mai întunecată decât fundalul - folosesc # E1D9D3.
Duplicați stratul și redenumiți-l "Stroked Border Black" și împingeți-l cu un pixel astfel încât noua linie să fie direct sub cea veche. Selectați conținutul straturilor și completați-l cu o culoare puțin mai întunecată decât cea pe care tocmai am folosit-am folosit # A59C93.
După cum puteți vedea din captura de ecran de mai sus, frontiera / separatorul nostru se suprapune zonele pe care nu le dorește. Selectați stratul "Stroked Border Black" și apăsați butonul Cmd + E combinat pentru a fuziona-l până la stratul de accident vascular cerebral alb. Redenumiți layerul la "Separator". Selectează Instrument de marcaj dreptunghiular și faceți o selecție în partea stângă a ecranului.
Loveste Ștergeți-cheie pentru a elimina separatorul care nu este necesar. Mutați selecția pe partea dreaptă și repetați procesul.
Folosind tastele cursor, împingeți separatorul dvs. în sus / în jos pentru a vă asigura că acesta este centrat între partea de jos a butonului și partea de sus a textului dvs. - a mea este exact 30px sub butonul meu și 30px deasupra textului meu. Reduceți opacitatea stratului de separatoare la aproximativ 50%. Apoi am hotărât să-l întorc, astfel încât culoarea mai deschisă pe fundul ei, când am simțit că asta arăta mai bine.
Repetați procesul de mai multe ori până când există un separator sub fiecare linie de text - o modalitate rapidă de a face acest lucru este doar duplicarea fiecărui strat anterioară și apoi împingând-o în jos cu valoarea corectă. De asemenea, am inlaturat întregul dosar cu statistici în jos astfel încât acesta să se afle în centru între butonul și partea de jos a zonei noastre de fundal alb.
Adăugați câteva sfaturi finale, cum ar fi schimbarea culorilor cifrelor pe care le-am lăsat să le cheltuiți. De asemenea, mi-am reglat cifrele la dreapta.
După adăugarea câtorva texte fictive în câmpul textului nostru de bani, am terminat designul primelor noastre ecrane! Butonul aici este în mod clar captivant, cu gradientul verde îndrăzneț și atenția la detalii mici, cum ar fi accidentele alb și negru.
Restul paginilor noastre (așa cum sunt enumerate mai sus) vor folosi o combinație a tehnicilor pe care le-am utilizat deja în pașii anteriori din acest tutorial și în prima parte. Puneți tehnicile pe care le-ați învățat să le utilizați pentru a produce singur restul aplicației pentru aplicații.
Mai jos sunt capturile de ecran ale designului original alături de mine, reproiectat, interfața cu utilizatorul pe care ați învățat să o creați.
Deci, acolo o avem, rezultatul final al acestui tutorial rezonabil de lungă de două părți ne-a transformat destul de bine! Trimiteți link-uri către rezultatul dvs. în secțiunea de comentarii de mai jos - ne-ar plăcea să le vedem!
Căutăm în mod activ designerii să contribuie cu aptitudinile lor de proiectare mobilă la comunitatea noastră. Contactați-ne astăzi dacă sunteți interesat să scrieți conținut plătit!
Accentsconagua