Contact Adam

[email protected]

Lectures & Projects

Shepherd University

Advanced Design at Shepherd University

Web Design at Shepherd University

Project  1
Intro to UX Pin
Project  2
Copy an Existing User Interface
Project  3
Homepage Redesign
Project  4
Design a UI Kit
Project  5
TBD

Web Coding at Shepherd University

Raster vs. Vector Images

When it comes to computer graphics, there are two types and they are both important to know. There is more depth to this topic, especially for raster images and printing, but for beginners, if you can understand these concepts you should be able to 1. use the right tool for the job and 2. avoid common printing issues.

Raster Images

raster_example

Description: A raster image is made up of pixels or small squares. Raster images are usually more common than vector because they are generated by our digital cameras and scanners and most web images are raster too. Besides length and height, raster graphics are dependent and restricted by a third measurement called resolution. Resolution is measured in DPI or PPI (dots per inch or pixels per inch). What this means is that when you enlarge a raster image too much, “pixelation” will start to occur and the quality of your image will degrade. Usually when you print a web image, you might notice the poor quality. This is because a computer screen only needs 72 DPI to display an image, while a printer needs 300 dpi.

Usage: Photographic images with complex or wide tonal ranges.

Disadvantages: Larger files for printing, limited enlargement due to resolution (only about 10%-20% enlargement for a 300 DPI image).

File types: .JPG, .TIF, .GIF, .PNG, .PSD (.PDF can contain both vector and raster data).

Vector Images

vector_example

Description: A vector image is made up lines, points and Bézier curves. Vector images are created in software applications such as Adobe Illustrator and AutoCAD. Vector graphics are completely resolution independent which means that it can be resized from the size of a business card all the way up to the size of a billboard without any loss of quality. Of course, there is a drawback. Vector graphics cannot easily replicate the complex tonal ranges of a photograph. It requires an insane amount of skill, time and patience to create vector art that looks photographic. On the other hand, vector graphics are ideal for logos, blueprints and artwork that is composed mostly of solid shapes and simple gradients. You can mix raster and vector images in a single file, but just know that raster images will remain raster; there is no magic way to convert (and don’t think that Adobe Illustrator’s live trace is the answer, it’s not).

Usage: logos, blueprints, solid shapes and simple gradients.

Disadvantages: cannot replicate complex tonal ranges that are found in photographic images.

File types: .AI, .EPS, (.PDF can contain both vector and raster data)