Come creare bottoni per il web con Photoshop CS5



Vi illustrerò una semplice e breve guida per creare bottoni con Photoshop CS5. In questa guida vengono descritte le varie fasi da seguire:

1) Aprite Photoshop e create una nuova immagine (della dimensione da voi preferita) con sfondo trasparente. Selezionate lo strumento rettangolo, rettangolo arrotondato o ellisse, dipende dal tipo di bottone che volete creare, e disegnate la forma con il colore che preferite.

2) Ora sulla barra di menu in alto cliccate su Livello -> Stile livello e scegliete Smusso ed effetto rilievo e potete applicare vari effetti tra cui ombre, bagliori, ecc e modificare la profondità e l’attenuazione di questi. Oppure cliccando su Stili potete scegliere uno stile predefinito.

3) Ora create un nuovo livello ed inserite il vostro testo. Cliccate di nuovo su stile livello e selezionate Sovrapposizione sfumatura e Smusso ed effetto rilievo. Nella struttura potete scegliere tra gli stili che preferite effetto rilievo, effetto rilievo cuscino, smusso interno, smusso esterno (potete divertirvi scegliendo tra le varie opzione e vedrete in tempo reale in un immagine a destra i vari cambiamenti applicati al vostro bottone).

4) Potete inserire anche un vostro piccolo logo personalizzato. Per farlo create su un nuovo livello il vostro logo con lo strumento rettangolo oppure caricate un vostro logo già esistente e poi potete modificarlo sempre con lo stile livello come mostrato prima.

5) Infine se volete potete creare un effetto “vetro“. Ecco come fare: cliccate su Strumento selezione rettangolare e create un rettangolo (della dimensione del vetro che volete applicare) sul vostro livello. Cliccate, all’interno della vostra selezione, il tasto destro del mouse e selezionate Nuovo livello. Riempite la vostra selezione di bianco e impostate come opacità 15-20%.

Il vostro bottone ora è pronto. Salvate il file in formato png e il gioco è fatto.

NB. Quando salvate il file scegliete sempre il formato tra quelli disponibili. Non scrivete mai direttamente il formato manualmente in Nome file altrimenti si rischia di avere successivi problemi di visualizzazione dell’immagine.

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
  • ottimo tutorial grazie :) spero ne posterai altri similiii!! ciaoo!

Pinterest