Proiectarea fundalurilor de aplicații mobile

Acum, că am fost introduși Photoshop și câteva dintre cele mai importante instrumente, să punem primele patru tutoriale din această serie pentru a le folosi bine și pentru a crea un fundal frumos pentru o aplicație mobilă. Proiectarea fundalurilor de aplicații diferă de proiectarea fundalurilor desktop în cel puțin un mod fundamental: trebuie să eliminați toate aglomerația inutilă și să oferiți utilizatorului doar ceea ce este absolut necesar. Citiți mai departe pentru a afla mai multe!

Încep doar cu o singură imagine pe care o vom transforma într-un fond atrăgător de vizibil pentru a fi utilizat ca pagină de pornire a aplicației mobile / ecran de aterizare. Pagina principală este probabil cea mai importantă pagină de pe un site. De cele mai multe ori, este prima pagină pe care utilizatorul o va vedea și dacă nu este atrăgătoare sau ușor de folosit, utilizatorul va găsi ceva care este.

Vom folosi toate instrumentele pe care le-am abordat în cele trei tutoriale anterioare, deci dacă nu le-ați verificat încă, vă îndemn să le citiți mai întâi acum.

Iată fișierul cu care încep cu:

1. Deschideți Photoshop și creați un document nou (Fișier> Nou sau Ctrl + N)
2. În câmpul "Nume", numele pe care îl documentați. În acest caz, mi-am denumit "MobileBackground".
3. Dați clic pe caseta derulantă din dreptul opțiunii Presetare pentru a extinde opțiunile.

Aici vom alege o presetare Photoshop pentru dimensiunea documentului. Photoshop are cele mai frecvente dimensiuni ale fișierelor încorporate, așa că nu trebuie să ne confruntăm cu particularizările. Pe baza dispozitivului pe care îl dezvoltați, acesta este locul în care stabiliți cât de mare este pânza dvs..

4. Pentru ușurința utilizării vom alege "Mobile & Devices" din meniul Preset.

5. Din meniul Dimensiune selectați 240x320.

Din nou, aceasta va varia în funcție de dispozitivul pe care îl dezvoltați, dar pentru acest caz o să folosesc o presetare.

6. Verificați dacă rezoluția este setată la 72 și faceți clic pe OK.


Cu noul document deschis, vom aduce în graficul orașului. Dacă nu am condus deja acest punct acasă suficient, permiteți-mi să o fac încă o dată acum: există o mie de moduri de a face acest lucru (și cele mai multe alte sarcini) în Photoshop. Personal, îmi place să trag și să arunc imaginea sau, într-un mod mai ușor, să o plasați direct în fișier.


7. Selectați Fișier> Loc

8. Alegeți locația imaginii și faceți clic pe Puneți.


Când plasați imaginea, aveți opțiunea de a scala imaginea dacă doriți. Nu voi veni de data asta, deci:

9. Faceți clic pe semnul mic din bara de opțiuni.

10. Faceți dublu clic pe titlul din noul strat și editați numele. Denumiți-o "Oraș" sau altceva descriptiv.


Bine și dandy, dar până acum nimic special, nu? Să adăugăm o culoare.

11. Selectați stratul de fundal din paleta de straturi.

Vom umple fundalul cu o culoare portocalie solidă.

12. Faceți dublu clic pe culoarea din prim plan și alegeți un portocaliu deschis. Voi folosi # fa871b.

13. Cu culoarea din prim plan, selectați SHIFT + F5 pentru a afișa caseta de opțiuni pentru culoarea de umplere.

NOTĂ: De asemenea, puteți utiliza instrumentul de umplere (G) din bara de instrumente.

14. Cu caseta de opțiuni pentru culoarea de umplere deschisă și culoarea prim-planului selectată în caseta derulantă "Utilizați", faceți clic pe OK.


Acum începem să ajungem undeva. Adăugați un gradient pentru a da o adâncime. Efectul pentru care mă duc este un apus de soare, așa că vom folosi o galbenă și o portocală.



Pentru a face lucrurile mai ușor de văzut, permiteți dezactivarea vizibilității stratului de fundal.

