Inkscape è un programma open source per la grafica vettoriale che permette di creare e modificare immagini in formato SVG, utilizzando vettori per garantire la qualità anche a dimensioni diverse. Supporta vari formati di file per il salvataggio delle immagini e offre strumenti per creare design equilibrati e comunicativi. Il documento affronta anche aspetti tecnici legati ai colori e alle tecniche di disegno, oltre a suggerimenti per l'utilizzo di immagini e testi in progetti visivi.

1. Programma open source di
grafica vettoriale

2. E’un programma semplice e decisamente usabile con cui si
possono creare layout per siti web, banner e loghi,
impaginare volantini o vettorializzare immagini bitmap.
Adotta il formato SVG come formato di salvataggio
predefinito.

3. Sito ufficiale: https://inkscape.org/it/
Raccolta varie immagini in formato SVG gratuite:
https://openclipart.org/

4. SVG significa Scalable Vector Graphics cioé Grafica Vettoriale
Scalabile.
È basato sul linguaggio XML e quindi, quello che vediamo sulla
pagina di Inkscape, è solo una rappresentazione visiva delle istruzioni
XML che in realtà costituiscono il nostro documento.
Poiché nello sviluppo di molti browser è previsto il supporto per questo
formato, se in futuro si affermasse la tendenza ad utilizzarlo, la grafica
web avrebbe finalmente un formato vettoriale standard utilizzabile per
immagini e animazioni senza alcun bisogno di installare plug-in come
Flash o Shockwave.

5. Un programma di grafica vettoriale è un’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.

6. Quasi tutti i dispositivi di output (esclusi, ad esempio, larghi plotter per disegni di
ingegneria e architettura), utilizzano un’immagine raster o bitmap per
visualizzare la grafica.
Allora perché fare un disegno vettoriale?
Il vantaggio sta nel fatto che è possibile ingrandirlo a seconda del bisogno e, una
volta raggiunta la dimensione necessaria, possiamo convertirlo in formato
bitmap. La conversione effettuata nel momento immediatamente precedente alla
visualizzazione, assicura che l'immagine finale coincida esattamente con la
risoluzione del dispositivo di output.

7. Le immagini digitali sono composte da una griglia di
elementi quadrati di vari colori, detti pixel. Questi non
possiedono delle dimensioni fisiche ma
rappresentano l’unità di misura dell’immagine
su web.

8. Per la stampa: Ia risoluzione è intesa come il rapporto tra la
dimensione dell'immagine in pixel (dimensione di un pixel) e le sue
dimensioni fisiche della stampa finale su carta (pixel per pollice ppi o
punti per pollice dpi).
Per il web: il valore di risoluzione non ha molto senso (anche se un
monitor ha una risoluzione di 72ppi). Ha più senso invece determinare il
numero dei pixel di larghezza e altezza tenendo presente che ogni pixel
dello schermo corrisponde ad un pixel dell’immagine.
ATTENZIONE! Quindi, non va bene pensare che limitandosi a dare ad una foto il valore di
risoluzione 72ppi, questa diventi adatta al web, infatti non avrebbe senso dare, ad esempio,
tale risoluzione ad una foto che ha un lato di tanti metri di lunghezza o a una che lo ha di
pochi millimetri perché la visualizzazione sullo schermo sarebbe troppo grande o troppo
piccola. Per il web si ragiona in pixel!!!

9. Esempi di linee disegnate in Inkscape
Aperta con Gimp e salvata in formato pdf.
Salvata da Inkscape in formato pdf.
Vedere anche esempio pg80858

10. Sono GIF, JPEG e PNG, e anche flash SWF (fatto con Jing) e vettoriali SVG (fatto con
Inkscape - inserite nei file pdf). Ogni formato viene scelto sulla base di ciò che si vuole
ottenere.
GIF Graphic Interchange Format (formato per scambio grafico)
E’ un file compresso utilizzato per immagini animate, interlacciate (con renderizzazione
progressiva, cioè mentre la pagina a video completa il caricamento, si intravedono via via
sempre più dettagli dando già inizialmente un’idea di ciò che apparirà, in questo modo
l’utente sceglie se aspettare o meno il caricamento completo) e trasparenti. La
compressione non ha né perdita di qualità né di informazioni però un’immagine gif
supporta al massimo 256 colori quindi è adatta ad immagini con pochi colori. Per la
compressione si possono scegliere 4bit=16col, 6bit=64col, 8bit=256col. Quando si salva
un’immagine, si può attivare o meno l’opzione dithering. Poiché tale opzione tende a
sostituire i colori personalizzati con quelli disponibili nella palette, ne sconsiglio l’uso.

