Come creare Web 2.0 Bottoni in Photoshop

August 5

Come creare Web 2.0 Bottoni in Photoshop


Il Web 2.0 è uno stile popolare nel web design. Tasti di Web 2.0 aspetto tridimensionale e lucido, come una bolla, come se stessero saltar fuori dello schermo. Il processo di creazione di pulsanti web 2.0 comporta un sacco di sfumature e lavoro layer.

istruzione

1 Aperto Photoshop, creare un nuovo file e impostare le dimensioni della tela di quale sarà la dimensione del pulsante. Prendete lo strumento forma dalla barra degli strumenti, scegliere un rettangolo arrotondato o un cerchio, dato che è più comune in stile web 2.0. Selezionare un colore per il pulsante, e fare clic e trascinare per creare la forma in modo che quasi riempie la tela. Lascia un paio di pixel intorno ad esso per un bordo. Quindi, fare clic con il livello forma nel pannello Livelli e selezionare "Rasterizza."

2 Selezionate lo strumento sfumatura. Date un'occhiata nel menu gradiente discesa proprio sotto la barra dei menu nella parte superiore dello schermo, e trovare una sfumatura a due colori utilizzando il colore della forma e nero. Se non vedi i colori desiderati, fare clic sull'immagine pendenza in nella parte superiore del menu, invece. Questo vi porterà a una finestra di dialogo in cui è possibile modificare, creare e salvare sfumature personalizzate. Fai la tua gradiente utilizzando i cursori. Una volta che hai il gradiente è necessario, impostare il gradiente di opacità al 40%. Poi, Ctrl-clic o Comando-clic sull'icona livello nel pannello di livello per selezionare i pixel in quello strato. Fare clic e trascinare da cima a circa l'80% verso il basso la forma per applicare il gradiente. Ora, utilizzando lo strumento di testo, creare una casella di testo e digitare il testo per il pulsante. Torna il puntatore del mouse normale e posizionare il testo al centro del pulsante.

3 Aggiungere un ictus a 1 o 2 pixel per il testo usando stili di livello. Rendere il colore del tratto un po 'più scuro del vostro colore pulsante. Fare lo stesso per il vostro livello di pulsante. Effettuare una nuova forma la stessa forma del pulsante originale, ma circa il 90% più ampio e il 50% alto come l'originale. Posizionare nel centro e vicino alla parte superiore della forma originale pulsante. Rasterizzare la forma come avete fatto con la vostra prima forma. Selezionare i pixel di controllo-o Comando-clic sull'icona strato e cancellare l'area selezionata del tutto. Ora, scegliere nuovamente lo strumento gradiente e creare un gradiente che va dal bianco al trasparente. Ora che sapete come da l'ultimo passo, dovrebbe essere facile. Applicare il gradiente cliccando e trascinando verso il basso attraverso la forma in modo che il bianco è sulla parte superiore e sfuma verso il basso per trasparente.

4 Seleziona il tuo livello di pulsante originale nel pannello Livelli e fare doppio clic su di esso per aprire la finestra di dialogo Stile livello. Da qui, selezionare "Bagliore interno" dalla colonna a sinistra e impostare l'opacità al 50%. Rendere il colore della tua Glow stessa tonalità come il pulsante, ma un po 'più leggero. Per far sembrare ancora più tridimensionale, aggiungere un'ombra al testo tramite stili di livello per il livello di testo. Questo rende l'aspetto di testo come se è posa sulla cima di una bolla lucida semitrasparente.

Consigli e avvertenze

  • Utilizzare un rettangolo arrotondato o di un cerchio per il pulsante, e utilizzare un font moderno dall'aspetto per il testo pulsante. Un tipo di carattere come Times New Roman apparirebbe strano su un pulsante così fresco, 3-D.
  • E 'bello sperimentare gli effetti, ma non esagerare con loro. Troppi o troppo di un buon effetto fa sembrare di formaggio.