Come Creare Icone con Inkscape, Procedimento Realizzativo

Dopo aver introdotto come utilizzare Inkscape, passiamo ora  a vedere come realizzare un’icona con Inkscape.
L’icona che voglio farvi realizzare è questa, molto semplice, ma che permette di prendere confidenza con le basi:

Per prima cosa è necessario aprire una nuova immagine 64 x 64 (dimensione massima delle icone):

• File;
• Nuovo;
• Icon_64x64;

Portiamo lo zoom al 500% (è posizionato nell’angolo in basso a destra, ultimo controllo).
All’interno di questo “foglio” aggiungiamo una circonferenza (7° bottone della barra degli strumenti a sinistra).

Per tracciare la circonferenza bisogna posizionare il mouse nell’angolo in altro a sinistra e trascinare il cursore fino all’angolo in basso a destra.
Durante questa operazione vi consiglio di tenere premuto CTRL: in tal modo il cerchio manterrà le proporzioni originali.

Per assicurarci un migliore posizionamento del cerchio utilizziamo lo strumento “seleziona e trasforma oggetti” (prima icona nella barra degli strumenti a sinistra) e inseriamo come punto di inizio del disegno (x e y) a 2 pixel, e larghezza e lunghezza (w e h) a 60 pixel.
In tal modo avremo una circonferenza perfettamente proporzionata e ben piazzata al centro del foglio.

Questo sarà il nostro sfondo, la struttura della nostra immagine sarà “A livelli”; questo significa che agiamo come se avessimo a disposizione una pila di fogli trasparenti di uguale dimensione che, messi uno sopra l’altro, andranno a comporre l’immagine finale.

Questo approccio è utilissimo poiché, nel caso in cui vogliamo eliminare o aggiungere o modificare un singolo elemento dell’immagine, sarà sufficiente modificare solo un livello.

Il menu dei livelli è posizionato in basso direttamente sotto i colori ed è composto da 3 componenti:

• Occhio: rende visibile o non visibile il livello;
• Lucchetto: serve per rendere il livello modificabile o meno;
• Selettore di livello: serve per selezionare il livello sul quale operare;

Dal menu “Livello” selezioniamo “Rinomina Livello”, chiamiamolo “Sfondo” e blocchiamolo.
Ancora dal menu “Livello” selezioniamo “Aggiungi Livello” e chiamiamolo “Logo” posizionandolo “Sopra l’attuale”, adesso possiamo inserire al centro della nostra circonferenza il logo (io userò il simbolo del dollaro, ma voi potete inserire ciò che preferite).
Selezioniamo il Testo e clicchiamo in un punto del foglio inserendo come testo il “$”.

In primis è necessario dare le giuste proporzioni al logo: bisogna andare “di matematica” approcciando in maniera personale.
Il logo (in questo caso) sarà grande 4/5 della circonferenza, ne consegue che H (altezza) sarà  (60 x 4 / 5 ) = 48 pixels, per mantenere le proporzioni originali è necessario selezionare il lucchetto tra W e H.

Adesso bisogna centrare il logo: sblocchiamo il livello “Sfondo”, selezioniamo entrambe i livelli (tenendo premuto MAIUSC ) e poi dal menu “Oggetto” selezioniamo “Allinea e Distribuisci” e poi schiacciamo sui bottoni di allineamento “Centra oggetti orizzontalmente” e “Centra oggetti verticalmente”.

D’ora in poi eviterò di ricordarvi di bloccare/sbloccare i livelli poichè credo abbiate capito quando è il caso di farlo.

Riflessi

Le icone “Glossy” vanno molto di moda, la luce viene sempre dall’alto (come detto prima), questa è forse la parte più difficile di questo Tutorial.

L’idea è quella di ricavare nuove forme dalle forme già presenti, la cosa sembra molto criptica, ma man mano che procederemo con la guida capirete cosa intendo; incominciamo creando un’alone di luce proprio sulla “cupola dell’icona”.
Eseguiamo tutte queste operazioni su un nuovo livello che chiameremo “Luci e Ombre”, per mantenere le proporzioni utilizzeremo lo stesso cerchio che abbiamo adottato come sfondo: selezioniamo il cerchio, click destro sullo stesso e selezioniamo duplica, ripetiamo l’operazione 2 volte.

Adesso con le freccette della tastiera spostiamolo in alto fino ad ottenere questa figura:

Adesso ci interessa prendere l’area compresa tra i due elementi quindi selezioniamo il cerchio in alto e quello in basso e poi selezioniamo “Tracciato”, “Intersezione”; in tal modo ricaviamo dai due duplicati la “cupola” della circonferenza iniziale:

