Progettazione di sfondi per app mobili

Ora che abbiamo introdotto Photoshop e alcuni degli strumenti più essenziali, mettiamo a frutto le prime quattro esercitazioni di questa serie e facciamo uno sfondo piacevole per un'applicazione mobile. La progettazione di sfondi per app si differenzia dalla progettazione di sfondi desktop in almeno un modo fondamentale: devi eliminare tutti gli ingombri inutili e fornire all'utente solo ciò che è assolutamente necessario. Continuate a leggere per saperne di più!

Sto iniziando con una sola immagine che trasformeremo in uno sfondo visivamente accattivante da utilizzare come home page dell'applicazione / schermo di destinazione per dispositivi mobili. La homepage è probabilmente la pagina più importante di un sito. Più spesso che no, è la prima pagina che l'utente vedrà, e se non è attraente o facile da usare, l'utente andrà a cercare qualcosa che è.

Utilizzeremo tutti gli strumenti trattati nei precedenti tre tutorial, quindi se non li hai ancora controllati, ti esorto a leggerli per primi ora.

Ecco il file che sto iniziando con:

1. Apri Photoshop e crea un nuovo documento (File> Nuovo o Ctrl + N)
2. Nel campo "Nome", assegna un nome al documento. In questo caso, ho chiamato il mio 'MobileBackground.'
3. Fare clic sulla casella a discesa accanto a Predefinito per espandere le opzioni.

Qui andremo a scegliere un predefinito Photoshop per le dimensioni del documento. Photoshop ha le dimensioni di file più comuni integrate, quindi non dobbiamo fare confusione con le personalizzazioni. In base al dispositivo per cui si sta sviluppando, è qui che si determina la dimensione della tela.

4. Per facilità d'uso, selezioneremo "Dispositivi mobili e dispositivi" dal menu a discesa Preset.

5. Dal menu a discesa Dimensione scegli 240x320.

Di nuovo, questo cambierà a seconda del dispositivo che stai sviluppando, ma per questa istanza userò un preset.

6. Verificare che la risoluzione sia impostata su 72 e fare clic su OK.


Con il nuovo documento aperto, introdurremo la grafica della città. Se non ho già guidato abbastanza questo punto a casa, permettimi di farlo ancora adesso: ci sono mille modi per farlo (e molti altri compiti) in Photoshop. Personalmente, mi piace trascinare e rilasciare l'immagine o, in un modo più semplice, inserirla direttamente nel file.


7. Scegli Archivio> Inserisci

8. Scegli la posizione dell'immagine e fai clic su Luogo.


Quando si posiziona l'immagine, è possibile ridimensionare l'immagine se lo si desidera. Non lo farò questa volta, quindi:

9. Fai clic sul piccolo segno di spunta nella barra delle opzioni.

10. Fare doppio clic sul titolo nel nuovo livello e modificare il nome. Chiamalo "Città" o qualcos'altro descrittivo.


Bene e dandy, ma finora niente di speciale, giusto? Aggiungiamo un po 'di colore.

11. Seleziona il livello di sfondo dalla tavolozza dei livelli.

Stiamo per riempire lo sfondo con un solido colore arancione.

12. Fai doppio clic sul colore di primo piano e scegli un arancione chiaro. Userò # fa871b.

13. Con il colore di primo piano scelto, premere MAIUSC + F5 per visualizzare la casella di opzione del colore di riempimento.

NOTA: è anche possibile utilizzare lo strumento di riempimento (G) dalla barra degli strumenti.

14. Con la casella di opzione Colore di riempimento aperta e il colore di primo piano selezionato nella casella di riepilogo a discesa "Usa", fare clic su OK.


Ora stiamo iniziando ad arrivare da qualche parte. Consente di aggiungere una sfumatura per dargli un po 'di profondità. L'effetto che sto cercando è un tramonto, quindi useremo un giallo e un arancio.



Per rendere le cose più facili da vedere, consente di disattivare la visibilità del livello di sfondo.

15. Fai clic sull'occhio accanto al livello di sfondo nella tavolozza dei livelli.
16. Crea un nuovo livello per il nostro gradiente facendo clic sul pulsante Nuovo livello nella parte inferiore della tavolozza dei livelli.
17. Denominare il livello di conseguenza.
18. Fai doppio clic sul colore di primo piano per aprire la tavolozza.
19. Il colore arancione che abbiamo usato per il colore di sfondo dovrebbe essere ancora nella tavolozza, ma se non lo è, la tavolozza dei colori "automagicamente" cambia in un selettore di colori quando è aperto.
20. Con il selettore dei colori, fai clic sul colore di sfondo del livello nascosto.
21. Ora, dal momento che vogliamo una tonalità leggermente più chiara di arancione, trascina leggermente il selettore dei colori verso sinistra per aggiungere più bianco. Il colore con cui ho finito è # f5a23a.
22. Seleziona lo strumento sfumatura (G) dalla barra degli strumenti.
23. Dalla barra delle opzioni, imposta l'opzione Gradiente su "Primo piano su Trasparente".
24. Clicca nella parte inferiore della grafica della città e trascina verso l'alto.

