Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Creare un badge in stile Web 2.0

Realizzare con Photoshop un'etichetta promozionale in stile Web 2.0
Realizzare con Photoshop un'etichetta promozionale in stile Web 2.0
Link copiato negli appunti

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.

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


Ti consigliamo anche