What’s the difference between vector and raster art and why should you care?
How can you tell the difference?
What if you use the wrong one?
What are common file formats for each?
Have you ever wondered why designers request a vector version of your logo to produce professional, high-quality communications for your organization? The JPEG works great for you, and it looks fine on your screen. Why can’t they just use that? Does it really matter? Yes, it does.
The whole story
Vector art
Vector art is used for logos, infographics, diagrams, typography — anything that has well-defined edges; they may be complicated or simple, but they are defined. The shapes are described by the computer as mathematical (usually PostScript) formulas; they may be outlined and/or filled with color or gradients. Vector art in infinitely scalable.
What does this mean for you? If you logo is created as vector art, it will be sharp at any size, business card to billboard!
Adobe Illustrator is the most common professional application to create and work with vector art. The most common file formats for vector art are:
.ai – Adobe Illustrator. This is the native file format of the application; AI files can contain vector and raster art, but vector is much more common.
.eps – Encapsulated PostScript. This is a more universal (non-native) document that describes the shapes in the file with the PostScript programming language; EPS files can contain vector and raster art, but vector is much more common.
.pdf – Portable Document Format. This is a file format that includes all the elements of a printable documents that you can view, navigate, print or email; PDFs can contain vector and raster art.
.svg – Scalable Vector Graphics. This format is still a bit rare and is used for graphics and logos on the web — very handy for all these retina screens popular today
That’s a lot of alphabet soup; after the next section on raster art, we’ll look at some examples.
Raster art
The other kind of digital art — raster — is used for photos, digital paintings and any digital illustrations that are more free-form (airbrush and paintbrush). This art is defined by a computer as a grid of colored dots (pixels); the file contains the color for each box in the grid, and when they are all put together and you zoom out, you see a picture. If you’ve ever zoomed in on a jpeg, you’ve seen the grid of colored squares.
What does this mean for you? Rasters are awesome for photos but terrible for logos. Steer clear! The master file for your logo should always be vector (AI, EPS or PDF). You may need a raster version of your logo for a specific use (web or promotional products like patches, mugs and mousepads). If so, export the vector art to a raster file (JPEG and PNG are the most common) to the size and resolution your promo vendor requests.
Adobe Photoshop is the most common professional application to create and work with raster art. The most common file formats for raster files are:
.jpg – Joint Photographic Experts Group. This is a very common image format used by digital cameras and for photos shown on web sites; it uses lossy compression — the more you compress, the smaller the file and the worse the quality. JPEGs never contain vector information and they don’t allow transparency so if you export your logo to a JPEG and it’s on a white background, you’ll always have the white box around your logo.
.png – Portable Network Graphics. PNG was created to be an improved version of GIF, so PNG files are meant to be used for web art, not print art; PNG compression is not as effective as JPEG for photos, but works great for logos and flat-color illustrations. PNGs allow transparency so your logo background can be transparent rather than a white box!
.tif – Tag Image File Format. TIFFs are commonly used for high-resolution print graphics; think high-quality, 300 dpi photos that would go in a magazine or brochure; TIFFs were also a popular way to save art from a scanner so you could open it in Photoshop for editing. You probably won’t deal with TIFFs much unless you’re doing a lot of print art.
.psd – Photoshop Document. Back in the day — let’s say the ’90s — when QuarkXPress owned the professional page layout industry we saved out PSDs as TIFF files from Photoshop to import into our Quark layouts; when Adobe released InDesign (their Quark killer) they allowed PSD files to be imported directly into InDesign, so there was no reason to save the two file versions, PSD for editing and TIFF for placing into a layout.
.gif – Graphic Interchange Format. These are web graphics with flat colors; simple animations are optional. You should never use a GIF for print work.
Example time!
NINJA PRO TIP: How do you tell if a file is vector or raster? If it’s a JPEG, PNG, TIFF, PSD or GIF, it would be raster; PSD allows vector information in it, but no sane person uses Photoshop to work on vector files. So that’s pretty easy.
But, if it’s AI, EPS or PDF, they all can contain vector AND raster info so how do you tell what you have?
You can open the file in Illustrator, go to the View menu and choose Outline (Command-y) and see what happens!
If you see a sort of black and white outline skeleton view of the artwork you were just looking at in color, then you have a vector art. Congratulations!
If you’re looking at a sad, plain black outline of a box that is the size of the art you were looking at, you don’t have vector art. Frowny face.
You can see the outline versions of the vector art in the illustrations on this post.
Show Outlines
The Show Outlines trick is a handy one to know. True story: when I ask clients for their logo and they send me a JPEG or PSD, I reply that I need a vector file which would be an AI, EPS or PDF. Occasionally people have sent EPS files that were not vector art. They assumed that one could just save a JPEG as an EPS and it would magically be the correct format. It doesn’t work like that.
You can export a vector file (notice I didn’t say “save”) to many raster formats like the ones listed above, but you cannot save a raster file to a vector format and have it become vector outline information. So if you need a raster version of your logo for your website, you can export your master Illustrator art to PNG.
If you need to convert raster art to vector, you have to trace the shapes in your art with the pen tool in Illustrator and assign the appropriate colors to the shapes. (This skill will be addressed in a future post.) And yes, there are tools that will do it automatically, but I am old-school and prefer to trace shapes myself as it ends up being a better final product for simple logos and shapes. Also it’s not that hard.
For logo design specifically, you should receive from your designer (or create yourself if you’re DIYing your logo) some combination of these file formats: AI, EPS, PDF, JPG, PNG and SVG. I used to save logos as TIFF as well, but a high-quality, high-resolution JPEG will do just as well today and people are comfortable with JPEGs.
Last, but not least — type
A specific case of a vector and my personal favorite: typeface characters! You’ve worked with word processing enough to know that you can increase or decrease point size in whatever app you’re working in and the letters scale up and down smoothly. 12 point looks good. What about 24? Yes, still sharp. On up to 72 and beyond? Characters are still nice and clear.
How? There is a master vector shape for each character in a typeface (letters, numbers, punctuation and symbols). When you change size, your application references the shape of the letter in the font file and and scales it (up or down) to display as sharply as possible on your display. If you print it, this info gets sent to the printer, and it prints to its maximum dpi. Pretty cool, huh?
How do you see these vector shapes that make up letters? Use the Type tool to type your letters in Illustrator and increase the size until they are about an inch tall. Click on the black arrow at the top of the tool palette and select the text you just entered. You should see a box around the text and every line is underlined in blue. Then go to the “Type” menu and choose “Create Outlines.” You would see the outline view shown on the right in the example below.
Illustrator uses the vector info form the font file to turn all your characters into shapes. At this point the computer no longer sees the letters as type; you can’t edit the type, but you can edit the shapes just like any other shape in Illustrator. This is super powerful if you want to reshape letters for logo design purposes.
Uh oh
What happens if you use a raster version of your logo (or someone else’s logo) on a print piece? Bad things, very bad things. I just got this invitation in the mail yesterday. It’s an Amazon workshop with the Amazon logo (staying with the Wonder Woman theme, of course) shown large at the bottom — and the logo has the jaggies! This tells me it’s not vector art. To print the Amazon logo so large and not have a vector is sloppy and unprofessional, imo. (Art is blurred to protect the guilty.) This is why you should avoid using raster files for print work.
Stay for the credits
All Buffy the Vampire Slayer art is copyrighted material and owned by Warner Bros. Wonder Woman is property of DC Comics, and the 2017 movie was distributed by Warner Bros. All art is used here for commentary and educational purposes only. While we’re at it, we’ll wrap up by looking at the logos for WB and DCC!
By now you should have a pretty strong grasp on how vector art differs from raster art and why having your logo in vector format is super important. You should also have a better idea of when you should use each one and which format you should request from people providing your art files.
If you have any questions or comments, please ask below.
Excellent write-up and examples. Next time I have a client ask why it matters their logo file is in a certain format, I’m linking to this page.
Thank you! I will be sending clients here as well so they can see how important a vector logo file is to have on hand.
“sharp at any size” needs to be on a tshirt.
Less of a how-to question but a why: What happened that Quark was able to let Adobe take over?
Great shirt idea! Quark. They owned the industry for so long but once Adobe got a foot in the door, things changed quickly. I used Quark for 10 years, but doing one project in InDesign had me hooked (around 2002-3). The similarities between the type and paragraph palettes to Illustrator, the ability to add drop shadows without running back to Photoshop and simple path creation ability were the main things that hooked me. Oh, and the big one was that InDesign would open native Quark files so I didn’t lose 10 years of layout files. Once InDesign got up to speed at all the printers and service bureaus so we could get our files printed, it was as good as over. Quark was kind of cocky too, and didn’t try hard to keep their customers by improving features.
The examples really help this make sense to someone who doesn’t know enough to be dangerous (YET!)
Thanks! As they say, a picture is worth a thousand words; when trying to explain graphical concepts, show and tell can be priceless.
Very good description of differences and appropriate uses of vector and raster formats. I have been aware of these terms for many years, but did not understand and could not describe the differences or how to effectively utilize each format. This is a great topic for your blog, both informative and meaningful to many people. Thank you for the valuable, educational information.
You’re welcome. It’s hard to explain in words, but when you see the outlines in Illustrator and the pixelization in Photoshop, the difference becomes obvious.
Great read! Learned several things from this. Great for small business people.
Thank you! And thanks for reading!
Interesting. I learned new things. Thanks for sharing.
Thank you; I’m glad you enjoyed it!
Cool! I totally learned something! I just designed a poster presentation for an annual national conference in Orlando this week. After some research – I learned that I could design the poster (which is 4 ft x 8 ft) in PowerPoint and send the file to “posterpresentations.com”. They converted the file to pdf, sent me a proof, and I realized that 2 images that I had pulled from google images were not high res jpg’s and looked blurry on the proof zoomed to 200%. I know this is all basic stuff for you – but it explains a lot for me! Needless to say – the part I created on power point is perfectly crisp – even a screenshot I attached. So is creating something in power point vector??
I think the basic shapes created in PPT (like circles and rectangles) would be vectors, or at at least they should come out crisp on a print. The way to find out would be to export it to a PDF and open that file in Illustrator or Acrobat reader, zoom in really close and see if it it’s still sharp. If yes, then it was a vector. The text should be be sharp because the letter shapes are based on vectors in the font file.
Thank you, Sheri. It’s been a while since I’d thought about it, but getting more into my D70, this helps. 🙂
Cool! Photography is a fun, creative hobby, probably my favorite one.