In questo tutorial andremo a creare Web Button. Questo è molto semplice e molto efficace tutorial, in modo tutto ciò che serve è Adobe Photoshop per creare questo effetto. Spero che potrete godere di questo tutorial.

Come creare Web Button in Photoshop

Step # 1

Photoshop Aprire e creare un nuovo documento, il mio è 550px × 125px con uno sfondo bianco.

Step # 2

Riempire il colore in livello di sfondo, il colore è il mio # 3A3A3A.

Step # 3

Selezionare il rettangolo arrotondato Tool e creare il pulsante, il mio raggio è 7px, larghezza: 156px e altezza: 38px..

Step # 4

Ora ci si applica un certo effetto

Sovrapposizione sfumatura

Styling the Button doppio clic sulla miniatura del livello del pulsante nel pannello Livelli per aprire la finestra di dialogo Stili di livello, potremo applicare un effetto di gradiente verticale per il pulsante. Quindi fare clic sulla sfumatura di colore sul lato destro della facoltà di sfumatura di aprire il colore gradiente.

Fare doppio clic su left-color-stop e immettere il valore del colore # 9E4C45, quindi fare doppio clic su right-color-stop e immettere il valore del colore EA8484 #.

Ombra

Avanti applicare lo stile livello Ombra. Mantenere l'angolo al 120o, che modificare i valori di opacità, distanza e delle dimensioni. Scelgo di impostare l'opacità al 23%, a distanza di 1px e taglia a 9px.

Step # 5

Selezionare Horizontal Type Tool e tipo di testo sulla parte anteriore.

Si applicherà un qualche effetto per il testo.

Sovrapposizione colore

Fare doppio clic sulla miniatura del livello di testo nel pannello Livelli per aprire la finestra di dialogo Stile livello. Prima si applica sovrapposizione dei colori, ho scelto il colore # 0D0D0E

Ombra

Infine, si applicherà l'Ombra, in primo luogo modificare l'opzione di fusione su Normale. Cambia il colore dell'ombra dal default # FFFFFF. Mantenere l'angolo al 120o, che modificare i valori di opacità, distanza e delle dimensioni. Scelgo di impostare l'opacità al 32% e la distanza a 1px e taglia a 1px.

Final Preview

Facci sapere che questo tutorial può essere più meglio? Se hai trovato un altro tutorial di Photoshop che si desidera condividere con noi, non esitate a farcelo sapere di cadere in un commento.

Se desiderate ricevere maggiori ispirazione da noi, ti invitiamo a iscriverti al nostro feed RSS o tramite e-mail.

Archiviato in: Freebies, Photoshop, Tutorials by admin