Photoshop Crea pulsante Web 2.0
Pulsanti Le esercitazioni di Photoshop sono probabilmente una delle categorie più scottanti in qualsiasi sito di esercitazioni di Photoshop e dal momento che il Web 2.0 è un argomento così caldo ora, facciamo un semplice pulsante adatto per qualsiasi applicazione Web 2.0 di siti Web. Tutorial dopo il salto.
Crea una tela bianca a circa 500 px (larghezza) x 400 px (altezza) per avviare la progettazione del pulsante. Crea una nuova chiamata di livello 'BG01'. Seleziona il Strumento rettangolare arrotondato, tenere premuto MAIUSC e tracciare un quadrato arrotondato al centro. Qualsiasi colore va bene allo stato attuale.
Richiama il Opzioni di fusione di 'BG01'e regola i seguenti stili:
Ombra esterna
- Opacità: 40%
- Distanza: 0px
- Spread: 0%
- Dimensioni: 6px
Sovrapposizione graduale
- Arresto del colore: 0%, # d00031
- Arresto del colore: 100%, # ff2b5d
Tenere premuto CTRL, fare clic con il tasto sinistro su 'BG01'Anteprima livello per selezionare la sua forma. Partire Selezionare -> Modificare -> Contrarre e inserisci il valore '2px'. Questo ridurrà l'area selezionata di 2 pixel.
Crea una nuova chiamata di livello 'BG02'e riempiva l'area evidenziata (dopo il restringimento) con qualsiasi colore. Io uso # 000000 nero qui. Fare doppio clic su "bg02" per avviare Opzione di fusione e modificare il seguente stile.
Sovrapposizione graduale
- Arresto del colore: 0%, # c6002f
- Arresto del colore: 100%, # c6002f
Crea un altro nuovo livello per il testo, chiamalo 'testo'. Inserisci il testo del tuo pulsante. Userò un alfabeto per rappresentare. Gli stili di carattere che sto usando qui sono i seguenti:
- Arrotondato Arial Bold
- 150pt
Lo stesso, dopo aver deciso il tuo testo, fai doppio clic su "txt" per avviare il Opzioni di fusione e modificare i seguenti stili.
Ombra esterna
- Opacità: 25%
- Distanza: 0px
- Spread: 0px
- Dimensione: 5px
Ombra interiore
- Opacità: 10%
- Distanza: 0px
- Choke: 0
- Dimensioni: 10px
Rilievo smussato
- Profondità: 1px
- Direzione: giù
- Dimensione: 0 px
- Softten: 0px
- Modalità luce Opacità: 32%
- Opacità in modalità ombra: 32%
Sovrapposizione graduale
- Arresto colore: 0% # d2d2d2
- Color Stop: 100% # f0efef
Il pulsante è quasi finito. Diamogli un po 'di bagliore sulla parte superiore. tenere CTRL, clic sinistro 'BG02'Miniatura di livello per evidenziare la forma esterna; scegliere Strumento di selezione di Eclipse. Adesso aspetta ALT, con lo strumento Selezione ellittica selezionato, trascinare fino alla metà inferiore inferiore dell'area evidenziata. Fare riferimento all'immagine sopra.
Con la porzione superiore evidenziata e lo strumento Selezione ellissi ancora selezionato, fare clic con il pulsante destro del mouse e scegliere Piuma; accedere 15px per il raggio.
Crea un nuovo livello, chiamalo 'splendore'e riempire la parte evidenziata con bianco [#ffffff]. Questo dovrebbe aggiungere l'effetto bagliore alla parte superiore del tuo pulsante. Il prodotto finale dovrebbe assomigliare all'immagine qui sotto.
Qualcosa in più ...
Tweak le opzioni di fusione di 'BG01' e 'BG02'ti darò bottoni più interessanti. Ecco un altro tutorial di Photoshop sul pulsante che ho fatto in precedenza - Crea pulsante lucido per Web 2.0
Scarica il campione
