Vector vs Raster Graphics: Don’t Let Faulty Pixels Ruin Your Designs
Graphic format decisions are based on a variety of factors specific to your creation process, as well as the final format. This guide will assist you in making those decisions and producing a high quality product.
Vector images are composed of grid-based lines or curves. Because they are grid-based and mathematically calculated, they can be re-scaled to any size without losing clarity or sharpness. Vector graphics are generally favored for creating logos, icons, and working with type.
In contrast, raster (also known as bitmap) images are comprised of pixels. A pixel is a point and the smallest unit that can be displayed on screen. When an object is re-scaled, the computer must “guess” where to insert or remove pixels. For this reason, raster images often lack sharpness when they've been resized. A digital photograph or scanned drawing is an example of a raster image.
Why it matters
That is all very interesting (or maybe not), but does it really matter?
If certainly does. The consequence of not selecting optimal software for your project or not saving your final file properly is you may find yourself disappointed with the final product result, ie pixelated or blurry images. Prior to creating, and in order to produce a high-quality end product, you need to think about the components that make up your design, as well as the way(s) your designs will be used.
What to consider
Before you begin working, consider the main components of your design and the application of your final product:
- What are the primary elements of your design? Some possibilities are photos, text, and illustrations.
- Where and how will the designs be used? Perhaps they will be printed as large signs or small business cards. Or possibly applied digitally as social media or website banners.
- Will there be a need to re-scale the images for multiple formats, such as with a logo or icons?
- Are you at liberty to choose the final file type, or will you be required to submit a specified file format?
Digital editing programs
While most graphics programs can handle both raster and vector images to some extent, this does not mean each one is ideal for every type of graphic.
While there is not necessarily a wrong answer to which program to use for your creations, there is generally a preferred option, and there are certain factors which can help influence your decision. You may find yourself choosing two or even three programs at various stages of the design to get the job done.
Let’s take a look at some of the most popular graphics editing programs:
An industry standard for photo editing, this is the program to use when editing photos or creating photorealistic illustrations. Whether you wish to color correct or airbrush, Photoshop is the program of choice. Photoshop also has vector editing abilities including editable text, shapes and the pen tool. It also has an option to place or paste vector objects from other programs into your design, while preserving them as vectors. Despite having these handy vector capabilities, the final rendering will retain only the maximum quality of your original document size. Therefore it is best to create your Photoshop document at the same size (or larger) as the final product.
This powerful vector editing program is a great choice for logo design, line art, and typography—whether copy layout or type modification. One of the (many) amazing features of Illustrator is the ability to export your images at any size, and they will always retain the same clarity as the original size. Consequently, you could set your artboard size at 100 x 100 pixels and then export it to 1000 x 1000 pixels without losing any definition. You can also embed raster images to use in conjunction with your vectors in Illustrator. However, keep in mind infinite export size does not apply to raster images embedded in Illustrator, and raster images will look best at their original size (100%) or smaller when exported.
InDesign is a layout program and generally used for text-heavy documents, such as books and magazines. As with Illustrator, you can embed raster images and there too, they will look best at their original size or smaller. While you can apply certain effects to your photos directly from InDesign, you will have a lot more control over the results if you first modify the image in Photoshop and then import it into InDesign.
Commonly used file types in graphic design
Vector: AI, SVG
Raster: PSD, JPG, GIF, PNG, TIF
Both: EPS, PDF
Putting everything together
Following are some examples of real world vector/raster application processes:
Typography, illustration, drawing, and any other steps to create a logo are all performed in Illustrator. Final file can be exported to any type of format, but only vector supported files can be reproduced at any size.
Social media banners
If the designs are heavily photo-based, the entire banner is created in Photoshop at actual size, utilizing both raster and vector editing capabilities. For more typographical and abstract images, banners are created in InDesign or Illustrator. Files are generally exported as PNGs or JPGs for social media sharing.
Photos and images are edited and optimized in Photoshop and saved as high-resolution PSD or TIF files. Creative typographical headline layouts and icons are created in Illustrator and saved as AI or SVG files. These files and magazine copy are imported into and laid out in InDesign. Final magazine files are usually exported as PDFs to send to the printer.
Photo sizing and editing is done in Photoshop and then imported into Illustrator. The remaining poster elements, such as type and other vector elements are added in Illustrator. The final file may be exported in a variety of formats, depending on how the poster will be produced.