Share
Majoritatea aplicațiilor mobile nu au nevoie de detalii suplimentare despre detaliile de proiectare care să le ajute să iasă din mulțimea App Store. În timp ce nu există niciun înlocuitor pentru ca un designer talentat să poloneze pixelii aplicației dvs. cu ore întregi, scopul acestei serii este de a învăța pe cei cu experiență limitată în Photoshop și pe un buget redus pentru a nu face cum să facă aplicațiile care strălucesc!
Această serie este destinată dezvoltatorului care nu are bugetul să angajeze un designer profesionist. Acesta vă va învăța cum să creați elemente atrăgătoare, cu cunoștințe și eforturi foarte limitate ale Photoshop.
În acest post, ne vom concentra pe modificarea fișierelor PSD existente pentru a obține aspectul pe care îl urmăriți pentru aplicația dvs..
Dacă sunteți un programator, ați citit vreodată codul altcuiva pentru a afla cum au îndeplinit o anumită sarcină? Aproape toți programatorii fac, iar designul de învățare nu este diferit. La fel ca în lumea dezvoltării, există multe site-uri umplute cu PSD pe care le puteți experimenta și de a învăța. Unele dintre aceste site-uri chiar vă permit să modificați PSD-urile și să le utilizați în propria dvs. activitate. Cuvântul cheie este modifica. În timp ce multe dintre PSD-urile la care mă refer pot fi copiate și utilizate în mod comercial fără modificări, aș sfătui să-l împotrivesc. Nu vei învăța așa, și nu vei elibera un design care este cu adevărat unic pentru aplicația ta.
Așa cum am menționat, există sute de site-uri care oferă PSD-uri gratuite. Cu toate acestea, dacă căutați să creați un proiect din lumea reală, trucul este să găsiți site-urile care vă vor permite să reutilizați acele PSD-uri în propria dvs. activitate. Cu excepția cazului în care pur și simplu navighez în scopuri educaționale, de obicei revizuiesc numai site-uri care oferă atât o muncă de calitate superioară, cât și condiții de utilizare flexibile. Mai jos sunt cinci site-uri preferate legate de PSD:
Ideea aici este simplă: în calitate de dezvoltator, probabil că nu aveți competența necesară pentru a crea aplicații extrem de lustruite pe cont propriu. Cu toate acestea, aveți posibilitatea să mashup rapid modele de alții pentru a crea propriul dvs. simt unic, cu foarte puține cunoștințe de Photoshop.
Folosind tehnica PSD "Mashup" discutată mai sus, vom proiecta un custom UINavigationBar folosind un PSD de la www.pixelbeam.net. O să mergem modifica mai multe elemente în PSD pentru a crea propria noastră simțire unică.
Descărcați PSD aici și deschideți fișierul în Photoshop.
Creați un nou proiect care este de 640 x 88.
Folosiți acum butonul Arrange Documents pentru a împărți ecranul între cele două proiecte.
Pentru această parte a procesului, asigurați-vă că ați selectat Auto-Select Layer. Aceasta înseamnă că Photoshop va selecta automat stratul elementului pe care tocmai ați făcut clic pe. Aceasta ajută la navigarea prin PSD-uri mai mari. Puteți să-l dezactivați atunci când este necesar în timpul acestui proiect.
Utilizând instrumentul de mutare, selectați bulletul activ prezentat mai sus. Veți observa că Photoshop a selectat automat stratul respectiv.
În timp ce vă aflați încă în modul de ecran divizat, trageți stratul bullet activ pe ecranul UINavigationBar. Veți observa că stilurile stratului și stratului au fost copiate în proiectul UINavigationBar.
Acum faceți dublu clic pe miniatură Layer. Aceasta va aduce selectorul de culori. De aici puteți schimba culoarea gloantei.
Copiați culoarea Bullet # 567200 și setați-o ca pe culoarea prim-planului.
Utilizați instrumentul Bucket Paint pentru a vă umple proiectul cu culoarea # 567200.
Faceți clic dreapta pe stratul activ al bulletului. Selectați Stilul stratului de copiere.
Faceți clic dreapta pe stratul UINavigationBar și selectați Paste Layer style.
Selectați fundalul zonei de diapozitive. Similar cu pasul 6, Photoshop va selecta automat stratul (trebuie să fie bifată opțiunea Auto-Select Layer). Acum mutați stratul în proiectul UINavigationBar.
Mutați peste stilul stratului "Pattern Overlay". Faceți clic și trageți-l în stratul UINavigationBar.
Asigurați-vă că toate straturile, cu excepția stratului dvs. UINavigationBar, sunt invizibile.
Faceți dublu clic pe stilul de strat al stratului de acoperire. Se va afișa caseta de stil strat de suprapunere. Aduce opacitatea la 8.
Dacă doriți să integrați un proiect personalizat UINavigationBar în proiectul dvs., puteți examina exemplul de cod în acest proiect github.
Ia ceva timp sa te uiti prin PSD. Veți realiza rapid că un design bun este atât de greu și de consumator de timp. În același timp, merită munca grea pentru atingerea esteticului final. Dacă aveți bugetul pentru un mare designer, recomandăm să găsiți și să închiriați unul. Dacă nu aveți bugetul, Mashup propriile elemente de design folosind diferite PSD-uri. De asemenea, recomandăm studierea modelelor găsite pe site-uri precum Creattica Mobile, Pattrns și Pixels Beautiful.
Sper că veți găsi acest tutorial util. Dacă creați ceva minunat, tweet-l la mine la @ williamherring.
*Imaginea previzualizată pentru această postare a fost creată prin modificarea textului Din piele - șablon de pagină care poate fi găsită aici. UINavigationBar a fost creat prin modificarea Simplu Slider întunecat temă care poate fi găsită aici.
Accentsconagua