Sunday, April 26, 2015

V is for Vector Graphics

I'm really excited about this one, mainly because I've never before created a gif such as the one below, and also have never even done this effect on an image before now. The gif below illustrates the difference between a regular raster images and vector images.

Raster images are made up of individual colored pixels. This is why you can't increase the size of a raster image without causing pixelation. A vector image, on the other hand, is made up of lines and shapes that are created using mathematical formulas. Vectors can be increased in size without decreasing in quality because the formulas always stay the same, and are simply displayed in different scales. They are characterized by smooth lines.

Of course, the easiest type of image to vectorize would be one with simple shapes, but you can turn almost anything into a vector by simplifying it. For the following image, I simplified it using a threshold adjustment in Photoshop, then imported the result into Illustrator and converted it into a vector with smooth lines. Oh, and it doesn't have to be in black and white, by the way. I then opened the first image back in Photoshop, duplicated the layer, created a frame animation, placed the vector image, then tweened from the first image to the second. And there you have a clear example of the difference, from raster to vector in one gif!

Here are a few other examples of #vector graphics:

No comments:

Post a Comment