Cosa possiamo creare con Inkscape SOFTWARE OPEN SOURCE

Inkscape è un programma semplice e decisamente usabile con cui è possibile realizzare moltissimi
progetti: si possono creare layout per siti web, banner e loghi, si possono impaginare volantini o
vettorializzare immagini bitmap, come vedremo nel tutorial a fine guida.

Scaricare ed installare Inkscape
Possiamo scaricare Inkscape dal sito ufficiale, scegliamo l’ultima versione stabile disponibile per il
nostro sistema operativo, sono disponibili versioni per Linux, MacOS e Windows.
Per i sistemi operativi Windows è sufficiente eseguire il file di installazione scaricato; per gli altri
sistemi operativi seguite le istruzioni indicate sul sito.
Inkscape adotta il formato SVG come formato di salvataggio predefinito.
Che cos’è il formato SVG?
SVG significa Scalable Vector Graphics ovvero, tradotto letteralmente, Grafica vettoriale scalabile.

Questo formato è stato creato dal W3C (World Wide Web Consortium) come formato aperto,
quindi libero da diritti, per definire uno standard per l’utilizzo della grafica vettoriale in rete.
È basato sul linguaggio XML, è quindi in realtà un linguaggio testuale: quello che vediamo sulla
pagina di Inkscape è perciò solo una rappresentazione visiva delle istruzioni XML che in realtà
costituiscono il nostro documento.
Nello sviluppo di molti browser è previsto il supporto per questo formato.

Se dovesse affermarsi
questa tendenza assisteremmo ad una vera rivoluzione per il mondo della grafica web in quanto
finalmente un formato vettoriale standard potrà essere utilizzato per immagini e animazioni senza
alcun bisogno di installare plug-in come Flash o Shockwave.
L’area di lavoro
Già dal primo avvio, aprendo Inkscape ci si trova davanti una finestra come questa:
Figura 1. L’area di lavoro di Inkscape
Partendo dall’alto troviamo:
La barra dei menu,
La barra dei comandi dove troviamo i comandi più comuni disponibili con un solo click
del mouse
Le opzioni che riguardano lo strumento attivo
A destra vediamo la barra degli strumenti, in cui a differenza di altri software come Illustrator
tutti gli strumenti disponibili sono sempre visibili.

Al centro troviamo già aperta e pronta per iniziare il lavoro una pagina con le impostazioni di
default.
In fondo alla pagina troviamo la barra di stato alla quale dedichiamo partiocolare attenzione.
Da sinistra troviamo:
La casella Zoom in cui possiamo scrivere un valore e confermare con invio o aumentare e
diminuire l’ingrandimento dell’area visualizzata utilizzando le frecce
L’indicazione del punto in cui si trova il cursore del mouse in un dato momento.

Il punto
di riferimento è l’origine dei righelli, ovvero l’angolo in basso a sinistra della pagina
Alcuni strumenti per la gestione dei livelli che esamineremo in seguito
L’area messaggi che segnala di volta in volta cosa possiamo o non possiamo fare con un
dato strumento.
_____________________________________________________________________________________________________
Impostare le preferenze
La forza di un programma intuitivo come questo sta anche nella facilità di reperire e modificare le
configurazioni predefinite.

L’ultimo pulsante sulla barra dei menu apre la finestra di Preferenze del documento. Da questa
finestra è possibile configurare tutte le preferenze riguardanti la pagine, i righelli, le guide e le griglie
La prima linguetta della finestra permette di modificare alcuni parametri di visualizzazione della
pagina:
Il colore di sfondo, bordi e ombreggiature
Le unità predefinite: modificando questa casella si posso impostare diverse unità di misura
per i righelli
La dimensione e l’orientamento della pagina.

Scegliendo “Dimensione della tela:
personalizzata” si attivano le caselle nel riquadro “tela personalizzata” dove è possibile
impostare dimensioni non standard della pagina.
Con la seconda linguetta impostiamo i parametri riguardanti la griglia.
La griglia è un reticolato, magnetico o meno, che aiuta nell’allineamento degli oggetti come una
moderna carta millimetrata. Vediamo le voci in particolare:
Figura 2. Le impostazioni della griglia
Mostra la griglia: fa apparire la griglia che può essere abilitata o disabilitata velocemente
anche andando sul menu Visualizza > Griglia.

Attacca i riquadri alla griglia e Attacca i punti alla griglia. È il cosiddetto “snap” e rende
magnetica la griglia rispetto a riquadri e punti.
Unità di misura della griglia: determina l’unità di misura in cui verranno espresse le
successive 4 caselle.
Origine X e Origine Y: determina il punto di origine della griglia rispetto all’origine dei
righelli.
Spaziature X e Spaziatura Y: Determina quanto grandi orizzontalmente e verticalmente
dovranno essere le celle della griglia.

Unità di spostamento: determina l’unità di misura in cui verrà espressa la Distanza del
reticolo.
Distanza dal reticolo: Determina la distanza minima a cui un oggetto può essere
posizionato rispetto alle linee della griglia senza essere attratto dallo snap.
__________________________________________________________________________________________________
Strumenti di base
Ci sono strumenti che è importante conoscere ancora prima di iniziare a lavorare; fra questi ci
sono sicuramente quelli che ci permettono di visualizzare la pagina come più ci è comodo e quelli
che ci permettono di annullare operazioni sbagliate.

Zoom
Lo zoom ci permette di vedere il disegno alla grandezza che desideriamo. Per zoomare oltre alla
casella nella barra di stato vista nella lezione 3 abbiamo a disposizione lo strumento Lente di
ingrandimento nella barra degli strumenti.
Attivato lo strumento è possibile ingrandire un’area della pagina semplicemente cliccandoci sopra
oppure cliccando e trascinando in modo da racchiudere la parte che ci interessa.
Per rimpicciolire, invece, premere ALT mentre clicchiamo.

Nella barra delle opzioni abbiamo
inoltre a disposizione le icone per effettuare alcune operazioni velocemente:
Figura 1. Icone della barra opzioni
1. Aumenta e diminuisce l’ingrandimento dell’area di lavoro
Ingrandisce fino ad adattare l’area selezionata alla finestra
Ingrandisce fino ad adattare l’area disegnata alla finestra
Adatta la visualizzazione alla pagina
Adatta la visualizzazione alla larghezza delle pagina
Cronologia delle visualizzazioni: torna alla visualizzazione precedente/ripristina la
successiva
7.

Zoom 1:1 ovvero 100%
8. Zoom 1:2 ovvero 50%
9. Zoom 2:1 ovvero 200%
_____________________________________________________________________________________________________

Visualizzazioni
È possibile aprire più di una finestra sullo stesso documento per poter avere sotto controllo il
disegno con diverse modalità di zoom.
Per aprire una nuova finestra sull’attuale disegno utilizzare Visualizza>Duplica finestra. Ogni
modifica su una delle finestre sarà immediatamente visibile anche sulle altre.
È disponibile anche una visualizzazione a icona che permette di rendersi conto come potrebbero
apparire gli elementi selezionati una volta trasformati in diversi formati icona.

Per aprire la finestra
di visualizzazione andare sul menu Visualizza>Anteprima icona
Annulla e ripristina
Prima di iniziare a lavorare è importante sapere come poter annullare un eventuale errore. Nella
barra dei comandi troviamo due icone a forma di freccia:
La prima permette di annullare gli errori, la seconda di ripristinare gli annullamenti. I comandi per
annullare e ripristinare li troviamo anche nel menu Modifica>Annulla e Modifica>Ripristina.
____________________________________________________________________________________________________

Disegnare con forme semplici (1ma parte)
Nelle prossime due lezioni iniziamo a disegnare sfruttando le forme semplici; passo passo
impariamo a usare alcuni degli strumenti di disegno e di selezione.

Gli strumenti che utilizzeremo li
troviamo sulla sinistra, nella barra degli strumenti:
Guida Inkscape
di: Rossella Facchini
Primi passi con Inkscape
Ottenere semplici effetti con il testo
Potremmo definire Inkscape un programma di grafica vettoriale Open Source. Spendiamo qualche
parola sui termini di questa definizione.
Cos’è un programma di grafica vettoriale?
Un programma di grafica vettoriale è una applicazione per il disegno che utilizza espressioni
matematiche (vettori) per memorizzare gli oggetti grafici realizzati dall’utente.

Il principale vantaggio dei programmi di grafica vettoriale è che ogni oggetto, forma, riempimento,
linea o contorno realizzato può essere ridimensionato facilmente e senza perdita di qualità, in
quanto gli oggetti sono definiti a prescindere dal concetto di pixel e di risoluzione.
Cosa significa programma Open Source?
Letteralmente significa Sorgente Aperto: significa cioè che il codice sorgente del programma è
scaricabile da chiunque voglia apportarvi modifiche e miglioramenti, o anche solo prenderne
visione.

Open Source, però, non significa solo codice libero, ma in questo caso anche che l’utilizzo del
programma è totalmente gratuito. E’ quindi possibile scaricare ed utilizzare Inkscape del tutto
gratuitamente ed in modo legale.
A tal proposito è importante far notare che tutti i progetti di questo tipo sono in continua evoluzione
e che in questa guida faremo riferimento all’ultima versione stabile di Inkscape disponibile al
momento della stesura: d’ora in poi ci occuperemo quindi di Inkscape versione 0.42.2.

