Creiamo un’userbar con The Gimp!

• Software di fotoritocco professionale (in questo caso The Gimp, scaricabile gratuitamente dall’indirizzo http://www.gimp.org)
• Font true-type”Visitor” (link 1), (link 2), (link MrDoT)

E’ possibile scaricare le sfumature “Userbar_Ombra”, “Userbar_Riflesso” e i vari pattern dal link presente alla fine della pagina.

Step 1 – PreparazionePer prima cosa è necessario scaricare il file font true-type da uno degli indirizzi sopra riportati e installarlo subito nella cartella C:WindowsFonts perchè ogni userbar che si rispetti ha un testo sulla destra con quel carattere.
A questo punto è possibile avviare Gimp e creare un nuovo progetto cliccando su File | Nuovo…  (Ctrl + N) e impostando le seguenti dimensioni:   larghezza: 350 px           altezza: 19 px
lasciando invariate le altre opzioni.
Verrà ora creata un’userbar bianca con le dimensioni 350×19. Consiglio di salvare il file come modello (File | Salva come modello…) dando un nome e pigiando su OK, in modo tale che il preset “Userbar” compaia tra i modelli disponibili quando creiamo un nuovo file.
Rinominiamo (se non è già così) l’unico livello presente come “Sfondo” e creiamo, con una o più sfumature, lo sfondo della nostra userbar (è possibile anche sfruttare più livelli per lo sfondo, a patto che siano tutti in secondo piano rispetto agli altri livelli).

Step 2 – Lo sfondo

Per la prima userbar nel nostro esempio useremo una sfumatura molto semplice, lineare, dal rosso al blu.
Scegliamo lo strumento Sfumatura (L) e scegliamo come colore di primo piano il rosso e come colore di secondo piano il blu; ora assicuriamoci che sia selezionato il gradiente “da pp a sf (HSV orario)“ (che significa che la sfumatura sarà creata con i colori di primo piano e di sfondo) e tracciamo con il mouse una linea che parte dal punto in cui vogliamo la maggior concentrazione del colore di primo piano al punto in cui vogliamo la maggior concentrazione del colore di secondo piano.

Quando il livello dello sfondo è soddisfacente possiamo andare avanti.Step 3 – Ombre e riflessi

Prima di aggiungere gli altri oggetti secondo me è opportuno aggiungere gli effetti luce e gli effetti d’ombra.
Per fare questo creiamo due livelli, chiamati rispettivamente “Ombra” e “Riflesso“, tenendo conto del fatto che i livelli d’ombra e di riflesso devono essere in cima al pannello dei livelli (devono essere in primo piano rispetto a tutti i livelli dell’userbar).

A questo punto selezioniamo il livello “Ombra”, scegliamo lo strumento Sfumatura (L) e il gradiente Userbar_Ombra e tracciamo una linea verticale per creare l’effetto ombra. Sono necessari diversi tentativi, sentitevi liberi di fare molte prove per vedere l’effetto e per cercare la sfumatura migliore.
Una volta terminata l’applicazione dell’ombra, selezioniamo il livello “Riflesso”, lasciamo lo strumento Sfumatura e selezioniamo questa volta il gradiente Userbar_Riflesso. Come per l’ombra, dobbiamo tracciare una linea verticale per creare l’effetto riflesso, anche questa volta sono necessari abbastanza tentativi per cercare l’effetto ‘perfetto’…
Ora che abbiamo creato questi due effetti, che possono essere abilitati o disabilitati semplicemente agendo sulla visibilità dei livelli “Ombra” e “Riflesso”, passiamo oltre.

Step 4 – Pattern

Questo passo consiste nel creare ed usare un particolare pattern (motivo) da mettere in primo piano.
Creiamo un nuovo file, di dimensioni 6×6 pixel con sfondo trasparente. Disegnamo una linea obliqua (anche con la matita, occorrerà comunque zoomare) dal vertice inferiore sinistro al vertice superiore destro, dopodiché bisogna cliccare su File | Salva come…, bisogna localizzare la cartella dell’utente e salvare il file come pattern: per fare questo è sufficiente aggiungere l’estensione .pat alla fine del nome del file. Occorrerà poi dare un nome al pattern per essere meglio localizzato.
Ora è consigliabile ricaricare la lista dei pattern disponibili cliccando sull’apposito pulsante nella finestra dei Motivi.

Ora bisogna creare un nuovo livello chiamato “Pattern”, che conterrà il pattern (righe oblique parallele, tipiche di ogni userbar).
Dopo aver salvato sul proprio PC i pattern per l’userbar è possibile applicarli con lo strumento Riempimento con l’opzione “Riempi con motivi”. I pattern vanno salvati nella sottocartella Patterns cartella dell’utente (C:Documents and Settingsnomeutente.gimp-2.4) prima di avviare Gimp, altrimenti sarà necessario ricaricare la lista dei pattern (c’è l’apposito pulsante).

La comodità di gestire ogni disegno con i livelli è data dal fatto che un effetto si può applicare o rimuovere senza agire sul file d’immagine, semplicemente mostrando o nascondendo il livello interessato. Infatti per aggiungere o rimuovere il pattern, una volta che il livello sarà completato, basterà impostare la proprietà del livello a “visibile” (userbar con pattern)  o “nascosto” (userbar senza pattern).

Step 5 – Rifiniture grafiche

Questo probabilmente è il passo più difficile in quanto richiede un po’ di conoscenze nell’uso di Gimp. Infatti questa è la parte che contiene le abilità di fotoritocco (bisogna prendere immagini contenute in dei files e adattarle all’userbar).
In questo tutorial mi limiterò a spiegare come inserire un logo o una parte di un’immagine all’interno dell’userbar.

Intanto apriamo il file d’immagine con il comando File | Apri… (Ctrl + O), poi scegliamo lo strumento Selezione rettangolare (R).
Ora, se ce n’è bisogno facciamo qualche colpo di zoom, selezioniamo un’area dell’immagine significativa (quale può essere ad esempio il viso di una persona o la parte più importante di un logo di qualunque tipo) facendo attenzione alle dimensioni dell’area: dobbiamo ricordare che dovremo scalare l’immagine, quindi una selezione troppo grande tenderebbe a perdere qualità man mano che viene rimpicciolita; quindi dobbiamo scegliere una selezione rettangolare larga ma non troppo alta (l’altezza non deve essere molto maggiore dei 20-25 pixel, è possibile aiutarsi con le dimensioni dell’area corrente scritte nel pannello inferiore della finestra dell’immagine).
Quando la selezione è completa, clicchiamo su Immagine | Ritaglia alla selezione…  per eliminare il resto dell’immagine che, adesso, non serve più. L’area di lavoro si dimensionerà automaticamente secondo le dimensioni della selezione.
Clicchiamo ora su Immagine | Scala immagine… e scegliamo le dimensioni finali impostando l’altezza a 19 pixel (la larghezza verrà automaticamente determinata.

Adesso torniamo al progetto dell’userbar e clicchiamo su Modifica | Incolla dentro, per incollare, come livello, l’immagine scalata nel progetto. Grazie a questa conversione (da immagine a livello immagine) è possibile spostare, modificare, cambiare la trasparenza e personalizzare in qualunque maniera l’immagine o il logo senza doversi preoccupare degli altri livelli che non saranno intaccati.
Dopo aver finito le rifiniture grafiche è possibile procedere.

Step 6 – Aggiunta del testo

Il passo finale consiste nell’aggiungere il testo, fondamentale in una userbar; potremo scrivere quello che ci pare, che sia legato in qualche maniera all’immagine o al logo presente oppure alla combinazione di colori e forme della nostra userbar.
Scegliamo lo strumento Testo (T) e selezioniamo il carattere Visitor TT2 (BRK) e impostiamo la dimensione del carattere a 13 px.
Impostiamo anche il colore di primo piano bianco e finalmente clicchiamo sul punto in cui desideriamo che inizi il nostro testo.
Scriviamo quello che vogliamo (ad esempio: FIREFOX USER) e clicchiamo su Chiudi per chiudere la finestra di modifica testo.
Spostiamo il testo a piacere nella posizione che più desideriamo, poi riprendiamo lo strumento Testo (T) e clicchiamo, dalla finestra principale di Gimp, il pulsante Tracciato dal testo (presente in basso, tra le opzioni dello strumento Testo); questo creerà un tracciato corrispondente al testo appena creato.
Ora creiamo un nuovo livello trasparente e lo posizioniamo, come ordine, subito sotto al livello testuale e, una volta selezionato come attivo, clicchiamo su Seleziona | Dal tracciato, e una selezione comparirà come per magia.
Clicchiamo su Seleziona | Allarga… e impostiamo 1 px, cliccando infine su OK.
A questo punto selezioniamo strumento Riempimento (Shift + B) e coloriamo di nero la selezione del nuovo livello. Se è già stato fatto rendiamo visibile il livello del testo et voilà! Il testo bianco è contornato di nero, proprio come in una vera userbar!
Nella finestra dei livelli clicchiamo sul livello testuale col tasto destro e poi su Fondi in basso… per unire il livello del testo e quello del contorno. E’ possibile in questo modo spostare il testo contornato come un blocco unico, nel caso ce ne fosse il bisogno.

Step 7 – Aggiungere il bordo all’userbar

Questo è facoltativo, ma rende un ottimo impatto grafico e lo consiglio in ogni userbar.
Il bordo, nelle userbar, è nero e dello spessore di un pixel.
Clicchiamo su Immagine | Dimensione superficie, clicchiamo sull’ancora per evitare di ridimensionare in modo proporzionale e scriviamo, nei campi della Larghezza e dell’Altezza rispettivamente i valori 348 e 17 e clicchiamo sul pulsante Centra.
Ora clicchiamo col tasto destro sull’immagine e scegliamo Filtri | Decorazioni | Aggiungi bordo… e selezioniamo come valori X e Y 1 pixel e il colore nero; questo aggiungerà un bordo di 1 pixel a tutta l’immagine, così l’area di lavoro diventerà più grande di due pixel per lato, ristabilendo le dimensioni regolari di una corretta userbar.

Il lavoro è terminato, facciamo gli ultimi ritocchi e siamo finalmente pronti a esportare l’userbar come immagine!
Clicchiamo su File | Salve come…, scegliamo la destinazione e salviamo come Userbar.png e clicchiamo su OK nelle finestre che seguono. La nostra userbar è pronta!