In questo tutorial impareremo a costruire una classica icona per iPhone. Il procedimento è molto semplice e richiede un livello di conoscenza base di Photoshop CS4. Prima di cominciare, vi consigliamo di scaricare Ultimate Web 2.0 Gradient, una comoda raccolta di gradienti 2.0 che velocizzeranno il nostro lavoro. Vedremo più avanti come incorporarli in Photoshop.
Prepariamo l'area di lavoro
Dal menu File, selezioniamo Nuovo. Nell'apposita finestra, inseriamo il valore di 300px sia per l'altezza che per la larghezza, risoluzione a 72 dpi e sfondo bianco (Figura 1). L'icona che andremo a costruire avrà una dimensione inferiore, tuttavia l'utilizzo di uno sfondo decisamente più grande agevolerà il procedimento.
Costruiamo l'icona
Dopo aver rinominato il livello iniziale in Sfondo, premiamo Crtl+T. Il comando abilita la trasformazione dell'immagine, questo piccolo stratagemma ci permetterà di individuare facilmente con il righello il centro del nostro sfondo (Figura 2).
Aggiungiamo un Nuovo Livello chiamandolo Quadrato. Attraverso lo Strumento di selezione rettangolare, definiamo a centro immagine un quadrato approssimativo. Clicchiamo con il tasto destro al centro della selezione, scegliamo Trasforma Selezione e, nella barra in alto, ne definiamo altezza e larghezza di 100px (Figura 3). Riposizioniamo, infine, la selezione al centro qualora fosse necessario.
Utilizzando lo Strumento Rettangolo Arrotondato riempiamo per intero la nostra selezione. In questo modo, otterremo un quadrato perfettamente di 100x100px (Figura 4). Per il momento, non è essenziale la scelta del colore. Come vedremo più avanti, verranno utilizzate le sfumature per questo scopo.
A questo punto, installiamo le sfumature che abbiamo precedentemente scaricato. Dalla barra delle opzioni dello Strumento Sfumatura, clicchiamo sull'apposita freccia fino a raggiungere Carica Sfumatura e selezioniamo il file .grd prescelto per essere incorporato. Da questo momento, tutti i nuovi preset sono disponibili per l'uso.
Posizioniamoci, quindi, sul livello Quadrato e scegliamo le Opzioni di fusione. Scorriamo la lista fino ad arrivare a Sovrapposizione sfumatura e scegliamo un preset con effetto omogeneo, poiché sono sconsigliabili tutte le sfumature che prevedono un distacco netto fra due colori diversi (Figura 5):
Tramite lo Strumento bacchetta magica selezioniamo il nostro livello e dal menu Selezione scegliamo Inversa. Sempre dallo stesso menu, apriamo il comando Contrai all'interno della sottocategoria Modifica e inseriamo un valore di 2px.
Creiamo un Nuovo Livello e rinominiamolo in Sfumatura superiore. Utilizzando lo Strumento Sfumatura, riempiamo la selezione fatta in precedenza con un gradiente dal bianco al trasparente (Figura 6):
Con lo Strumento selezione ellittica, selezioniamo all'incirca la metà del quadrato, quindi scegliamo Inversa dal menu Selezione. Tramite il comando Taglia del menu Modifica, eliminiamo la parte di gradiente non necessaria (Figura 7) in modo da creare il tipico effetto lucido delle icone stile Web 2.0.
A questo punto, è possibile creare un Nuovo livello e nominarlo Sfumatura inferiore Ripetiamo le istruzioni della Figura 7 per ottenere una nuova selezione ridotta di 2px, dopodiché riempiamo il fondo del quadrato con una piccolissima sfumatura dal trasparente al bianco (Figura 8):
Possiamo ora aggiungere un'immagine a scelta. Creiamo quindi un Nuovo Livello chiamato Logo. Ipotizzando di creare un'icona per il download dei file, dal menu Strumento Forma Personale scegliamo una freccia. Tracciamo la forma in modo da non evadere i lati del nostro quadrato, ruotandola opportunamente con il comando Trasforma --> Ruota del menu Modifica, qualora fosse necessario.
Una volta disegnato il nostro logo, dalle Opzioni di Fusione spuntiamo Traccia. Immettiamo un valore di 1px, avendo cura di utilizzare un colore compatibile con il quadrato precedentemente realizzato. Aggiungiamo ora un lievissimo gradiente bianco e grigio, a scelta fra quelli scaricati, tramite Sovrapposizione sfumatura. Al termine di questo passaggio, la nostra icona è genericamente pronta per essere utilizzata (Figura 9). Opzioni facoltative quali ombreggiatura e riflesso verranno trattate nello step successivo.
Ombreggiatura e Riflesso (facoltativi)
In questo step, aggiungeremo ombreggiatura e riflesso all'icona appena creata. La scelta fra le due, ed eventuali altre opzioni, risentono molto del layout in cui l'immagine verrà inserita. Per questo motivo, le tecniche che andremo ad analizzare vengono fornite a puro titolo esemplificativo.
Ombreggiatura
Aggiungere un'ombra all'icona creata è davvero semplicissimo. Basta, infatti, scegliere Ombra Esterna dal menu Opzioni di fusione. Sotto Struttura, potrete scegliere la modalità d'ombra più adatta al vostro layout. Per questo esempio, abbiamo utilizzato la seguente configurazione:
- Metodo di fusione: normale;
- Angolo: 90° con luce globale attiva;
- Distanza: 3 px;
- Estensione: 0 px;
- Dimensione 4 px.
Riflesso
In alternativa all'ombreggiatura, si può creare un riflesso dell'icona, in modo da simulare l'effetto di un oggetto adagiato su una superficie lucida. Ricordiamoci, di conseguenza, di disattivare l'ombra creata nello step precedente, qualora fosse necessario.
Duplichiamo tutti i livelli compresi tra Quadrato e Logo e uniamoli in uno solo cliccando su di essi con il tasto destro e scegliendo Unisci livelli. Rinominiamo il nuovo livello creato in Riflesso e spostiamolo appena sopra a Sfondo. Dal menu Trasforma utilizziamo Rifletti Verticale per capovolgere l'immagine. Inseriamo l'icona capovolta al di sotto dell'originale, facendone combaciare i margini. Tramite una sfumatura dal bianco al trasparente, copriamo circa l'80% dell'icona. Si può ripetere l'operazione più volte fino ad ottenere l'intensità di riflesso desiderata (Figura 11).
Conclusioni
Dopo aver modificato eventuali ombre e riflessi, la nostra icona in stile iPhone è finalmente pronta per essere utilizzata (figura 12). Qualora si usasse uno sfondo scuro, prestate particolare attenzione alla scelta dei colori, in modo da evitare un'eccessiva mimetizzazione dell'immagine con lo sfondo stesso.
