Share
Această serie de tutori va demonstra toți pașii necesari pentru reproiectarea unei aplicații iPhone cu Photoshop. Veți învăța multe din considerațiile unice și modelele de design utilizate la crearea interfețelor de aplicații separate. Acest tutorial este prezentat în două părți, în colaborare cu Mobiletuts +, unde veți putea găsi în viitor o cantitate tot mai mare de tutoriale legate de designul mobil. Citiți a doua parte a acestei serii și descărcați interfața PSD pe Mobiletuts+.
Bine ați venit în prima parte a seriei noastre tutorial despre reproiectarea aplicației iPhone Spendometer! Aplicația este o aplicație minunată, care vă permite să rămâneți la un buget. După cum a fost scos de pe site-ul Apple, acesta este ceea ce face Spendometer:
Dacă încercați să rămâneți la un buget, este o idee bună să păstrați o evidență a tot ceea ce cheltuiți, dar este greu să scrieți totul într-un notebook. Spendometrul Moneybasics este o aplicație care simplifică și simplifică bugetarea zilnică. Spendometrul vă permite să vă stabiliți un buget, să vă înregistrați cheltuielile și să consultați rapoartele de cheltuieli pentru a vedea unde și cât de mult ați cheltuit până acum într-o anumită săptămână sau lună, tot timpul în deplasare. De asemenea, are o caracteristică care vă ajută să țineți evidența cheltuielilor dvs. într-o noapte.
De fiecare dată când cumpărați ceva, pur și simplu introduceți-l în Spendometrul de pe telefon și vă va păstra o înregistrare. Puteți să vă stabiliți propriile limite de cheltuieli și să alegeți modul în care vor fi raportate cheltuielile dvs. - săptămânal sau lunar.
Spendometrul Moneybasics îți va pune la dispoziție instrumentul esențial pentru a te asigura că rămâi în topul finanțelor tale.
Este într-adevăr o aplicație minunată care îți îndeplinește bine scopul, dar să fim sinceri, ar putea face cu un mic TLC dintr-o perspectivă de design. Mai jos puteți vedea pictograma aplicații și mai multe capturi de ecran ale aplicației. Capturile de ecran au fost făcute utilizând un iPhone 4 - după cum puteți vedea, unele zone sunt pixelate, ceea ce înseamnă că acestea nu au încă să actualizeze aplicația lor cu grafică de înaltă rezoluție.
Este recomandabil să știți puțin despre proiectarea pentru iPhone înainte de a ne deplasa împreună cu acest tutorial. În mod ideal, ar trebui să citiți Ghidul pentru interfața omului iPhone de pe site-ul oficial al dezvoltatorului Apple.
Ca și în cazul tuturor proiectelor majore, primul lucru pe care ar trebui să-l faceți este să obțineți o idee grosolană despre ceea ce doriți ca aspectul dvs. să arate. Cel mai bun mod de a face acest lucru este desigur prin schițare. Pentru aplicații mari, mulți designeri de interfață vor desena pagini și pagini în valoare de idei, adnotări și brainstorming - deoarece deja avem o structură pentru aplicația pe care o reproiectăm, putem trece destul de repede.
Mai jos sunt câteva schițe pe care le-am pus împreună - acestea sunt foarte dure, și doar idei generale wireframe am în capul meu de ceea ce vreau ca design-ul să semene. Culorile și stilurile pot aștepta până ajungem la acea etapă mai târziu!
Imaginea pe care o am în cap este o interfață foarte simplă, elegantă, modernă și texturată. Ceva care va face pe oameni să meargă "wow". De asemenea, vreau să fie foarte puțin - aplicația este foarte simplă și, prin urmare, designul va fi prea. Nu este nevoie de dezordine inutilă.
Amintiți-vă că nu aveți nevoie să urmați acest cuvânt tutorial pentru cuvânt - experimentați cu lucruri diferite și puneți creativitatea proprie în spatele tehnicilor utilizate. Ne-ar plăcea să vedem rezultatele dvs., deci împărtășiți-vă progresul în zona de comentarii.
Un lucru înainte de a începe: scriu acest tutorial în timp ce proiectez, nu după finalizarea designului. Cred că este important să arătăm procesul creativ în spatele unui design. Cele mai multe tutoriale sunt scrise după ce desenele au fost finalizate și, prin urmare, nu vedeți greșelile designerului sau câte încercări la ceva le-a luat pentru a obține ceva potrivit. Fiecare designer face acest lucru, la fel ca orice alt loc de muncă - oamenii fac greșeli, învață din aceste greșeli și se îmbunătățesc doar pe lucruri. Deci, dacă vedeți că s-ar putea să vă întoarceți în timp ce citiți acest tutorial, este pentru că am decis că ceva trebuie schimbat! Să începem!
Primul pas este să vă configurați documentul. Vom proiecta pentru noul display retina de înaltă definiție al iPhone 4, ceea ce înseamnă că proiectarea la o rezoluție mult mai mare decât ceea ce am făcut anterior cu iPhone 3GS.
Deschideți Photoshop și mergeți la Fișier> Nou ... . Denumiți-vă noul document ca fiind potrivit, cum ar fi "Redesign Spendometer". Introduceți propriile dimensiuni (nu există nicio pre-setare în Photoshop pentru noul afișaj) pentru ecranul iPhone 4 Retina, vom folosi 640x960 pixeli, cu o rezoluție de 326ppi (pixeli pe inch), care este noul standard. Puteți vedea setările mele de mai jos.
Pasul următor este plasarea unor forme inaccesibile pentru bara de stare (bara cu informații despre telefon și timp activat), bara de navigare (bara de sub bara de stare) și bara de instrumente (bara din partea de jos a ecranului).
Cel mai bun mod de a face acest lucru este să inserați doar o captură de ecran pre-existentă a unei aplicații, mergând la Fișier> Locul.
Acum puteți folosi Instrument de marcaj dreptunghiular pentru a selecta diferitele domenii ale designului și pentru a le înlocui cu forme solide. Voi folosi doar negru pentru moment. Umpleți-le pe straturi noi și redenumiți straturile dvs. la ceva adecvat, cum ar fi "Bară de navigare" și "Bara de instrumente". Vom crea forme de bază și vom adăuga ulterior culoarea și detaliile. De asemenea, puteți șterge majoritatea capturilor de ecran pe care le-am lipit - singurul bit pe care îl păstrez este bara de stare așa cum se vede mai jos.
Acum avem o pânză neagră pentru iPhone pregătită să înceapă proiectarea. Următorul lucru pe care vrem să îl facem este să facem niște foldere noi în fereastra Layers. Avem nevoie de mai multe dosare pentru mai multe ecrane diferite:
Aplicația în sine are de fapt câteva ecrane decât asta, dar mă simt că multe dintre ele nu sunt necesare, așa că vom reduce dramatic acest lucru, adăugând mai mult conținut pe același ecran. De asemenea, vom fi lipsiți de câteva ecrane care vor replica aproape alte ecrane - singura diferență fiind titlurile!
Creați un nou dosar de nivel în fereastra Straturi pentru fiecare dintre cele afișate mai sus. Puteți face acest lucru făcând clic pe pictograma folderului mic din fereastra cu straturi. Nu trebuie să punem încă nimic în aceste dosare.
Vreau să îmbinăm designul elegant și modern, cu un pic de textură. Textura de alegere va fi lemnul, această textura trebuie să fie precisă (bine în valoare de $ 2-4). Odată ce ați descărcat niște texturi, mergeți mai departe și plasați-le în documentul dvs., mergând la Fișierul> Locația ... . Scalați textura în jos pentru a se încadra frumos în design-ul dvs. de interfață și îmbinați-l cu stratul de fundal.
Vrem să ne lumineze textura puțin, deoarece nu vrem să fie atât de îndrăzneț. Creați un nou strat direct deasupra fundalului de textură din lemn și completați-l cu alb folosind Instrumentul pentru găleți de vopsea. Coborâți opacitatea stratului la 35% pentru a adăuga o spălare albă în fundal, apoi îmbinați-o prin atingerea Cmd + E (Ctrl + E) combinație pentru a aplica spălarea în fundal.
De asemenea, vom folosi o textură de lemn pentru bara de navigare și bara de instrumente. Din același pachet din GraphicRiver, selectați una din celelalte texturi și plasați-o în document. Redimensionați-o și plasați-o peste bara de navigare.
Odată ce sunteți mulțumit de o anumită poziție, faceți clic pe miniaturile straturilor de bare de navigare în timp ce țineți apăsată tasta Cmd-cheie pentru a selecta conținutul straturilor. Faceți clic din nou pe noul dvs. strat de textura din lemn și mergeți la Editați> Copiere pentru a copia selecția. Ștergeți stratul de textura și apoi inserați selecția pe un strat nou.
Acum este momentul să adăugați un stil în bara de navigare. Faceți clic dreapta pe noul strat de bare de navigare și selectați Opțiuni amestecate pentru a deschide fereastra stil strat. Vrem să adăugăm câteva stiluri simple barei noastre de navigare, care vor crește dramatic aspectul barului nostru.
Mai întâi de toate, să adăugăm o umbră. Am folosit un unghi de 90 de grade cu o opacitate de 25% - toate celelalte opțiuni sunt setate la valoarea implicită.
Pentru a oferi o mai mare adâncime barei noastre de navigare, vom aplica un stil Bevel și Emboss. Acest stil are un nume foarte rău pentru el însuși din cauza folosirii greșite, dar într-adevăr este un instrument minunat și foarte puternic care vă economisește mult timp. Aplicați o teșitură interioară netedă pe stratul dvs., utilizând o adâncime de 100%, cu o dimensiune de 196px și înmuiați nivelul de 16px. Reduceți opacitatea modurilor de evidențiere la 20%, iar opacitatea modurilor de umbrire la 55%.
Prin aplicarea acestor două stiluri simple, suntem lăsați cu ceva care arată destul de inteligent!
Mărește-te direct în bara de navigare, deoarece este timpul să adaugi o lovitură de 1px frumos în partea de jos pentru a crește atenția asupra nivelelor de detaliu. Creați un strat nou de deasupra barei de navigare, apoi creați o selecție lungime de 1px cu lungimea folosind Instrumentul unic de marcaj. Completați selecția cu alb.
Schimbați modul de amestecare a straturilor cu Overlay și reduceți opacitatea la 70% pentru a produce următorul rezultat.
Deocamdată, aceasta este bara noastră de navigare făcută - vom reveni la ea mai târziu pentru a produce stilurile noastre tipografice.
Am hotărât că o altă bara de instrumente din partea de jos a aplicației ar fi prea greoaie, așa că în schimb vom micșora puțin fundul și doar vom plasa icoanele noastre de navigare acolo.
Selectați conținutul straturilor de bare de instrumente și apoi selectați Radiera. Selectați o garnitură moale la 100 de pixeli și, în timp ce țineți apăsată tasta Shift, ștergeți zona superioară a barei de instrumente negre. Dacă țineți tasta de schimb în timp ce faceți acest lucru, veți putea să ștergeți conținutul într-o linie dreaptă, mai degrabă decât să aveți control complet asupra a ceea ce puteți șterge.
Modificați modul de amestecare a straturilor de bare de instrumente pentru a suprapune și reduceți opacitatea la 60%. Acest lucru îi va da un aspect ușor ars, oferindu-ne un fundal frumos gata să pună icoanele noastre (odată ce le-am proiectat). Acum este momentul potrivit pentru a pune barele de navigare și straturile barelor de instrumente în propriile dosare separate de straturi.
Deci suntem gata să mergem mai departe. Acum vom proiecta ecranul de lansare, care va fi cel mai simplu ecran din aplicație, deoarece nu va include niciun panou de navigare sau bare de instrumente. Ascundeți dosarele de bara de navigare și bara de instrumente și creați un layer nou (transparent) în directorul de lansare și denumiți "umbra".
Umpleți noul strat cu o culoare solidă închisă (folosind # 333333) folosind Instrumentul pentru găleți de vopsea. Selectați conținutul stratului barei de stare, apoi faceți clic pe noul strat de ecran de lansare și apăsați tasta ștergere pentru a elimina o zonă mică a stratului gri pentru a dezvălui bara de stare.
Duplicați-vă stratul astfel încât să aveți două de aceeași formă. Pe noul strat, mergeți la Editați> Transformare> Transformare liberă pentru a aduce caseta de transformare pe noua formă / strat. În timp ce țineți alta și tasta de schimbare în același timp, scalați selecția. Ținând tasta de schimbare va păstra forma în proporție, în timp ce prin menținerea cheii alto-o va redimensiona în mod egal în jurul marginilor. Faceți o selecție a noii forme redimensionate.
Ștergeți noua formă (în timp ce încă mai aveți selecția în direct) și apoi ștergeți selecția din stratul original. Ar trebui să ajungeți la ceva care să arate ca următoarea captură de ecran.
Mergi la Filtru> Blur> Gaussian Blur și utilizați o rază de aproximativ 50 de pixeli pentru a vă oferi umbrelor un efect neted și murdar.
Folosind aceeași tehnică pe care am folosit-o mai devreme, facem o selecție a barei de stare și eliminăm umbrele suprapuse din stratul nostru de umbră.
Duplicați stratul de umbră din nou. Schimbați modul de amestecare a straturilor de umbră de fund pentru a suprapune și procentul de opacitate la 100% și schimbați modul de amestecare a straturilor de umbră de la vârf la normal și procentul de opacitate la 25%.
Următoarea etapă este realizarea siglei tipografice. Vom face să pară că tipul a fost gravat în lemn folosind o mână de stiluri și tehnici de strat. Prindeți instrumentul dvs. de tip și aspectul unui text. Utilizați setările de tip pentru a vă alinia textul bine.
Redați-vă în jur cu câteva tipuri de fonturi diferite până când simțiți că arată bine. Am decis să folosesc o combinație de Stencil și Helvetica.
Acum este momentul să facem ca tipografia noastră să arate că a fost gravată în fundalul nostru. Vom face o mare parte din tipografia noastră să arate astfel în tot cursul aplicației, în special pictogramele și titlurile din bara de navigare.
Acest tip de efect necesită multe stiluri de straturi. Primul lucru pe care trebuie să-l facem totuși este să schimbăm culoarea tipului nostru. Utilizarea Eyedropper Tool selectați o culoare închisă din fundal și apoi aplicați acea culoare la tipografia dvs..
Reduceți opacitatea straturilor de tip la 50%, apoi deschideți opțiunile de amestecare a straturilor de text. Primul stil pe care îl vom aplica este o Shadow Inner, folosind următoarele setări:
Următorul stil pe care îl vom aplica este o umbră foarte subtilă, folosind următoarele setări:
În cele din urmă, vom adăuga un text spre textul nostru, utilizând următoarele setări (culoarea pe care am folosit-o este # E6D0B3).
Schimbați modul de îmbinare a straturilor de tip la arderea liniară.
Vom face ca umbra noastră interioară să fie mai puternică / mai îndrăzneață. Duplicați stratul dvs. de tip și schimbați modul de amestecare la saturație - acest lucru va face aproape transparent, dar permite tuturor stilurilor de strat să apară în continuare. Deschide fereastra de stiluri de straturi și eliminați complet stilurile de umbră și stroke. Faceți clic pe fila dvs. de umbră interioară și schimbați setările la ceva similar cu cel prezentat mai jos.
Repetați exact același pas, de această dată folosind următoarele setări:
După cum puteți vedea, am aplicat mai multe umbre pentru tipografia noastră, fără a afecta culoarea reală, datorită modului simplu de a schimba modul de amestecare la saturație. Prima umbră suplimentară a adăugat o umbră moale în jurul fiecărui margine în mod egal, în timp ce a doua umbra suplimentară a aplicat o umbră puternică și ascuțită doar în partea superioară a tipului nostru.
Ecranul nostru de lansare arată destul de darn bun, și va arăta chiar mai bine o dată diminuată pe ecranul retinei cu rezoluție înaltă!
Următorul nostru pas este, desigur, ecranul Spendometru, care este primul ecran care va fi afișat după ce ați văzut ecranul de lansare. Folosind efecte pe care tocmai le-am folosit în pasul anterior, configurați-vă tipografia și aplicați câteva stiluri de strat frumos în antetul Spendometrului din bara de navigare. Este ideal aici pentru a face duplicate ale barei de navigare; unul pentru fiecare ecran. Am setat stratul de tip la 90% opacitate pentru a lasa un pic de textură prin, și au folosit următoarele stiluri de strat. Nu este nevoie să creați umbre suplimentare pentru acest tip, deoarece este mult mai mic.
Am hotărât că bara de navigare din partea superioară a designului pare puțin prea întunecată, fie că tipografia este prea ușoară. Pentru a rezolva asta, o să ușurez puțin bara de navigare. Cea mai ușoară modalitate de a face acest lucru este selectarea stratului de bare de navigare și apoi trecerea la Imagine> Ajustări> Luminozitate / Contrast. Luminozitatea la 60 și contrastul cu 10.
Reduceți opacitatea cursei de 1 pixel de sub bara de navigare, pentru a se potrivi mai bine cu noua bara de navigare mai ușoară. Am redus-o la 40%.
Pentru a permite texturii textului antetului nostru de navigație să apară puțin mai clar, schimb culoarea tipului nostru într-o alegere mult mai ușoară și apoi setați modul de amestecare a straturilor pentru a se multiplica - amintiți-vă totul despre experimentare - toate modurile de amestecare reacționează ( foarte) diferit în funcție de culoarea pe care o are forma de bază.
Duplicați stratul de text și reduceți opacitatea acestuia la 40%. Acest lucru este de a face tipul nostru un pic mai inchisa, revenind-o inapoi la ceea ce a fost ca înainte, dar încă ne permite să arate mai mult textura prin, fără a scădea opacitatea.
Acum puteți să copiați și să inserați folderul stratului de fila de navigare în fiecare dintre folderele de ecran diferite și să le modificați astfel încât să semene cu titlul fiecărui ecran, așa cum se vede mai jos:
Acestea sunt titlurile de antet realizate pentru moment - le putem vizita din nou mai târziu. După cum ați realizat, proiectarea pentru dispozitivele mobile are multe de-a face cu încercări și erori.
Pasul următor presupune crearea unui fundal alb, gata să pună mai multe elemente pe el. Acest lucru înseamnă că vom acoperi mult din fundalul nostru din lemn, dar, în general, văzând lucrurile pe fundal alb și netexturativ, este de obicei o experiență mult mai plăcută asupra ochilor.
Selectează Instrument de marcaj dreptunghiular și alegeți o dimensiune fixă de 600x700px. Faceți clic pe orice în cazul în care unul dvs. panza, și centrul de selecție, utilizând tastele săgeată. Ar trebui să fie ușor de aranjat deoarece există exact 20 de pixeli între laturi și selecția pe fiecare parte (stânga, deasupra și dreapta).
Creați un nou strat în dosarul dvs. de cheltuieli și numiți-i ceva potrivit, cum ar fi "fundal alb". Mergi la Selectați> Modificare> Netedă și neteziți formele folosind o rază de 5 pixeli. Umpleți-l cu alb.
Selectează Instrument eliptic Marquee și trageți o selecție egală. Poziționați-o peste partea de jos, așa cum se vede mai jos, și apăsați tasta ștergere pentru a elimina o mică selecție a fundalului nostru alb.
Deschide fereastra stilurilor stratului. Vom aplica o serie de efecte asupra fundalului nostru alb. Mai întâi de toate, vom adăuga un accident vascular cerebral. Am folosit setările de mai jos, cu culoarea # 6C4C24:
Apoi vom aplica o umbră interioară pentru a adăuga un pic mai mult adâncime la fundalul nostru. Setările pe care le-am folosit pot fi văzute mai jos:
Stilul stratului final pe care urmează să-l aplicăm este o umbră de picătură, utilizând setările de mai jos pentru a face ca fundalul alb să se evidențieze puțin mai mult din fundalul întregii aplicații:
Coborâți opacitatea întregului strat de fundal alb la aproximativ 75% pentru a permite unui mic pic de boabe de lemn pentru a arăta prin. Rezultatul nostru final (de mai jos) ne dă o frumoasă pânză albă pentru a plasa elementele noastre de aplicații, ceea ce face ușor de citit dar frumos să se uite la.
Vom adăuga o opacitate scăzută, 1 pixel negru în partea de jos a stratului principal de conținut. Duplicați stratul de fundal alb și eliminați toate stilurile de straturi. Umpleți forma cu negru și împingeți-l cu un pixel folosind tastele cursor. Plasați-l sub stratul de fond alb original. Faceți o selecție a stratului dvs. inițial alb original, apoi faceți clic pe noul strat duplicat și apăsați tasta de ștergere. Reduceți opacitatea la aproximativ 40%. Ar trebui să ajungeți la ceva asemănător cu acesta:
Acesta este sfârșitul primei părți a tutorialului. Este recomandat să exportați fișierul din când în când ca imagine jpeg de înaltă rezoluție și să îl vizualizați pe afișajul iPhones pentru a vă asigura că arată bine. Acesta este modul în care arată ecranul de lansare (vom testa celelalte ecrane în tutorialul următor!):
Partea a doua a acestui tutorial este disponibilă pe Mobiletuts + și acoperă restul aplicației. Hop peste pentru a termina crearea de interfață!
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