Creare un BADGE in stile Web 2.0

  1. #1
    Utente Esperto L'avatar di GattoMalvagio
    Data Registrazione
    Sep 2013
    Messaggi
    1,145
    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 strumentoPoligono.

    Ora, con lo strumento selezionato, andiamo a impostare alcuni parametri nella barra delle opzioni. Prima di tutto assicuriamoci di essere in modalità 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%

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

    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.
    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)
    Poi, senza chiudere la finestra, impostiamo anche un’ombra esterna.
    Confermiamo e chiudiamo la finestra degli stili di Livello.

    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.

    Per vari aggiornamenti, basta commentare ! Gatto.!.





    Ultima modifica di GattoMalvagio; 23-10-2013 alle 15:56 Motivo: Yeah!
    Chiedersi se un computer possa pensare non è più interessante del chiedersi se un sottomarino possa nuotare.

Termini piu ricercati:

Nessuno è atterrato su questa pagina da un motore di ricerca. Almeno, non per ora...