Raster and Vector Images

In this guide I have summarized and simplified the differences between raster and vector images.

1. Define

Original

This is the original image that I will use throughout the guide.

Raster
1. These images are composed of pixels.
2. It is based on a grid system.
3. Used by Photoshop type of software.

As you can see, the image has little boxes which are pixels.
I have added a grid to represent the grid system which the image works on.
So remember. Raster = Pixels

Vector
1. These images are mathematically calculated.
2. It is based on points and paths that connect them.
3. Used by Illustrator type software.

The image is smooth and crisp even at such are large size of the original.
On the side I show a few points and paths connected. That's how this image is made.
So remember. Vector = Smooth at any size

2. Converting

Raster to Vector
There are several choices.
1. Trace the image yourself with the pen tool in an Illustrator type of program.

This was my trace of the coin with the pen tool. On the right side is an empty skeleton.

2. Use Adobe Illustrators Live Trace.
A. Select the image in illustrator
B. Goto Object > Live Trace > Tracing Options.
C. Under the Options, change the Mode to color, Max the Colors to 256. Leave everything else the same and click TRACE.

Not a perfect trace but a decent one.

Vector to Raster
This type of conversion is unnecessary because the image will become a raster if not saved as an .EPS or. AI format.

That's it
Any questions?
Ask away and I'll do my best to answer them.

 

Nice, I like how you included the images.
Since there aren't any major problems with this, I'll just point out some very minor points:
- I'd mention something about the SVG (Scalable Vector Graphics) format and the program Inkscape
- Add a couple examples of programs that are vector based and a couple for raster based
- The guide would look a tinsy bit nicer if the images had transparent backgrounds

Overall, nice

 

Thanks Zero.
I'll add more info, and I could change the images to transparent gifs.

 

Great guide! The vector graphics is the reason why I love Illustrator and tracing witht eh pen tool is the best way to enlarge images without losing quality.
However, there are also some problems with it. It's practically impossible to trace a photo without it looking like a drawing (which can still be pretty cool on some occasions), and tracing takes alot of time when you're dealing with detailed images. Just thought I should mention that before anyone tries to make a realistic tracing of their myspace pictures.
Again, great work on the guide and great tracing.

 

Err... I don't see why in any situation would you want to trace a photo (excluding the drawing effect). It IS impossible, because photos are images of the real world. You can't just keep zooming in on the picture because you need more detail information as you zoom in. Its much more space efficient to store as a raster.

 

Well I basicly use illustrator when I know that I want to be able to enlarge the image.
It's not impossible to enlarge photos using tracing (if you improvise and combine with some nice photoshop skills), but it does have a limit. I've used tracing on photos of objects in order to enlarge the the objects without them losing quality and still looked realistic.
The reason I posted that message was so that people wouldn't trace photos and expect to get a realistic result. because if you don't know about tracing in Illustrator from before you might think that you can apply it on photos and enlarge them without any problems.
It was a heads up to those new to tracing so that they wouldn't waste time.

 

Thanks guys.
I just fixed the images to look better on the site.
I'll add a section explaining other programs to use.
And maybe different extensions and what they mean.

 

Great, this helped me ( I used to re-copy the image but use more pixels, took hours..) so a great thanks