Het ontwerpen van mobiele app-achtergronden

Nu dat we Photoshop en een paar van de meest essentiële hulpmiddelen hebben geïntroduceerd, laten we de eerste vier handleidingen in deze serie goed gebruiken en een mooie achtergrond bieden voor een mobiele applicatie. Het ontwerpen van app-achtergronden verschilt van het ontwerpen van bureaubladachtergronden op minstens één fundamentele manier: je moet alle overbodige rommel eruit halen en de gebruiker alleen voorzien wat absoluut noodzakelijk is. Lees verder voor meer informatie!

Ik begin met slechts één afbeelding die we zullen veranderen in een visueel aantrekkelijke achtergrond om te gebruiken als startpagina van een mobiele applicatie / landingsscherm. De startpagina is waarschijnlijk de belangrijkste pagina van een site. Vaker wel dan niet, het is de eerste pagina die uw gebruiker zal zien, en als het niet aantrekkelijk of gemakkelijk te gebruiken is, zal de gebruiker iets vinden dat is.

We gaan alle tools gebruiken die ik in de vorige drie tutorials behandelde, dus als je die nog niet hebt gecontroleerd, raad ik je aan ze nu eerst te lezen.

Hier is het bestand waarmee ik begin:

1. Open Photoshop en maak een nieuw document aan (Bestand> Nieuw of Ctrl + N)
2. In het veld 'Naam' geeft de naam aan die u documenteert. In dit geval heb ik de mijne 'MobileBackground' genoemd.
3. Klik op het dropdown-vak naast Preset om de opties uit te vouwen.

Hier gaan we een Photoshop-voorinstelling kiezen voor de documentgrootte. In Photoshop zijn de meest gangbare bestandsformaten ingebouwd, dus we hoeven niet te knoeien met aanpassingen. Op basis van het apparaat dat u ontwikkelt, bepaalt u hier hoe groot uw canvas is.

4. Voor het gebruiksgemak gaan we 'Mobile & Devices' kiezen in de vervolgkeuzelijst Voorinstelling.

5. Kies 240 x 320 in de vervolgkeuzelijst Grootte.

Nogmaals, dit zal variëren afhankelijk van welk apparaat je aan het ontwikkelen bent, maar in dit geval ga ik een preset gebruiken.

6. Controleer of de resolutie is ingesteld op 72 en klik op OK.


Met het nieuwe document open gaan we de stadsgrafiek binnenhalen. Als ik dit punt nog niet genoeg heb gereden, sta me toe dat nu nog een keer te doen: er zijn duizend manieren om dit te doen (en de meeste andere taken) in Photoshop. Persoonlijk vind ik het leuk om de afbeelding te slepen en neer te zetten of, op een gemakkelijkere manier, direct in het bestand te plaatsen.


7. Kies Bestand> Plaatsen

8. Kies de locatie van de afbeelding en klik op Plaatsen.


Als u de afbeelding plaatst, kunt u de afbeelding desgewenst schalen. Ik zal dit keer niet, dus:

9. Klik op het kleine vinkje in de optiebalk.

10. Dubbelklik op de titel in de nieuwe laag en om de naam te bewerken. Noem het "Stad" of iets anders dat beschrijvend is.


Fijn en dandy, maar tot nu toe niets bijzonders, toch? Laten we wat kleur toevoegen.

11. Selecteer de achtergrondlaag in het lagenpalet.

We gaan de achtergrond vullen met een effen oranje kleur.

12. Dubbelklik op de voorgrondkleur en kies een lichtoranje. Ik ga # fa871b gebruiken.

13. Met de gekozen voorgrondkleur, druk je op SHIFT + F5 om het vulvak voor de vulkleur te openen.

OPMERKING: U kunt ook het vulgereedschap (G) op de werkbalk gebruiken.

14. Selecteer het vuloptieblok open en de voorgrondkleur geselecteerd in het vervolgkeuzemenu 'Gebruik' op OK.


Nu beginnen we ergens te geraken. Laten we een verloop toevoegen om het wat diepte te geven. Het effect waar ik voor ga is een zonsondergang, dus we gaan een geel en een sinaasappel gebruiken.



Om dingen gemakkelijker zichtbaar te maken, wordt de zichtbaarheid van de achtergrondlaag uitgeschakeld.

