venerdì 20 maggio 2011

Raster vs Vector - aka: Vettoriale, questo sconosciuto :)

Stiamo parlando di immagini, ovviamente.
Sto per lanciarmi in un argomento spinoso, ma dalle chiacchiere che scambio in giro con contatti vari (collaborazioni e non) mi rendo conto che da una parte tutto ciò che è considerato "grafica" è molto più alla portata di tutti grazie a blog e software di editing (e per come la vedo io è bello che ci sia tanta gente che vuole imparare da autodidatta), dall'altra ci sono ancora lacune abbastanza importanti su alcuni argomenti abbastanza basilari che, per forza di cose, conosce meglio chi ha cominciato a occuparsi di questi argomenti qualche anno fa, quando le risorse erano minori, meno disponibili, ma c'era anche meno confusione.
Mi trovo sempre più spesso a dover fare presente che no, un logo non si disegna con Photoshop, e quando chiedo a qualcuno di mandarmi un vettoriale, spesso la reazione è -> O_o (occhio pallato / interrogativo)

Fine delle chiacchiere sconnesse, veniamo al succo: Raster e Vettoriale, chi erano costoro?

Un'immagine raster (o bitmap):
è un'immagine composta da "pixel", ovvero punti, ovvero piccolissime tessere quadrate (come un mosaico), così ravvicinate che non si distinguono l'una dall'altra e viste da distanza sufficiente, danno l'effetto di un'immagine compatta con sfumature, gradazioni, ecc.
Se vi avvicinate moltissimo al monitor del vostro pc (attenti, non fa bene agli occhi), riuscirete a intravedere i pixel. Il sistema migliore per capire, è aprire un'immagine con Photoshop, Gimp o Paint Shop, e con la lente ingrandire fino al 500%-1000%:
un'immagine raster...
...è una "mappa" di "punti" (bit-map)
Un'immagine raster ha dimensioni ben precise, che sono espresse in pixel. Ad esempio, un'immagine 3000x2000 è una bitmap larga 3.000 pixel e alta 2.000 pixel (6.000.000 pixel in totale).
Queste dimensioni in pixel corrispondono poi a determinate dimensioni di stampa in cm o pollici, in funzione della risoluzione (dpi)... ma questo è un discorso che vedremo in un altro articolo!
Per questa ragione, un'immagine raster non può essere ingrandita se non a discapito della qualità dell'immagine: se si ingrandisce troppo, si vedranno i pixel!
Inoltre, se una bitmap viene ridotta, non è possibile riportarla alla dimensione originale senza perdere qualità.

Una foto, una scansione, una cattura schermo sono immagini raster.
Qualsiasi file bmp, jpg, png, gif, psd, tif, ico, cur è un'immagine raster.
Alcuni editor di immagini raster:
  • Adobe Photoshop
  • Paint Shop Pro
  • Gimp
  • Paint

Un'immagine vettoriale:
non è composta da pixel, ma da espressioni matematiche: punti, linee rette, linee curve, in breve "aree" geometriche caratterizzate o meno da una linea di contorno (solida, tratteggiata, di spessore variabile, ecc.) e da un riempimento (solido, a gradiente, opaco, trasparente, ecc.).

un'immagine vettoriale...
...è composta da punti e linee
Un'immagine vettoriale può avere delle dimensioni di stampa in centimetri o pollici, che sono però solo indicative: un'immagine vettoriale può essere ridotta e ingrandita a piacimento un numero infinito di volte, senza perdere dettaglio e qualità.
Un logo, un'illustrazione digitale, una scritta, e in generale tutto ciò che è destinato alla stampa e non ha motivo di essere creato sotto forma di bitmap (mappa di pixel), dovrebbe essere vettoriale.
Ovvio, una foto non può essere vettoriale!
Sono file vettoriali tutti i wmf, emf, ai, eps, cdr.
Alcuni editor vettoriali:
  • Adobe Illustrator
  • Corel Draw
  • un numero imprecisato di "metafile editor" reperibili in rete
NB: Paint Shop Pro, pur essendo uno strumento di editing destinato alle immagini raster, ha il supporto per la creazione di livelli vettoriali. Photoshop ha la funzionalità dei tracciati che mantengono le caratteristiche dei vettoriali (possibilità di essere ingranditi e ridotti) finché non vengono riempiti, tracciati o rasterizzati.

