raster-vettoriale-grafica-differenze

Raster VS Vector. Spot the Differences!

Speaking of graphic design, you certainly heard about Raster and Vector, which are two different techniques of editing digital images, bearing different characteristics and aiming at completely different purposes.

However, what are these differences between them?

Make yourselves comfortable… it is my pleasure to tell you!

Content Index

  • Raster Graphics
  • Vector Graphics
  • Exporting Images to Vector or Raster

Raster Graphics

Raster graphics, also known as “bitmap”, work basically according to a grid-shaped layout, formed by little squares called pixels.
If this term does not ring any bell to you, or you just experienced little knowledge of it, just know that pixels can be considered the basic component of each image.
A pixel is formed by three cells, called “subpixels”, each of those containing one among the three primary colours of the RGB profile, where R stands for Red, G for Green and B for Blue.
One pixel contains a colour code coming from single RGB values that, along with all the other colour codes contained in other pixels, brings digital images to life.

IMAGE
By enlarging a raster image, it is possible to notice everyone of the pixels it is formed by.

The most used and widespread software to work on bitmap images is Adobe Photoshop.
Starting from the first stages of a new project, such a software allows users to set the size, resolution and colour method options of an image.

IMAGE
Find here a section of the setting panel while creating a new project on Adobe Photoshop

In order to understand how to identify a raster image, open the gallery on your mobile and select one picture randomly.
Now try enlarging it as much as you can: if it becomes blurred and grainy you have just found a raster image!

Vector Graphics

Differently from raster images, Vector images are not based on pixels but on mathematical and geometrical formulas, making them become unlimitedly scalable.

IMAGE
A vector image can be enlarged with no limits, without risking reducing its resolution rate.

The vector technique is ideal to create logos, icons, illustrations, packaging images, flyers, brochures, business cards and, generally, all the graphic works in need of being adapted to different sizes, both to be uploaded on the web and to be printed on paper!
Put in a nutshell, a business logo may need both to be placed online on a website, and to be adapted to a 600x300 publicity hoarding.
All of this cannot be possible if a logo is designed as a Raster image.
If it were not enough, a Vector image can be used for particular printing needs, such as die cutting, shaping, laminating and UV cutting.
However, how do Vector graphics work?
Referring to mathematical data, vector graphics are used with the so-called Beizer Curves to create different straight, bent or closed paths.

IMAGE
Path examples, anchor points and directional lines.

For every path, various anchor points are available, placed in a little square and referring to the starting and the final anchor points.
It is possible to drag these points to change the path more than once, without any limit.
If the layout is bent, direction lines appear next to the anchor points, which happen to be extremely useful to define its bending trend. The more these lines are lengthened, the more curved the layout becomes.
Besides, closed layouts are different from the others because the starting and the final anchor points match completely, creating both simple and more complex geometrical shapes.
By using mixed layouts, it is also possible to create a lot of shapes which can be adapted in their size without any risk of reducing their resolution quality.
The most used software to work on vector graphics is Adobe Illustrator, and not Photoshop, as incorrectly believed by most users!

Exporting Images to Vector or Raster

Aside from the choice of an appropriate layout (speaking of which I suggest you to take a look at this column about
Optimising Images for the Web), the ultimate usage of an image can be defined, whether vector or raster, through appropriate conversion settings.
A word of caution at first: vector files can be exported to raster mode, but the same cannot be done the other way around.
The most common vector layouts, such as AI (by Illustrator), SVG or PDF, allow users to have unlimited opportunities to modify images in time, without losing the scalable signatures of each image.
By exporting vector files to formats such as Jpeg, Png or Tiff (the latter considered the best format for printing needs), images are converted to the raster mode, losing the signatures mentioned above instead.
The first aspect to be taken into consideration in order to convert an image to the raster mode is its resolution, i.e. the exact number of pixels contained in a given unit of measurement. Inches are used as a default unit, an inch equalling 2,54 centimetres.
Referring to the PPI unit (Pixels per Inch), the rendering rate of an image can be calculated easily. The bigger this number, the denser the image resolution itself, with a remarkable improvement in its final quality.

This plays a crucial role in exporting files, above all when it comes to images that are then going to be printed. In that case DPI (Dots per Inch) is the unit of measurement needed.
The higher the PPI value, the denser the image, the more the pixels contained in a single inch.
Generally, in order to print an image on paper properly, it is recommended to set a 300 DPI resolution. If the image needs to be exported and then placed online, the ideal resolution value is 72 PPIs.
As far as the size of an image is concerned, it is adjusted by defining the total number of pixels both in width and height. So, a 1920x1080-pixel image measures 1920 pixels in width and 1080 pixels in height, resulting in a 16:9 ratio.
The more pixels contained in an image, the bigger its size and the higher its quality. So, to view each pixel individually, it would be necessary to zoom the image much more.
Therefore, the size of an image undoubtedly influences its final resolution.
It is important to be careful about the “native” size of an image though. For instance, if a 1920x1080-pixel image is modified, maybe by enlarging it, its resolution gets worse, causing that “grainy” effect where single pixels are visible without even zooming.
On the other hand, whether an image gets reduced manually in its size, its resolution tends to improve, because more pixels are contained in every single inch of it.

Conclusions

As described above, the basic difference between raster graphics and vector graphics is that the latter makes it possible to resize images unlimitedly, without a loss in its quality.
Each of the two techniques cannot be considered better than the other one, because everything depends on how images are meant to be used.
If your intent is to create a logo and to adapt it to different layouts, vector graphics work better for your needs. On the other hand, if you took a picture and just need to remodel it by using a software program such as Photoshop, it goes without saying that you need to work on pixels, and so raster graphics is the best solution for you.
Hope I have been of help! Bye bye!

Edoardo
 

Raster vs Vettoriale: Quali sono le differenze?

Nel mondo del graphic design avrai sicuramente sentito parlare di Raster e Vettoriale, due tecniche di rappresentazione dell’immagine digitale con caratteristiche e destinazioni d’uso totalmente differenti.

Ma quali sono queste differenze?

Mettiti comodo… te le spiego io!

 

 

Grafica Raster

La grafica raster, detta anche “bitmap”, deriva dal termine inglese “raster”, che si traduce letteralmente in “griglia”.

Un’immagine in raster è appunto composta da una griglia di punti definiti come pixel, aventi forma quadrata.

Se il termine ti è nuovo, o non lo hai mai approfondito, sappi che il Pixel è la componente elementare di un’immagine.

Esso è composto da 3 cellette chiamate “subpixel”, ognuna delle quali gestisce un colore tra i tre primari del profilo RGB: R (Red), G (Green), B (Blue).

Un singolo Pixel contiene quindi al suo interno un codice colore che deriva dai singoli valori RGB e che, unito a tutti gli altri codici colore contenuti negli altri pixel, dà vita all’immagine digitale nella sua interezza.

 

grafica-raster-esempio

Ingrandendo una qualsiasi immagine in raster è possibile scorgere ogni singolo pixel che la compone.

 

Il programma più utilizzato e diffuso per lavorare alle immagini in bitmap è Adobe Photoshop.

Tale software, già dalla prima fase di creazione di un nuovo lavoro, consente di impostare le proprietà relative alla dimensione, alla risoluzione e al metodo colore dell’immagine.

 

photoshop-immagine-raster

Porzione del pannello impostazioni relativo alla creazione di un nuovo documento su Adobe Photoshop

 

Per capire come identificare un’immagine in formato raster, apri la galleria del tuo telefono e seleziona una qualsiasi delle tue fotografie.

Adesso prova a ingrandirla il più possibile: se la foto inizia a diventare sgranata e sfuocata, allora sei davanti a un’immagine raster!

 

Grafica Vettoriale

Le immagini vettoriali, a differenza di quelle raster, non si basano sui pixel ma su delle formule matematiche e geometriche che le rendono scalabili all’infinito.

 

grafica-vettoriale-esempio

Un’immagine in vettoriale può essere ingrandita all’infinito, senza che avvenga alcuna perdita di qualità

 

Il vettoriale è quindi l’ideale per la realizzazione di loghi, icone, illustrazioni, packaging, flyer, brochure, volantini, biglietti da visita e più in generale tutte quelle grafiche che hanno la necessità di adattarsi a diverse grandezze, sia per il web sia per la stampa!

In poche parole, un logo aziendale deve poter essere inserito all’interno del proprio sito web istituzionale, ma deve poter essere adattato anche a un cartellone pubblicitario di grandezza 600x300cm.

Con un logo progettato in Raster tutto ciò non sarebbe possibile!

Se poi non bastasse, con il vettoriale si possono effettuare anche particolari trattamenti dedicati alla stampa, come la fustellatura, la sagomatura, il laminato o il taglio UV.

Ma com’è che funziona davvero il vettoriale?

Tramite l’utilizzo di calcoli matematici, la grafica vettoriale fa un utilizzo delle c.d. “Curve di Beizer” per generare diversi tracciati retti, curvi o chiusi.

 

tracciati-vettoriali

Tipologie di tracciato, punti di ancoraggio e maniglie di direzione

 

Per ogni tracciato abbiamo diversi punti di ancoraggio, rappresentati da un piccolo quadratino, che ne vanno a stabilire il punto iniziale e quello finale.

È possibile trascinare tali punti di ancoraggio per alterarne la forma più e più volte, senza nessun limite.

Se il tracciato è curvo, accanto ai punti di ancoraggio compaiono anche le c.d. “maniglie di direzione”, utilissime per stabilire la curvatura del tracciato: più le maniglie vengono allungate, più la curva risulterà pronunciata.

Infine, i tracciati chiusi si differenziano dagli altri in quanto il punto di ancoraggio iniziale e quello finale coincidono, dando vita a delle vere e proprie forme geometriche primitive o complesse.

Tramite l’utilizzo combinato dei tracciati, è quindi possibile creare tantissime forme che possono subire alterazioni nelle dimensioni senza che avvenga alcuna perdita di qualità!

Il programma più diffuso per lavorare con le immagini vettoriali è Adobe Illustrator, e NON Photoshop (come molti credono)!

 

Esportazione delle immagini in Vettoriale o in Raster

Al di là della scelta del formato più appropriato (e a tal proposito ti rimando a un mio vecchio articolo sull’ottimizzazione delle immagini per il web), con le impostazioni di esportazione si stabilisce la destinazione d’uso finale che avrà l’immagine, vettoriale o raster che sia.

È doveroso però fare una premessa: i file in vettoriale possono essere esportati in raster, cosa che viceversa non è possibile.

I formati vettoriali più comuni, come AI (formato di Illustrator), SVG o PDF, permettono di modificare all’infinito l’immagine anche successivamente: in questo modo, le caratteristiche di scalabilità non vengono perse.

Esportando invece il file vettoriale in formati come Jpeg, Png o Tiff (miglior formato per la stampa), l’immagine viene convertita in raster, perdendo le caratteristiche appena elencate.

Detto ciò, la prima cosa da tenere in considerazione se si vuole esportare un’immagine in raster è la risoluzione, ovvero il numero preciso di pixel contenuti in una specifica unità di misura (di default si utilizza il pollice, ovvero 2,54 cm).

Il livello di dettaglio dell’immagine digitale si calcola infatti con i Pixel per pollice (PPI): più alto è questo numero, più alta sarà la densità, e quindi la qualità dell’immagine finale.

Questo indicatore gioca un ruolo fondamentale in fase di esportazione, soprattutto se si vuole destinare l’immagine alla stampa (e in quel caso consideriamo come unità di misura, seppur in maniera pressoché equivalente, i “Dots per Inch”, o Dpi).

Più alti sono i Ppi, maggiore densità avrà l’immagine, e quindi più pixel si avranno all’interno di un singolo “pollice”.

Indicativamente, per stampare un’immagine su carta è consigliato impostare sempre 300 Dpi; se invece l’immagine deve essere esportata per il web, la risoluzione ottimale è di 72 Ppi.

Per quanto riguarda la dimensione di un’immagine, questa è calcolata andando a definire il numero totale di pixel sia in larghezza sia in altezza. Un’immagine con una dimensione di 1920×1080 pixel avrà rispettivamente 1920 pixel in larghezza e 1080 pixel in altezza, con un rapporto di 16:9.

Più pixel saranno contenuti nell’immagine, più questa avrà una dimensione maggiore e una qualità migliore: infatti, per andare a visualizzare singolarmente i pixel, sarà necessario effettuare più “zoom”.

Vien da sé che la dimensione dell’immagine va dunque a influire sulla risoluzione finale della stessa.

Occorre però fare attenzione alla dimensione “nativa” dell’immagine. Se un’immagine con una dimensione di 1920×1080 pixel viene modificata, per esempio ingrandendola, la risoluzione sarà inferiore, ottenendo il famoso effetto “sgranato”, quello in cui è possibile iniziare a identificare i singoli pixel anche senza effettuare lo zoom. Viceversa, qualora si vada a rimpicciolire manualmente un’immagine, la risoluzione tenderà ad aumentare, in quanto in ogni singolo pollice si avranno molti più pixel al suo interno.

 

Conclusioni

Come già detto, la differenza sostanziale tra grafica raster e vettoriale è che con quest’ultima è possibile ridimensionare all’infinito le immagini, senza perdere alcuna qualità.

Non esiste una tecnica migliore dell’altra, ma tutto dipende dall’utilizzo che se ne vuole fare di quella immagine.

Se hai intenzione di creare un logo e adattarlo a diversi formati, è chiaro che il vettoriale è la scelta più giusta per te; viceversa, se hai scattato una foto e la vuoi ritoccare con un programma come Photoshop, vien da sé che dovrai lavorare necessariamente con i pixel, e quindi con la grafica raster.

Spero di esserti stato di aiuto! <img draggable=

Edoardo

Raster VS Vector. Spot the Differences!

Speaking of graphic design, you certainly heard about Raster and Vector, which are two different techniques of editing digital images, bearing different characteristics and aiming at completely different purposes.

However, what are these differences between them?

Make yourselves comfortable… it is my pleasure to tell you!

Content Index

  • Raster Graphics
  • Vector Graphics
  • Exporting Images to Vector or Raster

Raster Graphics

Raster graphics, also known as “bitmap”, work basically according to a grid-shaped layout, formed by little squares called pixels.
If this term does not ring any bell to you, or you just experienced little knowledge of it, just know that pixels can be considered the basic component of each image.
A pixel is formed by three cells, called “subpixels”, each of those containing one among the three primary colours of the RGB profile, where R stands for Red, G for Green and B for Blue.
One pixel contains a colour code coming from single RGB values that, along with all the other colour codes contained in other pixels, brings digital images to life.

IMAGE
By enlarging a raster image, it is possible to notice everyone of the pixels it is formed by.

The most used and widespread software to work on bitmap images is Adobe Photoshop.
Starting from the first stages of a new project, such a software allows users to set the size, resolution and colour method options of an image.

IMAGE
Find here a section of the setting panel while creating a new project on Adobe Photoshop

In order to understand how to identify a raster image, open the gallery on your mobile and select one picture randomly.
Now try enlarging it as much as you can: if it becomes blurred and grainy you have just found a raster image!

Vector Graphics

Differently from raster images, Vector images are not based on pixels but on mathematical and geometrical formulas, making them become unlimitedly scalable.

IMAGE
A vector image can be enlarged with no limits, without risking reducing its resolution rate.

