In questo tutorial vedremo come sia possibile realizzare bottoni con effetto gloss
e pronti per il rollover con InkScape e
Gimp, molto simili a quelli degli articoli Bottoni con rollover
e Bottoni con rollover flessibili. Nella prima parte prepareremo un bottone singolo con Inkscape,
per poi procedere con la realizzazione grafica dei due stati con Gimp.
Non saranno necessarie conoscenze dei due programmi per seguire il tutorial; sono
entrambi freeware e multipiattaforma, ovvero disponibili per Window, Mac e Linux. Prima di cominciare,
ci tengo a ricordare che qui su HTML.it sono disponibili la Guida a Gimp
e la Guida a Inkscape.
Siamo pronti ad iniziare la prima parte che realizzeremo con Inkscape. Ecco come si presenta il programma una volta lanciato:
All'avvio, c'è già l'area di lavoro impostata e siamo pronti per cominciare. Selezioniamo lo strumento rettangolo sulla barra strumenti a sinistra del programma:
A questo punto disegnamo un rettangolo: basterà premere con il tasto sinistro
sull'area di lavoro e tener premuto trascinando il cursore:
Ora aggiustiamo le dimensioni del nostro rettangolo. Con lo strumento freccia
selezioneremo il rettangolo appena disegnato, per poi immettere nella barra strumenti
in alto la larghezza e l'altezza del nostro bottone:
Per poter lavorare meglio, selezionare lo strumento lente per ingrandire
fino alla dimensione voluta il rettangolo. Ricordo che con il tasto Shift
premuto insieme alla lente, diminuiremo le dimensioni di visualizzazione.
Assegneremo quindi un colore al rettangolo. Dal menu Oggetto selezioneremo
la voce Riempimento e contorni: si aprirà una nuova finestra. Imposteremo il
riempimento con colore unico e sceglieremo il colore dominante del bottone:
Una volta scelto il colore, imposteremo quindi il gradiente lineare come riempimento,
ottenendo questo:
In un passo solo andremo a sistemare il gradiente lineare e arrotonderemo gli
angoli del rettangolo. Per la prima operazione sposteremo i due estremi della linea del
gradiente; mentre per aggiungere gli angoli arrotondati sposteremo il pallino in alto
a destra del rettangolo:
Aggiungeremo poi un bordo al rettangolo: sempre dalla finestra Riempimento e contorni
imposteremo i bordi su colore unico e definiremo il colore del bordo del bottone:
Passando alla tab Stile contorno imposteremo quindi il bordo spesso 1 pixel:
Ora dovremo creare un altro rettangolo arrotondato per conferire l'effetto gloss
al bottone. Con il tasto freccia selezioneremo il rettangolo, per poi premere con
il tasto destro e selezionare Copia. Dal menu Modifica selezioneremo
quindi incolla in origine.
Il nuovo rettangolo avrà le stesse dimensioni del primo e verrà disposto esattamente sopra.
Sempre con la freccia, cliccheremo ripetutamente sul rettangolo fino alla comparsa delle
maniglie per ridimensionarlo. Lo renderemo circa la metà dell'altezza originale e un po'
più stretto, in questo modo:
Ora allineeremo i due rettangoli: con la freccia e il tasto shift
premuto li selezioneremo entrambi, per poi cliccare dal menu Oggetto sulla voce Allinea e Distribuisci:
A questo punto sistemeremo forma e colore del rettangolo per l'effetto gloss. Dalla finestra
Riempimento e contorni elimineremo i bordi.
Cliccheremo poi ripetutamente sul rettangolo con lo strumento freccia fino
alla comparsa della linea di gradiente. Cliccheremo quindi sull'estremo inferiore
della linea, impostando il colore bianco. Regoleremo quindi gli angoli arrotondati in modo
che si accordino bene con il nostro bottone. Si potranno ora spostare i due estremi
della linea di gradiente a piacimento per conferire un'effetto più o meno marcato. Ecco
il risultato finora:
Siamo così arrivati all'ultima operazione: regoleremo la trasparenza del rettangolo
per l'effetto gloss, impostando sul valore 66% circa il valore dell'Opacità generale
della voce Riempimento:
Ecco quindi il nostro bottone ultimato:
Ricordo che per poterlo osservare a dimensioni un po' più
realistiche basterà cliccarci sopra con la lente, tenendo premuto il tasto Shift.
Ora non ci resta che Salvare il nostro lavoro nel formato più conveniente,
dal menu File - Salva:
Lo esporteremo infine in formato PNG. Dal menu File
sceglieremo Esporta bitmap. Sceglieremo quindi di esportare
il disegno, e sceglieremo il percorso e il nome del file:
Il nostro bottone è così ultimato. Ecco il risultato finale:
Ricordo che è possibile infine cambiare il suo
colore globale intervenendo solo sul colore e i bordi del rettangolo più grande,
dato che l'effetto gloss dà sempre sul bianco.
Da notare inoltre che il file PNG esportato sarà di default semi-trasparente.
Se si volesse eliminare la trasparenza, oppure assegnare un altro colore di sfondo,
basterà intervenire sul pannello Proprietà documento disponibile
nel menu File. È infine possibile regolare le dimensioni del bottone a piacere,
per esempio per ottenere un bottone più largo.
Un bottone pronto per il rollover con Gimp
Una volta ottenuto il nostro bottone gloss con InkScape, ulteriori modifiche
e/o elabolazioni risultano più comode con un programma di editing e disegno bitmap,
ad esempio Photoshop o Gimp. In questa seconda parte "raddoppieremo" il nostro bottone
così da renderlo pronto per il rollover, ottenendo un'immagine sullo stile di
quelle usate negli articoli Bottoni con rollover e
Bottoni flessibili con rollover.
Una volta lanciato Gimp, apriamo il file PNG che abbiamo creato con Inkscape
dal menu File, scegliendo la voce Open:
Ora apriremo un nuovo file che conterrà il nostro bottone, dal menu File -> New,
di dimensione 150x70 pixel, ovvero con la stessa larghezza del bottone originale ma altezza doppia:
Per poter lavorare di precisione dovremo servirci delle griglie. Sulla nuova immagine,
impostiamo quindi una griglia 5x5, selezionando la voce Configure Grid
dal menu View:
Sempre dal menu View, selezioneremo Show Grid per mostrare
la griglia appena impostata e Snap to Grid per ancorare oggetti e selezioni
alla griglia:
Ora cliccheremo sul file realizzato con Inkscape, e con Select -> All
selezioneremo l'intera immagine, per poi copiarla con Edit -> Copy.
Torneremo sull'immagine nuova con le griglie, e dal menu Edit
sceglieremo Paste per incollarla. La selezione appena incollata
andrà quindi spostata in alto. Da notare come la griglia risulti d'aiuto nello spostamento:
L'operazione andrà eseguita una seconda volta, incollando il bottone nella parte inferiore:
Dal pannello strumenti andremo quindi a premere lo strumento di selezione rettangolare:
Per poi selezionare il bottone in basso:
Ora sono moltissime le trasformazioni che potremo effettuare sul bottone in stato rollover,
molte delle quali sono disponibili dal menu Image -> Adjustements. Per intervenire
sul colore e la saturazione ad esempio, sceglieremo Hue - Saturation, le cui modifiche
sono immediatamente visibili sull'immagine spuntando la casella "Preview":
Il nostro bottone è così ultimato, vediamo il risultato della trasformazione:
Non ci resta che salvare il lavoro, dal menu File -> Save:
Il formato con cui conviene salvarlo è come file Gimp (estensione XCF), file Photoshop (PSD) oppure
in PNG così da avere un bottone pronto per l'uso in pagine web. Ecco quindi il risultato a dimensione naturale:
Conclusioni e download
In questo articolo abbiamo visto come ottenere un bottone gloss con effetto rollover
con Inkscape e Gimp, attraversando sostanzialmente tutti i passi della sua realizzazione. C'è
da dire che il lavoro si sarebbe potuto realizzare anche esclusivamente con uno dei due programmi,
ma ho voluto mostrare come lavorare con un programma vettoriale e bitmap assieme o in sequenza
consenta molta flessibilità, considerando soprattutto l'intuitività di Inkscape e le potenzialità
di Gimp.
Sorgenti ed immagini sono disponibili per il download. Buon divertimento!
