Creare un badge in stile Web 2.0

di: Rossella Facchini     15 Settembre 2006

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

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

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

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

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.

Guide Grafica

3D Studio Max - Guida alla modellazione

Dall'interfaccia alla creazione e modellazione di oggetti...

Guida Photoshop CS5

Modifica e ottimizzazione dell'immagine, strumenti di disegno e...

Guida Photoshop CS4

Disegno, fotoritocco, effetti con Photoshop CS4: impariamo a usare...

Altre guide

Newsletter @Grafica e Web Design

Ogni settimana, direttamente nella tua e-mail: guide, articoli, tutorial e FAQ su Web Design e grafica per il Web.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Google AdWords Base

27 Febbraio 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

28 Marzo 2012 a Roma
Disponibilità: 7 Posti