11. JPEG Joint experts Photographic Group (nome della società che ha
scritto l’algoritmo)
Questa forma di compressione fa perdere qualità all’immagine togliendo le
informazione ritenute irrilevanti. Ci sono vari livelli di compressione e, a nostra
scelta, decidiamo di volta in volta quello più appropriato, ricordando però che ad
ogni salvataggio nel formato jpeg, l’immagine perde di qualità (pixel visibili e perdita
colori intermedi). Tale formato è adatto alle fotografie che contengono molti colori
perché supporta 24bit=milioni di colori.
PNG Portable Network Graphics
E’ un formato più recente ed è nato in alternativa al gif per la trasparenza ma
supporta 24bit quindi le linee sono più nitide anche grazie all’anti-aliasing. La
compressione non comporta perdita di informazioni e quindi la qualità rimane
sempre buona. Può essere una alternativa al JPEG qualora si intendano avere
fotografie di alta qualità, ma, nel caso di fotografie molto grandi, è preferibile
utilizzare il formato jpeg perché crea immagini più. L’utilizzo del formato png, lo
consiglio per i loghi.

12. RGB: sono i colori primari utilizzati nel mondo digitale e corrispondono a rosso
(Red), verde (Green) e blu (Blue). Per crearli, bisogna aggiungere degli stimoli
luminosi (sintesi additiva).
Valori da 255 (luce al massimo) a 0 (assenza di luce).
CMYK: sta per Cyan, Magenta, Yellow, Key (black). E’ un modello di colore detto
anche di quattricromia o quadricromia utilizzato per la stampa (sintesi sottrattiva).
Valori da 0 (assenza di colore) a 100 (massimo colore).

13. Tinta: dai colori primari combinati si ottengo colori
secondari, terziari e intermedi (questi sono dati da
percentuali diverse di colori).
Sfumatura: o luminosità colore (più leggero o più
marcato) è inteso come sfumatura di uno stesso colore
che viene prodotta, nel web, togliendo la luce per scurire
il colore.
Saturazione: più un colore è saturo, più è puro. Più
togli saturazione ad un colore, più questo perde
brillantezza fino a diventare grigio.

14. HSL: Hue Saturation Lightness cioè tonalità, saturazione e luminosità, indica
sia un metodo additivo di composizione dei colori, sia un modo per
rappresentarli in un sistema digitale. Viene anche chiamato HSB da Hue
Saturation Brightness o HSV da Hue Saturation Value (tonalità, saturazione e
valore) o HSI da Hue Saturation Intensity (tonalità, saturazione ed intensità).

15. I colori complementari sono opposti e fortemente in contrasto tra
loro.
Mentre relazioni armoniose (es. rosa, viola, lilla) sono rilassanti per
gli occhi, colori che catturano lo sguardo e/o irritano la mente sono
detti discordanti (es. giallo e nero).

16. Curiosità: se si fissa a lungo un quadrato rosso,
guardando poi un muro bianco, strizzando gli occhi, si
vedrà apparire il suo opposto (cyan).

17. Possono essere classificati in: caldi (tra rosso e giallo) o
freddi (tra verde e blu) o neutri (grigio, bianco, nero, e toni
del marrone).

18. I lavori per il web vengono realizzati con il metodo di colore RGB (Red Green
Blue) mentre quelli per la stampa è importante che siano in CMYK (Cyan
Magenta Yellow Black).
Inkscape non supporta questa ultima modalità ma possiamo comunque
scegliere i colori con le componenti in CMYK anche se di fatto questi poi
vengono salvati, nel file SVG, in formato RGB.
Se lavoriamo per il web non ci sono problemi ma è sconsigliabile consegnare
questi file direttamente al tipografo. Per ovviare a questo, è possibile importare
i file di Inkscape in altri programmi come ad esempio Scribus (adatto per
disegni) o Gimp (adatto per immagini) entrambi software open source, per poi
salvarli da lì in CMYK.

19. Sono dei colori adatti al web (216
colori) in formato RGB. Sono
espressi con valore esadecimale
e vengono visualizzati nello
stesso modo anche in situazioni
diverse (differenti browser,
hardware).

20. Comunicazione visiva, significa trasmettere un messaggio o un’emozione
attraverso un’immagine.
Questa tipologia di comunicazione si può ottenere con fotografie, disegni
grafici o video e, a differenza di un testo scritto, ci danno un messaggio
di immediato effetto.

21. Questo non vuol dire che le immagini siano sempre
sufficienti a spiegare ciò che vogliamo trasmettere.
Integrandole con il testo giusto possiamo ottenere una
comunicazione migliore.

22. E possono avere anche
un certo equilibrio.
Le immagini e le pagine
hanno un proprio peso.

23. Esempi di equilibrio su una pagina, usando la
stessa immagine.

24. Esempi di equilibrio su una pagina, usando la
stessa immagine.

25. Esempi di equilibrio su una pagina, usando la
stessa immagine.

26. E’ interessante osservare come la base del fondo possa far percepire i
colori con un diverso valore.
Esempio di relazione armoniosa
Esempio di relazione discordante

27. Ecco la stessa sfumatura a forma ellittica posta su fondi di colore
diverso (lucido, opalescente, luminoso, trasparente).

28. I colori, oltre ad avere un’influenza sul valore di un testo o di una immagine,
possono anche influenzarne l’equilibrio.
Pertanto una foto o una pagina web non sono influenzate solo dagli oggetti
in esse contenuti ma anche dai colori utilizzati.
1. Identifica spazi positivi e negativi

