Inkscape

Programma open source di grafica vettoriale

390px-Inkscape.logo.svg.png

Eun 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.

Sito ufficiale: https://inkscape.org/it/

Raccolta varie immagini in formato SVG gratuite: https://openclipart.org/

SVG significa Scalable Vector Graphics cio Grafica Vettoriale Scalabile.

basato sul linguaggio XML e quindi, quello che vediamo sullapagina 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.

Un programma di grafica vettoriale unapplicazione 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.

Linee

Disegno al tratto raffigurante tre persone.Disegno al tratto raffigurante tre persone, dettaglio di una singola testa.Quasi tutti i dispositivi di output (esclusi, ad esempio, larghi plotter per disegni di ingegneria e architettura), utilizzano unimmagine 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.

Le immagini digitali sono composte da una griglia di elementi quadrati di vari colori, detti pixel. Questi non possiedono delle dimensioni fisiche ma rappresentano lunit di misura dellimmagine su web.

http://1.bp.blogspot.com/-x2TdIxb2n78/Tx11utI2d0I/AAAAAAAAAEg/0dI1MUITEwc/s1600/risoluzione.jpgtesto.png

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 dellimmagine.

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!!!

pdfscribus.pngpdfgimp.pngEsempi di linee disegnate in Inkscape

Aperta con Gimp e salvata in formato pdf.

Salvata da Inkscape in formato pdf.

Vedere anche esempio pg80858

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 unidea di ci che apparir, in questo modo lutente sceglie se aspettare o meno il caricamento completo) e trasparenti. La compressione non ha n perdita di qualit n di informazioni per unimmagine 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 unimmagine, si pu attivare o meno lopzione dithering. Poich tale opzione tende a sostituire i colori personalizzati con quelli disponibili nella palette, ne sconsiglio luso.

JPEG Joint experts Photographic Group (nome della societ che ha scritto lalgoritmo)Questa forma di compressione fa perdere qualit allimmagine 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, limmagine 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 GraphicsE un formato pi recente ed nato in alternativa al gif per la trasparenza ma supporta 24bit quindi le linee sono pi nitide anche grazie allanti-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. Lutilizzo del formato png, lo consiglio per i loghi.

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).

http://www.mattiafrigeri.it/roomofrequirement/wp-content/uploads/2011/03/terne-colori-rgb-cmy.jpg

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.

http://www.brildor.com/blog/wp-content/uploads/2014/06/tintas.jpg

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).

cmy.pngrgbok.pnghslok.png

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).

http://www.miospazioweb.besaba.com/laboratorio_fotografia_digitale/lezione_3_4/rgb-colori_complementari.png

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

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

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.

cmyk.pngrgb.png

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).

http://www.pagetutor.com/common/bgcolors216.gif

Comunicazione visiva, significa trasmettere un messaggio o unemozione attraverso unimmagine. 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.

http://www.stateofmind.it/wp-content/uploads/2013/07/Psicologia-delle-Emozioni-La-rivincita-di-Darwin300.jpg

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.

http://www.superedo.it/foto/immagini/Pubblicita$/differenze_tra_la_pubblicit%C3%A0_e_la_realt%C3%A0.jpg

http://www.cultor.org/Visual/img/visual-weight-13.jpghttp://www.cultor.org/Visual/img/visual-weight-13.jpgE possono avere anche un certo equilibrio.

Le immagini e le pagine hanno un proprio peso.

http://www.aperitivoinconcerto.com/images/chiusura_sfumatura.pnghttp://www.aperitivoinconcerto.com/images/chiusura_sfumatura.pngEsempi di equilibrio su una pagina, usando la stessa immagine.

http://www.aperitivoinconcerto.com/images/chiusura_sfumatura.pnghttp://www.aperitivoinconcerto.com/images/chiusura_sfumatura.png

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

http://www.aperitivoinconcerto.com/images/chiusura_sfumatura.pnghttp://www.aperitivoinconcerto.com/images/chiusura_sfumatura.pnghttp://www.aperitivoinconcerto.com/images/chiusura_sfumatura.pnghttp://www.aperitivoinconcerto.com/images/chiusura_sfumatura.png

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

