Creare un Badge in stile Web 2.0, Tutorial Photoshop

« Older   Newer »
  Share  
view post Posted on 19/8/2009, 08:32
Avatar

Nancy

Group:
Member
Posts:
15,915
Location:
Val della Torre (TO)

Status:


image
Grazie a Grafica.HTML



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.

Creiamo un nuovo documento di Photoshop di 150 pixel per 150 pixel. Dalla barra degli strumenti selezioniamo lo strumento Poligono.

image


Ora, con lo strumento selezionato, andiamo a impostare alcuni parametri nella barra delle opzioni. Prima di tutto assicuriamoci di essere in modalità Tracciato:

image


Poi clicchiamo sull'unica casella a discesa presente e impostiamo le opzioni come in figura: opzione Stella con il segno di spunta attivo e "Rientro dei lati di" impostato al 10%:

image


Ora siamo pronti per disegnare la nostra forma: clicchiamo circa al centro del documento e trasciniamo fino a creare la forma della dimensione desiderata.

image


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.

image


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.

image


Poi, senza chiudere la finestra, impostiamo anche un'ombra esterna con le opzioni visibili in figura:

image


Confermiamo e chiudiamo la finestra degli stili di Livello e vediamo il risultato:

image


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.

Ed ecco pronto il vostro Badge!!! Buon lavoro!
 
Web  Top
Papirpar
view post Posted on 19/8/2009, 15:09




Grazie noriko!
 
Top
___angelo senza ali«
view post Posted on 19/8/2009, 15:10




che brava
 
Top
view post Posted on 19/8/2009, 15:10
Avatar

Nancy

Group:
Member
Posts:
15,915
Location:
Val della Torre (TO)

Status:


Di nulla, appena ho più tempo ne posto altri ^__^
 
Web  Top
la_bohemien
view post Posted on 19/8/2009, 15:22




OH MAESTRA mi inchino a te, seguirò tutti i tuoi tutorial, con la promessa che prima o poi riesco a procurarmi sto benedetto photoshop, a scaricarlo non ci provo neanche più, dopo 30 tentativi falliti è inutile no?
 
Top
view post Posted on 19/8/2009, 15:25
Avatar

Nancy

Group:
Member
Posts:
15,915
Location:
Val della Torre (TO)

Status:


Guarda, io di solito scarico le Demo e poi le cracko, così sono sicura che funzionino :P
Il Tutorial non l'ho fatto io, di miei ancora non ce ne sono però ho creditato come giusto che sia..
Appena potrò farò qualcosa di mio ^^
Ovviamente se avete domande, dubbi e problemi non esitate a chiedere...
 
Web  Top
la_bohemien
view post Posted on 19/8/2009, 16:08




Ah si scusa non avevo capito il "grazie a badge html" ghghgh me tonta >_<
 
Top
view post Posted on 20/8/2009, 07:55
Avatar

Nancy

Group:
Member
Posts:
15,915
Location:
Val della Torre (TO)

Status:


Ma va tranquilla.. Appena torno dalle vacanze ne preparo un pò di miei :P
 
Web  Top
7 replies since 19/8/2009, 08:32   85 views
  Share