Design Glossy Web 2.0 Button in Photoshop
Cercando di progettare un pulsante Web 2.0 dall'aspetto lucido? Ecco un semplice tutorial di Photoshop che ti spiega passo passo come ottenere un bel pulsante rosso lucido.
Passaggio 1: creazione della base
Avvia una nuova tela e regola le seguenti impostazioni (contrassegnate in giallo) in base all'immagine qui sotto. Il resto dovrebbe venire come predefinito. Potresti voler ricontrollare anche i valori predefiniti.
Crea una nuova chiamata di livello 'Pulsante'
Sul livello 'Pulsante', selezionare lo strumento Rettangolo arrotondato
Dagli un raggio di 7 px
Disegna un rettangolo simile all'immagine qui sotto.
Passaggio 2: pulsante rosso
Fai clic con il pulsante destro del mouse sulle Opzioni di fusione per il livello "Pulsante"
Modificare le seguenti impostazioni per
Ombra esterna
Ombra interiore
Smusso e rilievo
Sovrapposizione graduale
Il tuo pulsante dovrebbe apparire in questo modo
Passaggio 3: crea l'effetto lucido
Crea una nuova chiamata di livello "Vetro"
Seleziona lo strumento selezione retangolare, assicurati di aver selezionato il livello 'Pulsante'. Tieni premuto il tasto Ctrl e fai clic sul pulsante 'Livelli'”s miniatura del livello. Ora il tuo pulsante dovrebbe essere evidenziato.
Seleziona il pulsante "Vetro" ora, tieni premuto il tasto Alt con lo strumento selezione retangolare selezionato. Disegna (taglia) attraverso la metà inferiore del pulsante come nell'immagine qui sotto.
Riempi l'area selezionata con il colore bianco #ffffff usando Paint Bucket Tool
Regola l'opacità al 18%
Dovresti avere un pulsante lucido simile a questo.
Passaggio 4 - Sovrapposizione pattern
Diamo al bottone un leggero motivo di sovrapposizione. Userò lo stripe5px personalizzato creato in precedenza. Crea una nuova chiamata di livello "Pattern" tra "Button" e "Glass" e procedi con le opzioni di fusione.
Seleziona Sovrapposizione modello, scegli Stripe5px (o qualsiasi modello che hai creato) e fai clic su OK, quindi chiudi il dialogo.
Assicurati di essere ancora sullo strumento Selezione rettangolare, tieni premuto
Passaggio 5: inserimento del testo
Lanciare un testo casuale di colore bianco #ffffff con le seguenti impostazioni
Usa i seguenti effetti di fusione sul livello del mio testo.
Ombra esterna
Step 6 - Output finale
Dovresti ottenere un'immagine come questa.
