|
 |
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
  
|
 |
|
|
|