http://www.aperitivoinconcerto.com/images/chiusura_sfumatura.pnghttp://www.aperitivoinconcerto.com/images/chiusura_sfumatura.pnghttp://www.aperitivoinconcerto.com/images/chiusura_sfumatura.pnghttp://www.aperitivoinconcerto.com/images/chiusura_sfumatura.png

8.jpgE interessante osservare come la base del fondo possa far percepire i colori con un diverso valore.

http://www.sedna-arte.com/components/com_virtuemart/shop_image/product/VIOTTOLO_Di_CAMP_4e1f32f0417e7.jpg

Esempio di relazione armoniosa

Esempio di relazione discordante

http://www.sedna-arte.com/components/com_virtuemart/shop_image/product/VIOTTOLO_Di_CAMP_4e1f32f0417e7.jpg

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

trasparente.jpg

I colori, oltre ad avere uninfluenza sul valore di un testo o di una immagine, possono anche influenzarne lequilibrio.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

a.jpgb.jpgc.jpgd.jpg

Lequilibrio trasmette pace e tranquillit e quindi locchio tende a cercarlo ma non crearlo a volte pu aiutarci a suscitare particolari emozioni.Usare o non usare lequilibrio una decisione che influenza il messaggio che vogliamo trasmettere. 2. Decidi cosa vuoi trasmettere

aa.jpgbb.jpgcc.jpghttp://www.paesaggibellissimi.it/wp-content/uploads/2014/03/immagini-paesaggio-41.jpg

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 lidentificazione delloggetto rappresentato e la tendenza a completarlo.3. Rilevare la parte che vogliamo evidenziare, sulla base del nostro obiettivo

cuc.jpgcucint.jpg

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

http://www.boorp.com/sfondi_gratis_desktop_pc/sfondi_gratis/sfondi_paesaggi_mare_montagna/paesaggi_mare_montagna_234.jpgGestalt composizione fotografica

5. Mi devo chiedere se la mia immagine ha un fascino emotivo solo per meAvere il parere di un amico sempre daiuto.Connetterci emotivamente con un'immagine ci attrae facendoci tornare continuamente su di essa per ripetere questa emozione.

https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xaf1/v/t1.0-9/10563145_816991358342915_8911671271259400411_n.jpg?oh=a6c6e33abe9e366bb9545519dc2f047d&oe=5527212B&__gda__=1428192922_cbb3cbd0afcf10bf2ee7457b4bf5c4d9

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

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

Ricordiamo che oltre a tener conto di quanto detto in precedenza, quando costruiamo unimmagine 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)

pref.pngEpossibile configurare tutte le preferenze riguardanti la pagine, i righelli, le guide e le griglie.

Esercizio n. 1

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.

Esercizi nn. 3 e 3bis

Esercizio2_apple.pngEsercizio n. 2

Utilizzabile con il mouse; con la tavoletta grafica sensibile anche alla pressione

p25

A mano libera

Disegna ogni nodo

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

Allinterno del men a discesa Tracciato troviamo tutti gli elementi utili alle modifiche. Di seguito gli strumenti utilizzati per le modifiche manuali.

Esercizio 4

Esercizio4_tracciato1_balena.png

E un qualsiasi elemento presente nella pagina.

Si pu: spostarlo allinterno 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.

Sono come dei fogli trasparenti messi uno sopra laltro.

Esercizio 5

Esercizio5_tracciato2_giraffasette.png

Pag. 40 e 41

Esercizio 6

Esercizio 7

Esercizio6_tracciato+sfumatura_pesce.pngEsercizio7_livelli_fioripesco.png

Si pu creare un testo indipendente o un testo delimitato in unarea. Curiosit: con Alt+freccia pu essere spostata ogni singola lettera

Digitiamo un testo indipendente e uno in unarea

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:

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

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

Scegliere 2 o 3 macroargomenti (es. manifestazioni, turismo, immigrazione, bambini ecc.)

Individuare un evento legato ad ogni macroargomento scelto

Ognuno disegner un logo adatto allevento 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 allevento inserendo il logo

Visioniamo assieme i lavori prodotti