• Design
  • Illustration
  • M Chen Wears
  • M on the side
  • dad
  • Contact
header
Home > The Graphic Details > The Graphic Details — raster vs. vector images (Basic)

The Graphic Details — raster vs. vector images (Basic)

January 9th, 2009

As a freelance designer, I often get asked job-related questions… I thought it might be helpful to tackle some of these questions here. So without further ado, welcome to the first instalment of The Graphic Details!

One of the most basic things to know about computer graphics comes up when people ask me about logos: the question of raster vs. vector.

In nutshells:
1) RASTER (aka BITMAP) images:

  • … are built pixel by pixel.
  • … have resolution (72 dots per inch is web resolution, whereas 300 dots per inch is print-ready).
  • All digital photos and static graphics on the web are raster-based.
  • Examples of file formats that are raster-based are: JPG, GIF, TIF, and BMP.
  • Photo-editing software, such as Photoshop, are used for creating and manipulating these types of files.

Here is a (raster-based) photo I took in Nova Scotia last summer — at 100% on the left, then zoomed in at 1200% on the right. The image is obviously very pixelated and grainy when I magnify in:


2) VECTOR images:

  • … are built with paths.
  • … do not have a resolution associated to them because the files are built on mathematical formulae (don’t worry — you don’t have to do the computing; it’s all done by the software while you use the drawing tools), so they’re clear regardless of size
  • Ideally, logos SHOULD be built as vector graphics so that they can be printed at the highest possible quality.
  • Examples of file formats that are vector-based are: EPS and AI.
  • Illustration software, such as Illustrator, are used for creating and manipulating these types of files.

Here is a (vector-based) logo I created for my buddy Bob Ledrew (who, with his lovely partner-in-crime Cat, hold house concerts in their abode) — at 100% on the left, then zoomed in at 1200% on the right. Even this close up, the logo remains crisp and clear; the fine blue lines and dots that you see are the program’s selection points and and paths.

Ok, so who cares?
Well, say you’re working on a printed brochure at work, and you need to include a bunch of company logos. Easy enough, right? You go to each company’s website, right-click the logo, and download the graphics to pass over to whomever happens to be doing the layout. Sorry… no cigar. If you print web graphics, they will be grainy.

What you need to do is contact each company’s communications department and ask for a vector-based version of their logo. Hopefully they have an EPS or AI on hand… which will print out clear as a bell.

And heaven help us….

What happens if you open a vector file in a photo-editing software, or if you open a raster file in an illustration program???

1) If you open a vector file in Photoshop, the program will ask you what resolution you want to open it at. The file is AUTOMATICALLY rasterized once it’s parsed/opened. Even if you save it again as an EPS from there, all vector information is lost. [WHY then, would it be possible to save an EPS in Photoshop? Among other things, EPS files saved from Photoshop can contain info like mono/duotone colour schemes or clipping paths... which other formats can’t do.]

2) If you open a raster file in Illustrator, it’s still rasterized. There are ways to vectorize the graphic — such as with “live-trace” in Illustrator CS3. The image, however, will look different than the original raster version did.

This is what the ladybug shot looked like when I did a live trace on it:

This is what it looks like when all the vector elements are selected — again, the fine blue lines and dots are the outlines and nodes of the objects:
And finally…
For the inquisitive folk who wondered in the first paragraph when I said “The vast majority of computer graphic files… are either one of the other…”: Which files are the exceptions? There ARE a few file types that can contain both raster and vector elements:
- PDFs can contain both
- Anything created in an illustration or layout program can contain both
- Photoshop’s text is in vector, even though all other elements in the program are rasterized; but these are only maintained if the file is saved as a native PSD or a layered TIF

*** NB: I plan on posting my ramblings about graphics and entrepreneurship from time to time, but this’ll just be me geeking about stuff I work with day to day — and hopefully in a helpful, not-too-technical way; in NO way do I profess to be a certified graphics instructor. I use the Adobe line of products (plus Corel Painter, which rocks) on a Mac platform, so those will be what I’ll tend to talk about.

Please feel free to leave a comment if:

  • I ever miss something,
  • I am unclear about anything,
  • my posts are helpful or not, AND/OR
  • there’s a topic you want to know about.

Cheerio!

The Graphic Details , , , , , , , ,

  1. January 9th, 2009 at 13:07 | #1

    Excellent information. I currently use Corel’s Paint Shop Pro, but am planning on switching to Adobe Photoshop on my Mac this Spring. Thanks very much for sharing.

  2. January 9th, 2009 at 14:42 | #2

    Very cool post! I often have troubles with pixilation…I’m marking this so I can refer to it later.

    Thanks!

  3. January 9th, 2009 at 23:11 | #3

    Quite informative. Thanks.

    Regards,
    SBL Graphics
    http://www.saibposervices.co.uk/background_removal-clipping_path.aspx

  4. January 10th, 2009 at 11:13 | #4

    What a service you are providing here on your blog mchen! Entertainment AND education! Keep up the great work and thanks!

  5. January 14th, 2009 at 09:39 | #5

    An incredibly helpful post. I have an intermediate knowledge of Photoshop and InDesign, both of which I use frequently at work. But I’m still learning exactly how a JPG differs from a GIF or a TIf. Last year I went for my introductory training in Illustrator – your post is a nice refresher, particularly for an aspiring graphic artist. Thanks, and keep it up!

  6. April 22nd, 2015 at 11:48 | #6

    Your anti conscience takes advantage of your negligence in order to generate horrible situations. Aaah to say anymore would be to give the ball away and allow Liverpool to win the Premiership. (AP Photo/Felix Marquez). Still, he relied on Debbie’s presence and sometimes he would call on her..

  7. Susan Lane
    June 27th, 2017 at 14:56 | #7

    Nice and informative! I usually use this: http://www.coreldraw.com/en/pages/vectorize/index.html to vectorize my images but I am sure your way works fine as well.

  1. No trackbacks yet.
© 2010 Emily Chen Design & Illustration. All Rights Reserved.