Come creare pulsanti 3D utilizzando Adobe Photoshop

Ci sono un sacco di cose incredibili in cui puoi creare Adobe Photoshop che sono utili online, che vanno da semplici cornici per immagini a interfacce utente complesse. Una delle cose più utili che puoi creare in Photoshop sono i pulsanti 3D, che torneranno utili se gestisci un blog o un sito Web con un'interfaccia personalizzata.

In questo articolo ti mostreremo come creare pulsanti 3D usando Photoshop, insieme agli stati visivi 'su' e 'giù', in modo da poterli animare. (Non tratteremo l'animazione stessa in questo articolo.)

Passaggio 1: prepara il tuo documento

Sebbene i pulsanti 3D vengano visualizzati più frequentemente sui siti Web, è importante notare che esistono altre applicazioni per essi, come GIF animate, display di prodotti mock-up e giochi per dispositivi mobili. A seconda di cosa stai creando questo pulsante, il formato del file finale e le sue dimensioni possono variare.

Per creare un pulsante 3D in Photoshop, dovrai creare un documento personalizzato. Per fare ciò, apri Photoshop e fai clic su Crea nuovo > Personalizza . Inizia a digitare i tuoi valori.

Per creare un pulsante 3D, vorrai un documento orizzontale. Per il nostro abbiamo utilizzato:

900 x 300 pixel di altezza
300 pixel/pollice
Modalità colore RGB

Sebbene queste specifiche non siano sicuramente una regola rigida e veloce, ciò ti garantirà spazio più che sufficiente con cui lavorare e la possibilità di ridimensionare le dimensioni del pulsante in base alle esigenze.

Passaggio 2: imposta il rettangolo per il pulsante 3D

Dopo aver impostato le specifiche per il tuo file, verrai portato nel tuo spazio di lavoro. Avrai una tela bianca orizzontale in un singolo livello, ed è qui che inizierai a costruire il tuo pulsante.

Per costruire il tuo pulsante 3D, fai clic su Strumento rettangolo arrotondato sul lato sinistro dello schermo, visto qui in rosso. Puoi anche usare la scorciatoia tu per accedervi.

Fai clic una volta sul tuo livello bianco: questo farà apparire automaticamente il tuo Crea rettangolo arrotondato scatola. Utilizzerai questa casella per specificare le dimensioni del tuo rettangolo.

Per il nostro pulsante, siamo andati con:

300 pixel di larghezza
75 pixel di altezza

Ci siamo anche assicurati che gli angoli fossero arrotondati di 10 pixel. Non troppo alto e nemmeno troppo basso. Poi abbiamo premuto ok .

Nota: I pulsanti variano in base alle dimensioni e alla forma, quindi non pensare di dover utilizzare queste dimensioni esatte. Inoltre, se stai cercando maggiori informazioni sulle scorciatoie, eccone alcune i comandi da tastiera di Photoshop più utili .

Quando premi ok , Photoshop creerà un rettangolo arrotondato con queste dimensioni all'interno del livello. Puoi cambiarlo Riempire e Ictus colori utilizzando i menu a discesa nell'angolo in alto a sinistra dello schermo.

Ai fini di questo tutorial, e per illustrare l'aspetto di un pulsante 'su' e 'giù', faremo diventare rosso il nostro pulsante 'giù'.

Passaggio 3: crea il tuo pulsante 3D

Dopo aver creato il pulsante di base e averne scelto il colore, vorrai regolarlo nel Stile livello la finestra di dialogo. Questo per farlo sembrare più 3D.

Per accedere al tuo Stile livello finestra di dialogo, puoi andare Livello > Stile livello dal menu in alto. Puoi anche fare doppio clic sul livello che contiene il tuo pulsante, per farlo apparire automaticamente. In questo modo è molto più veloce e personalmente lo preferiamo.

Una volta che la casella Stile livello è attiva, vai all'opzione Smusso e rilievo . Accendilo.

Questo è un modo semplice e veloce per dare ai bordi del bottone un aspetto '3D' più rialzato. Per questo tutorial, queste sono le impostazioni che abbiamo usato:

Struttura

Stile: Smusso interno
Tecnica: Scalpello morbido
Profondità: 605
Direzione: Su
Taglia: 5
Ammorbidire: 1

Ombreggiatura

Angolo: 90
Altitudine: 37
Modalità di evidenziazione: Colore scherma, 55% opacità
Ciao: Multiplo, 25% di opacità

Il trucco è rendere le impostazioni abbastanza alte da poter vedere qualche differenza, ma non così forte da essere travolgente.

Dopo aver finito con Bevel & Emboss, siamo andati a Contorno e acceso anche quello. Contour rende un po' più forte la definizione di Bevel & Emboss, e per questo tutorial abbiamo scelto l'impostazione Cono - Invertito .

Quindi, accendi Sovrapposizione sfumatura . Questo è ciò che conferisce a un bottone quell'aspetto arrotondato e leggermente 'lucido'. Le impostazioni sono le seguenti:

Modalità di fusione: Sovrapposizione
Opacità: 90
Stile: Lineare
Angolo: 90
Scala: 100

Alla fine abbiamo acceso Ombra esterna , per far sembrare il pulsante un po' 'sollevato' dallo sfondo bianco di un sito web o di un blog. Di nuovo, ecco le impostazioni:

il controller non si connette a xbox one

Struttura

Modalità di fusione: multiplo
Opacità: 35
Angolo: 90
Distanza: 2
Propagazione: 6
Taglia: 8

Qualità

Contorno: Lineare
Rumore: 0
Il livello elimina l'ombra esterna: Sopra

Ora è il momento di salvare queste specifiche come stile di livello.

Passaggio 4: salva come stile di livello

Una volta terminate le impostazioni del pulsante, inizierà a sembrare 3D. Poiché è molto probabile che creerai più di un pulsante 3D, dobbiamo trovare un modo rapido e semplice per farlo.

Ecco come.

Prima di cliccare ok nel Stile livello finestra di dialogo, fare clic su Nuovo stile . Quando lo fai, Photoshop salverà questo stile di livello che hai creato per il tuo pulsante.

Se stai utilizzando Photoshop CC, questo nuovo stile verrà salvato nel tuo Biblioteche sezione, come puoi vedere sopra. È molto veloce e di facile accesso.

Passaggio 5: come utilizzare uno stile di livello salvato

Ora che hai progettato il tuo pulsante e lo hai salvato come stile di livello, vediamolo in azione per il tuo stato 'su'. Nessuna parola di bugia, questo dimezzerà il tuo tempo di lavoro.

Innanzitutto, creiamo un altro pulsante direttamente sopra il livello del pulsante rosso, in questo modo. Rendiamolo verde, per dare enfasi.

Avanti --- invece di fare doppio clic sul livello stesso per far apparire il Stili di livello finestra di dialogo --- fai doppio clic sullo stile del livello nel tuo Biblioteche pannello.

Quando lo fai, Photoshop applicherà automaticamente lo stile salvato al nuovo livello del pulsante, mantenendo il nuovo colore e forma. Ora hai due pulsanti --- uno in alto e uno in basso --- ed è così semplice da fare. Adoro questa scorciatoia.

Passaggio 6: aggiungi testo al tuo pulsante

Successivamente, aggiungeremo del testo al pulsante.

Per aggiungere del testo, crea un nuovo livello sopra i due livelli dei pulsanti. Clicca il Strumento tipo per iniziare a digitare.

Per questo tutorial, scriveremo la parola 'iscriviti' perché è qualcosa che vedi abbastanza spesso sui siti Web e sulle piattaforme di social media.

Useremo anche un font san serif sicuro per il web. La scelta finale di quale usare per il tuo pulsante dipende da te. Montserrat, Proxima Nova, Arial e Verdana sono tutte alternative ampiamente utilizzate e sicure per il web.

Dopo averlo fatto, tuttavia, ci sono ancora alcune modifiche più sottili che devi apportare per far apparire questo testo in 'pop'.

Innanzitutto, fai doppio clic sul livello che contiene il testo in modo da poterlo visualizzare nel tuo Stile livello la finestra di dialogo.

Quindi, fai clic su Ombra interiore , per aggiungere un po' di depressione (o area incavata) al tuo testo. Questo fa sembrare che le lettere siano state incise nel pulsante. Di seguito sono riportate le impostazioni esatte che abbiamo utilizzato per questo tutorial.

Struttura

Modalità di fusione: Moltiplicare
Opacità: 35
Angolo: 90
Distanza: 2
Soffocare: 4
Taglia: 1

Qualità

Contorno: Lineare
Rumore: 0

Quindi, applica a Sovrapposizione sfumatura a quelle lettere, per farle fondere più facilmente nel bottone senza apparire piatte. Ancora una volta, le impostazioni per il nostro sono:

Modalità di fusione: Colore brucia
Opacità: 90
Stile: Lineare
Angolo: 90
Scala: 100

Passaggio 7: conclusione

Dopo aver creato questo stile di testo --- specialmente se vuoi usarlo di nuovo --- vai a Nuovo stile e salvalo prima di fare clic ok .

Con tutto ciò, puoi passare rapidamente avanti e indietro sulla visibilità tra i tuoi due livelli di pulsanti, per vedere come appaiono gli stati 'su' e 'giù'.

Abbastanza bello, eh? Per salvare il tuo file, vai File > Salva con nome e salvalo come formato di file corretto per qualsiasi progetto su cui stai lavorando.

Personalizza il tuo blog con pulsanti e widget 3D

Ora che sai come creare pulsanti 3D in Photoshop, puoi essere creativo con esso, progettando i tuoi pulsanti 3D in base alle tue esigenze. E con queste abilità nel tuo arsenale puoi realizzare un prodotto che non è solo professionale, ma anche dall'aspetto personale.

Vuoi sapere altre cose che puoi fare con questo programma? ecco come rimuovere uno sfondo in Photoshop .

Condividere Condividere Tweet E-mail Come accedere alla livella a bolla integrata di Google su Android

Se hai mai avuto bisogno di assicurarti che qualcosa sia livellato in un pizzico, ora puoi ottenere una livella a bolla sul tuo telefono in pochi secondi.

Leggi Avanti Argomenti correlati

Creativo
Adobe Photoshop
Suggerimenti per la modifica delle immagini
Tutorial Photoshop

Circa l'autore Shianne Edelmayer(136 articoli pubblicati)

Shianne ha una laurea in Design e un background in podcasting. Ora lavora come Senior Writer e Illustrator 2D. Si occupa di tecnologia creativa, intrattenimento e produttività per MakeUseOf.

Altro da Shianne Edelmayer

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti