Web Design Tutorials and Inspiration | Learn Photoshop Online | Creative Inspiration | Web Resources

Things you need to know before you start – Raster Vs. Vector

Posted on 13. Sep, 2009 by bmackler in Design Fundamentals, Photoshop

Like many people,  my first experience with an “image editing” program was Microsoft Paint.  It was with that program I learned what a pixel was and what happens when you put 100’s of those little guys together.  As we all know, it makes a picture.   Any type of picture actually, from a person to an exquisite sunset over the Grand Canyon, your only limit is your creativity.    But how does that technical fact translate into the world of high end graphics, with images that make you wonder if they are photographs or digital renderings of events that never took place.   Lets take a closer look…

Pixels
Pixels are measured per inch, or “ppi.” The resolution or sharpness of the picture increases as the number of pixels increase. Seventy-two ppi is fine for an image to be viewed only on a screen, but if the piece is to be printed, a minimum of 300 ppi is required. Increase in resolution means that each pixel is much smaller in size.

Raster
pixel based graphics – most images, photographs…Photoshop created files, jpgs, gifs…when you drastically change the size of these images, they start to become blurry and “pixilized”   This happens because you are expanding each 1×1 pixel beyond its intended size

Vector
Graphics created in programs like Illustrator that are mathematically based drawings (points, lines, curves, and shapes or polygon) that can expand and contract without losing quality.  These files are best used in print and in Flash.  Both formats rely on expansion of dimensions.

When designing for the web,  you will on occasion use vector graphics but the majority of your work will be done in photoshop and therefore be using raster graphics.

Tags: Photoshop, Resources, tutorials