Segnaliamo inoltre che la comunità Open Source ha messo a disposizione di chiunque la Open Clip
Art Library, una raccolta di centinaia di immagini in formato SVG. La libreria è aperta a tutti, per
scaricare e utilizzare lavori altrui ma anche e soprattutto per inviare e rendere disponibili i propri.
Cosa possiamo creare con Inkscape?
Inkscape è un programma semplice e decisamente usabile con cui è possibile realizzare moltissimi
progetti: si possono creare layout per siti web, banner e loghi, si possono impaginare volantini o
vettorializzare immagini bitmap, come vedremo nel tutorial a fine guida.
Scaricare ed installare Inkscape
Possiamo scaricare Inkscape dal sito ufficiale, scegliamo l’ultima versione stabile disponibile per il
nostro sistema operativo, sono disponibili versioni per Linux, MacOS e Windows.
Per i sistemi operativi Windows è sufficiente eseguire il file di installazione scaricato; per gli altri
sistemi operativi seguite le istruzioni indicate sul sito.
Premesse Importanti
Inkscape adotta il formato SVG come formato di salvataggio predefinito.
Che cos’è il formato SVG?
SVG significa Scalable Vector Graphics ovvero, tradotto letteralmente, Grafica vettoriale scalabile.
Questo formato è stato creato dal W3C (World Wide Web Consortium) come formato aperto,
quindi libero da diritti, per definire uno standard per l’utilizzo della grafica vettoriale in rete.
È basato sul linguaggio XML, è quindi in realtà un linguaggio testuale: quello che vediamo sulla
pagina di Inkscape è perciò solo una rappresentazione visiva delle istruzioni XML che in realtà
costituiscono il nostro documento.
Nello sviluppo di molti browser è previsto il supporto per questo formato. Se dovesse affermarsi
questa tendenza assisteremmo ad una vera rivoluzione per il mondo della grafica web in quanto
finalmente un formato vettoriale standard potrà essere utilizzato per immagini e animazioni senza
alcun bisogno di installare plug-in come Flash o Shockwave.
Per ulteriori approfondimenti sull’ SVG è possibile consultare la Guida all’SVGdi html.it.
Inkscape e il metodo colore CMYK
È noto che per creare lavori per il web lo spazio colore con cui lavorare è L’RGB (Red Green Blue)
mentre per creare lavori per la stampa è importante lavorare in CMYK (Cyan Magenta Yellow
Black), ma purtroppo Inkscape non supporta questa modalità.
Per ora, ma siamo ancora alla versione 0.42, non è ancora stato introdotto un vero supporto per i
colori di stampa, ma possiamo scegliere i colori con le componenti in CMYK all’interno di
Inkscape, ma di fatto queste poi vengono salvate nel file SVG in formato RGB.E’ quindi
sconsigliabile consegnare questi file direttamente al tipografo.
Allo stato attuale il modo più semplice per salvare in CMYK è quello di importare i file di
Inkscape in Scribus (altro software Open Source) per poi salvare da lì in CMYK. Scribus per ora
non è disponibile per piattaforme Windows.
Ovviamente se il nostro obiettivo è quello di creare lavori per il web, Inkscape non ci fa mancare
assolutamente nulla e possiamo tranquillamente lavorare con gli strumenti che ci mette a
disposizione.
L’area di lavoro
Benché Inkscape sia un programma con molte potenzialità è sicuramente molto intuitivo, basta
un’occhiata all’area di lavoro per rendersene immediatamente conto.
L’area di lavoro
Già dal primo avvio, aprendo Inkscape ci si trova davanti una finestra come questa:
Figura 1. L’area di lavoro di Inkscape
Partendo dall’alto troviamo:
La barra dei menu,
La barra dei comandi dove troviamo i comandi più comuni disponibili con un solo click
del mouse
Le opzioni che riguardano lo strumento attivo
A destra vediamo la barra degli strumenti, in cui a differenza di altri software come Illustrator
tutti gli strumenti disponibili sono sempre visibili.
Al centro troviamo già aperta e pronta per iniziare il lavoro una pagina con le impostazioni di
default.
In fondo alla pagina troviamo la barra di stato alla quale dedichiamo partiocolare attenzione.
La barra di stato
Diamo uno sguardo più da vicino alla barra di stato:
Figura 2. La barra di stato
Da sinistra troviamo:
La casella Zoom in cui possiamo scrivere un valore e confermare con invio o aumentare e
diminuire l’ingrandimento dell’area visualizzata utilizzando le frecce
L’indicazione del punto in cui si trova il cursore del mouse in un dato momento. Il punto
di riferimento è l’origine dei righelli, ovvero l’angolo in basso a sinistra della pagina
Alcuni strumenti per la gestione dei livelli che esamineremo in seguito
L’area messaggi che segnala di volta in volta cosa possiamo o non possiamo fare con un
dato strumento
Altri aiuti e scorciatoie
Muovendo i primi passi con Inkscape possiamo in qualsiasi momento conoscere la funzione di
uno strumento o di un’opzione soffermandoci con il mouse sullo strumento desiderato, aspettando
che appaia la spiegazione in un box giallo (detto tooltip).
Accanto alla spiegazione, il tooltip presenta anche, tra parentesi, il tasto o la combinazione di tasti
per azionare il comando da tastiera (scorciatoie da tastiera).
Nella barra dei menu, cliccando sulla voce Aiuto troviamo un documento con tutte le scorciatoie da
tastiera ed alcune lezioni sull’uso del programma (in inglese)
Impostare le preferenze
La forza di un programma intuitivo come questo sta anche nella facilità di reperire e modificare le
configurazioni predefinite.
L’ultimo pulsante sulla barra dei menu apre la finestra di Preferenze del documento. Da questa
finestra è possibile configurare tutte le preferenze riguardanti la pagine, i righelli, le guide e le
griglie. Vediamo in dettaglio:
Figura 1. Pannello preferenze
La prima linguetta della finestra permette di modificare alcuni parametri di visualizzazione della
pagina:
Il colore di sfondo, bordi e ombreggiature
Le unità predefinite: modificando questa casella si posso impostare diverse unità di misura
per i righelli
La dimensione e l’orientamento della pagina. Scegliendo “Dimensione della tela:
personalizzata” si attivano le caselle nel riquadro “tela personalizzata” dove è possibile
impostare dimensioni non standard della pagina.
Con la seconda linguetta impostiamo i parametri riguardanti la griglia.
La griglia è un reticolato, magnetico o meno, che aiuta nell’allineamento degli oggetti come una
moderna carta millimetrata. Vediamo le voci in particolare:
Figura 2. Le impostazioni della griglia
Mostra la griglia: fa apparire la griglia che può essere abilitata o disabilitata velocemente
anche andando sul menu Visualizza > Griglia.
Attacca i riquadri alla griglia e Attacca i punti alla griglia. È il cosiddetto “snap” e rende
magnetica la griglia rispetto a riquadri e punti.
Unità di misura della griglia: determina l’unità di misura in cui verranno espresse le
successive 4 caselle.
Origine X e Origine Y: determina il punto di origine della griglia rispetto all’origine dei
righelli.
Spaziature X e Spaziatura Y: Determina quanto grandi orizzontalmente e verticalmente
dovranno essere le celle della griglia.
Unità di spostamento: determina l’unità di misura in cui verrà espressa la Distanza del
reticolo.
Distanza dal reticolo: Determina la distanza minima a cui un oggetto può essere
posizionato rispetto alle linee della griglia senza essere attratto dallo snap.
Linee maggiori: sono linee più grosse, hanno la funzione di aiutarci a contare i riquadri
della griglia con un semplice colpo d’occhio. Qui se ne può impostare cadenza e colore.
La terza linguetta serve ad impostare le guide.
Le guide sono linee verticali od orizzontali utilissime per allineare gli oggetti sulla pagina, si creano
semplicemente trascinando il mouse da uno dei righelli verso la pagina. Vediamo in particolare le
impostazioni nella finestra Preferenze:
Le impostazioni delle guide
Mostra le guide: marcandolo fa apparire le guide già create. Si possono abilitare o
disabilitare velocemente anche andando sul menu Visualizza > Guide
Attacca i riquadri alle guide e Attacca i punti alle guide. È il cosiddetto “snap” e rende
magnetiche le guide rispetto a riquadri e punti.
Unità di spostamento: determina l’unità di misura in cui verrà espressa la Distanza del
reticolo.
Distanza dal reticolo: Determina la distanza minima a cui un oggetto può essere
posizionato rispetto alle guide senza essere attratto dallo snap.
Colori delle guide e Colore di evidenziazione: Determina il colore delle guide sulla pagina e
quello delle guide selezionate.
La forza di un programma intuitivo come questo sta anche nella facilità di reperire e modificare le
configurazioni predefinite.
L’ultimo pulsante sulla barra dei menu apre la finestra di Preferenze del documento. Da questa
finestra è possibile configurare tutte le preferenze riguardanti la pagine, i righelli, le guide e le
griglie. Vediamo in dettaglio:
Figura 1. Pannello preferenze
Il colore di sfondo, bordi e ombreggiature
Le unità predefinite: modificando questa casella si posso impostare diverse unità di misura
per i righelli
La dimensione e l’orientamento della pagina. Scegliendo “Dimensione della tela:
personalizzata” si attivano le caselle nel riquadro “tela personalizzata” dove è possibile
impostare dimensioni non standard della pagina.
Con la seconda linguetta impostiamo i parametri riguardanti la griglia.
La griglia è un reticolato, magnetico o meno, che aiuta nell’allineamento degli oggetti come una
moderna carta millimetrata. Vediamo le voci in particolare:
Mostra la griglia: fa apparire la griglia che può essere abilitata o disabilitata velocemente
anche andando sul menu Visualizza > Griglia.
Attacca i riquadri alla griglia e Attacca i punti alla griglia. È il cosiddetto “snap” e rende
magnetica la griglia rispetto a riquadri e punti.
Unità di misura della griglia: determina l’unità di misura in cui verranno espresse le
successive 4 caselle.
Origine X e Origine Y: determina il punto di origine della griglia rispetto all’origine dei
righelli.
Spaziature X e Spaziatura Y: Determina quanto grandi orizzontalmente e verticalmente
dovranno essere le celle della griglia.
Unità di spostamento: determina l’unità di misura in cui verrà espressa la Distanza del
reticolo.
Distanza dal reticolo: Determina la distanza minima a cui un oggetto può essere
posizionato rispetto alle linee della griglia senza essere attratto dallo snap.
Linee maggiori: sono linee più grosse, hanno la funzione di aiutarci a contare i riquadri
della griglia con un semplice colpo d’occhio. Qui se ne può impostare cadenza e colore.
La terza linguetta serve ad impostare le guide.
Le guide sono linee verticali od orizzontali utilissime per allineare gli oggetti sulla pagina, si creano
semplicemente trascinando il mouse da uno dei righelli verso la pagina. Vediamo in particolare le
impostazioni nella finestra Preferenze:
Mostra le guide: marcandolo fa apparire le guide già create. Si possono abilitare o
disabilitare velocemente anche andando sul menu Visualizza > Guide
Attacca i riquadri alle guide e Attacca i punti alle guide. È il cosiddetto “snap” e rende
magnetiche le guide rispetto a riquadri e punti.
Unità di spostamento: determina l’unità di misura in cui verrà espressa la Distanza del
reticolo.
Distanza dal reticolo: Determina la distanza minima a cui un oggetto può essere
posizionato rispetto alle guide senza essere attratto dallo snap.
Colori delle guide e Colore di evidenziazione: Determina il colore delle guide sulla pagina e
quello delle guide selezionate.
Strumenti di base
Ci sono strumenti che è importante conoscere ancora prima di iniziare a lavorare; fra questi ci
sono sicuramente quelli che ci permettono di visualizzare la pagina come più ci è comodo e quelli
che ci permettono di annullare operazioni sbagliate.
Zoom
Lo zoom ci permette di vedere il disegno alla grandezza che desideriamo. Per zoomare oltre alla
casella nella barra di stato vista nella lezione 3 abbiamo a disposizione lo strumento Lente di
ingrandimento nella barra degli strumenti.
Attivato lo strumento è possibile ingrandire un’area della pagina semplicemente cliccandoci sopra
oppure cliccando e trascinando in modo da racchiudere la parte che ci interessa.
Per rimpicciolire, invece, premere ALT mentre clicchiamo. Nella barra delle opzioni abbiamo
inoltre a disposizione le icone per effettuare alcune operazioni velocemente:
Figura 1. Icone della barra opzioni
1. Aumenta e diminuisce l’ingrandimento dell’area di lavoro
Ingrandisce fino ad adattare l’area selezionata alla finestra
Ingrandisce fino ad adattare l’area disegnata alla finestra
Adatta la visualizzazione alla pagina
Adatta la visualizzazione alla larghezza delle pagina
Cronologia delle visualizzazioni: torna alla visualizzazione precedente/ripristina la
successiva
7. Zoom 1:1 ovvero 100%
8. Zoom 1:2 ovvero 50%
9. Zoom 2:1 ovvero 200%
Visualizzazioni
È possibile aprire più di una finestra sullo stesso documento per poter avere sotto controllo il
disegno con diverse modalità di zoom.
Per aprire una nuova finestra sull’attuale disegno utilizzare Visualizza>Duplica finestra. Ogni
modifica su una delle finestre sarà immediatamente visibile anche sulle altre.
È disponibile anche una visualizzazione a icona che permette di rendersi conto come potrebbero
apparire gli elementi selezionati una volta trasformati in diversi formati icona. Per aprire la finestra
di visualizzazione andare sul menu Visualizza>Anteprima icona
Annulla e ripristina
Prima di iniziare a lavorare è importante sapere come poter annullare un eventuale errore. Nella
barra dei comandi troviamo due icone a forma di freccia:
Figura 2. Pulsanti “annulla” e “ripristina”
La prima permette di annullare gli errori, la seconda di ripristinare gli annullamenti. I comandi per
annullare e ripristinare li troviamo anche nel menu Modifica>Annulla e Modifica>Ripristina.
Disegnare con forme semplici (1ma parte)
Nelle prossime due lezioni iniziamo a disegnare sfruttando le forme semplici; passo passo
impariamo a usare alcuni degli strumenti di disegno e di selezione. Gli strumenti che utilizzeremo li
troviamo sulla sinistra, nella barra degli strumenti:
Figura 1. Strumenti di disegno e selezione
Ecco il disegno che andiamo a realizzare per prendere confidenza con questi strumenti:
Figura 2. Disegno finito
Iniziamo visualizzando la griglia (Visualizza>Griglia) e attivando quindi lo strumento Crea
rettangoli. Disegniamo il quadrato esterno cliccando e trascinando sulla pagina con lo strumento
Crea rettangoli attivo; per fare un quadrato preciso senza difficoltà teniamo premuto il tasto
“Control” sulla tastiera mentre trasciniamo.
Ora creiamo i cerchietti che rappresentano le mani.
Attiviamo lo strumento Crea cerchi e cliccando e trascinando sulla pagina disegniamo le mani:
per creare circonferenze perfette (invece che ovali) teniamo nuovamente premuto Control mentre
trasciniamo.
Se i cerchietti non sono nel punto desiderato, attiviamo lo strumento Selezione e clicchiamo sul
cerchio da spostare, per poi trascinarlo nel punto della pagina più opportuno.
Pensiamo ora al corpo: è realizzato usando una stella dagli angoli un po’ arrotondati.
Attiviamo lo strumento Crea stella e, prima di iniziare a disegnarla, diamo uno sguardo alla barra
delle Opzioni dello strumento, impostandole come nella seguente immagine:
Impostazioni della stella
Da notare che se marcassimo la prima casella, Poligono, otterremmo un poligono invece che una
stella; la casella angoli ci permette di creare stelle con un dato numero di punte, o poligoni con un
dato numero di lati.
Impostati questi parametri disegniamo la stella cliccando, trascinando e quindi ruotando il cursore
in modo da allineare le due punte in basso su una linea orizzontale (possiamo usare la griglia per
orientarci).
Spostiamo la stella nel punto giusto rispetto agli altri elementi, nel caso risultasse non allineata.
Riattiviamo ora lo strumento Crea rettangolo per disegnare la cintura.
Clicchiamo e trasciniamo per creare il rettangolo; poi, per smussarne gli angoli, andiamo con lo
strumento Crea rettangolo (o anche con lo strumento Modifica nodi) sulla maniglia di controllo in
alto a destra, clicchiamo e trasciniamo verso il basso fino ad ottenere lo smusso desiderato.
Alternativamente possiamo impostare lo smusso dalla barra delle Opzioni dello strumento stesso.
Con questo ultimo passaggio abbiamo realizzato il corpo.
Selezioniamo ora tutto il nostro disegno andando sul menu Modifica>Seleziona tutto, poi
raggruppiamolo usando il pulsante sulla barra dei comandi o il comando da menu
Oggetto>Raggruppa. In questo modo tutto il disegno si comporta come un’unica forma.
Disegnare con le forme semplici (2nda parte)
Completiamo il pupazzo iniziato nella scorsa lezione; ora, sempre utilizzando le forme semplici,
disegnamo la testa. Testa del pupazzo
Iniziamo con la faccia. Tutto quello che ci serve è offerto dello strumento Crea cerchi: attiviamolo.
Disegniamo i contorni del viso creando un cerchio, quindi, esattamente come abbiamo fatto per le
mani, clicchiamo e trasciniamo tenendo premuto Control sulla tastiera.
Per creare gli occhi utilizziamo sempre lo strumento Crea cerchio, ma nella barra delle Opzioni
andiamo a impostare 310 gradi nella casella Fine.
Figura 2. Casella “Fine”
Ora clicchiamo e trasciniamo, ottenendo gli occhi come nell’esempio.
Occupiamoci del disegno della bocca: utilizzando sempre lo strumento Crea cerchi, impostiamo
nella barra delle Opzioni la Fine dell’ellisse a 180 gradi e marchiamo la casella Apri arco.
Figura 3. Casella “Apri arco”
Ora clicchiamo e trasciniamo per disegnare una ellisse molto schiacciata orizzontalmente; creiamo
così la bocca come nell’esempio.
Ovviamente se gli oggetti che abbiamo creato non sono nel punto giusto della pagina li possiamo
sempre spostare con lo strumento Selezione.
Pensiamo ora a creare il cappello. Attiviamo lo strumento Crea stella/poligono come abbiamo fatto
per creare il corpo, ma questa volta nella barra delle Opzioni marchiamo la casella Poligono e
impostiamo il numero degli angoli a 3, e l’arrotondamento a 0,20.
Figura 4. Casella “Poligono”
Disegniamo quindi il nostro triangolo cliccando, trascinando e ruotando il cursore del mouse per
creare il cappello.
Per concludere il disegno manca ancora il pennacchio sul cappello.
Per disegnarlo utilizziamo lo strumento Crea spirale impostando sulla barra delle Opzioni il
numero di Rivoluzioni uguale a 3.
Casella “Rivoluzioni”
Clicchiamo e trasciniamo il cursore per creare il pennacchio sulla pagina e completare così il
disegno.
Da notare che aumentando o diminuendo il parametro Divergenza si ottengono forme di spirale
molto differenti.
Figura 6. Variazioni del parametro “Divergenza”
Per valori vicino allo zero della Divergenza la spirale collassa in una circonferenza, mentre per
valori molto grandi tende ad assomigliare sempre più ad un segmento.
Usare i tracciati
Anche se le forme semplici ci danno una certa libertà di espressione, per realizzare lavori
complessi abbiamo bisogno di utilizzare i tracciati.
Cos’è un tracciato
Un tracciato è un insieme di segmenti, sia curvi che retti; questi segmenti sono uniti fra loro da
punti detti nodi.
Ogni nodo ha due maniglie che permettono di controllare la curvatura dei due segmenti che vi
convergono. Chiariamo con un’immagine:
Figura 1. Nodi e maniglie
Naturalmente anche le figure semplici possono essere viste come particolari tracciati.
I nodi
I nodi sono essenzialmente di due tipi:
nodi angolari: i due segmenti che vi si uniscono cambiano direzione in modo repentino
formando una cuspide
nodi curvilinei: i due segmenti che vi si uniscono non cambiano direzione, formando una
curva continua e morbida.
Figura 2. Tipi di nodi
Come si vede bene nella figura, sia il tipo di nodo, sia la posizione e distanza delle maniglie dal
nodo stesso influenzano la curvatura dei segmenti che si uniscono nel nodo.
È interessante notare che un nodo curvilineo può unire solo due segmenti curvi: infatti, se anche
solo uno dei due è retto (o se entrambi sono retti), l’unico tipo di nodo possibile è quello angolare.
Le maniglie
Le maniglie partono sempre dal nodo a cui appartengono e servono per regolare la curvatura dei
segmenti.
Per modificare un segmento è possibile cambiare posizione e distanza delle maniglie, tenendo conto
che la linea della maniglia rappresenta la tangente al segmento nel nodo stesso.
Tipi di tracciati
Esistono due tipi di tracciati:
tracciati aperti: i nodi di fine e inizio curva sono distinti
tracciati chiusi: i nodi estremi coincidono
Figura 3. Tipi di tracciati
Disegnare tracciati con lo strumento A mano libera
Nella barra degli strumenti, sotto le forme semplici, troviamo lo strumento “Disegna linee a mano
libera”.
Con lo strumento a mano libera possiamo disegnare sulla pagina, proprio come se avessimo in
mano la matita; Inkscape si occupa di sistemare i nodi e le maniglie adattandole al tracciato che
stiamo realizzando.
Per modificare l’approssimazione con cui vengono sistemati i nodi possiamo fare doppio click
sullo strumento “Disegna linee a mano libera” nella barra dagli strumenti; nella finestra che si apre,
alla voce pastello, modifichiamo il parametro Tolleranza.
Figura 4. Parametro “Tolleranza”
Il parametro va variato tenendo conto che più il valore di tolleranza è basso, più la linea avrà un
aspetto irregolare e il tracciato sarà ricco di nodi.
(segue 9)
Tracciati con lo strumento “Penna”
Abbiamo visto nella lezione precedente come disegnare a mano libera. Per ottenere un risultato
più preciso possiamo disegnare tracciati punto per punto con lo strumento “Penna”.
Lo strumento Penna o Disegna traccia a linee diritte si trova nella barra degli strumenti:
Figura 1. Icona della Penna
La Penna ci permette di disegnare tracciati in modo molto preciso, permettendoci di posizionare
esplicitamente i nodi del tracciato.
Per capire come funziona cominciamo ad utilizzarla. Attiviamo lo strumento Penna dalla barra
degli strumenti e proviamo a disegnare una figura chiusa a linee rette come quella in figura:
Figura 2. Esempio di tracciato chiuso a linee rette
Partendo dal nodo cerchiato in rosso possiamo creare questa figura cliccando e lasciando il pulsante
del mouse per posizionare i vari nodi.
Arrivati al nodo più in basso clicchiamo nuovamente sul nodo iniziale per chiudere il tracciato.
Due note:
1. Tenendo premuto control sulla tastiera possiamo limitare l’angolo di orientamento del
segmento che stiamo tracciando.
2. Se vogliamo creare un tracciato aperto facciamo click destro col mouse subito dopo aver
sistemato l’ultimo nodo.
Se creando un nodo vogliamo ottenere linee curve, invece di rilasciare subito il pulsante del
mouse, lo teniamo premuto e trasciniamo. Ci ritroveremo così a muovere le due maniglie del nodo.
Allontaniamo e spostiamo la maniglia a nostro piacimento e poi rilasciamo il pulsante del mouse,
per andare a creare il nodo successivo.
Figura 3. Esempio di nodo curvilineo
Per muovere le due maniglie separatamente, è possibile bloccarne una tenendo premuto
Maiuscolo sulla tastiera per bloccarla e continuare a posizionare l’altra.
Lo strumento Penna può sembrare difficile da utilizzare se si è agli inizi, ma è uno strumento che ci
permette grande libertà di espressione, per questo è importante imparare ad utilizzarlo al meglio.
Per esercitarsi si può cominciare ricalcando un logo o una forma non troppo dettagliata,
ricordandosi che per ottenere un tracciato preciso è importante utilizzare il minor numero di punti
possibile.
Se una maniglia non viene posizionata subito al meglio non è importante, si può proseguire per poi
sistemarla una volta completato il tracciato, come vedremo più avanti.
(segue 10)
Funzioni di autotracing
Inkscape fornisce una potentissima funzione di autotracciamento delle immagini bitmap. Questo
non significa naturalmente che non sia importate imparare a ricalcare o a disegnare a mano libera
con i tracciati, ma piuttosto che in buona parte delle occasioni possiamo utilizzare questo strumento
per velocizzare il lavoro.
Dobbiamo tenere comunque a mente che un autotracer, per quanto potente e preciso, non potrà
quasi mai esentarci dal ritoccare ed ottimizzare manualmente il risultato: usiamolo quindi come
punto di partenza su cui lavorare.
L’autotracing di Inkscape prevede che l’immagine bitmap venga prima di tutto trasformata in una
immagine a due soli colori, con alcuni metodi (in alcuni casi a più passi) che vedremo più avanti.
L’immagine trasformata viene quindi analizzata e tracciata.
Prendiamo il logo di html.it come esempio per il nostro esercizio di tracciamento vettoriale.
Figura 1. Logo Html.it
Selezioniamolo e andiamo sul menu Tracciato>Vettorializza Bitmap.Si apre una finestra come
questa:
Figura 2. Maschera di impostazione del tracciamento
Tenendo sempre a mente che il risultato dipende molto dal tipo e dalla qualità dell’immagine di
partenza, iniziamo a sperimentare per capire come funzionano le varie modalità e relative opzioni di
questo filtro:
•
Luminosità Immagine: per ogni pixel viene calcolata la somma delle componenti di colore
(R+G+B), ovvero l’immagine stessa viene convertita in toni di grigio.
L’immagine viene poi convertita in bianco e nero, facendo diventare neri tutti i pixel più
scuri del valore di soglia, che varia da 0,0 a 1,0.
Quindi l’immagine viene tracciata, e tutti i punti neri vengono considerati interni alla
curva.Questa modalità dà buoni risultati per immagini in bianco e nero o con contorni ben
delineati.
Figura 3. Soglie diverse di lunminosità
Rilevamento bordo: l’immagine viene convertita in toni di grigio, poi viene creata una
maschera di rilevamento bordi, ovvero una immagine in cui i pixel sono tanto più chiari
quanto più differiscono da quelli adiacenti.
Questa maschera viene convertita in bianco e nero come nel caso precedente, poi viene
utilizzata per effettuare il tracciamento.
La linea viene quindi creata fra aree che differiscono in luminosità fra loro più del valore di
soglia (da 0,0 a 1,0); questo significa che più alto sarà il valore di soglia, meno linee
verranno create.
Figura 4. Soglie diverse di Rilevamento Bordo
Quantificazione/riduzione: questa modalità, come la precedente, analizza le differenze fra
pixel adiacenti, ma invece di confrontare le rispettive luminosità, confronta fra loro le
singole componenti di colore, risultando così sensibile anche ai cambiamenti di tonalità.
Più in dettaglio, dell’immagine bitmap vengono prima di tutto create tre maschere di
rilevamento bordi una per ciascun colore principale, maschere che vengono poi ricomposte
in una unica immagine (similmente al filtro “Trova bordi” di Photoshop).
Questa immagine viene ridotta al numero di colori specificato, poi viene tracciata
considerando i colori pari come interni alla curva, e quelli dispari come esterni.
Figura 5. Risultati al variare del numero di colori
Scansioni multiple: l’immagine viene tracciata più volte e ad ogni passaggio viene creata
una diversa curva.
Si possono impostare diversi tipi di scansione: per luminosità, per colore o monocromatica;
quest’ultima funziona come la scansione colore, ma converte in livelli di grigio le varie
scansioni. Si può impostare il numero di scansioni effettuate, quindi il numero di curve
prodotte.
Figura 6. Esempi di scansioni multiple
Ovviamente ogni immagine è un un caso a sé ed è quindi bene fare diverse prove, ricordando che i
tracciati risultanti possono essere molto complessi e con molti nodi, può quindi capitare che il
computer impieghi parecchio tempo per restituire il risultato dell’operazione richiesta.
(segue 11)
Modificare i tracciati
In questa lezione impariamo a modificare tracciati che abbiamo già creato a mano o con strumenti
come l’autotrace. Abbiamo già visto come usare lo strumento “Selezione” per muovere gli oggetti,
qui analizziamo meglio lo strumento “Modifica nodi”.
Figura 1. Icona “Modifica nodi”
Selezionare nodi
Per selezionare un singolo nodo di un tracciato è sufficiente cliccare sul tracciato e poi sul nodo. Il
nodo selezionato diventa blu e appaiono le sue maniglie e di quelli a lui adiacenti.
Per selezionare più di un nodo da un tracciato dobbiamo cliccare e trascinare per indicare un
“rettangolo di selezione” che contenga i nodi che desideriamo, oppure aggiungiamo un nodo alla
volta alla selezione cliccandolo tenendo premuto il tasto Maiuscolo sulla tastiera.
Modificare nodi
Una volta selezionati i nodi, sempre utilizzando lo strumento Modifica nodi, possiamo ritoccare le
curve agendo sui controlli all’estremità delle maniglie.
Figura 2. Esempio di controllo
Attivando lo strumento “Modifica nodi” vediamo apparire parecchie icone nella barra delle Opzioni
dello strumento.
Figura 3. Opzioni di “Modifica nodo”
Esaminamole una per una in dettaglio.
Aggiungere ed eliminare nodi
Non di rado capita che su un tracciato ci siano nodi da eliminare o da aggiungere. Per aggiungere
un nodo dobbiamo selezionare due nodi contigui e poi cliccare sull’icona aggiungi nodo, il nuovo
nodo verrà aggiunto a metà del segmento selezionato.
Per eliminare un nodo dobbiamo selezionarlo e poi cliccare sull’icona elimina nodo.
Figura 4. Icone “aggiungi” ed “elimina”
Unire e separare tracciati
Queste opzioni possono esserci utili tutte le volte che dobbiamo trasformare un tracciato chiuso
in uno aperto e viceversa.
Per chiudere un tracciato dobbiamo selezionare i due nodi estremi poi cliccare su una delle due
icone “Unisci”.
Figura 5. Esempio di chiusura del tracciato aperto
La prima chiude il tracciato facendo collassare uno dei due nodi nell’altro, la seconda invece lascia i
nodi inalterati e aggiunge un segmento fra i due.
Per aprire un tracciato chiuso possiamo selezionare due nodi e cliccare sulla prima icona di
separazione per eliminare il segmento che li unisce, oppure possiamo selezionare un solo nodo e
cliccare sulla seconda icona di separazione; verranno cosi creati due nodi separati dove ce n’era uno
solo.
Figura 6. Esempio di apertura del tracciato chiuso
Modificare il tipo di nodo
Per trasformare un nodo angolare in un nodo curvilineo e viceversa basta selezionare il nodo o i
nodi interessati al cambiamento e cliccare sulla relativa icona nella barra delle opzioni dello
strumento.
Un’ulteriore icona ci permette di creare un nodo simmetrico, ovvero un nodo curvo le cui
maniglie sono di uguale lunghezza.
Figura 7. Icone di trasformazione dei nodi
Modificare il tipo di segmento
Abbiamo già visto che un tracciato può avere sia segmenti retti che segmenti curvi. Per
trasformare un segmento retto in uno curvo e viceversa selezioniamo i due nodi ai suoi estremi e
clicchiamo sull’icona corrispondente.
Figura 8. Icone di trasformazione dei segmenti
Semplificare un tracciato
Per semplificare un intero tracciato riducendone il numero di punti è possibile usare la funzione dal
menu Tracciato>Semplifica. Verrà ridotto il numero di nodi del tracciato, cercando però di
mantenerne la forma
(segue 12)
Lo strumento “pennino”
Questa lezione è dedicata allo strumento “pennino”, strumento un po’ particolare ma che può
rivelarsi molto utile, soprattutto se utilizzato con una tavoletta grafica.
Troviamo il pennino nella barra degli strumenti:
Figura 1. Icona del “pennino”
Disegnare (anche senza tavoletta grafica) con lo strumento pennino è piuttosto semplice e intuitivo;
basta cliccare e, mantenendo premuto il pulsante sinistro del mouse, disegnare sulla pagina.
Il pennino crea segni grossi o sottili sulla pagina, come se stessimo usando un vero pennino a
china.
Il tracciato creato è formato da un percorso chiuso che segue il profilo del disegno.
Figura 2. Esempio di tracciato del “pennino”
Ovviamente, se invece del mouse utilizziamo una tavoletta grafica, il tracciato è influenzato
anche dalla pressione della penna sulla tavoletta.
Attivando lo strumento pennino notiamo parecchie scelte nella “barra delle opzioni”, esaminiamole:
Larghezza: va da 0.01 a 1.00 e determina lo spessore del tratto del pennino
Diradamento: va da -1.0 a 1.0 e determina quanto lo spessore del tratto si ingrossi o si
assottigli a seconda dalla velocità di tracciamento. (0 indica l’indipendenza dalla velocità).
Angolo; va da -90 a 90 e determina l’angolazione della penna rispetto all’asse orizzontale.
Fissaggio: va da 0.0 a 1.00 e determina l’angolazione del pennino rispetto al tracciato.
Massa: va da 0.0 a 1.0 e determina quanto il tratto segua il movimento della penna (inerzia
della penna).
Resistenza: va da 0.0 a 1.0 e determina la resistenza al movimento della penna.
Il pulsante “Predefiniti” riporta tutte le configurazioni a quelle di default.
Non dobbiamo dimenticarci che, una volta disegnati, anche questi tracciati possono essere
modificati attraverso i nodi e le maniglie.
Figura 3. Esempio di modifica del tracciato del “pennino”
(segue 13)
La gestione dei livelli
Prima di tutto cerchiamo di capire cosa sono i livelli. Immaginiamo di posare un foglio di carta da
lucido sulla nostra pagina: quel che abbiamo fatto equivale a creare un livello; su ogni livello
possono essere poi disegnati oggetti a piacimento (tracciati, testo, immagini bitmap) che potranno
essere gestiti, oltre che singolarmente, anche come insieme, proprio perché appartenenti allo stesso
livello.
Su Inkscape i livelli vengono gestiti attraverso il menu “Livello” e tramite la barra di stato.
Quando creiamo un nuovo documento, automaticamente viene definito un primo livello su cui
iniziare a disegnare. Se abbiamo bisogno di altri livelli li aggiungiamo noi.
Aggiungere livelli
Per aggiungere un nuovo livello al nostro disegno utilizziamo il menu Livello>Aggiungi livello.
Appare una finestra di dialogo in cui scriviamo il nome del nuovo livello, confermiamo cliccando
su Aggiungi.
A questo punto il livello è stato aggiunto, come possiamo verificare anche aprendo l’apposita
casella a discesa nella barra di stato.
Figura 1. Particolare della barra di stato
Posizionarsi su un livello
Possiamo scegliere di operare su un particolare livello, quando ne abbiamo più di uno, e quindi
effettuare operazioni e disegnarvi sopra) semplicemente scegliendolo dalla casella a discesa nella
barra di stato.
Figura 2. Selezione di un livello
Possiamo anche utilizzare il menu Livello>Passa al livello superiore o Passa al livello inferiore per
spostarci rispettivamente di un livello più su o di uno più giù rispetto a quello in cui ci troviamo.
Rinominare un livello
Se il nome che abbiamo dato alla creazione del livello non ci soddisfa possiamo cambiarlo
posizionandoci sul livello da rinominare e poi andando sul menu Livello>Rinomina Livello.
Appare una finestra di dialogo in cui sarà possibile assegnare un nuovo nome al livello; cliccare poi
su Rinomina per confermare la modifica.
Spostare un livello
Se vogliamo spostare un livello rispetto agli altri, ovvero vogliamo che i nostri fogli di carta da
lucido siano impilati in un ordine diverso, possiamo posizionarci sul livello da spostare e utilizzare i
comandi dal menu Livello:
Alza livello: scambia il livello attuale con quello sovrastante
Abbassa livello: scambia il livello attuale con quello sottostante
Sposta livello in cima: porta il livello attuale sopra a tutti gli altri
Sposta livello in fondo: porta il livello attuale sotto a tutti gli altri
Eliminare un livello
Per eliminare un livello e tutto quello che in esso è contenuto basta posizionarcisi sopra e andare sul
comando di menu Livello>Elimina livello. Il livello sparirà immediatamente dall’elenco dei livelli
nella barra di stato.
Bloccare un livello
Bloccare un livello significa far in modo che non sia più possibile né disegnare né compiere altre
operazioni sugli oggetti che ne fanno parte.
Figura 3. Icone per bloccare e sbloccare un livello
Per bloccare un livello posizionarcisi sopra dal menu a discesa nella barra di stato e premere
l’icona a lucchetto. Per sbloccarlo rifare la stessa operazione su un livello già bloccato.
Nascondere un livello
Nascondere un livello significa fare in modo che tutto ciò che vi è contenuto venga
temporaneamente reso invisibile, naturalmente senza che nulla venga invece realmente cancellato.
Figura 4. Icone per nascondere e mostrare un livello
Per nascondere un livello posizionarcisi sopra dal menu a discesa nella barra di stato e premere
l’icona a occhio. Per far ricomparire il livello ripetere lo stesso procedimento su un livello già
nascosto.
(segue 14)
Gestire gli oggetti
Per oggetto si intende uno qualsiasi degli elementi che possono comparire sulla pagina, quindi
tracciati, testo e immagini bitmap importate.
All’interno di uno stesso livello possono esistere diversi oggetti, che vengono automaticamente
impilati da Inkscape rispettando il loro ordine di creazione: sotto troviamo gli oggetti più vecchi,
man mano che li si crea gli oggetti nuovi vi si sovrappongono.
Per dare un ordinamento diverso agli oggetti sulla pagina possiamo utilizzare le opzioni dello
strumento Selezione o le voci del menu Oggetto.
Cambiare l’ordine di un oggetto
Selezioniamo l’oggetto che vogliamo impilare diversamente e, utilizzando le icone nella barra delle
opzioni dello strumento Selezione, possiamo esguire le seguenti azioni:
Spostare l’oggetto selezionato sotto tutti gli altri, è possibile eseguire la stessa operazione dal
menu Oggetto>Sposta in fondo.
Spostare l’oggetto selezionato sopra tutti gli altri, è possibile eseguire la stessa operazione
dal menu Oggetto>Sposta in cima.
Scambiare l’oggetto selezionato con quello subito sotto di esso, è possibile eseguire la stessa
operazione dal menu Oggetto>Abbassa.
Scambiare l’oggetto selezionato con quello subito sopra di esso, è possibile eseguire la stessa
operazione dal menu Oggetto>Alza.
Raggruppare e dividere oggetti
Come abbiamo già accennato nelle lezioni precedenti, è possibile raggruppare gli oggetti, per far in
modo che vengano selezionati e si possano quindi spostare insieme.
Per farlo selezioniamo tutti gli oggetti da inserire nel gruppo e premiamo l’icona Raggruppa sulla
barra dei comandi, o andiamo sul menu Oggetti>Raggruppa.
Per separare un gruppo di oggetti già raggruppati, selezioniamolo e premiamo l’icona Dividi sulla
barra dei comandi, o andiamo sul menu Oggetti>Dividi.
Figura 1. Icone di “Raggruppa “e “Dividi”
(segue 15)
Spostare e ruotare oggetti
In questa lezione iniziamo a vedere come, una volta creato un oggetto, possiamo spostarlo e
ruotarlo sulla tavola da disegno.
Spostare oggetti
Il metodo più immediato per spostare un oggetto sulla tavola è utilizzando lo strumento “Selezione”
già visto nelle lezioni precedenti. Se però vogliamo muovere un oggetto in modo preciso, ma
senza usare guide e griglie, abbiamo due differenti possibilità.
Possiamo selezionare l’oggetto e impostare i valori nelle caselle X e Y nella barra delle opzioni
dello strumento “Selezione”.
Per regolare correttamente il numero di pixel di spostamento teniamo sempre a mente che il punto
di origine (X=0, Y=0) per Inkscape è l’angolo in basso a sinistra della pagina.
Figura 1. Caselle X e Y della selezione
L’altra possibilità è selezionare l’oggetto ed andare sulla voce di menu Oggetto>Trasforma. Ci
appare una finestra di dialogo con diverse linguette, posizioniamoci su “Muovi” e marchiamo la
casella “Movimento relativo”.
Possiamo, adesso, spostare l’oggetto impostando nelle caselle “Horizontal” e “Vertical” il numero di
pixel di scostamento rispetto al punto in cui si trova l’oggetto ora, ricordando che a valori
negativi corrispondono spostamenti verso sinistra e in basso.
Figura 2. Pannello “Muovi”
Confermiamo lo spostamento cliccando sul pulsante “Applica”.
Ruotare oggetti
Anche per ruotare un oggetto abbiamo più di una possibilità. Possiamo usare lo strumento
“Selezione”: cliccando una seconda volta dopo aver cliccato per selezionare l’oggetto, appaiono
delle comode maniglie sugli spigoli della selezione che, trascinate, ci permetteranno di ruotare
l’oggetto rispetto al suo centro.
Figura 3. Maniglie per la rotazione
È anche possibile spostare il centro di rotazione, cliccandolo e trascinandolo in una posizione
diversa.
Se vogliamo, invece, ruotare di 90° l’oggetto possiamo utilizzare le due voci predefinite dal menu
Oggetto>Ruota 90° orari e Ruota 90° anti-orari oppure le icone corrispondenti nella barra delle
opzioni dello strumento Selezione.
Figura 4. Icone per la rotazione di 90°
Se vogliamo impostare con precisione i gradi di rotazione dell’oggetto possiamo farlo utilizzando
la finestra Oggetto>Trasforma e cliccando sulla linguetta “Ruota”.
Figura 5. Pannello “Ruota”
Impostiamo il valore in gradi (deg) o in radianti (rad) nella casella Ruota e confermiamo la
rotazione cliccando sul pulsante “Applica”. La rotazione in questo caso avviene
obbligatoriamente rispetto al centro dell’oggetto.
(segue 16)
Scalare e riflettere un oggetto
In questa lezione impariamo come, creato un oggetto, sia possibile ridimensionarlo e rifletterlo
rispetto ad un asse.
Scalare oggetti
Se l’oggetto che creiamo è troppo piccolo (o troppo grande) possiamo ridimensionarlo utilizzando
le maniglie di ridimensionamento che appaiono selezionandolo.
Figura 1. Esempio di maniglie
Se vogliamo ridimensionare proporzionalmente (ovvero senza deformare l’oggetto) possiamo
trascinare una qualsiasi delle otto maniglie tenendo premuto Control sulla tastiera.
Se invece vogliamo ridimensionare mantenendo fisso il centro dell’oggetto trasciniamo le
maniglie tenendo premuto Maiuscolo.
Se la nostra necessità, invece, è di scalare l’oggetto di una data percentuale, andiamo sul menu
Oggetto>Trasforma e utilizzando le caselle “Width” e “Height” della linguetta “Scala” possiamo
impostare la percentuale di ingrandimento o rimpicciolimento.
Figura 2. Pannello “Scala”
Confermiamo il ridimensionamento premendo il pulsante “Applica”.
Inkscape ci mette a disposizione una ulteriore possibilità di ridimensionamento: selezionando
l’oggetto e impostando una dimensione in pixel nelle caselle “W” e “H” nelle opzioni dello
strumento Selezione ne cambieremo le rispettive dimensioni.
Figura 3. Opzioni di ridemensionamento per la selezione
Cliccando sul lucchetto al centro possiamo imporre un ridimensionamento proporzionale,
ovvero rimarrà costante la proporzione fra altezza e larghezza dell’oggetto.
Se vogliamo esprimere le dimensione rispetto ad una unità di misura differente possiamo
scegliere fra quelle messe a disposizione nel menu a discesa.
Riflettere oggetti
Riflettere significa ribaltare simmetricamente rispetto ad un asse; Inkscape ci dà la possibilità di
riflettere in modo semplice uno o più oggetti rispetto ad un asse orizzontale o verticale.
Figura 4. Esempi di riflessioni
Per riflettere un oggetto è sufficiente selezionarlo e cliccare sulle icone riguardanti la riflessione
verticale o orizzontale sulla barra delle opzione dello strumento Selezione.
Figura 5. Icone per la riflessione
È possibile eseguire la stessa operazione andando sul menu Oggetto>Rifletti Orizzontalmente e
Rifletti Verticalmente.
(segue 17)
Duplicare e distorcere
In questa lezione impariamo a duplicare, clonare e distorcere un oggetto.
Duplicare oggetti
Duplicare significa creare una copia identica di un oggetto presente sulla pagina. I comandi per
duplicare un oggetto sono sempre visibili nelle barra dei comandi della finestra di Inkscape:
Figura 1. Icone per la duplicazione
Duplica: ci permette, una volta selezionato l’oggetto, di farne una copia identica
Crea clone collegato: ci permette, una volta selezionato l’oggetto, di avere un clone, ovvero
un altro oggetto che si modificherà automaticamente ogni volta che l’originale da cui è stato
clonato subirà una modifica.
Rimuove collegamento fra clone e originale: Ci permette di trasformare un clone in un
normale duplicato che potrà quindi essere modificato indipendentemente.
Per sapere quale fra tanti eventuali cloni sia in realtà l’originale, selezionare un clone qualsiasi e
andare sul menu Modifica>Seleziona originale.
Distorsione di oggetti
La distorsione è quella deformazione che trasforma un rettangolo in un parallelogramma,
anche se naturalmente può essere applicata a qualsiasi oggetto.
Applicare la distorsione risulta molto utile quando si vogliono dare effetti prospettici ad un oggetto,
o, usata insieme al ridimensionamento, per creare delle ombre.
Figura 2. Esempio di uso della distorsione
Per distorcere un oggetto selezionarlo e andare sul menu Oggetto>Trasforma.
Nella finestra di dialogo che si apre cliccare sulla linguetta Distorsione e utilizzare le caselle
Horizontal e Vertical per impostare la distorsione orizzontale e verticale in pixel.
Figura 3. Pannello “Distorsione”
Se si vuole esprimere lo spostamento in un’unità di misure differente, sceglierla fra quelle
disponibile nella casella a discesa.
Impostati i dati confermare cliccando su “Applica”; per applicare più volte distorsioni ulteriori
continuare a premere “Applica”.
(segue 18)
Allineare e distribuire
In questa lezione impareremo a sistemare in modo preciso molti oggetti sulla pagina usando la
finestra Allinea e Distribuisci. Per accedere a queste funzioni andiamo sul menu Oggetto>Allinea e
Distribuisci.
Allineare
Se vogliamo allineare rapidamente più oggetti tra loro, selezioniamoli e apriamo la finestra Allinea
e Distribuisci.
Figura 1. Pannello “Allineamento”
Dal menu a discesa “Relativo a” scegliamo il riferimento rispetto al quale Inkscape dovrà eseguire
l’allineamento. Possiamo allineare i nostri oggetti in relazione alla selezione, alla pagina, al disegno,
all’oggetto più grande.
Clicchiamo poi su una icona delle funzioni di allineamento
Verticale:
o Allinea gli oggetti al lato sinistro del riferimento scelto nella casella “Relativo a”
o Allinea i lati sinistri
o Allinea i centri
o Allinea i lati destri
o Allinea gli oggetti al lato destro del riferimento scelto nella casella “Relativo a”
o Allinea i lati sinistri di un testo
Orizzontale:
o Allinea gli oggetti alla base del riferimento scelto nella casella “Relativo a”
o Allinea i lati superiori
o Allinea i centri orizzontali
o Allinea i lati inferiori
o Allinea gli oggetti al lato superiore del riferimento scelto nella casella “Relativo a”
o Allinea i testi alla base
Distribuire
Distribuire significa riposizionare gli oggetti secondo vari criteri, ripartendo gli spazi che li
separano più o meno regolarmente.
Apriamo la finestra Allinea e Distribuisci:
Figura 2. Pannello “Distribuisci”
Selezioniamo gli oggetti da distribuire e poi clicchiamo su una delle icone della finestra,
distribuendoli così rispetto agli assi:
• Verticali:
• Eguaglia la distanza fra i lati sinistri degli oggetti
• Eguaglia la distanza fra i centri degli oggetti
• Eguaglia la distanza fra i lati destri degli oggetti
• Ripartisce equamente la distanza fra gli oggetti
• Ripartisce equamente le distanze fra le linee base del testo
• Orizzontali:
• Eguaglia la distanza fra i lati inferiori degli oggetti
• Eguaglia la distanza fra i centri degli oggetti
• Eguaglia la distanza fra i lati superiori degli oggetti
• Ripartisce equamente la distanza fra gli oggetti
• Ripartisce equamente le distanze fra le linee base del testo
Abbiamo poi altre due icone che agiscono sia verticalmente che orizzontalmente. Servono
rispettivamente a posizionare in modo casuale i centri degli oggetti sulla pagina e a sparpagliare
gli oggetti cercando di rendere omogenei gli spazi fra bordo e bordo di ogni oggetto.
(segue 19)
Combinare i tracciati
I tracciati, sia quelli semplici che quelli creati da noi, possono essere combinati fra di loro, per
creare così nuove forme.
Per combinare due o più tracciati questi devono sovrapporsi almeno in parte; i metodi di
combinazione sono molteplici, tutti presenti nel menu tracciato. Selezioniamo gli oggetti da
combinare e scegliamo il metodo più adatto alle nostre esigenze:
•
Tracciato>Unione: Il nuovo tracciato è l’unione dei profili dei tracciati selezionati, ovvero
ciò che era interno ad almeno uno dei tracciati sarà interno a quello finale
Tracciato>Differenza: Il nuovo tracciato è la differenza fra il tracciato sottostante e quello
sovrastante
Tracciato>Intersezione: Il nuovo tracciato è l’intersezione fra i tracciati selezionati
Tracciato>Esclusione: L’opposto dell’intersezione, il nuovo tracciato è formato dalle parti
non in comune dei tracciati selezionati
Tracciato>Divisione: Vengono creati due nuovi tracciati che rappresentano rispettivamente
la differenza e l’intersezione dei tracciati originali.
Tracciato>Taglia tracciato: Il tracciato di sopra taglia quello sottostante rimuovendone il
riempimento
Figura 1. Esempi di combinazione dei tracciati
Combina e separa
La voce di menu Tracciato>Combina apparentemente sembra creare un nuovo tracciato uguale alla
funzione Esclusione, in realtà quello che risulta dalla funzione Combina non è un nuovo oggetto ma
una combinazione reversibile dei tracciati originali, che restano modificabili. La funzione Separa
riporta un tracciato creato con Combina ai tracciati originali.
Intrudi e Estrudi
Le funzioni Intrudi (menu Tracciato>Intrudi) trasforma il tracciato originale in un altro, le cui linee,
interne a quelle dell’originale, si trovano ad una distanza precisa da esse.
Le funzioni Estrudi (menu Tracciato>Estrudi) è identica, ma il tracciato sarà esterno all’originale.
Figura 2. Azione di Intrudi/Estrudi sul tracciato
(segue 20)
Riempimento e contorno
Ogni oggetto vettoriale, che sia un tracciato aperto o chiuso o un testo, è composto da un
riempimento ed un contorno; il contorno è ciò che delimita il riempimento, ed entrambi possono
avere assegnato un colore ed uno stile, o al contrario non averne nessuno. Nel caso non abbiano
nessun colore assegnato, o il contorno abbia spessore uguale a zero, risulteranno invisibili sulla
pagina.
Figura 1. Esempio di contorno e riempimento
Finestra di riempimento
Per modificare il colore di riempimento di un oggetto dobbiamo selezionarlo e aprire la finestra di
Riempimento e contorno cliccando sull’icona nella barra dei comandi:
Figura 2. Icona di Riempimento e contorno
Si apre una complessa finestra di dialogo; occupiamoci prima di tutto della linguetta Riempimento:
Figura 3. Finestra di Riempimento e contorno
Cominciamo ad eseminarla dall’alto:
Troviamo subito i tipi di riempimento disponibili: nessun riempimento, uniforme, sfumatura
lineare, sfumatura radiale, motivo e disattiva il riempimento per l’ereditarietà.
Ci occupiamo del riempimento uniforme, ricordando sempre che se non vogliamo nessun
riempimento sarà sufficiente cliccare sull’icona con la “x”.
Sulla stessa riga abbiamo due pulsanti che ci permettono di scegliere il metodo di riempimento: il
primo crea dei vuoti là dove le linee di contorno si intersecano, mentre il secondo riempie
interamente il tracciato.
Figura 4. DESCRIZIONE
Subito al di sotto troviamo quattro linguette, che corrispondono ad altrettanti metodi per
determinare il colore di riempimento da assegnare all’oggetto selezionato; possiamo usare
indifferentemente quello che più ci è comodo.Nell’immagine è visibile la ruota dei colori; nelle
altre linguette è possibile invece scegliere il colore per componenti.
Ricordiamo sempre che, qualsiasi sia il metodo con cui selezioniamo il colore qui, nel documento
verrà comunque poi salvato in componenti RGB, comunque sempre visibili nei loro valori
esadecimali in basso a destra nella casella RGBA (dove A sta per canale Alfa).
Segue poi, sotto la ruota dei colori, il selettore del canale Alfa (A), che rappresenta l’opacità del
colore di riempimento.
L’ultima barra rappresenta l’opacità generale, ovvero l’opacità sia del riempimento che del
contorno.
I cambiamenti effettuati in questa finestra verranno istantaneamente applicati agli oggetti
selezionati essendo così immediatamente visibili.
(segue 21)
Sfumatura
In Inkscape i riempimenti sfumati (detti anche gradienti) possono essere di due tipi:
Lineare: i colori sfumano rispetto ad un asse rettilineo
Radiale: i colori sfumano da un punto verso l’esterno
Figura 1. Differenza tra lineare e radiale
Per creare un riempimento sfumato possiamo utilizzare la finestra di Riempimento e contorno, o,
molto più semplicemente, utilizzare lo strumento gradiente nella barra degli strumenti:
Figura 2. Icona dello strumento gradiente
Per assegnare una sfumatura ad un oggetto dobbiamo prima selezionarlo e poi attivare lo
strumento gradiente. Nella barra delle opzioni dello strumento impostiamo i parametri che vediamo
di seguito:
Figura 3. Barra delle opzioni del gradiente
1. Possiamo scegliere se creare una sfumatura lineare o radiale.
2. Possiamo scegliere se assegnare la sfumatura al riempimento o al contorno dell’oggetto
selezionato.
3. Possiamo scegliere fra le sfumature già presenti nel menu a discesa.
4. Il pulsante Duplica inserisce nella casella a discesa la sfumatura attuale, per poterla poi
modificare senza perdere l’originale.
5. Il pulsante Modifica serve a modificare la sfumatura scelta nel menu a discesa, aprendo la
finestra di dialogo Editor di gradiente.
Analizziamo la finestra Editor di gradiente per capire come modificare o creare nuove sfumature:
Figura 4. Finestra Editor di gradiente
A. Anteprima della sfumatura lineare
B. Casella a discesa che permette di scegliere il passaggio di sfumatura su cui si sta operando
C. Aggiunge un passaggio intermedio alla sfumatura; Il passaggio viene aggiunto fra quello
selezionato in B e il seguente.
D. Cancella il passaggio selezionato in B. Le sfumature devono avere per loro stessa
definizione almeno due colori, quindi il pulsante “Cancella” non funziona quando ci sono
solo i due colori estremi (iniziale e finale) presenti nella casella a discesa B.
E. La traduzione del comando è sbagliata nella versione italiana: questa barra non determina
affatto l’opacità, bensì la posizione del passaggio nel suo range, dal colore che lo precede a
quello che lo segue; notare che naturalmente i due colori estremi sono bloccati.
F. Colore e canale Alfa: con la ruota o scegliendo i colori per componenti possiamo cambiare il
colore del passaggio che abbiamo scelto nella casella B e determinarne la trasparenza con la
barra del canale Alfa.
Impostati tutti i parametri il nostro oggetto ha già la sfumatura applicata.
(segue 22)
Sfumatura, trasparenza e contagocce
Regolare una sfumatura
Impostati tutti i parametri per creare la sfumatura desiderata (vedi lezione precedente) possiamo ora
regolare i punti di partenza ed arrivo della sfumatura stessa rispetto al nostro oggetto.
Per regolare la sfumatura lineare abbiamo a disposizione un segmento con due maniglie agli
estremi. Cliccando e trascinando le maniglie con lo strumento Gradiente attivo possiamo regolare a
piacimento la sfumatura.
Figura 1. Esempi di sfumatura lineare
Le maniglie rappresentano rispettivamente l’inizio e la fine della sfumatura; la direzione del
segmento rappresenta la direzione della sfumatura lineare.
Per regolare la sfumatura radiale rispetto all’oggetto abbiamo invece a disposizione due
segmenti che, partendo da un unico centro, terminano con due maniglie circolari.Cliccando e
trascinando con lo strumento Gradiente attivo possiamo spostare e inclinare le maniglie a
piacimento.
Figura 2. Esempi di sfumatura radiale
I segmenti rappresentano direzione e lunghezza dei due raggi dell’ellisse (o circonferenza se uguali)
della sfumatura, mentre il centro rappresenta appunto il centro dell’ellisse di sfumatura.
Trascinandolo mentre si tiene premuto Maiuscolo sulla tastiera è possibile spostare il centro in
modo indipendente dai raggi.
Figura 3. Sfumatura con centro in basso a sinistra
Riempimenti trasparenti
La trasparenza l’abbiamo già trattata, almeno da un certo punto di vista, nelle lezioni precedenti.
Infatti, come abbiamo visto nella lezione 20, per assegnare ad un oggetto un riempimento
trasparente è sufficiente selezionarlo e regolare il canale Alfa o l’opacità generale dalla finestra
Riempimento e contorno.
Figura 4. Esempi di riempimento trasparente
Lo strumento Contagocce
Lo strumento Contagocce, che troviamo nella barra degli strumenti, ha come scopo quello di
prelevare un colore dalla pagina e assegnarlo all’oggetto selezionato.
Il funzionamento è semplice: selezioniamo un oggetto, attiviamo il Contagocce e poi, cliccando
nel punto voluto della pagina, assegnamo immediatamente il colore presente in quel punto
all’oggetto selezionato.
Figura 5. Icona del contagocce
Se cliccando teniamo premuto Alt sulla tastiera assegnamo il complementare del colore scelto.
Se invece teniamo premuto Maiuscolo assegnamo il colore al contorno dell’oggetto, anziché al suo
riempimento.
C’è però un’altra funzione del contagocce che è interessante conoscere: invece che cliccare
semplicemente, clicchiamo e trasciniamo su un’area della pagina; il colore assegnato all’oggetto
selezionato sarà il colore medio dell’area racchiusa.
Figura 6. Esempio di applicazionde del colore medio
(segue 23)
Motivo di riempimento e contorno
A volte può essere utile creare un motivo da poter utilizzare come riempimento, o anche come
contorno, di uno o più oggetti.
Creare un motivo
Possiamo creare il nostro motivo con Inkscape stesso, sfruttando tutti gli strumenti di disegno e di
colorazione appresi finora. Una volta realizzato il disegno che intendiamo usare come motivo,
selezioniamo tutti i suoi tracciati e dal menu Modifica andiamo sulla voce Da Oggetto a Motivo.
A questo punto possiamo attivare lo strumento Modifica nodi e, selezionando il motivo,
appariranno nuove maniglie per ruotare, spostare e ridimensionare il motivo.
Figura 1. Maniglie del motivo
Modificando le maniglie illustrate possiamo
Muovere il motivo all’interno della selezione dello stesso, in modo che non sia quindi più
centrato rispetto alla selezione.
Ruotare il motivo rispetto al centro (la x in alto a sinistra)
Ridimensionare il motivo, ovvero ingrandirlo o rimpicciolirlo rispetto al rettangolo di
selezione
Modificare l’arrotondamento degli angoli o la dimensione del rettangolo di selezione
Ecco un esempio di quello che si può ottenere:
Figura 2. Esempio di manipolazione dei motivi
Quando la disposizione ci soddisfa il motivo è pronto per essere applicato.
Applicare un motivo
Una volta creato il motivo come vogliamo, selezioniamo l’oggetto a cui applicarlo e apriamo la
finestra di Riempimento e contorno.
Figura 3. Applicare il motivo in 4 mosse
Selezioniamo la linguetta Riempimento e attiviamo il riempimento con motivo (1), andiamo poi a
cliccare sulla casella a discesa (2) che ci permetterà di scegliere fra i motivi finora creati quale
applicare (3). Infine vedremo applicato il nostro motivo all’oggetto selezionato (4).
Colore di contorno
Finora ci siamo occupati del colore di riempimento, ma possiamo riportare tutto ciò che abbiamo
imparato su quello di contorno.
Nella finestra Riempimento e contorno, cliccando sulla linguetta Colore contorno possiamo vedere
come tutte le informazioni riguardo i colori uniformi, le sfumature, le trasparenze ed i motivi
possano essere applicate allo stesso modo al contorno.
Possiamo quindi rifarci senza particolari eccezioni a quanto visto per i riempimenti.
Figura 4. Maschera del contorno
(segue 24)
Stile di contorno
Per quanto riguarda il colore, il contorno si comporta esattamente come il riempimento, ma ci sono
alcune caratteristiche stilistiche che lo riguardano che hanno bisogno di una trattazione a parte.
Selezioniamo un oggetto a cui abbiamo dato un qualsiasi tipo di contorno (non nullo) e dalla
finestra Riempimento e contorno scegliamo la linguetta Stile contorno:
Figura 1. Finestra Riempimento e contorno
Abbiamo parecchie impostazioni a disposizione; vediamole una alla volta.
Larghezza. Rappresenta lo spessore del contorno, possiamo variarla a piacimento.
Possiamo variare anche l’unità di misura dalla casella a discesa, ricordandoci che anche tutte
le altre caselle numeriche di questa finestra faranno riferimento all’unità di misura impostata
qui.
Spigoli. Possiamo impostare tre diversi tipi di spigoli: vivo, arrotondato e tagliato.
Spigolosità. E’ attivo solo per lo spigolo al vivo;determina la lunghezza massima dello
spigolo, se la lunghezza viene superata lo spigolo viene automaticamente trasformato in
spigolo tagliato.
Estremi. Possiamo impostare 3 tipi di estremi: geometrico, arrotondato, squadrato.
Tratteggio. Possiamo scegliere fra diversi tipi di tratteggio presenti nella casella a discesa.
Il numero di fianco serve a traslare il motivo di tratteggio lateralmente.
Delimitatore iniziale. Per oggetti aperti: inserisce sul primo nodo del contorno una delle
frecce o delle figure scelte dal menu a discesa.
Delimitatore medio. Per oggetti aperti: inserisce su tutti i nodi (tranne il primo e l’ultimo)
del contorno una delle frecce o delle figure scelte dal menu a discesa.
Delimitatore finale. Per oggetti aperti: inserisce sull’ultimo nodo del contorno una delle
frecce o delle figure scelte dal menu a discesa.
Un esempio di cosa è possibile fare con l’uso dei delimitatori:
Figura 2. Esempio di uso dei delimitatori
(segue 25)
Inserire e modificare il testo
Abbiamo visto ormai molte caratteristiche e potenzialità di questo programma; seguendo la guida
dovremmo ormai essere in grado di realizzare forme e disegni di ogni genere e colorarli a
piacimento. Ci manca ancora l’ultimo passo, imparare ad inserire ed impostare il testo.
In Inkscape abbiamo a disposizione due tipi principali di testo: il testo indipendente e il testo in
un’area.
Figura 1. Tipi di testo
Inserire testo indipendente
Il testo indipendente è da preferire per l’inserimento di titoli o testi brevi, non ha un’area
predefinita e gli ‘a capo’ al suo interno devono essere inseriti manualmente.
Per creare testo indipendente scegliamo lo strumento Testo dalla barra degli strumenti
Figura 2. Icona del testo
e clicchiamo nel punto in cui desideriamo inserire il testo sulla pagina; appare il cursore di testo
lampeggiante ed è possibile così iniziare a digitare il testo voluto.
Inserire testo in un’area
Il testo in un’area è da preferire quando dobbiamo inserire lunghe righe di testo; ha un’area
predefinita e va automaticamente a capo a seconda della dimensione dell’area e del testo digitato.
Per creare testo in un’ area scegliamo lo strumento Testo dalla barra degli strumenti, clicchiamo e
trasciniamo sulla pagina per delimitare l’area; rilasciato il puntatore del mouse all’interno dell’area
compare il cursore di testo lampeggiante ed è possibile quindi iniziare a digitare il testo voluto.
È possibile trasformare il testo in un’area in testo indipendente selezionando l’oggetto testo e
andando sul menu Testo>Converti in Testo.
Modificare il testo
Sia che si tratti di testo indipendente che di testo in un’area se abbiamo bisogno di modificare le
parole inserite, possiamo semplicemente cliccare sul testo stesso con lo strumento Testo,
riapparirà il cursore lampeggiante e potremmo così apportare le modifiche.
Un’alternativa a questo metodo è selezionare l’oggetto testo con lo strumento selezione, cliccare
sull’icona Modifica testo nella barra dei comandi e cliccare poi sulla linguetta Testo.
Figura 3. Icona Modifica testo
Nell’unico riquadro della finestra troviamo il testo già inserito a cui è possibile apportare le
modifiche, premendo poi il pulsante Applica in basso a destra per confermarle.
Selezionare il testo
Per selezionare il testo possiamo utilizzare lo strumento Testo nella barra degli strumenti cliccando
in un punto del testo e trascinando. Per selezionare una parola clicchiamo due volte sopra di essa e
per selezionare una intera riga clicchiamo tre volte.
(segue 26)
Formattare il testo
Quando il testo è inserito possiamo assegnargli diverse caratteristiche di stile, aspetto e colore.
Selezioniamo il blocco di testo su cui vogliamo lavorare e premiamo l’icona Modifica testo nella
barra dei comandi.
Figura 1. Icona Modifica testo
Scegliendo la linguetta Carattere abbiamo a disposizione molte impostazioni.
Figura 2. Impostazioni del carattere
Esaminiamole una ad una:
Carattere. Ci mette a disposizione la lista dei font installati sul nostro sistema operativo tra
cui scegliere quello che preferiamo assegnare al testo selezionato.
Stile. È lo stile del font, la lista mostrerà le varie versioni disponibili del carattere.
Dimensione carattere. Possiamo scegliere la dimensione del font sia dalla casella a discesa,
sia inserendo un valore in punti da tastiera.
Aspetto. Nella prima riga possiamo scegliere l’allineamento del testo: a sinistra, centrato e
a destra.Inkscape non dispone ancora di un modo per giustificare il testo, ad oggi l’unico
modo di ottenere testo giustificato è aggiungere a posteriori “text-align: justify” allo stile
attraverso l’editor XML.
Nella seconda riga invece possiamo scegliere l’orientazione del testo: orizzontale o
verticale.
Figura 3. Esempi di orientazione del testo
Spaziatura linee. Corrisponde all’interlinea, ovvero la distanza fra una riga e la successiva,
la percentuale è relativa alla dimensione del font.
Anteprima. Mostra l’anteprima delle modifiche effettuate al testo selezionato. Tutte le
modifiche apportate saranno attive solo dopo aver premuto il pulsante Applica.
Colore e contorno
Il testo è considerato un oggetto come tutti gli altri è quindi possibile cambiarne colore e aggiungere
un contorno semplicemente selezionando e utilizzando la finestra Riempimento e contorno come
abbiamo già visto nel precedente capitolo.
Spostare il testo rispetto alla linea di base
Possiamo dare effetti particolari spostando uno o più caratteri del testo verso l’alto o verso il basso
rispetto alla linea base.
Selezioniamo i caratteri da spostare e poi sulla tastiera tenendo premuto Alt muoviamo il testo nella
direzione voluta tramite i tasti freccia.
Figura 4. Spostamento del testo dalla linea di base
Per far tornare normale il testo modificato in questo modo, selezionarlo e andare sul menu
Testo>Rimuovi trasformazioni.
Testo sul tracciato e in un contenitore
Finora abbiamo visto testi scorrere linearmente o racchiusi dentro contenitori rettangolari, in questa
lezione impareremo come far scorrere un testo su un tracciato qualsiasi ed inserire testo dentro un
contenitore di una forma qualsiasi.
Testo sul tracciato
Prepariamo il nostro testo indipendente da sistemare sul tracciato come spiegato nelle lezioni
precedenti; prepariamo anche il tracciato su cui vogliamo far scorrere il testo. Ora selezioniamo
testo e tracciato e andiamo sul menu Testo>Metti sul tracciato.
Figura 1. Esempio di testo su un tracciato
Il testo viene distribuito sul percorso del tracciato partendo dall’inizio per arrivare alla fine.
Testo e tracciato restano modificabili anche separatamente usando gli strumenti di Testo e
Selezione nodi.
Un piccolo trucco: per far scorrere un testo internamente ad un tracciato simmetrico è
possibile una volta posizionato all’esterno, selezionare forma e testo e premere l’icona rifletti
verticalmente dalla barra delle opzioni dello strumento Selezione.
Figura 2. Testo dentro un tracciato simmetrico
Per separare una forma dal testo selezionare entrambe e utilizzare il menu Testo>Rimuovi dal
tracciato.
Testo in un contenitore
È possibile far scorre il testo all’interno di contenitori di qualsiasi forma. Impostare il testo
indipendente sulla pagina e disegnare la forma vettoriale dentro cui si vuole inserire il testo;
selezionare entrambi gli oggetti e andare sul menu Testo>Fluisci in struttura.
Figura 3. DESCRIZIONE
Il testo e l’oggetto restano modificabili con gli strumenti adeguati.Per separare testo e forma già
collegati selezionarli e andare sul menu Testo>Spezza.
Per far scorrere il testo in più di una forma selezionare per prima l’ultima forma in cui far scorre il
testo e poi mano a mano le precedenti ed infine selezionare il testo; a selezione terminata utilizzare
il comando Testo>Fluisci in struttura.
Figura 4. Esempio di testo in più forme
Convertire il testo in tracciato
Se abbiamo bisogno di personalizzare dei caratteri possiamo convertire il testo in tracciato
selezionandolo e andando sul menu Tracciato>Da oggetto a tracciato.
Attenzione: questa operazione non è reversibile.

