Tutorial iPhone: disegnare un’icona, con stile e personalita’

Lavorandoci spesso, con le icone Apple, sono sempre alla ricerca di qualche ispirazione per i design delle nuove applicazioni; agli inizi ho seguito moltissimi tutorial sul come creare le icone, poi mi sono abituata a farle secondo lo stile piu’ appropriato.

Oggi creeremo un’icona per un’applicazione musicale, alla fine del tutorial potrete scaricare il layer .psd e continuare con la personalizzazione.
Evitero’ di segnalare le cartelle che creero’ durante il percorso di finalizzazione, ho la buona regola di etichettarle in modo da renderle chiare alla prima occhiata.

Pronti?
Creiamo quindi un nuovo documento delle dimensioni di circa 125×125 pixel – va sempre tenuto a mente che la dimensione standard di una icona per iPhone e iPod Touch e’ di 57×57 pixel, ma un’area di lavoro maggiore e’ sempre preferibile. Lavorando su uno sfondo nero, o comunque scuro, ci facilitera’ ulterioriormente le cose.
La risoluzione deve essere a 72dpi.

Adesso creiamo la forma base della nostra icona; nelle icone 512×512 i bordi sono molto arrotondati, ma utilizzare lo stesso bordo, molto stondato, per le icone piccole non regala un bell’effetto.
Disegnamo il rettangolo con Rounded Rectangle Tool, avendo cura di impostare a 9 pixel il radius. Per essere sicura di centrare il nuovo quadrato ho disegnato delle guide all’esterno del mio rettangolo principale (la base nera) e delle altre guide a 25pixel di distanza dal bordo su tutti i lati; una volta posizionato il cursore sull’angolo superiore sinistro ho disegnato il rettangolo bianco perfettamente centrato.

Diamo una pennellata di colore!
Per questa icona ho scelto una palette che rispecchi il contenuto musicale che l’utente andra’ poi a scaricare, ovvero musica rilassante, utile anche alla meditazione; l’ho creata su Colour Lovers e l’ho chiamata Zen Moody.

Ho selezionato i primi due colori della palette e li ho impostati in Photoshop, poi ho applicato il gradiente.

A questo punto diamo qualche effetto al nostro sfondo; un effetto che mi piace abbastanza e’ quello classico delle icone di Apple, come quello di iTunes, ma non voglio farlo proprio uguale..
Duplichiamo quindi il layer di lavoro e usiamo il comando Rasterize, nascondendo tutti gli effetti.
Applichiamo un filtro Noise -> Add Noise con i valori che vedete nell’immagine sottostante.

Per dare un poco di movimento in piu’ al layer ho usato anche il filtro Liquify, giusto due passate senza uscire dai bordi.

Indi procediamo con il filtro Radial Blur con i seguenti valori:

L’effetto appena applicato andra’ oltre i bordi della forma base, per questo bastera’ selezionare il layer sottostante e cancellare, su quello superiore, l’eccesso.
Ma prima di fare cio’, voglio applicare ancora qualche piccolo effetto; dal menu’ Sketch scelgo Reticulation, con Densita’ 12 – Foreground Level 30 – Background Level 7.
Infine faccio scendere l’opacia’ al 15%.

Colori piu’ forti sullo sfondo regaleranno un maggiore impatto, ma per me questa icona e’ perfetta!
Per accentuare un poco i contrasti di colore ho utilizzato Channel Mixer, cambiando alcune impostazioni:

La base per l’icona e’ fatta; adesso manca solo l’immagine, una chiave di Basso in primo piano.
Niente di complicato e le possibilita’ sono infinite.

Su questo stile si possono creare icone di ogni genere e tipo, dalle piu’ classiche alle piu’ elaborate; cercate solo di tenere a mente che i dettagli spesso possono generare uno sgradevole effetto una volta installata l’icona sul telefono.

Ma.. manca ancora una cosa per essere perfetta: l’ombreggiatura glossy!
Creiamo un nuovo layer, chiamato Glossy e selezioniamo il layer di base, la forma base, per evidenziarne i contorni; torniamo sul layer Glossy sul quale dobbiamo usare un gradiente bianco e trasparente per tutta la lunghezza in modo da ottenere una bella chiazza bianca sulla cima dell’icona.

Lasciamo selezionato il layer Glossy ed utilizziamo il tool Elliptical Marquee Tool, avendo cura di cambiare lo stile di risoluzione su Intersect; cercate di disegnare un’ellisse che abbia il “ventre” sulla parte alta dell’icona, potete averla piu’ bassa o piu’ alta, la sfumatura, questo dipendera’ da voi. Fate delle prove per vedere come cambia il risultato finale e, una volta soddisfatti, invertite la selezione corrente e cancellate. In questo modo avrete solo una bella sfumatura evidenziata.

Quello che resta e’ la nostra icona.
In questo caso, la mia icona Zen Moody!

Per avere un’idea di come possa integrarsi con le altre icone non dobbiamo fare altro che prendere alcune delle risorse gratuite che la rete ci offre e fare un montaggio con Photoshop; io ho scelto un mockup di iPhone Mockup, meno formale e piu’ irriverente.

full-stack graphic designer | social media manager | blogger, autrice e saggista | appassionata di Giappone, poker e pianoforte | mai senza occhiali da sole | attaccabrighe per natura