Menu
Newest Popular

 


part 1: What is a Bitmap Graphic?
part 2: What is a Vector Graphic?
>> part 3: Comparing Bitmaps and Vector Graphics

part 3: Comparing Vector vs. Bitmap Graphics

So far we've looked at bitmaps and vector graphics separately. Now let's summarize a bit and rehash this information as we compare some points about these graphic types.

Back and forth - converting Vector to Bitmap and Bitmap to Vector:
I've noted the fact that vectors and bitmaps have different uses and are manipulated differently in different programs. What if you have a logo you've made in Photoshop, but you'd like it to be a vector EPS file? Or what if you want to use or manipulate a vector illustration in your Photoshop document? Let's start with the latter:

In Photoshop, you can apply drop shadows, give texture and distort bitmap graphics in a way that is difficult or impossible in vector illustration programs. Luckily, there is a very slick way to get vectors into Photoshop: just open them. When you do this, you will get a dialog box asking you to enter the size you would like the file to become - enter any value, and Photoshop will rasterize the file. Here's what that means, and what the dialog box is asking: Remember that vector files have infinite resolution, and that bitmap files have a defined resolution? Photoshop will set up a grid of any size you specify, then fill in that grid with information from the vector file, creating a perfect bitmap file from the original vector. Once the file has been rasterized into a Photoshop document, you end up with a bitmap file as large as you need it - no stair-stepped edges and no interpolation - which you can then manipulate as needed. I suggest rasterizing the vector in to a file larger than you think you will need, then shrinking the manipulated result down for use.

Going the other way requires a lot more work, at least for a clean result. To get a vector file out of a bitmap original, make a selection of the area/shape you want to convert, then select Make Work Path in the Paths palette in Photoshop. You will be asked to define a tolerance - I suggest somewhere around the default value of one pixel. If you make the tolerance too small, you will have more detail, but a mess of extra points on the path to clean up. Too high a tolerance and the shape will be ill-defined, but will have fewer points to clean up. The best option will vary depending on the shape, so experiment. Once you have a Work Path in something like the right shape, select Export > Paths to Illustrator and save the resulting Illustrator (.ai) file. You can then open the file in Illustrator or any program that can edit Illustrator files. There may well be a lot of smoothing and cleaning up to do, but you should have a good start.

When to use which, and why - a little case study:
Each graphic type has instances where it makes sense to use one or the other. Let's say we're doing a project that will get printed - an advertisement, an elaborate invitation, or a catalog cover. For best results, both vector and bitmap graphics should play a role. We'll use some photos - lots of colors, fixed/finite size from a digital camera. These files have to be bitmaps, probably .tif or .jpg or .pict files. Photos just can't be easily represented as a vector graphic. But the files will be comparatively large.

We also want to use a company logo and some simple illustrations. The graphic designer (or you) probably created these in an illustration program so they would be a portable, small-sized file that will print smoothly at any resolution. The files use simple, non-photorealistic colors, and we may want to edit them a bit to serve our needs. These files should be bitmaps - probably .EPS files for use in other programs.

We will also use some type, which as we said, is basically a vector file.

ILLUSTRATION 9:
Here's an Image Catalog cover - both vector and bitmap graphics are used to ensure the best results when printed.

The logo/illustration files and the text files are going to be small files, and they will scale infinitely. If these files were bitmaps, we would have to worry about whether they were of adequate resolution for our use. I shudder to think of the number of times I've requested a logo from someone, only to have them send me the header from their website. This is a JPG file, and it is small, generally 250 x 100 pixels at the most. If the project is to be printed at 300 DPI, this gets us a printed image of nearly an inch by a third of an inch. Not much to work with. As we increase the dimensions and Photoshop interpolates up to a new size, it will look fuzzy and ugly very quickly. But with a vector EPS file, we could print a billboard and the edges would be razor sharp.

Once we have these files collected, we need a program that can work with both bitmaps and vector graphics. Traditionally, this has meant page layout programs like Quark XPress or Adobe InDesign, though as Photoshop has matured, it has become more adept at handling both bitmap and vector graphics. I now commonly use Photoshop to do page layout and often it works well. Regardless of the program, the vector and bitmap elements get integrated into one work. (See Illustration 9.)

More comparisons a bit more in depth:
File Size: I've said that vector file sizes are smaller, making them easier to distribute via email or any other electronic means. Let's take a look at some file sizes for the Freerange logo we've already used. I'll be comparing the Vector graphic to versions of that graphic that have been rasterized into bitmaps.

Resolution: Vector Size: Bitmap Size:
250 x 78 36KB 57KB
800 x 248 36KB 581KB
1500 x 466 36KB 2000KB (2 MB)

This can go on and on, with the bitmap becoming very, very large. The vector file never changes size, no matter how large it's needed. (Now, the other way to look at this is: "Vector files don't really have a resolution, so your table is inappropriate/stupid." This very true, but I'm trying to make a point.)

Scalability: When a vector graphic is placed in a document, it can be scaled up or down with no loss in quality. Bitmaps can be made smaller, but not larger without interpolation, which will degrade the quality of the image. (See Illustration 10.) Let's look at a couple of scaled images as vector and as bitmap - this is basically Illustration 7 with one extra panel:

ILLUSTRATION 10:

Here's the Freerange vector logo, viewed at 100% on screen. Here's a wingtip from the same logo, blown up to 1600% while still in vector format. Still sharp. Here's a wingtip from the same logo after being rasterized and blown up to 1600% in Photoshop. Not good.

Okay, that about wraps it up - I've approached the issue from a couple different angles, and I hope the Vector vs. Bitmap question has been somewhat clarified!

I have made some broad generalizations for the sake of clarity, so if this is your area of expertise feel free to contact me with suggestions or corrections.

Text and images copyright © Chance Agrella. Photos are from the collections of Freerangestock.com, where they and thousands of others can be downloaded for free.


Go to Article Main Page

Go to Freerange Stock Home Page

 

Image Usage Information

Follow Us

Search Partner