Bottoni gloss con Gimp e Inkscape
Non saranno necessarie conoscenze dei due programmi per seguire il tutorial; sono entrambi freeware e multipiattaforma, ovvero disponibili per Window, Mac e Linux.
Siamo pronti ad iniziare la prima parte che realizzeremo con Inkscape. Ecco come si presenta il programma una volta lanciato:
Figura 1 - Il programma Inkscape appena 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:
Figura 2 - Lo strumento rettangolo
A questo punto disegnamo un rettangolo: basterà premere con il tasto sinistro sull'area di lavoro e tener premuto trascinando il cursore:
Figura 3 - Disegnare il rettangolo
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:
Figura 4 - Regolare altezza e larghezza
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:
Figura 5 - Impostare il colore di riempimento
Una volta scelto il colore, imposteremo quindi il gradiente lineare come riempimento, ottenendo questo:
Figura 6 - Aggiungere un gradiente lineare
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:
Figura 7 - Regolare gradiente e angoli arrotondati
Aggiungeremo poi un bordo al rettangolo: sempre dalla finestra Riempimento e contornicolore unico e definiremo il colore del bordo del bottone: imposteremo i bordi su
Figura 8 - Il colore del bordo
Passando alla tab Stile contorno imposteremo quindi il bordo spesso 1 pixel:
Figura 9 - Regolare lo spessore del bordo
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.
Figura 10 - 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:
Figura 11 - Ridimensionare il nuovo rettangolo
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:
Figura 12 - Allineare i due oggetti
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:
Figura 13 - Il gradiente per l'effetto gloss
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:
Figura 14 - Regolare l'opacità
Ecco quindi il nostro bottone ultimato:
Figura 15 - Il 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:
Figura 16 - Salvare il lavoro
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:
Figura 17 - Esportare in formato PNG
Il nostro bottone è così ultimato. Ecco il risultato finale:
Figura 18 - Il bottone ultimato
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:
Figura 19 - Aprire il PNG
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:
Figura 20 - Creare un nuovo file
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:
Figura 21 - Configurare la griglia
Sempre dal menu View, selezioneremo Show Grid per mostrare la griglia appena impostata e Snap to Grid per ancorare oggetti e selezioni alla griglia:
Figura 22 - Impostare la 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:
Figura 23 - Incollare il bottone
L'operazione andrà eseguita una seconda volta, incollando il bottone nella parte inferiore:
Figura 24 - Replicare il bottone
Dal pannello strumenti andremo quindi a premere lo strumento di selezione rettangolare:
Figura 25 - La selezione rettangolare
Per poi selezionare il bottone in basso:
Figura 26 - 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":
Figura 27 - Modificare colore e saturazione
Il nostro bottone è così ultimato, vediamo il risultato della trasformazione:
Figura 28 - I due stati per il rollover
Non ci resta che salvare il lavoro, dal menu File -> Save:
Figura 28 - Salvare il lavoro
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:
Figura 29 - Il risultato finale
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!
Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog:
Commenti
Posta un commento