15. Klik op het oog naast de achtergrondlaag in het lagenpalet.
16. Maak een nieuwe laag voor ons verloop door op de knop Nieuwe laag onderaan het lagenpalet te klikken.
17. Benoem de laag dienovereenkomstig.
18. Dubbelklik op de voorgrondkleur om het palet te openen.
19. De oranje kleur die we voor de achtergrondkleur gebruikten, moet nog steeds in het palet staan, maar als dat niet het geval is, verandert het kleurenpalet "automagisch" in een kleurenkiezer wanneer het wordt geopend.
20. Klik met de kleurenkiezer op de achtergrondkleur van de verborgen laag.
21. Omdat we nu een beetje lichtere oranje tint willen, sleept u de kleurkiezer een beetje naar links om meer wit toe te voegen. De kleur die ik heb gekregen is # f5a23a.
22. Selecteer het verloopgereedschap (G) in de werkbalk.
23. Stel de optie Verloop in de optiebalk in op 'Voorgrond in transparant'.
24. Klik onderaan de stadsafbeelding en sleep omhoog.

OPMERKING: Hoe verder u omhoog sleept, hoe groter uw verloop.

25. Laten we stappen 16 t / m 23 herhalen, behalve een nog lichtere kleur voor het verloop. Ik heb # f2cc38 gebruikt.

26. Klik op het oogpictogram naast de achtergrondlaag om deze zichtbaar te maken.

Je zou iets moeten hebben dat er zo uitziet:



Het begint er redelijk goed uit te zien.

27. Met het gereedschap Rechthoektent selecteert u het gebied net onder de afbeelding van de stad, zoals hieronder te zien is.

28. Druk op DELETE terwijl de eerste gradiëntlaag is geselecteerd.
29. Selecteer de tweede verlooplaag en druk nogmaals op DELETE.

Nu zijn we van beide gradiënten onder de stadsgrafiek af en hebben we een mooie kleine horizonlijn gemaakt. Laten we wat tekst toevoegen.


30. Dubbelklik op de voorgrondkleur en klik met de kleurkiezer op de achtergrondlaag om # f5a23a (de kleur die we eerder hadden) te selecteren. Als de achtergrondkleur is geselecteerd, voegt u iets meer rood toe om de tekst donkerder te maken dan de achtergrond. Ik heb # da5a00 gebruikt.
31. Selecteer de teksttool (T) op de werkbalk.
32. Klik rechts onder de stadsafbeelding en typ uw tekst. Ik heb Schotland South Dakota gebruikt omdat daar de afbeelding vandaan komt.

Ziet er niet te armoedig uit, maar kan beter. Het zijn de details die een goede achtergrond geweldig maken.

33. Selecteer de tekstlaag in het lagenpalet.
34. Sleep de laag naar de knop Nieuwe laag maken onder in het lagenpalet.

Hierdoor wordt de laag gedupliceerd en direct boven de eerste tekstlaag geplaatst.

35. Terwijl de nieuwe laag is geselecteerd, klikt u op de knop Stijl mengen onder aan het lagenpalet. U kunt ook dubbelklikken op de laag in het lagenpalet.

OPMERKING: dubbelklik op de laag, niet op de titel van de laag. Als u dubbelklikt op de titel van de laag, hoeft u alleen de titel van de laag te bewerken.

36. Controleer in het venster Laagstijl de optie Kleuroverlay in de opties aan de linkerkant.
37. Laat de mengmodus op Normaal staan ​​en dubbelklik op het kleurstaal.

We gaan een lichtere kleur gebruiken dan ons oorspronkelijke lettertype.

38. Kies een kleur die u als highlight wilt gebruiken. Ik heb # ffa800 gebruikt.
39. Klik op OK om de kleur te kiezen.
40. Klik op OK om het venster Layerstijl te sluiten.

De overlay is nu voltooid, maar we willen dat het hoogtepunt achter de donkere, rode tekst verschijnt.

41. Klik en sleep de bovenste tekstlaag direct onder de volgende tekstlaag.

Ugh, nu is onze gemarkeerde laag tekst niet zichtbaar! Laten we de markering met slechts een paar pixels verschuiven.

42. Selecteer de tekstlaag met het donkerder gekleurde lettertype (het moet de tekstlaag bovenaan zijn).
43. Selecteer het gereedschap Verplaatsen (V) op de werkbalk.
44. Gebruik je toetsenbord en druk eenmaal op de pijl naar rechts.
45. Gebruik je toetsenbord en druk eenmaal op de pijl-omlaagtoets.

Dit had een leuk klein subtiel accent op de tekst moeten creëren, een beetje diepte en een paar leuke details.

En daar heb je het. Nu hebben we een mooie visuele achtergrond voor onze startpagina die ervoor zorgt dat gebruikers terugkomen en langer blijven. Met een beetje HTML en CSS kun je wat navigatie en styling toevoegen.

Wat is dat? Wil je het volledige effect krijgen van hoe het eruit zal zien op je iPhone of iPad? Er zijn veel goede, gratis bronnen die Photoshop-sjablonen alleen voor dit doel aanbieden. Gelukkig deel ik mijn geheimpje met je.

Volgende week zullen we in een beetje kleurentheorie gaan zitten, zodat je niet "die vent" bent die het rode lettertype op een blauwe achtergrond zet.