Graphic Underworld pg 4: Production Graphics with Wendy Peck at webreference.com

Graphic Underworld: Vector/Raster When and Why?

Vector programs make short work of manipulated text and any solid color work.

For photo work, only a raster program makes sense.

Now you know the difference between a vector and a raster image, and know how to convert from vector to raster. But how do you know when to use which format. Generally, it is pretty simple. If you are working with mainly solid color objects, manipulated text (see Text as Design to see how easy vector text is to manipulate), or many small objects, the clear answer is that a vector program will save you time. If you are working with complicated drop shadows, or other 3D effects, texture or photographs, raster is the correct choice.

However, what in graphics is ever that simple? More likely, you will find yourself starting in a vector program and finishing in a raster program. Some designs, many of mine, in fact, can technically be completed in a vector program, but vector exports to raster format are not always the best quality. As a broad, general statement, when you are creating raster format files, you will have better results with a raster program.

Exported directly to 72 dpi JPG from CorelDraw: 9.62kb

Exported from CorelDraw at 300 dpi in TIFF format. Opened in Photoshop to reduce resolution and optimize: 9.63kb

TIFF to the rescue
As I have mentioned often, I prefer working with vector objects, but there have been many times when the vector program did not have the power to rasterize my images with good results. When I run into that problem (often with graduated fills) I will export the graphic as a TIF file. TIF is a raster program, widely used in print work, that supports 24 bit color without degrading quality. I have had better results with this format than with uncompressed JPG files. I export as TIF and then open in a raster program to convert to GIF or JPG.

You may wish to follow up on this topic with a trip to follow the discussion for the samples shown here from my Dingbats article, and also to the first of my Graduated Fills tutorial, which covers optimizing for shaded effects.

Going the other way
So, since it is so easy to convert vector to raster for Web use, it must be easy to go the other way, right? Wrong, wrong, wrong. That is one of the reasons we vector people tend to work in vectors as long as we can. Converting from raster to vector is one of the toughest graphics challenges, and one I am not going to address here.

Most times, it is faster to recreate an image than to convert. There are software programs, like Adobe Streamline, or CorelDraw's CorelTrace, that will do an acceptable job of very crisp, clear images, but the learning curve can be long, and the rewards often poor. Unless you are working in a situation where you often have to use a raster image as the base for new work, you are better off using one of the following solutions.

Tracing partially completed. The blue outline shows one area that has been traced – this area is now a vector object. The next area is shown traced with Bezier curves, with final editing of nodes nearly complete.

For this image, the patterned rectangle was imported into a vector program as a GIF file. The other design elements were added and the entire image exported as a GIF file.

Trace
When you have learned to work well with a vector program, and are comfortable drawing and editing nodes in paths, you can import the raster image and place it on its own layer. Reduce the opacity of the layer to fade the image back (if available), or draw a semitransparent white rectangle over the image. Lock the layer containing the image to be traced. Trace the objects on a new layer. This sounds tedious, but it is surprisingly quick. I have used tracing programs enough that I am pretty good at the automatic tracing, but I still use the manual trace method more often.

Incorporate the raster image into the vector image
Any vector program will import a raster file. If you will not need the raster image at a larger size than it is originally, and do not have to edit the color, you can import the raster image and incorporate that image into your new design. The raster image can be exported with the added vector elements when your design is complete. I find that I do this a lot, often when a logo has been provided by a client in raster format, or I want to add some texture or effect to a small part of the graphic, but have more I would like to complete in the vector program.

That's pretty well the scoop on vector and raster as it applies to the Web. But don't stop now. We are moving into one of the most important subjects in Web design – optimization. No, I won't fill the page with a bunch of math for you to figure out, but I do believe that no designer can afford to skimp on the learning curve to create small files. Click on ....

Next page

Graphic Underworld Tutorial Index

Graphic Underworld Start
Vector vs Raster
Vector to Raster for the Web
Vector/Raster When and Why?
Optimize is Not Passé
How Compression Works
Image Optimizer