Esportare in PNG
In questa lezione ci occupiamo di come esportare i nostri lavori per l’uso sul web. Inkscape ci
mette a disposizione un metodo facile e rapido per salvare in PNG.
Il formato PNG (Portable Network Graphics) consente di memorizzare immagini
senza perdita (lossless)
con supporto delle trasparenze (canale alfa)
Creiamo il nostro lavoro e selezioniamo la parte da esportare in PNG (se vogliamo esportare tutti
gli elementi della pagina possiamo non selezionare nulla). Ora andiamo sul menu File>Esporta
bitmap, si aprirà una finestra di dialogo che ora andiamo ad analizzare.
Figura X. Selezione e finestra di esportazione in PNG
Area di esportazione: troviamo quattro pulsanti che ci permettono di scegliere diversi tipi
di aree preimpostate:
o tutta la pagina,
o tutti gli elementi sulla pagina (disegno),
o l’area selezionata;
o oppure l’area personalizzata in cui possiamo scegliere noi, tramite coordinate, ciò che
verrà esportato.
Seguono diverse caselle numeriche che indicano le coordinare di inizio e di fine dell’area
di esportazione rispetto al punto in basso a sinistra della pagina e la lunghezza e l’altezza
dell’area stessa, il tutto espresso in pixel o nell’unità di misura scelta nella casella a discesa.
Dimensione della bitmap: Rappresenta la grandezza in pixel che il file avrà dopo
l’esportazione. La larghezza e l’altezza dipendo dalla risoluzione in dpi impostata.
Esportando per il web è sufficiente esportare a 72 o al massimo a 90 dpi.
Nome del file: Scegliere la cartella in cui salvare il file .PNG e assegnargli un nome.
Quando tutto è impostato correttamente cliccare su Esporta e la .PNG verrà immediatamente creata.
A meno di esigenze particolari possiamo semplicemente selezionare l’oggetto, impostare la
risoluzione e scegliere il nome del file; il resto possiamo lasciarlo com’è.
Questa è l’immagine che Inkscape ha creato esportando il disegno in esempio con i parametri
visibili:
Figura 2. Immagine PNG create da Inkscape
(segue 29)
Editor XML
Come abbiamo detto all’inizio di questa guida, Inkscape ha come formato nativo l’SVG, che in
realtà è un formato testuale, per la precisione una applicazione dell’XML.
Per questo motivo all’interno di Inkscape troviamo un piccolo editor testuale XML che permette ai
più esperti e competenti in materia di operare direttamente modifiche sul codice SVG, sia sugli
oggetti che sugli attributi.
Per accedere all’editor XML premere l’icona
Si aprirà una finestra con un editor:
nella barra dei comandi.
Figura 1. Finestra di editor XML
La struttura ad albero nel box sulla sinistra rappresenta i vari oggetti e i relativi colori e
riempimenti, cliccando su ognuno di questi a destra apparirà la lista dei vari attributi.
In alto troviamo alcuni bottoni utili per modificare la struttura, che rappresentano da sinistra
verso destra i comandi:
Aggiunge un elemento nodo all’XML
Aggiunge un elemento nodo testuale
Duplica il nodo selezionato
Elimina il nodo selezionato e tutti i suoi figli
Rimuove un’indentazione al nodo selezionato
Indenta il nodo selezionato
Alza il nodo selezionato
Abbassa il nodo selezionato
Per saperne di più riguardo ai formati SVG basati su XML si possono consultare le specifiche sul
sito del W3C oppure la guida a SVG di HTML.it.
(segue 30)
Lo sfondo
Con questo tutorial utilizziamo ciò che abbiamo appreso nel corso della guida per realizzare
l’intestazione di un layout. Il risultato finale del nostro lavoro sarà simile a questo:
Figura 1. Risultato finale
La prima cosa da fare è aprire Inkscape su una nuova pagina bianca.
Un suggerimento forse banale ma sempre utile è quello di salvare spesso il lavoro: Inkscape è pur
sempre in una versione non ancora definitiva, e gli inconvenienti sono ancora dietro l’angolo.
Per salvare: menu File>Salva; la prima volta che salviamo diamo un nome al documento e
scegliamo la cartella in cui salvarlo dalla finestra di dialogo.
Iniziamo a costruire tutto passo dopo passo, partendo dallo sfondo e salendo mano a mano.
Lo sfondo
Creiamo un grande rettangolo con lo strumento Crea rettangoli.
Attiviamo lo strumento Gradiente dalla barra degli strumenti e cliccando e trascinando dal basso del
rettangolo fino a circa un terzo della sua altezza, creiamo una sfumatura lineare.
Figura 2. Gradiente di sfumatura dello sfondo
Probabilmente la sfumatura non sarà già dei colori che desideriamo, quindi premiamo il pulsante
Modifica nella barra delle opzioni. Per prima cosa modifichiamo il primo colore del gradiente
assegnandogli le seguenti componenti in RGB(A): R:212 G:215 B:202 e A(canale Alfa): 255.
Scegliamo poi il colore finale del gradiente e assegniamogli il colore bianco ovvero R:255 G:255
B:255 A:255.
A questo punto la situazione dovrebbe essere questa:
Figura 3. Colori sfumatura di sfondo
Blocchiamo il livello (cliccando sull’icona con il lucchetto nella barra di stato) su cui abbiamo
disegnato lo sfondo, così da renderlo non più modificabile; faremo lo stesso con ognuna delle parti
che andremo a creare, non appena avrà raggiunto il suo aspetto definitivo.
La base del layout
Creiamo un nuovo livello, dal menu Livello>Aggiungi livello e diamogli un nome significativo, ad
esempio “base layout”.
La sagoma verde del layout
Prendiamo di nuovo lo strumento Rettangolo, creiamo un nuovo rettangolo sopra lo sfondo.
Trascinando l’angolo in alto a destra, arrotondiamo un po’ gli angoli:
Figura 1. Rettangolo arrotondato
Apriamo la finestra di Riempimento e contorno e assegniamo un riempimento pieno verde scuro
(in RGBA: R:123 G:130 B:74 A:255) e nessun contorno (cliccando sulla x).
Ora tagliamo la parte alta del rettangolo in modo da rendere retti i suoi angoli superiori.
Disegniamo un nuovo rettangolo sopra quello appena creato, in questo modo:
Figura 2. Rettangolo di taglio
Selezioniamo entrambi i rettangoli e andiamo sul menu Tracciato>Differenza: il rettangolo
sovrastante taglia quello sotto in questo modo:
Figura 3. Rettangolo tagliato
La sagoma bianca del layout
Costruita la forma verde, selezioniamola e duplichiamola (senza collegamento all’originale). Ora,
dalla finestra di Riempimento e contorno, assegniamogli il colore bianco (R:255 B:255 G:255
A:255) e nessun contorno (x).
Sempre con lo strumento Selezione, ridimensioniamola di pochissimo lateralmente ed in modo più
consistente sopra e sotto. Centriamo le due sagome selezionandole, andando nella finestra di
Allineamento e distribuzione e premendo il pulsante Centra sull’asse verticale.
Figura 4. Posizionamento della sagoma bianca
Il piccolo rettangolo verde chiaro
Creiamo un piccolo rettangolo verde chiaro in alto, subito sotto al titolo.
Creiamo un rettangolo, lungo e stretto, di poco più corto della base appena creata; dalla finestra di
Riempimento e contorno assegniamogli il colore R:188 B:198 G:72 A:255 e nessun contorno (x).
Ora selezioniamo quest’ultimo rettangolo e portiamolo in secondo piano rispetto agli altri elementi
premendo l’icona Sposta la selezione in fondo nella barra delle opzioni.
Figura 5. Posizionamento del rettangolo verde chiaro
Ora blocchiamo questo livello premendo il lucchetto sulla barra di stato.
(segue 32)
Vettorializzare le immagini
Continuiamo a costruire il layout pezzo per pezzo. Occupiamoci del kiwi e della sua ombra. Prima
di tutto creiamo un nuovo livello sopa ai precedenti, menu>Livello>Aggiungi livello, chiamandolo
ad esempio “Kiwi”.
Vettorializzare il kiwi
Partiamo da una foto del kiwi, la seguente:
Figura 1. Foto del kiwi da vettorializzare
Importiamo l’immagine in Inkscape utilizzando il menu File>Importa e andando a scegliere sul
nostro disco il punto in cui è salvata, una volta trovata e selezionata premiamo il pulsante Apri.
Ora vettorializziamola: selezioniamo la foto e andiamo sul menu Tracciato>Vettorializza bitmap.
Nella finestra di dialogo scegliamo il metodo Scansioni Multiple>Colore e impostiamo il numero di
scansioni a 16.
Figura 2. Impostazioni di vettorializzazione
Premiamo il pulsante Ok e aspettiamo che Inkscape abbia fatto il suo lavoro; potrebbe impiegare
qualche secondo.
Selezioniamo il nuovo kiwi e riduciamo un po’ il numero di nodi andando su
Tracciato>Semplifica. Il risultato dovrebbe essere simile a questo:
Figura 3. Kiwi vettorializzato e semplificato
Ora possiamo anche eliminare la foto del kiwi e concentrarci solo sull’immagine vettoriale.
Dato che la nostra immagine di partenza aveva lo sfondo bianco mentre a noi serve il solo kiwi
scontornato, selezioniamo il kiwi e clicchiamo sull’icona che divide i raggruppamenti nella barra
dei comandi.
Ora deselezioniamo tutto e selezioniamo nuovamente solo il livello bianco, premiamo Canc sulla
tastiera per eliminare il bianco.
Riselezioniamo gli altri livelli e premiamo l’icona di raggruppamento, così da raggruppare
nuovamente il tutto.
Se, come probabile, il kiwi risultasse troppo grande rispetto al layout disegnato, lo selezioniamo e
tenendo premuto Control sulla tastiera lo ridimensioniamo, trascinando un angolo del rettangolo di
selezione.
Posizioniamo il kiwi nell’angolo in alto a sinistra del layout e ruotiamolo di circa 40 gradi in senso
orario.
Figura 4. Il kiwi sul layout
L’ombra del kiwi
Il kiwi ora ha bisogno della sua ombra. Per realizzarla utilizziamo lo strumento ellisse: disegniamo
un’ellisse lunga e stretta, poi selezioniamola e attiviamo lo strumento Gradiente.
Scegliamo la sfumatura radiale dalle opzioni e cliccando e trascinando creiamo una sfumatura in
questo modo:
Figura 5. Sfumatura radiale per l’ombra
Se i colori non sono quelli giusti clicchiamo sul pulsante Modifica e impostiamo il nero come
colore di inizio gradiente (R:0 G:0 B:0 A:255) e la trasparenza come colore di fine gradiente: le
componenti RGB naturalmente in questo caso non hanno importanza, visto che basta che alpha (A)
sia 0.
Impostiamo anche, dalla finestra di Riempimento e contorno, un’opacità generale di circa 0,7.
Non ci resta che selezionare l’ombra, metterla in secondo piano premendo l’icona sposta la selezione
in fondo e posizionarla sotto il kiwi.
Figura 6. Posizionamento dell’ombra
Ora blocchiamo il livello premendo sul pulsante del lucchetto sulla barra di stato.
(segue 33)
Inserire il testo
Continuiamo nell’impostazione del nostro layout occupandoci dei testi. Creiamo ancora un nuovo
livello sopra ai precedenti andando su menu>Livello>Aggiungi livello; chiamiamolo ad esempio
“Testi”.
Il testo “Rolling”
Creiamo prima di tutto la scritta “Rolling”. Prendiamo lo strumento Testo, clicchiamo in un punto
della pagina e digitiamo il testo.
Apriamo ora la finestra di Modifica testo, e visualizziamo la linguetta Carattere. Impostiamo il font
(in questo caso Bauhaus MT BT , 46 punti) e premiamo il pulsante Applica per confermare le
modifiche.
Se il font non è di colore nero, impostiamo il nero come colore di riempimento (R:0 G:0 B:0
A:255) dalla finestra di Riempimento e contorno.
Ora posizioniamolo con la linea base molto vicino alla forma verde scura del layout.
Figura 1. Posizionamento del testo “Rolling”
Selezioniamo solo la lettera “o” del testo e, tenendo premuto Alt sulla tastiera, premiamo una
quindicina di volte il tasto freccia in alto.
Figura 2. Posizionamento della lettera “o”
Senza deselezionare la lettera, apriamo la finestra di Riempimento e contorno e diamo alla lettera
un riempimento bianco (R:255 G:255 B:255 A:255).
Creiamo i rettangoli sotto il testo; per farlo, prendiamo lo strumento Rettangolo e creiamo prima
di tutto un rettangolo che sia poco più stretto dello spazio fra la “R” e la “l” e un po’ più alto del
testo stesso.
Posizioniamolo sullo sfondo premendo l’icona sposta la selezione in fondo e assegniamogli un
riempimento nero dalla finestra di Riempimento e contorno (R:0 G:0 B:0 A:255).
Ricordiamoci, se non lo abbiamo ancora fatto, di reimpostare l’opacità generale a 1,0.
Se le dimensioni o la posizione non fossero precise sistemiamole con lo strumento selezione.
Figura 3. Posizionamento del rettangolo dietro alla “o”
Ora creiamo, trascinando dal righello a sinistra, due guide ai lati del rettangolo e poi duplichiamo
(senza collegamenti) il rettangolo nero dietro alla “o”.
Selezioniamo il nuovo rettangolo e dalla finestra Riempimento e contorno assegniamogli un valore
Alfa (A) di 100. Ora, aiutandoci con le guide, posizioniamolo e ridimensioniamolo sotto quello
precedente in questo modo:
Figura 4. Posizionamento del rettangolo sotto alla “o”
Il testo “kiwi” e “web portal”
Prendiamo lo strumento Testo, clicchiamo in un punto della pagina e digitiamo il testo “kiwi”.
Apriamo la finestra di Modifica testo, e visualizziamo la linguetta Carattere.
Impostiamo il font (in questo caso Kabel Bk Bt , 67 punti) e premiamo il pulsante Applica per
confermare le modifiche. Se il testo non è nero come voluto selezioniamolo e impostiamo il nero
come colore di riempimento (R:0 G:0 B:0 A:255) dalla finestra di Riempimento e contorno.
Posizioniamo il testo attaccato alla “g” della scritta “Rolling” e con la base appoggiata al
rettangolo verde chiaro.
Figura 5. Posizionamento del testo “kiwi”
Riprendiamo lo strumento Testo, clicchiamo in un punto della pagina e digitiamo il testo “web
portal”.
Sulla finestra di Modifica testo, visualizzando la linguetta Carattere impostiamo il font (in questo
caso Bauhaus Lt Bt , 12 punti) e premiamo il pulsante Applica per confermare le modifiche. Se il
font non è bianco impostiamo il bianco come colore di riempimento (R:255 G:255 B:255 A:255)
dalla finestra di Riempimento e contorno.
Ora selezioniamo il testo e posizioniamolo a destra dell’intestazione.
Figura 6. Posizionamento del testo “web portal”
E con questo ultimo passo abbiamo finito!