29. L’equilibrio trasmette pace e tranquillità e quindi l’occhio tende a cercarlo
ma non crearlo a volte può aiutarci a suscitare particolari emozioni.
Usare o non usare l’equilibrio è una decisione che influenza il messaggio
che vogliamo trasmettere.
2. Decidi cosa vuoi trasmettere

30. Possiamo identificare i soggetti di queste foto anche se tagliate?
Il nostro cervello tende a completare le parti mancanti e pertanto la
“chiusura” di un soggetto in un riquadro, eliminando alcune parti, può
addirittura favorire la partecipazione di chi guarda perché stimola
l’identificazione dell’oggetto rappresentato e la tendenza a completarlo.
3. Rilevare la parte che vogliamo evidenziare, sulla base del nostro
obiettivo

31. Equilibrare una foto (o una pagina) non vuol dire solo centrare il
soggetto. Un aiuto può essere dato utilizzando la regola dei terzi
(divisione orizzontale e verticale).
4. Dare equilibrio agli spazi

32. 5. Mi devo chiedere se la mia immagine ha un fascino emotivo solo
per me
Avere il parere di un amico è sempre d’aiuto.
Connetterci emotivamente con un'immagine ci attrae facendoci
tornare continuamente su di essa per ripetere questa emozione.

33. Ricordate anche che il vostro obiettivo è anche quello di
controllare gli occhi dello spettatore.
Per fare questo, è possibile utilizzare il concetto di
"continuazione".

34. Si tratta dell'istintiva tendenza dell'occhio a seguire un
percorso. Il percorso lo dovete dirigere voi.

35. Ricordiamo che oltre a tener conto di quanto detto in
precedenza, quando costruiamo un’immagine o una
pagina dobbiamo scegliere innanzitutto:
 Testi (scelta del carattere, della sua grandezza e il
contenuto)
 Disegni e immagini (logo, colori, disegni grafici e
fotografie)

37. E’possibile configurare tutte le preferenze riguardanti
la pagine, i righelli, le guide e le griglie.

39. Esercizio n. 1

40. -È un insieme di linee curve e rette unite da nodi angolari o
curvilinei. Questi nodi hanno due maniglie che servono per regolare
la curvatura dei tracciati stessi.
-Può essere disegnato a mano libera o appartenere a figure generate
da strumenti come il cerchio, la stella, il quadrato ecc.
- Vi sono tracciati chiusi e tracciati aperti.

41. Esercizi nn. 3 e 3bis

42. Esercizio n. 2
Utilizzabile con il
mouse; con la
tavoletta grafica è
sensibile anche alla
pressione
p25
A mano libera
Disegna ogni nodo

43. Una volta creato un tracciato, esso può essere modificato
aggiungendo o togliendo un nodo
E’ possibile unire o separare un tracciato
Un nodo può essere cambiato da angolare a curvo e
viceversa
Un segmento può essere cambiato da lineare a curvilineo
e viceversa
Si può convertire un oggetto, o un contorno, in un
tracciato
All’interno del menù a discesa “Tracciato” troviamo tutti gli elementi utili
alle modifiche. Di seguito gli strumenti utilizzati per le modifiche
manuali.

44.  Esercizio 4

45. E’ un qualsiasi elemento presente
nella pagina.
Si può:
spostarlo all’interno di una pagina,
cambiargli piano, raggrupparlo o
dividerlo, ruotarlo, ridimensionarlo,
rifletterlo, distorcerlo, duplicarlo,
clonarlo, allinearlo o distribuirlo rispetto
ad altri elementi.
Proviamo a creare alcuni oggetti ed
applicare loro alcune di queste
impostazioni.

46. Sono come dei fogli trasparenti messi uno sopra l’altro.

47.  Esercizio 5

49.  Esercizio 6
 Esercizio 7

50. Si può creare un testo indipendente o un testo delimitato in un’area.
Curiosità: con Alt+freccia può essere spostata ogni singola lettera

51.  Digitiamo un testo indipendente e uno in un’area
 Formattiamo il testo
 Testo su tracciato
 Testo in un contenitore
 Convertiamo un testo in tracciato
Ora creiamo una pagina e proviamo a giocare
con i testi:

52. Salviamoli, SEMPRE, prima nel formato svg, e poi possiamo
esportarli anche nel formato png.

53. Oppure possiamo anche salvarli nei formati che troviamo in “Salva
come”.

54.  Scegliere 2 o 3 macroargomenti (es. manifestazioni,
turismo, immigrazione, bambini ecc.)
 Individuare un evento legato ad ogni macroargomento
scelto
 Ognuno disegnerà un logo adatto all’evento che gli è
stato assegnato
 Votare il logo preferito (alla fine ne verranno scelti 2 o
3)
 Formare un gruppo per ogni logo scelto
 Creare una locandina legata all’evento inserendo il
logo
 Visioniamo assieme i lavori prodotti