Le icone in stile Web 2.0 sono in grado di personalizzare, in modo semplice e originale, i nostri layout. In rete esistono le più svariate tipologie di icone, tuttavia, in questo tutorial, impareremo a costruire una semplice bussola. Vi sono molte tecniche utilizzabili per arrivare ad un risultato verosimile: per il nostro esempio riassumeremo le più diffuse, in modo da renderle semplici e adatte a qualsiasi tipo di utente. Il tutto sarà possibile sfruttando al massimo le Opzioni di fusione disponibili in Photoshop CS4.
Prepariamo l'area di lavoro
Per cominciare, creiamo un nuovo foglio di lavoro delle dimensioni di 400 x 400 pixel. Utilizzare un layout quadrato ci aiuterà nella realizzazione della nostra icona di forma circolare. Fatto questo, sblocchiamo il livello appena creato e abilitiamo il tool di trasformazione con CTRL+T: in questo modo, sarà molto semplice posizionarci al centro esatto dello sfondo con i righelli (Figura 1).
Creiamo l'icona
La realizzazione della nostra icona in stile Web 2.0 si basa, come vedremo più avanti, su un uso oculato delle Opzioni di fusione di Photoshop CS4. Tuttavia, è necessario prima abbozzare la forma della nostra bussola: creiamo un Nuovo livello chiamato Anello esterno e, tramite lo Strumento selezione ellittica, tracciamo un cerchio tenendo premuto CTRL. Quest'ultimo passaggio ci permette di realizzare un cerchio perfetto al centro del foglio. Riempiamo, quindi, il disegno con lo Strumento secchiello, scegliendo una tonalità a piacere del grigio (Figura 2).
Dal menu Selezione, scegliamo Modifica e Contrai, applichiamo un valore di 20 pixel e, sempre dallo stesso menu, procediamo utilizzando il comando Arrotonda con un valore di 20 pixel. In questo modo, abbiamo creato una selezione più piccola all'interno dell'originale (Figura 3). Tramite il comando Taglia, otteniamo l'anello rappresentato in Figura 4.
L'area appena realizzata andrà a ricreare la superficie metallica esterna della bussola. Per ottenere un effetto metallizzato, è necessario agire sulle Opzioni di fusione del livello. Le figure da 5 a 9 mostrano le funzioni da attivare per realizzare l'effetto desiderato: si andrà principalmente ad agire sui rilievi e sul contorno dell'immagine, per conferirne un aspetto quasi tridimensionale, e sul colore, in modo che risulti simile al metallo. Altre opzioni, quali Traccia, consentiranno di definire al meglio il perimetro del nostro anello, ovvero la parte esterna della bussola.
A questo punto, posizioniamoci sul livello Anello esterno e, tramite lo Strumento bacchetta magica, selezioniamo l'area interna del cerchio. Creiamo, perciò, un Nuovo livello chiamato Anello interno e, mantenendo la selezione precedentemente creata, riempiamo tramite lo Strumento secchiello con una tonalità di grigio a piacere (Figura 10).
Procediamo, quindi, da Selezione, Modifica e Contrai a ridurre l'area di 10 pixel. Sempre dallo stesso menu, scegliamo Arrotonda con un valore di 10 pixel e, tramite il comando taglia, eliminiamo la parte di cerchio in eccesso (Figura 11). Risulta evidente come si stia procedendo esattamente come nel precedente passaggio e, di conseguenza, il prossimo step riguarderà le opportune Opzioni di fusione da applicare al nostro secondo anello.
Come già anticipato, è necessario ora applicare le opportune Opzioni di fusione, riportate nelle figure dalla 12 alla 17. Come nel precedente passaggio, andremo a conferire un certo rilievo all'area, senza però utilizzare l'effetto metallico. L'idea, infatti, è di ricreare un materiale simile alla plastica.
Definiti i due anelli utilizzati per rappresentare le aree più esterne della bussola, possiamo procedere concentrandoci sul quadrante: dovremo definirne lo sfondo, le indicazioni di orientamento e, infine, creare le lancette per la nostra bussola. Iniziamo selezionando l'area interna, rimasta bianca, con lo Strumento bacchetta magica e, dopo aver creato un Nuovo livello chiamato Quadrante, riempiamo con lo Strumento sfumatura la sezione, optando per un gradiente sui toni del rosso o, in alternativa, di altri colori a piacere (Figura 18). Aggiungiamo, quindi, una lieve Ombra interna dalle Opzioni di fusione (Figura 19).
Fatto questo, si possono definire sul quadrante le indicazioni di orientamento. Tramite lo Strumento testo orizzontale, andiamo a inserire i punti cardinali N, E, S, W, corrispondenti a Nord, East, South e West (Figura 20).
Il quadrante realizzato può essere abbellito con qualsiasi elemento decorativo. Appare, tuttavia, evidente come la scelta più logica da fare è di inserire una rosa dei venti o, in alternativa, una stella. Creiamo un Nuovo livello chiamato Stella e, attraverso lo Strumento forma personale, tracciamo una sorta di rosa dei venti dopo aver selezionato una forma adeguata. Riduciamo, quindi, l'opacità del livello al 46% (Figura 21).
Le lancette sono un elemento fondamentale per conferire autenticità alla nostra bussola. Impostiamo un Nuovo livello chiamato Lancette e, sempre utilizzando lo Strumento forma personale, tracciamo due freccie identiche, una bianca e l'altra rossa. Orientiamole opportumente con il comando Trasforma, facendo attenzione di posizionarle al centro. Applichiamo, quindi, una lieve ombreggiatura a piacere dalle Opzioni di fusione, in modo che le lancette risultino essere lievemente sollevate rispetto al quadrante (Figura 22).
A questo punto, è necessario realizzare un lieve effetto che rimandi alla presenza del vetro protettivo posto sopra al quadrante. In questo caso, risulta molto utile sfruttare le rifrazioni, opacizzando leggermente una parte del vetro dove si ipotizza venga riflessa la luce. Posizioniamoci sul livello Quadrante e selezioniamone, grazie allo Strumento bacchetta magica, l'area interna. Creiamo un Nuovo livello, chiamato Vetro, posto al di sopra del precedente Lancette e, da Modifica e Contrai del menu Selezione, riduciamo di 5 pixel. Scegliamo, perciò, il comando Arrotonda dello stesso menu e applichiamo un valore sempre di 5 pixel. Riempiamo quindi, tramite lo Strumento secchiello, l'area di bianco e riduciamo l'opacità del livello al 20%. Utilizzando lo Strumento selezione ellittica, evidenziamo e tagliamo la parte inferiore dell'area bianca precedentemente realizzata (Figure 23 e 24).
Conclusioni
La bussola in stile Web 2.0 è pronta per essere inserita nei nostri layout (Figura 25). L'intero procedimento ha fatto soprattutto leva sull'utilizzo delle Opzioni di fusione, utili per realizzare effetti realistici sia per l'anello metallico che per quello in plastica. Come appare evidente, l'aggiunta dei punti cardinali, delle lancette e dei riflessi sul vetro, hanno conferito un certo realismo alla bussola. Il tutto, avvalendosi di un procedimento comprensibile anche dagli utenti meno esperti. L'icona può essere utilizzata nei più svariati contesti. Risulta essere particolarmente adatta per i siti Web: basti pensare, infatti, alle mappe o alla geolocalizzazione, ormai presenti sulla maggior parte dei siti diffusi in Internet, sia a livello professionale che amatoriale.
