Username:
Password:
Adobe Fireworks CS3 Tutorials

The Fireworks Workspace / About Vector & Bitmap Graphics

Subtitles of the Movie

Computers display graphics in either the vector or bitmap format. Fireworks works with both vector graphic objects and bitmap graphic objects, so understanding the differences between the two will help you understand much about Fireworks, so let me provide some background about the difference between these two graphic families. To start I need to mention that unlike previous versions of Fireworks, you don't need to deliberately switch between bitmap mode and vector editing mode. You can also mix bitmaps, vector objects, and text objects on the same canvas, much as I have here. For example, if I select the pointer tool here, I have a vector object right here, and I can go ahead and modify and edit, or add to this vector object. I have some text here as well as some bitmap graphic objects; that's the gemstones there, and I can edit those as well. To move into vector or bitmap editing mode, simply click and select one of the bitmap tools to get into Bitmap Object editing mode, or choose one of the vector tools, or the text tool, to move into Vector Object editing mode. So, to summarize, switching to the appropriate mode as selecting the text tool, or one of the Vector or bitmap tools from the Tools panel. Let me start off with my review here in this movie, comparing these two graphic types with vector graphics. Vector graphics render images using lines and curves called "vectors." These include color and position information, for example, this image; let's go ahead and choose the pointer tool, and this image here of this green background is a shape, a vector shape, as well as this curve that represents the logo for Brazil On-line here. So this image of the logo and the shape may be defined by a series of points that describe the outline of the shape. The color of the shape is determined by the color of it's outline or stroke, and the color of the area enclosed by the outline, which is the fill, in fact you can see some of those points, let's go ahead and zoom in using the Magnifying tool, let's zoom into that vector shape, and notice that there are my points. I can take the sub-selection tool and modify those points, the designate, the stroke and the fill. Now there's no stroke attached to this object because right here my stroke fill color is set to none, but I can change that to, let's say, yellow, and then let's go ahead and increase the stroke thickness, and now you can see very clearly, that yellow stroke. Let's turn that down a little bit. The fill would be the green color in here, designated by the Fill Color chip right there. Now when you edit a vector graphic, you modify the properties of the lines and the curves and describe its shape. Vector graphics are what you call "resolution independent" which means you can move, resize, reshape, or change the color of a vector graphic, as well as display it on out-put devices of varying resolutions without changing the quality of it's appearance, I can demonstrate this if I zoom back out; let's hold down the Alt key, with my magnifying glass, there's a negative sign in there, let's zoom out on this, and now let's take the scale tool, right here, and let's scale this vector object. Notice that it retains its clean lines, the line there represents its stroke stays clean, doesn't distort, get blurry, or pixilate, as the bitmap graphics will do, here later, when I expand those, using the scale tool. The best test to perform on a vector object is to zoom into it and notice that the lines will stay relatively smooth. The jagged lines you see here are something called anti-aliasing, and Fireworks will do that to smooth out the edges of that curved line so it looks curved and smooth there when you look at it at 100 percent. Notice that if I take this vector line and draw another line like so, it stays smooth here, but as I zoom in; there, it's smooth, but you'll notice that there's a little bit of that Anti-aliasing there that smoothes that out, so when you look at it at 100 percent it's smooth. Now bitmap graphics are composed of dots called pixels, arranged in a grid. Your computer screen is a large grid of pixels, and the bitmap version here of a graphic like that Gem, you'll notice that there are the pixels. You can see the pixels here that comprise this image. Each pixels is assigned a color, and when viewed at the correct resolution, these dots or pixels, fit together like tiles to form the image, and it'll be clean and clear. Notice that now you can't see those pixels. When you edit a bitmap graphic, you're actually modifying the pixels rather than the lines and curves of the vector graphic. These bitmap graphics are resolution-dependent, which means that the data describing the image is fixed to a grid of a particular size. If I enlarge this bitmap graphic it will make the graphic rough because I have to redistribute the pixels in the grid, so that the edges will appear ragged. Let me go ahead and zoom to 100 percent and then take my Scale tool, select my bitmap graphic, and now if I enlarge it, you can actually see right here at 100 percent; I'm going to have to zoom in, it gets kind of fuzzy and ragged on the edges. Also, displaying a bitmap graphic on an out-put device with a lower resolution than the image can also degrade the image's quality. For example, this image is at 72 dpi, so you'd want to print it out on a device with at least 72 dots per inch resolution. So there you have a summary review of the differences between these two graphic families: Vector graphics, and Bitmap graphics.

Tutorial Information

Course: Adobe Fireworks CS3
Author: James Gonzalez
SKU: 33836
ISBN: 1-934743-42-9
Release Date: 2008-01-25
Duration: 8.5 hrs / 93 lessons
Work Files: Yes
Captions: For Online University members only
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 81,350 Video Tutorials (20,800 free)
  • Video Available as Flash or QuickTime
  • Over 782 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available