Badge potrebbe essere tradotto in italiano come "distintivo" o "adesivo". I badge sono diffusissimi nei layout del Web 2.0, e vengono usati per attirare l'attenzione su un particolare, un'offerta o un nuovo servizio.
Caratteristiche
Forma: sono nella maggioranza dei casi di forma circolare stellata, con almeno una ventina di punte.
Colore: hanno colori sgargianti, o che comunque risaltano sullo sfondo del layout.
Effetti: simulano, con ombre e bordi, d'essere "attaccati sopra" all'impaginato già finito.
Creare un badge
Questo tutorial è pensato per Photoshop Cs o superiori. Creiamo un nuovo documento di Photoshop di 150 pixel per 150 pixel. Dalla barra degli strumenti selezioniamo lo strumento Poligono.
Fig.1: Strumento Poligono
Ora, con lo strumento selezionato, andiamo a impostare alcuni parametri nella barra delle opzioni. Prima di tutto assicuriamoci di essere in modalità Tracciato:
Fig.2: Opzione Tracciato
Poi clicchiamo sull'unica casella a discesa presente e impostiamo le opzioni come in figura 3: opzione Stella con il segno di spunta attivo e "Rientro dei lati di" impostato al 10%:
Fig.3: Opzioni poligono
Ora siamo pronti per disegnare la nostra forma: clicchiamo circa al centro del documento e trasciniamo fino a creare la forma della dimensione desiderata.
Fig.4: Forma del badge
Ora dalla palette Tracciati posizioniamoci sul tracciato appena creato e, facendo Control + click, trasformiamo in selezione la forma. Andiamo sulla palette Livelli e creiamo un nuovo livello.
Prendiamo lo strumento Gradiente e impostiamo come colore di primo piano un arancio intenso (R:255 G:117 B:63) e come colore di sfondo un rosso pieno (R:215 G:0 B:0). Creiamo quindi la sfumatura partendo dall'angolo in alto a sinistra del badge e arrivando all'angolo in basso a destra.
Fig.5: Gradiente
Deselezioniamo e apriamo la finestra Stili di livello facendo doppio click destro sul livello del badge.
Impostiamo prima un bordo esterno di colore bordeaux (R:119 G:0 B:0) come in figura 6.
Fig.6: Stile di livello: bordo esterno.
Poi, senza chiudere la finestra, impostiamo anche un'ombra esterna con le opzioni visibili in figura 7
Fig.7: Stile di livello: ombra esterna
Confermiamo e chiudiamo la finestra degli stili di Livello e vediamo il risultato (figura 8).
Fig.8: Badge
Ora non resta che completarlo con una scritta inserita al suo interno.
Scegliamo il font più adatto allo stile del layout, con un colore che risalti, e scriviamo il testo. In questo caso ho utilizzato il font jazz LAT in bianco. Per ruotare il testo una volta inseritolo andiamo sul menu Modifica > Trasforma > Ruota e ruotiamolo trascinando gli spigoli. Confermiamo la rotazione cliccando sull'icona a forma di "spunta" nella barra delle opzioni e controlliamo il risultato.
Fig.9: Risultato finale
