jump to navigation

Tutorial Photoshop: bottoni web 2.0 maggio 1, 2007

Posted by gughi in informatica e dintorni, internet, web 2.0.
trackback

Ci siamo trasferiti su www.sblogghiamo.net.

Girovagando per il web mi sono accorto (forse in ritardo) che la rete sta cambiando. Il web cresce, si rinnova e fissa nuove regole. In una parola, nasce il web 2.0.

Naturalmente la blogosfera, vero termometro della rete, coglie e diffonde ogni nuova tendenza. Ecco cosa ho trovato su “lachiocciola@ blog“: un tutorial per la creazione di bottoni in stile web 2.0 da realizzare con Adobe Photoshop. Lo posto in versione integrale con tanto di immagini.

Passo 1

Aprite Adobe Photoshop e create una nuova immagine, di qualsiasi dimensione. Di solito più grande di 450 x 300 può andar bene. Selezionate lo strumento Rettangolo Arrotondato e disegnate una forma come quella qui sopra.

Passo 2

Doppio click sul livello della forma per aprire la finestra di Stile livello. Settate i seguenti parametri:

Ombra esterna:

Opacità 31% Distanza 1px, Estensione 0%, Dimensione px

Smusso ed effetto rilievo:

Profondità 100%, Dimensione 0px, Attenuazione 0px

Sovrapposizione sfumatura:

Cliccate sulla barra della sfumatura e settate: in posizione 0% (ovvero l’inizio della barra) colore #1378cd, in posizione 100% (la fine della barra) #4da5f0

Traccia:

Dimensione 5px, Posizione interno, Colore #54abf6

Passo 3

Ora inserite il vostro testo. Allineatelo orizzontalmente a destra e verticalmente al centro. Il carattere qui usato è un Lucida Sans Unicode; 55pt; arrotondato; Doppio click sul livello e in Opzioni di fusione settate:
Sovrapposizione sfumatura: Posizione 0% colore #9ec7eb, Posizione 100% colore #ecf6ff
Passo 4

E’ il momento di inserire un piccolo logo a sinistra per migliorare il tutto. Per farlo, selezionate lo strumento Rettangolo Arrotondato con raggio 5px. Disegnatelo come qui sopra. Ora, nelle Opzioni di fusione, settate i vari parametri in questo modo:

Ombra interna

Opacità:45%
Distanza:0px
Dimensione:43px;

Smusso ed effetto rilievo

Profondità:100%
Dimensione:0px
Attenuazione:0px
Opacità metodo luce:50%
Opacità metodo ombra:100%

Sovrapposizione sfumatura

Doppio click sulla barra della sfumatura.
Posizione:0% #0e2f4a
Posizione:47% #001a31
Posizione:48% #002545
Posizione:100% #0f4b7f

Traccia

Dimensione:5px
Doppio click sulla barra della sfumatura
Posizione:0% #1468af
Posizione:100% #50abf8

Passo 5

Per rendere il tutto ancora più bello, dategli un effetto “vetro”. Per farlo tenete premuto il tasto CTRL e selezionate il livello della vostra forma. Una volta fatto ciò, usate lo Strumento selezione rettangolare, tenete premuto ALT e catturate l’area come mostrato qui sopra.

Passo 6

Riempite la selezione appena catturata di bianco e impostate come Opacità 15%

Mi pare che sia di una semplicità disarmante. A questo punto non vi resta che sbizzarrirvi e provare a creare delle personalizzazioni. Il file .psd con il lavoro completo è disponibile per il download sul sito dell’autore.

Annunci

Commenti»

No comments yet — be the first.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: