Questo sito contribuisce alla audience di

Photoshop How-to: creare un pulsante in stile web 2.0

In questa guida impareremo a creare un bel pulsante nello stile del web 2.0, che spesso può tornare utile per l’inserimento in siti internet o per la realizzazione grafica di strumenti per il[...]

In questa guida impareremo a creare un bel pulsante nello stile del web 2.0, che spesso può tornare utile per l’inserimento in siti internet o per la realizzazione grafica di strumenti per il web.

Iniziamo creando un nuovo documento della grandezza di 150×150 pixel. Scegliamo lo strumento poligono dalla barra laterale a sinistra e spostiamoci nella barra che comparirà in alto nella finestra.

Se non è selezionato, clicchiamo sull’icona “tracciati” e assicuriamoci che sia tutto come indicato in figura:


Portiamoci al centro della finestra, clicchiamo e tenendo premuto il tasto sinistro del mouse, spostiamoci verso i bordi, fino a descrivere una forma delle dimensioni che desideriamo.

button2

A questo punto andiamo nella palette dei tracciati. Teniamo premuto il tasto ctrl e clicchiamo una volta sull’unico livello presente nella lista. La forma che abbiamo creato diventerà tratteggiata e in movimento.

Andiamo nel menu “livelli”, scegliamo “nuovo”, lasciamo le impostazioni predefinite e confermiamo con ok.

Spostiamoci nello strumento di impostazione del colore e scegliamo, come colore di primo piano e di sfondo, due colori a nostro piacimento che si somiglino (uno più chiaro, l’altro più scuro). Noi abbiamo scelto due tonalità di verde.

Andiamo poi nello strumento di sfumatura e, spostandoci nella finestra, descriviamo una linea retta dall’angolo in alto a sinistra fino a quello in basso a destra. Avremo un risultato simile a questo:

pulsante1

Dalla lista dei livelli, clicchiamo due volte sul nome del secondo livello che abbiamo creato per far comparire la finestra delle proprietà. Scegliamo una traccia per il bordo che abbia un colore scuro, simile a quelli utilizzati per il pulsante (utilizziamo comunque uno spessore non troppo elevato, va bene anche il valore 1), e impostiamo un’ombra esterna scegliendo le proprietà che più soddisfano l’obiettivo che vogliamo realizzare.

pulsante2

Inseriamo poi il testo che vogliamo cliccando sullo strumento di testo, modificando le proprietà (tipo di font, grandezza e colore). Ecco il risultato:

button