The vector technique is ideal to create logos, icons, illustrations, packaging images, flyers, brochures, business cards and, generally, all the graphic works in need of being adapted to different sizes, both to be uploaded on the web and to be printed on paper!
Put in a nutshell, a business logo may need both to be placed online on a website, and to be adapted to a 600x300 publicity hoarding.
All of this cannot be possible if a logo is designed as a Raster image.
If it were not enough, a Vector image can be used for particular printing needs, such as die cutting, shaping, laminating and UV cutting.
However, how do Vector graphics work?
Referring to mathematical data, vector graphics are used with the so-called Beizer Curves to create different straight, bent or closed paths.

IMAGE
Path examples, anchor points and directional lines.

For every path, various anchor points are available, placed in a little square and referring to the starting and the final anchor points.
It is possible to drag these points to change the path more than once, without any limit.
If the layout is bent, direction lines appear next to the anchor points, which happen to be extremely useful to define its bending trend. The more these lines are lengthened, the more curved the layout becomes.
Besides, closed layouts are different from the others because the starting and the final anchor points match completely, creating both simple and more complex geometrical shapes.
By using mixed layouts, it is also possible to create a lot of shapes which can be adapted in their size without any risk of reducing their resolution quality.
The most used software to work on vector graphics is Adobe Illustrator, and not Photoshop, as incorrectly believed by most users!

Exporting Images to Vector or Raster

Aside from the choice of an appropriate layout (speaking of which I suggest you to take a look at this column about 
Optimising Images for the Web), the ultimate usage of an image can be defined, whether vector or raster, through appropriate conversion settings.
A word of caution at first: vector files can be exported to raster mode, but the same cannot be done the other way around.
The most common vector layouts, such as AI (by Illustrator), SVG or PDF, allow users to have unlimited opportunities to modify images in time, without losing the scalable signatures of each image.
By exporting vector files to formats such as Jpeg, Png or Tiff (the latter considered the best format for printing needs), images are converted to the raster mode, losing the signatures mentioned above instead.
The first aspect to be taken into consideration in order to convert an image to the raster mode is its resolution, i.e. the exact number of pixels contained in a given unit of measurement. Inches are used as a default unit, an inch equalling 2,54 centimetres.
Referring to the PPI unit (Pixels per Inch), the rendering rate of an image can be calculated easily. The bigger this number, the denser the image resolution itself, with a remarkable improvement in its final quality.

This plays a crucial role in exporting files, above all when it comes to images that are then going to be printed. In that case DPI (Dots per Inch) is the unit of measurement needed.
The higher the PPI value, the denser the image, the more the pixels contained in a single inch.
Generally, in order to print an image on paper properly, it is recommended to set a 300 DPI resolution. If the image needs to be exported and then placed online, the ideal resolution value is 72 PPIs.
As far as the size of an image is concerned, it is adjusted by defining the total number of pixels both in width and height. So, a 1920x1080-pixel image measures 1920 pixels in width and 1080 pixels in height, resulting in a 16:9 ratio.
The more pixels contained in an image, the bigger its size and the higher its quality. So, to view each pixel individually, it would be necessary to zoom the image much more.
Therefore, the size of an image undoubtedly influences its final resolution.
It is important to be careful about the “native” size of an image though. For instance, if a 1920x1080-pixel image is modified, maybe by enlarging it, its resolution gets worse, causing that “grainy” effect where single pixels are visible without even zooming.
On the other hand, whether an image gets reduced manually in its size, its resolution tends to improve, because more pixels are contained in every single inch of it.

Conclusions

As described above, the basic difference between raster graphics and vector graphics is that the latter makes it possible to resize images unlimitedly, without a loss in its quality.
Each of the two techniques cannot be considered better than the other one, because everything depends on how images are meant to be used.
If your intent is to create a logo and to adapt it to different layouts, vector graphics work better for your needs. On the other hand, if you took a picture and just need to remodel it by using a software program such as Photoshop, it goes without saying that you need to work on pixels, and so raster graphics is the best solution for you.
Hope I have been of help! Bye bye!

Edoardo
 

Articoli Collegati