Tramite questa guida vi insegno come creare con il noto software di grafica Adobe Photoshop un bottone in stile Web 2.0, come quello mostrato di seguito.
Apriamo il nostro amato Photoshop poi creiamo un nuovo tavolo di lavoro, le dimensioni non contano proprio. Io però vi consiglio di crearne uno grande per i primi esperimenti, così per muoversi meglio. Per esempio potete crearne uno di dimensioni 300x300 pixel, poi quando volete potete ridurle.
Ora creiamo il nostro bottone o pulsante, chiamatelo come volete...
Per fare questo, che sarà il nostro primo passo, selezioniamo lo strumento "Rettangolo Arrotondato" dalla nostra barra laterale. Poi nella barra delle opzioni, sotto quella dei menù dobbiamo cliccare sull'opzione che ci permette di disegnare solamente il Tracciato. Per capire meglio guardate l'immagine di seguito.
Ora dobbiamo solo disegnare il contorno del nostro bottone, le dimensioni le facciamo ad occhio, in quanto ognuno poi le adatterà al suo stile web scelto.
Come vedrete una volta disegnato ci comparirà solamente il contorno, anche detto Tracciato. Per poter continuare a disegnare ci serve però creare un nuovo livello e chiamarlo "Bottone", poi selezioniamo la paletta denominata, appunto, "Tracciato".
Per selezionarla bisogna cliccare con il tasto sinistro tenendo premuto il tasto CTRL, prima è meglio che siate sicuri che il livello selezionato sia quello denominato "Bottone" e non quello di sfondo!
Se avete fatto tutto bene vedrete il bordo del nostro bottone diventare tratteggiato e muoversi, comunque potete prendere esempio dall'immagine seguente.
Bene non ci rimane altro che creare gli stili del bottone cioè colore di sfondo, traccia e altre cose che possiamo aggiungere.
Lo sfondo del bottone messo come esempio da me, vedi prima immagine, è stato creato tramite lo strumento "Sfumatura", questo perchè mi ha dato la possibilità di unire due colori per creare una specie di effetto luce chiaro scuro. Ma non è detto che vanno sempre fatti così, potete poi utilizzare anche solo un colore.
Selezioniamo lo strumento "Sfumatura", poi selezioniamo due colori simili ma uno più scuro dell'altro, come da immagine seguente.
Per creare l'effetto che sembra dare una luminosità proveniente dall'alto al bottone dobbiamo cliccare nel basso del nostro rettangolo e poi tenere premuto mentre trasciniamo verso l'alto. Vedrete come in automatico la sfumatura segue la direzione della linea che si è creata tenendo premuto e tracciando la riga.
Creiamo ora il bordo, per farlo è molto semplice, basta infatti andare nella barra dei menu, poi in Modifica -> Traccia.... Poi mettiamo le dimensioni del bordo, di solito è 1px perchè non deve essere troppo ingombrante, ed infine il colore: io ho messo un blu scuro per creare un bel contrasto.
Ultimo tocco da effettuare a questo livello è la creazione del secondo bordo (quello bianco che vedete nel bottone di esempio) bianco. Per farlo bisogna contrare il Tracciato, come?? Semplice andate in barra dei menu -> Selezione -> Modifica -> Contrai... . Quindi mettiamo come dimensione di contrattura (non so se esiste questa parola...) 1px e confermiamo.
Ora ridisegniamo la traccia, questa volta però il colore sarà bianco, dimensione sempre 1px!
Perfetto il bottone è stato creato, anche se non è finita qui, per vedere il risultato e de selezionare il tracciato teniamo premuti insieme i pulsati CTRL+D.
Dovrete avere come risultato l'immagine seguente:
Siamo quindi a buon punto, non ci rimane altro che creare il testo e l'effetto lucido.
Per il testo la cosa è molto semplice, basta infatti creare un nuovo livello poi andare sullo strumento "Testo" e scrivere un testo! (Ho usato poche volte la parola testo...)
Vi dico solo che noi abbiamo utilizzato il Font "Maiandra GD" di dimensione 36 pt e colore bianco, dato che ognuno utilizza lo stile che vuole non sto qui a dilungarmi su come scrivere tre lettere...
Veniamo all'ultimo punto, quello più bello secondo me, come creare l'effetto lucido del bottone.
Farlo è molto più semplice di quello che uno può pensare, infatti abbiamo già tutti gli elementi solo che dobbiamo un po' modificarli.
Primo, creiamo un nuovo livello e lo chiamiamo "Effetto Lucido", poi andiamo ancora nella paletta dei tracciati e riselezioniamolo (come abbiamo fatto prima tenendo premuto CTRL mentre clicchiamo).
Una volta selezionato coloriamolo con lo strumento "Secchiello" tutto con il colore bianco. Se il livello non è stato messo come primo l'effetto non sarà visualizzato, quindi provvediamo a portarlo al primo posto. L'immagine di risultato sarà un bottone tutto bianco che non si avvicina per niente all'effetto lucido, ma provate a diminuire l'opacità fino al 30%!
Avrete un'immagine del genere:
Ultimo passo è quello di ritagliare la parte che non deve essere lucida, lo facciamo con lo strumento "Selezione Elittica", sempre dopo aver controllato di aver selezionato il livello "Effetto Lucido"!
Vedrete che le prime volte sarà una fatica bestia trovare il buon punto per dare un'effetto reale alla lucentezza del bottone... Ma piano piano ci si riesce.
A questo punto basta cancellare la parte selezionata con il tasto CANC ed otterremo l'effetto desiderato!!
Ecco qua il nostro bel bottone in stile Web 2.0!
