Creare una Userbar con Inkscape
Una userbar è un’immagine che gli utenti (solitamente) dei forum inseriscono nella propria firma:
Se gestisci un sito web (ancora meglio una community di utenti) la userbar rappresenta un ottimo strumento per pubblicizzarlo; esistono diversi servizi Web per generarne una, ma per ottenere risultati più accattivanti dovrai creartela da te. Ti mostrerò come generare una userbar con Inkscape, un software open source (e gratuito) di grafica vettoriale.
Preparativi
Scaricare e installare Inkscape
Inkscape è un software multipiattaforma, oltre che gratuito. In generale, se usi Linux, Mac OS X o Windows, puoi scaricarlo dalla pagina di download di Inkscape.
Comunque sia, se usi una qualunque distribuzione di Linux, puoi semplificarti la vita installando Inkscape tramite il gestore di pacchetti della tua distribuzione; per esempio, su Debian o Ubuntu, ti basterà aprire il terminale, diventare root (comando su per Debian; sudo -s per Ubuntu) e digitare:
apt-get install inkscape
Non solo questo comando scaricherà ed installerà Inkscape, ma lo terrà anche aggiornato, quando usciranno nuove versioni (o patch di sicurezza) dello stesso.
Scaricare il modello dalla Userbar per Inkscape
Inkscape usa il formato .svg (che è anche uno standard riconosciuto dal W3C) per i propri file. E in SVG è già disponibile un modello di userbar, da cui partire per crearsi la propria.
Scarica il modello della userbar per Inkscape (fai click destro sopra il link e scegli “Salva Destinazione con nome”) e mettilo in una directory di lavoro. Il modello è rilasciato sotto licenza CC BY-SA (versioni 1.0, 2.0 e 2.5) o LGPL versione 1.2, e l’autore è Etherealflaim.
Creare la userbar con Inkscape
Perfetto, sei pronto per creare la tua userbar. Apri il modello della userbar precedentemente scaricato e segui le istruzioni. Il font tipico delle userbar è il Visitor, e, se desideri usarlo, dovrai scaricarlo ed installarlo nel tuo sistema; lo “standard” propone di non usare il grassetto né l’antialiasing, e di impostare un bordo di larghezza pari a 1 pixel.
Nota: a volte avrai bisogno di zoomare l’immagine SVG sulla quale stai lavorando: per farlo, basta usare la rotella del mouse premendo il tasto CTRL, oppure premere i pulsanti “+” e “-” sul tastierino numerico. Per ritornare velocemente allo zoom 100%, basta premere il tasto “1″ (stavolta quello della tastiera, non del tastierino numerico).
Preparare l’interfaccia per lavorare al meglio
La nuova versione di Inkscape supporta i layer (o livelli), cioè “strati” di immagini sovrapposte, in cui gli strati di livello superiore nascondono (a meno di non usare trasparenze) gli strati di livello inferiore. È possibile lavorare su un layer alla volta, nascondendo (momentaneamente) gli altri.
Il modello della userbar sfrutta appunto i layer. Per lavorare più comodamente, ti consiglio di ridurre la larghezza della finestra di Inkscape, e visualizzare la finestra per lavorare con i layer (dal menu Livello > Livelli, oppure premendo SHIFT+CTRL+L), come in figura:
Nell’immagine, l’area “2″ è la finestra dei livelli. Cliccando sugli occhi è possibile visualizzare/nascondere un livello (clicca per ingrandire)
Ora sei pronto a continuare.
Cancellare le grafiche del template
Il template riporta degli oggetti grafici di esempio, da eliminare (a parte il testo “Inkscape USER”). Nascondi tutti i livelli (cliccando sugli occhi nella finestra dei livelli) lasciando solo il livello content visibile (e selezionalo); elimina, dal livello content, tutti gli oggetti inutili. Infine fai doppio click sulla scritta per modificarne il testo, a tuo piacimento.
Personalizzare il template della Userbar
A questo punto puoi scegliere il colore della userbar, usare un gradiente e/o inserire altri oggetti grafici di sfondo.
Nota: il rettangolo che vedi è la “finestra” visibile della Userbar: tutti gli oggetti che inserirai al di fuori di tale area, non saranno visibili quando esportarai l’immagine PNG della Userbar: utilizza questa informazione a tuo vantaggio! 
Scelta del colore della Userbar (e impostazione di un gradiente)
Ora ti consiglio di lavorare nel livello vuoto Below, rendendolo visibile e selezionandolo. Premi F4 per selezionare lo strumento Rettangolo e crea un rettangolo che contenga al suo interno l’area della Userbar. Scegli infine un colore di riempimento (ad esempio, cliccando su uno dei colori in fondo, nell’interfaccia di Inkscape, o aprendo la finestra “Riempimento e contorni (SHIFT+CTRL+F)” - in Inkscape ci sono più modi per ottenere lo stesso risultato). Se al di sotto del colore desideri inserire altri oggetti di sfondo, puoi impostare la trasparenza del livello Below (impostandone l’Opacità nella finestrella dei livelli).
Dovresti ottenere un rettangolo come quello in figura:
Il rettangolo del colore di sfondo deve contenere quello relativo all’area della Userbar (clicca per ingrandire)
Se vuoi impostare un gradiente al colore della userbar, scegli lo strumento Gradiente (CTRL+F1), clicca sul rettangolo appena creato, e sposta le maniglie dei gradienti. Per impostazioni più dettagliate (come il tipo di gradiente) usa la finestra “Riempimento e contorni (SHIFT+CTRL+F)”.
Opzionale: inserire un’immagine di sfondo
Se vuoi, puoi inserire un’immagine di sfondo (da far vedere attraverso il colore di sfondo appena inserito: in questo caso dovrai rendere semitrasparente il livello Below, oppure usare un gradiente, per il rettangolo di sfondo, che sfumi verso la trasparenza - altrimenti, l’immagine di sfondo non sarà visibile).
Nella finestra dei livelli, fai click sul tasto “+” per creare un nuovo livello, e portalo al livello di fondo, facendo click sul pulsante “Sposta il livello attuale in fondo” (la freccia verso il basso più a destra); facci doppio click e rinominalo in “Image” - anche qui ti consiglio di nascondere tutti gli altri livelli, eccetto “Image”).
Assicurandoti che il livello “Image” sia selezionato, importa un’immagine (CTRL+I) già presente nel tuo hard disk, posizionala (sotto all’area della userbar), ruotarla e/o ridimensionarla. Come ti ho detto prima, tutto ciò che si trova al di fuori dell’area della userbar non verrà esportato, quindi non ti preoccupare se l’immagine è più grande di 350×19 px!
Esportare la Userbar come immagine PNG
Anzitutto, torna nel livello Below, rivisualizzandolo, e finisci di inserire altri eventuali oggetti grafici o scritte. Terminata la personalizzazione, riattiva tutti i livelli (riaprendo gli occhi). Ora sei pronto ad esportare la tua userbar come file PNG, inseribile nei forum.
Una piccola nota: puoi scegliere se visualizzare o meno le strisce (stripes) oblique, attivando o disattivando il livello Above; oppure, se le ritieni troppo “pesanti”, puoi aumentare la trasparenza del livello, agendo sull’Opacità del livello Above.
Per esportare la userbar da Inkscape, premi SHIFT+CTRL+E: ti si aprirà la finestra di dialogo Esporta Bitmap:
Come evidenziato nella figura, assicurati che sia selezionato Pagina, poi imposta la Larghezza a 350 (non preoccuparti per l’altezza: si adatterà da sola a 19 pixel) e clicca su Esporta. Il file finale, in PNG, verrà posizionato sotto la directory contenente il modello SVG (ma puoi scegliere un’altra posizione, cliccando su Sfoglia, prima di esportare).
È fatta, ora dovresti avere la tua “bella” (quanto bella, dipende molto dalla tua bravura in fatto di grafica, e dal tuo gusto estetico) userbar da inserire nelle tue firme. Spero di essere stato il più chiaro possibile; se non hai capito qualche passaggio, fammelo notare nei commenti!
Queste sono le userbar che sono stato (in)capace di creare io:
Come dicevo, il risultato finale dipende dalle proprie capacità grafiche - e io, in fatto di grafica, sono un cane! 
Perché le userbar sono “vuote”, e hanno l’icona del feed RSS? Perché queste saranno la base da cui partire per creare userbar animate con gli ultimi articoli del nostro sito:
Articoli simili:
Se questo articolo ti è stato utile, segnalalo sul tuo sito! Puoi inoltre seguire comodamente gli aggiornamenti di Techlog tramite il feed RSS; infine puoi lasciare un commento se ti serve aiuto (o anche solo per un saluto); anche qui non serve registrarsi (sono abilitati anche i commenti anonimi; l'E-Mail serve, eventualmente, per ricevere le notifiche delle nuove risposte). ;-)
January 14th, 2008 at 8:31 pm
[…] Siti consigliati « Creare una Userbar con Inkscape […]
January 15th, 2008 at 5:53 pm
Ottimo tutorial, se ti va, puoi pubblicarlo su Inkscape Italia
January 15th, 2008 at 6:06 pm
@patrick91: volentieri!
Appena ho un attimo di tempo mi registro al sito (e mi sembra anche giusto, anche perché Inkscape un pochino lo uso - anche se male 
)
… comunque non sarà per l’immediato futuro, prima devo cercare di far “risorgere” Wesnothrepos (fermo a causa della morte del pc incaricato alle compilazioni
)