Questa era la parte teorica, adesso per fissare bene il concetto ci facciamo una bella esercitazione pratica. Avrete bisogno di un editor raster (gimp, photoshop, paint shop) e di un editor vettoriale (illustrator o corel draw).Se non avete l'editor vettoriale, fate solo la parte raster: vi aiuterà comunque a capire quali sono i limiti e le caratteristiche delle immagini raster. Per questa esercitazione io ho usato Photoshop e Illustrator, e i comandi specifici sono quelli di Photoshop e Illustrator. Ma dovreste riuscire a trovare i comandi corrispondenti anche con gli altri editor.

1. Per prima cosa dobbiamo aprire i nostri due editor e creare un nuovo file: scegliamo come formato il foglio A4 (per il raster specifichiamo anche 300dpi come risoluzione, così poi potremo stamparlo).
Photoshop (raster)
Illustrator (vector)
2. Questa è la situazione da cui dovremmo partire con entrambi gli editor: un foglio A4 vuoto.
Photoshop (raster)
Illustrator (vector)
3. Selezioniamo lo strumento Ellisse
Photoshop (raster)
Illustrator (vector)
In Photoshop selezioniamo la seconda opzione, "tracciati" 

4. Disegnamo un bel cerchio al centro del foglio A4, che abbia più o meno le stesse dimensioni in entrambi gli editor (non c'è bisogno di essere precisissimi)
Photoshop (raster)
Illustrator (vector)
4b. In Photoshop, andiamo nella finestra "tracciati" e utilizziamo il comando "disegna il tracciato con il pennello" (in questo modo, il cerchio viene fisicamente "disegnato" sul livello di sfondo. Poi deselezioniamo il tracciato cliccando nell'area grigia all'interno della finestra tracciati.


5. Selezioniamo lo strumento zoom
Photoshop (raster)
Illustrator (vector)
6. Trasciniamo per ingrandire una piccola porzione del nostro cerchio: più piccola è la porzione ingrandita, più sarà visibile la differenza tra raster e vettoriale...
Photoshop (raster)
Illustrator (vector)
6b. Ed ecco come appare il nostro cerchio ingrandito circa al 500%
Photoshop (raster)
Illustrator (vector)
Abbastanza impressionante, vero? :)
Facciamo un'altra prova con qualcosa di molto utilizzato in loghi, volantini e biglietti da visita: il testo.
7. Con lo strumento testo componiamo una scritta in entrambi gli editor, con le stesse caratteristiche. Scegliamo un corpo abbastanza grande per poter vedere bene i dettagli (io ho utilizzato un Bodoni 72pt)
Photoshop (raster)
Illustrator (vector)
8. Sempre con lo strumento zoom, andiamo a ingrandire un piccolissimo dettaglio: io ho scelto l'occhiello della "r".
Photoshop (raster)
Illustrator (vector)
9. Ed ecco come appaiono una scritta raster e una scritta vettoriale, ingrandite tra il 500% e l'800%
Photoshop (raster)
Illustrator (vector)
10. Nel caso la differenza non vi fosse ancora balzata agli occhi... stampate l'immagine da Photoshop, e poi da Illustrator. Guardate molto da vicino la resa del bordo del cerchio, e i dettagli della scritta.

Non venite a dirmi che è uguale... ;)

E questo è il motivo per cui loghi, biglietti da visita e volantini non si disegnano con Photoshop! :)

Ed è anche il motivo per cui è molto facile convertire un vettoriale in un'immagine raster (qualsiasi editor vettoriale prevede il salvataggio in bitmap), mentre è molto più complesso (e a volte impossibile) convertire un'immagine raster in vettoriale.

Per quanto riguarda invece il discorso pixel, dimensioni di stampa, dpi e risoluzione (altro argomento spinosissimo che manda nel pallone fior di fotografi professionisti), ne parliamo un'altra volta... promesso ;)

2 commenti:

  1. Che bel blog!
    Utile. Interessante. Intrigante.
    :D

    RispondiElimina
  2. *.* sono capitata per caso guardando blog di foto, da vera profana non sapevo assolutamente niente della differenza tra raster e vector: mi hai aperto un mondo nuovo !! spiegazione proprio ben fatta, grazieeee!!

    RispondiElimina