Creare un badge in stile Web 2.0

di: Rossella Facchini     15 Settembre 2006

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

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.

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

Stile di livello: ombra esterna

Confermiamo e chiudiamo la finestra degli stili di Livello e vediamo il risultato (figura 8).

Fig.8: Badge

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

Risultato finale

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

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti