Bottoni gloss con Gimp e Inkscape

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.

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

screenshot

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

screenshot

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

screenshot

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

screenshot

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

screenshot






Una volta scelto il colore, imposteremo quindi il gradiente lineare come riempimento, ottenendo questo:

Figura 6 - Aggiungere un gradiente lineare

screenshot

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

screenshot

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

screenshot

Passando alla tab Stile contorno imposteremo quindi il bordo spesso 1 pixel:






Figura 9 - Regolare lo spessore del bordo

screenshot

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

screenshot

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

screenshot

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

screenshot

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

screenshot

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à

screenshot

Ecco quindi il nostro bottone ultimato:

Figura 15 - Il bottone ultimato

screenshot

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

screenshot

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

screenshot

Il nostro bottone è così ultimato. Ecco il risultato finale:

Figura 18 - Il bottone ultimato

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

screenshot

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

screenshot

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

screenshot

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

screenshot

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

screenshot

L'operazione andrà eseguita una seconda volta, incollando il bottone nella parte inferiore:

Figura 24 - Replicare il bottone

screenshot

Dal pannello strumenti andremo quindi a premere lo strumento di selezione rettangolare:

Figura 25 - La selezione rettangolare

screenshot

Per poi selezionare il bottone in basso:

Figura 26 - Selezionare il bottone in basso

screenshot

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

screenshot

Il nostro bottone è così ultimato, vediamo il risultato della trasformazione:

Figura 28 - I due stati per il rollover

screenshot

Non ci resta che salvare il lavoro, dal menu File -> Save:

Figura 28 - Salvare il lavoro

screenshot

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

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!

fonte: Grafica.htm

Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog:


Commenti

Post popolari in questo blog

Rilasciano BlenderBot v3, un chatbot che utilizza il loro modello OPT e aprono la demo per testarlo

Componenti aggiuntivi di Google Workspace

Come rimuovere il virus che trasforma le cartelle in collegamenti nella tua pendrive.