15. Faceți clic pe ochiul de lângă stratul de fundal din paleta de straturi.
16. Creați un strat nou pentru gradientul nostru făcând clic pe butonul Nou strat din partea de jos a paletei de straturi.
17. Denumiți stratul în consecință.
18. Faceți dublu clic pe culoarea din prim plan pentru a deschide paleta.
19. Culoarea portocalie pe care am folosit-o pentru culoarea de fundal ar trebui să fie încă în paletă, dar dacă nu este, paleta de culori "automagically" se schimbă într-un picker de culoare atunci când este deschisă.
20. Cu selectorul de culori, faceți clic pe culoarea de fund a stratului ascuns.
21. Acum, deoarece dorim o nuanță mai ușoară de portocaliu, trageți selectorul de culori spre stânga puțin pentru a adăuga mai mult alb. Culoarea cu care am ajuns este # f5a23a.
22. Selectați instrumentul de gradient (G) din bara de instrumente.
23. Din bara de opțiuni, setați opțiunea Gradient la "Clădire spre transparent".
24. Dați clic în partea de jos a graficului orașului și trageți în sus.

NOTĂ: cu cât trageți în sus, cu atât mai mult va fi gradientul.

25. Să repetăm ​​pașii 16 până la 23, cu excepția faptului că utilizați o culoare chiar mai deschisă pentru gradient. Am folosit # f2cc38.

26. Faceți clic pe pictograma ochi de lângă stratul de fundal pentru ao face vizibilă.

Ar trebui să aveți ceva care arată astfel:



Începe să arate destul de bine.

27. Cu instrumentul dreptunghiulară, selectați zona de dedesubt grafică oraș, după cum se vede mai jos.

28. Cu primul strat de gradient selectat, apăsați DELETE.
29. Selectați stratul de gradient al doilea și apăsați din nou tasta DELETE.

Acum am scapat de ambele gradienti sub graficul orasului si am creat o linie orizontala. Să adăugăm un text.


30. Faceți dublu clic pe culoarea din prim plan și, cu selectorul de culori, faceți clic pe stratul de fundal pentru a selecta # f5a23a (culoarea pe care am avut-o mai devreme). Cu culoarea de fundal selectată, adăugați un roșu mai puțin pentru a face textul mai întunecat decât fundalul. Am folosit # da5a00.
31. Selectați instrumentul text (T) din bara de instrumente.
32. Faceți clic dreapta sub graficul orașului și introduceți textul. Am folosit Scotland South Dakota, de unde este graficul.

Nu pare prea șubred, dar ar putea fi mai bine. Este detaliul care face un fundal bun excelent.

33. Selectați stratul de text din paleta de straturi.
34. Glisați stratul pe butonul Creare strat nou în partea de jos a paletei de straturi.

Aceasta va duplica stratul și îl va plasa direct pe primul strat de text.

35. Cu noul layer selectat, faceți clic pe butonul de amestec în partea de jos a paletei de straturi. Puteți de asemenea să faceți dublu clic pe stratul din paleta de straturi.

NOTĂ: Faceți dublu clic pe strat, nu pe titluul stratului. Dacă faceți dublu clic pe titlul stratului, tot ce trebuie să faceți este să editați titlul stratului.

36. În fereastra Layer Style, bifați și evidențiați Color Overlay din opțiunile din partea stângă.
37. Lăsați Modul de amestecare setat la Normal și faceți dublu clic pe Modelul culorii.

Vom folosi o culoare mai deschisă decât fontul nostru inițial.

38. Alegeți o culoare pe care doriți să o utilizați ca evidențiere. Am folosit # ffa800.
39. Faceți clic pe OK pentru a alege culoarea.
40. Faceți clic pe OK pentru a închide fereastra stilului stratului.

Suprapunerea este acum completă, dar dorim ca evidențiarea să apară în spatele textului mai închis, roșu.

41. Faceți clic și trageți stratul superior de text direct sub următorul strat de text.

Ugh, acum stratul de text evidențiat nu este vizibil! Să eliminăm evidențiarea cu doar câțiva pixeli.

42. Selectați stratul de text cu fontul mai închis (ar trebui să fie stratul de text deasupra).
43. Selectați instrumentul Mutare (V) din bara de instrumente.
44. Utilizați tastatura și apăsați o dată tasta săgeată dreapta.
45. Utilizați tastatura și apăsați o dată tasta săgeată.

Acest lucru ar fi trebuit să creeze o subtilă subtilă a textului, o adâncime mică și câteva detalii frumoase.

Și acolo aveți. Acum avem un fundal vizual frumos pentru pagina noastră de pornire, care va împiedica utilizatorii să revină și să rămână mai mult timp. Cu un mic cod HTML și CSS, puteți adăuga unele navigație și stil.

Ce e aia? Doriți să obțineți efectul complet al modului în care acesta va arăta pe iPhone sau iPad? Există o mulțime de resurse bune, gratuite care oferă șabloane Photoshop doar în acest scop. Din fericire, voi împărți micul meu secret cu tine.

Săptămâna viitoare vom vorbi într-o mică teorie a culorilor, astfel încât să nu fiți "acel tip" care pune fontul roșu pe un fundal albastru.