:::: MENU ::::

Creare icone scalabili con Inkscape

In questo tutorial spiegherò come realizzare un’icona SVG utilizzando Inkscape.

Cos’è Inkscape? È un programma Open Source di grafica vettoriale che permette di lavorare su file SVG. È rilasciato in licenza GPL e sono disponibili per il download oltre (ovviamente) ai sorgenti, i binari per Linux, Windows e Mac Os X. Il bello di questo formato è che esso è supportato, ad esempio, da GNOME per cui è possibile utilizzare per i propri temi icone vettoriali anziché rasterizzate. Questo consente di ridimensionare le icone senza perdere qualità.
Ciò che voglio ottenere è un’icona che raffigura un foglio e una matita, adatta per identificare file di testo o applicazioni tipo word processor. Una cosa del genere, insomma:

Risultato finale

Step 1

Pronti? Via… Per prima cosa è necessario tracciare un rettangolo e convertirlo in tracciato (menu Traccciato ->Da oggetto a tracciato), poi, vanno selezionati i vertici a destra e avvicinati tra loro in modo da dare l’idea della prospettiva. Poi si creano degli altri vertici sui lati (basta fare doppio click sul punto del lato in cui si vuole che il vertice appaia) nelle posizioni mostrate in figura e si trascinano leggermente i due vertici più in basso per fare la piegatura del foglio. Per queste operazioni è necessario avere un minimo di manualità con lo strumento tracciato

Step 1

Step 2

Ora bisogna eliminare il punto in alto a destra

Step 2

…e creare un nuovo tracciato con la forma visualizzata in figura.

Step 2b

Questo diventerà la piegatura del foglio nel modo che andremo a vedere ora.

Step 3

Si seleziona il foglio e lo si duplica (Ctrl+D o da menu Modifica -> Duplica), poi si selezionano l’oggetto duplicato e il tracciato prima creato e dal menu Tracciato si dà Intersezione. I due oggetti originari vengono sostituiti da un nuovo oggetto che coincide con l’intersezione delle loro aree.
Costruendo un altro rettangolo in prospettiva in modo analogo a quanto si è fatto nello step 1 e applicando questi colori al foglio:

  • Colore del contorno: ffed2aff
  • Colore del riempimento: gradiente lineare da ffffdcff a feff84ff

si ottiene questo risultato

step3

Step 4

Ora passiamo alla realizzazione della matitina. Iniziamo dal corpo della matita. Anche qui si comincia da un rettangolo a cui viene leggermente stondato un lato per simulare la prospettiva (ricordare di convertire da oggetto a tracciato il rettangolo se si vuole modificare il lato). i colori che ho usato per la matita sono i seguenti

  • Colore del contorno: gradiente lineare da ff9216ff a ffd84dff
  • Colore del riempimento: gradiente lineare da ffd84dff a ff9216ff (ovvero uguale a quello appena creato solo applicato in direzione opposta)

step 4

Per creare la capocchia della matita si può duplicare il rettangolo appena creato, accorciarlo dalla parte destra e posizionarlo per bene come da figura.

step 4b

I colori usati sono

  • Colore del contorno: gradiente lineare da ff0000ff a bc0000ff
  • Colore del riempimento: lo stesso gradiente lineare ma applicato in direzione opposta

Step 5

Ora tocca alla punta della matita. È sufficiente duplicare il corpo colore arancio della matita, creare un vertice a metà del lato corto e spostarlo a sinistra. È necessario portare questo oggetto al di sotto del corpo creato nei precedenti step ed il risultato è questo

step 5b

A questo punto la punta può essere colorata così

  • Colore del contorno: gradiente lineare da fdc37fff a ffdcb6ff
  • Colore del riempimento: lo stesso gradiente lineare ma applicato in direzione opposta

Si può disegnare la grafite con il metodo dell’intersezione di oggetti visto in precedenza: per prima cosa si duplica la punta, poi si crea un tracciato con la forma mostrata in figura, si selezionano entrambi e si dà il comando Interseca. A questo punto basta colorare di nero la punta.

step 5c

Step 6

Questo è l’ultimo passo che ci separa dal risultato finale, stringete i denti 😉
Ciò che rende le icone veramente belle è, oltre ai gradienti, l’utilizzo delle trasparenze; esse infatti rendono molto bene l’effetto di tridimensionalità all’icona oltre a renderla molto elegante. Vediamo ora come realizzare questo effetto.
Per prima cosa si seleziona tutta la matita, la si duplica e si dà il comando Unione dal menu Tracciato. A questo punto si interseca questa unione con un rettangolo in modo tale da avere il risultato mostrato in figura

step 6a

Ora, con lo strumento Modifica tracciato dare il comando Tracciato -> Proiezione dinamica e rimpicciolire significativamente l’oggetto utilizzando la maniglia in alto a sinistra nell’oggetto. Dare allora il comando da oggetto a tracciato sempre nel menu Tracciato.
Ora dare nuovamente il comando Tracciato -> Proiezione dinamica e ingrandire l’oggetto fino ad una dimensione di poco inferiore alla matita sottostante e selezionare nuovamente il comando da oggetto a tracciato. Il risultato è il seguente

step 6b

Questo stratagemma di rimpicciolire molto e poi reingrandire è servito per conferire al riflesso dei bordi stondati. Sottolineo nuovamente: dare il comando da oggetto a tracciato dopo il rimpicciolimento ma prima dell’ingrandimento.
Per finire colorare il riflesso con un gradiente dal bianco opaco al bianco trasparente come da figura e posizionare la matita sul foglio precedentemente realizzato.

step 6c

Ecco dunque la nostra icona SVG! Bella vero?

Risultato finale

Mission completed!

Naturalmente qualunque osservazione o critica costruttiva è ben accetta dato che questo è il primo post del blog, insomma, per farla breve: commentate liberamente. 😉