Adesso dobbiamo eliminare i contorni dell’oggetto schiacciando, sulla tavolozza dei colori, MAIUSC+X (X non tasto della tastiera, ma elemento della tavolozza).

Eseguiamo la stessa operazione eseguita fino ad ora per la sezione inferiore ottenendo come risultato:

è bruttino, lo so, ma non appena avremo finito, il risultato migliorerà nettamente.

Ombre

Questa è la sezione del tutorial più semplice: duplichiamo la circonferenza e portiamo il suo centro alla base dell’immagine subito sotto la circonferenza (utilizziamo ancora una volta la tastiera, se l’oggetto si muove troppo rapidamente teniamo premuto ALT per movimenti più piccoli).

Ridimensioniamo il poligono utilizzando le doppie frecce presenti in alto e tenendo premuto il pulsante SHIFT così da effettuare il ridimensionamento fino a coprire tutta la parte inferiore dell’icona (come nell’immagine).
Sarebbe comunque meglio calcolare prima la dimensione dell’ombra in modo da lasciare sempre 2 pixel di spazio prima del margine.

Adesso si comincia a colorare

La tecnica che sto utilizzando è quella che in genere si utilizza per la creazione di oggetti tridimensionali cioè: modeling, luci/ombre, colori.
Su inkscape esistono, per ogni oggetto, due elementi da colorare: sfondo e contorno.

Facendo doppio click sul colore in basso “Riempimento” o “Contorno” si aprirà la finestra di selezione del colore per il riempimento o il contorno. Se dobbiamo utilizzare tinte unite consiglio di utilizzare la tavolozza:

• Click sul colore: crea riempimento;
• Maiusc + Click sul colore: crea contorno;

ricordando che i contorni vanno delineati con i colori più scuri cominciamo a colorare il nostro oggetto (io utilizzerò le sfumature di rosso).

Selezionando ad uno ad uno i vari Livelli selezioniamo le forme settando per bene i colori, ai riflessi è bene aggiungere un altro cerchio interno (per fare il secondo contorno).
Il primo risultato della colorazione sarà questo:

Adesso bisogna applicare i gradienti (che non è proprio semplice), i gradienti vanno sempre maneggiati con cura ed applicati per via “sperimentale”.
Un gradiente non è altro che un colore che “sfuma” da un colore primario ad uno secondario passando, volendo, per altri colori.

Esistono gradienti lineari, quando la variazione di colore si sviluppa lungo una retta, e gradienti radiali, cioè quando la variazione avviene dal centro verso l’esterno di una circonferenza, in questo caso dovremo utilizzare una vernice molto particolare che fa uso del cosiddetto canale ALPHA.
Il livello ALPHA determina la trasparenza del colore.

Cominciamo la parte più semplice del nostro progetto: l’ombra in basso. Selezioniamo il contorno del cerchio, eliminiamo il contorno e facciamo un doppio click sul colore del riempimento, in questo modo apparirà sulla destra una nuova “tendina” dove appare la modalità di riempimento.
Scegliamo il “Gradiente Radiale”.

Il bottone “modifica” ci permette di modificare i colori che vanno a comporre il gradiente ma, in questo caso, nero -> trasparente va più che bene.

Adesso tocca la parte difficile i gradienti per la luce.

Non è facilissimo da realizzare (per le prime volte), allora cerchiamo di disegnare il gradiente superiore; la luce è praticamente sulla testa della nostra icona e va ad occupare buona parte della cupola della circonferenza.

Innanzitutto settiamo come riempimento dell’oggetto un gradiente, poi (sempre con l’oggetto selezionato) schiacciamo sul bottone “crea e modifica gradienti” (penultimo bottone della barra degli strumenti di sinistra).
Usciranno delle “maniglie” che permettono di spostare la sorgente del gradiente, che va portata in alto, e la lunghezza sulla quale si distribuirà. Nella barra in alto apparirà un bottone con scritto “Modifica”, attraverso questo bottone è possibile “Aggiungere passaggi” cioè è possibile distribuire meglio il cambiamento di colore (fate qualche esperimento da soli fino ad ottenere il risultato che più vi aggrada…)

La stessa operazione va fatta anche per il gradiente inferiore, ma con un gradiente lineare verso il basso poichè l’ombra cade perfettamente perpendicolare alla superifice bassa

ed ecco il risultato…non una grandissima cosa…ma direi che come icona è accettabile.
Buon divertimento a voi non-artisti!

Un ultimo consiglio: Non create icone con dettagli troppo complessi, poiché quando verranno esportate spesso verranno utilizzate con dimensioni 16×16, quindi mentre andate a creare tutti i dettagli vi consiglio di consultare il menu “Anteprima icona” su “Visualizza” e fare attenzione che l’icona 16×16 sia ben visibile e nitida.