NOTA: Più si trascina verso l'alto, maggiore sarà il gradiente.

25. Ripetiamo i passaggi da 16 a 23, tranne usare un colore più chiaro per il gradiente. Ho usato # f2cc38.

26. Fai clic sull'icona a forma di occhio accanto al livello di sfondo per renderla visibile.

Dovresti avere qualcosa che assomigli a questo:



Sta iniziando a sembrare abbastanza buono.

27. Con lo strumento selezione rettangolo, seleziona l'area appena sotto il grafico della città come mostrato di seguito.

28. Con il primo livello di sfumatura selezionato, premere CANC.
29. Seleziona il secondo livello di sfumatura e premi nuovamente DELETE.

Ora ci siamo sbarazzati di entrambi i gradienti sotto la grafica della città e abbiamo creato una bella linea dell'orizzonte. Aggiungiamo un po 'di testo.


30. Fai doppio clic sul colore di primo piano e, con il selettore di colori, fare clic sul livello di sfondo per selezionare # f5a23a (il colore che avevamo prima). Con il colore di sfondo selezionato, aggiungi un po 'più di rosso per rendere il testo più scuro dello sfondo. Ho usato # da5a00.
31. Seleziona lo strumento testo (T) dalla barra degli strumenti.
32. Clicca sotto l'immagine della città e digita il testo. Ho usato Scotland South Dakota perché è da lì che viene la grafica.

Non sembra troppo malandato, ma potrebbe essere migliore. È il dettaglio che rende grande uno sfondo buono.

33. Seleziona il livello di testo dalla tavolozza dei livelli.
34. Trascina il livello sul pulsante Crea nuovo livello nella parte inferiore della tavolozza dei livelli.

Questo duplicherà il livello e lo posizionerà direttamente sopra il primo livello di testo.

35. Con il nuovo livello selezionato, fai clic sul pulsante Stile fusione nella parte inferiore della tavolozza dei livelli. Puoi anche fare doppio clic sul livello nella tavolozza dei livelli.

NOTA: fai doppio clic sul livello, non sul titolo del livello. Se fai doppio clic sul titolo del livello, tutto quello che devi fare è modificare il titolo del livello.

36. Nella finestra Stile livello, seleziona ed evidenzia Colore sovrapposizione dalle opzioni a sinistra.
37. Lasciare Blend Mode impostato su Normal e fare doppio clic sul campione Color.

Useremo un colore più chiaro del nostro carattere iniziale.

38. Scegli un colore che desideri utilizzare come evidenziazione. Ho usato # ffa800.
39. Fai clic su OK per scegliere il colore.
40. Fare clic su OK per chiudere la finestra Stile livello.

L'overlay è ora completo ma vogliamo che l'evidenziazione appaia dietro il testo rosso più scuro.

41. Fare clic e trascinare il livello di testo superiore direttamente sotto il livello di testo successivo.

Uh, ora il nostro livello di testo evidenziato non è visibile! Spostiamo l'evidenziazione di un paio di pixel.

42. Seleziona il livello di testo con il carattere di colore più scuro (dovrebbe essere il livello di testo in alto).
43. Seleziona lo strumento Sposta (V) dalla barra degli strumenti.
44. Usa la tastiera e premi una volta il tasto freccia destra.
45. Usa la tastiera e premi una volta il tasto freccia giù.

Questo dovrebbe aver creato una bella sottile evidenziatura sul testo, un po 'di profondità e alcuni dettagli carini.

E il gioco è fatto. Ora abbiamo un bel background visivo per la nostra homepage che manterrà gli utenti a tornare e rimanere più a lungo. Con un po 'di HTML e CSS, puoi aggiungere un po' di navigazione e stile.

Cos'è quello? Vuoi ottenere il massimo effetto di come apparirà sul tuo iPhone o iPad? Ci sono molte buone risorse gratuite là fuori che offrono i modelli di Photoshop solo per questo scopo. Fortunatamente, condividerò il mio piccolo segreto con te.

La prossima settimana ci concentreremo su una piccola teoria dei colori, quindi non sarai "quel ragazzo" che mette il carattere rosso su sfondo blu.