Grafica vettoriale: come creare icone con Inkscape

Il problema che tutti i programmatori devono affrontare quando creano un software è quello di dover generare delle icone.
Il metodo più veloce è quello di utilizzare delle immagini per poi trasformarle in icone, oppure fare una semplice ricerca su google immagini; ma con questo soluzioni si pecca di originalità e potrebbero esserci anche problemi di violazioni di copyright.
Il metodo migliore per creare le icone è, dunque, la grafica vettoriale.

Cos’è la Grafica Vettoriale

La grafica vettoriale si basa sull’idea che l’immagine non deve essere per forza disegnata “pixel per pixel” (nel senso lato del termine), ma è possibile creare delle immagini tramite forme geometriche primitive: punto, linea, curva, cerchio, rettangolo… .

Il vantaggio di questo tipo di rappresentazione permette di ridimensionare l’immagine (sorgente quindi vettoriale) senza avere perdita di informazione, finché questa non viene esportata in bitmap (o meglio raster) cioè la descrizione della struttura pixel per pixel. Il formato utilizzato da Inkscape è SVG (Scalable Vector Graphics).

Ovviamente la grafica vettoriale non si limita alla creazione di icone, ma può essere una fondamentale risorsa per creare, ad esempio, layout per siti web o semplici strutture per presentazioni o schemi.

Scaricare Inkscape

Inkscape è un programma open-source (come quasi tutti quelli che propongo) ed è anche multipiattaforma, si può scaricare da qui, ovviamente il software è disponibile anche in Italiano quindi scaricate, installate e procediamo con la guida.

Nozioni base per la creazione di un’icona

La migliore tecnica per disegnare icone è quella di seguire delle “linee guida”, poiché queste sono frutto di studi molto approfonditi sulla user-experience.
Per questo tutorial seguirò le linee guida proposte da Tango (set di icone Gnome), ma voi siete assolutamente liberi di seguire qualsiasi schema vi giri in mente.

Passiamo innanzitutto ad analizzare i principi base da seguire per la creazione di un’icona:

• L’icona deve avere innanzitutto un bel bordo solido (di 1 pixel per qualsiasi dimensione);
• L’icona deve avere un “sottobordo” (anche questo di 1 pixel per qualsiasi dimensione);
• Opzionalmente deve avere dell rifrazioni;
• La luce proviene SEMPRE dall’alto, ragion per cui le ombre devono essere sempre perfettamente al di sotto dell’oggetto;
• L’osservatore è sempre posizionato in un punto particolare dove la riflessione della luce lungo la superficie è massima;
• Se l’icona è tridimensionale, l’osservatore è sempre posizionato perfettamente di fronte all’icona, se l’icona è bidimensionale, allora dobbiamo rappresentarla come se fosse poggiata su di un piano (quindi l’ombra sarà orientata lungo tutto il contorno della superficie);

L’interfaccia grafica Inkscape

Sulla sinistra abbiamo la barra degli strumenti (ne useremo davvero pochi, rispetto alle potenzialità del programma).
In alto c’è la barra  con le proprietà degli strumenti di cui solo la terza fila cambia al cambiare dello strumento. In basso ci sono Livelli, Colori, Riempimenti e Contorni.
Vi faccio notare che nella tavolozza dei colori esiste una piccola freccia che ci permette di selezionare come palette (cioè tavolozza) quella definita dalle linee guida Tango.
Per vedere il processo realizzativo di un’ icona potete consultare questo articolo.