Hey guys back-to-back Photoshop. In questo tutorial imparerete come creare I-Phone Come Button in Photoshop. Questo è molto semplice e molto efficace tutorial. Spero che potrete godere di questo tutorial.

Final Preview

Questo è ciò che siamo diventati fare oggi

Step # 1

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

Step # 2

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

Step # 3

Creare un nome nuovo livello il gradiente strato di Striscia. Scegli la Rectangular Marquee Tool e creare striscia bianca.

Styling La striscia Layer doppio clic sulla miniatura del livello Stripe nel pannello Livelli per aprire la finestra di dialogo Stili di livello, potremo applicare un effetto verticale gradiant per lo sfondo. Quindi fare clic sulla pendenza olor c, relativa al diritto della facoltà di sfumatura di aprire il colore gradiente.

Fare doppio clic su left-color-stop e immettere il valore del colore aaaaaa #, fare doppio clic su di centro-sinistra-color-stop e immettere il valore del colore # cccccc, fare doppio clic sulla destra-centro-color-stop e inserire il valore di colore # dddddd, quindi fare doppio clic su right-color-stop e immettere il valore del colore # ffffff.

Dovrebbe essere simile a questo.

Step #4

Selezionare il rettangolo arrotondato Tool e creare il pulsante, il mio raggio è 90X40px.

Ora applicare qualche 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 verticale gradiant 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 # 000000, fare doppio clic su di centro-sinistra-color-stop e immettere il valore del colore # 222222, fare doppio clic sulla destra-centro-color-stop e inserire il valore di colore # 444444, quindi fare doppio clic su right-color-stop e immettere il valore del colore # 666666.

Smusso e rilievo

Avanti applicare il Smusso e stile di livello rilievo. Cambiare lo stile Smusso esterno, che modificare i valori di profondità, le dimensioni e ammorbidire. Ho scelto di impostare la profondità al 100%, taglia a 1px e Ammorbidire a 10px

Parte importante di questo tutorial: Mantenere l'angolo a -90 ^°, Altitude a 40 ^o

Modalità Highlight: io scelgo di impostare l'opacità al 100%.

Modalità Shadow: io scelgo di impostare l'opacità al 100%.

Colpo

Infine, si applicherà la Corsa. In primo luogo modificando i valori delle dimensioni. Scelgo di impostare le dimensioni di 1px. Cambiando la posizione in Inside

Scelgo di impostare l'opacità al 80%.

Cambia il colore del tratto dal default # 222222

Dovrebbe essere simile a questo.

Step # 5

Strumento di selezionare il testo e digitare il testo sulla parte anteriore.

Si applicherà un qualche effetto per il testo.

Bevel rilievo

Fare doppio clic sulla miniatura del livello di testo nel pannello Livelli per aprire la finestra di dialogo Stile livello. Si applicherà Smusso effetto rilievo, prima modificare lo stile di Smusso esterno e tecnica per Chisel Soft, che modificare i valori di profondità, Direzione, Misura e ammorbidire. Ho scelto di impostare la profondità al 130%, alla Direzione Dimensione Down a 1px e Ammorbidire a 0px

Parte importante di questo tutorial: Mantenere l'angolazione di 90 ^°, Altitude a 30 ^o

Modalità Highlight: io scelgo di impostare l'opacità allo 0%.

Modalità Shadow: io scelgo di impostare l'opacità al 50%.

Final Preview

Infine abbiamo fatto questo tutorial.

Questo è ciò che siamo diventati fare oggi

Scarica il file di origine

Se si desidera controllare il lavoro, si può scaricare il file PSD per questo tutorial.

iPhone-like-buttons.rar (21,3 KB)

Archiviato in: Photoshop, Tutorials by admin