Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Drawing Shapes for a Logo

In this task, you'll draw some shapes that will serve as the background for the Jade Valley logo. But, before you start drawing shapes, you need to know how Fireworks understands these shapes.

All digital graphics fall into one of two categories: bitmap (also known as raster) and vector. Bitmap graphics are made up of a matrix of thousands or millions of individual dots. Each dot is a single color, but they are so small (typically ranging from to of an inch) that we don't perceive them individually. Instead, our eyes blend them together, and we perceive the image. Vector graphics are made up of mathematical formulas that describe basic lines, curves, and shapes.

The distinction is easier to understand if we consider how each type renders a simple black rectangle against a white background.

The bitmap version of the rectangle graphic has rows and columns of black or white dots. In the area of the rectangle, the dots are all black. Outside the rectangle, the dots are all white. Every dot in the graphic is described. The graphic doesn't store any information about the rectangle as an entity; it only describes the thousands of individual dots.

A vector graphic depicting a rectangle contains two coordinates. The first contains the distance in points between the top-left corner of the rectangle and the top-left corner of the graphic. The second contains the distance in points between the bottom-right corner of the rectangle and the top-left corner of the graphic. Using these numbers, the vector graphic knows the bounds of the rectangle. In this example, the vector graphic specifies everything inside these coordinates as black. The vector graphic actually recognizes the existence of the rectangle, because it is the closed shape connecting the four coordinate points.

Creating a bitmap graphic, called painting, consists of coloring pixels. Creating a vector graphic, called drawing, consists of plotting points to create lines, called paths, and then specifying how the edges (or strokes) of the paths appear as well as how everything bound by the paths (called the fill) should appear. Don't confuse paths (the underlying points the computer sees) with strokes (the colored lines and curves visible to the eye). As you can see in the following figure, a single path (the star shape) can have a variety of strokes. Lesson 3,

Exporting a Site Design , but for now you should know that both GIF and JPEG are bitmap file types. In other words, while almost everything you create in Fireworks is a vector graphic, almost everything you export from Fireworks is a bitmap.

Note

You won't always export bitmap graphics from Fireworks. For example, if you're using art created in Fireworks intended for distribution in Flash, you might want to export using a vector format, such as Flash SWF or an Illustrator AI file.

Returning to the task at handdrawing the background shapes for the logoyou probably guessed (correctly) that initially you will create shapes as vector graphics. In creating these shapes, you'll follow a two-step process. First, you'll create the pathsthe shapes, their size, their placement, and so on. Once you're satisfied with the structure of the paths, you'll then make them look good by applying strokes, fills, and textures. Keep in mind that when you work with vector graphics, the paths and all their visible attributes are always editable, even if you save the file and return to it later. Thus, if a color is too dark, you can always brighten it. If a shape is too small, you can enlarge it at any time. If a line is not wavy enough, you can always intensify the curves. And so on.

You'll begin by creating a new document.

If you don't see the Start Page, you can create a new Fireworks document by choosing File > New.

[View full size image]

When you create a new graphic, you must tell Fireworks how large it should be. Size in Fireworks is measured in pixels, short for picture elements, which are the tiny dots that make up your computer screen.

The standard for screen graphics is 72 pixels per inch, so if you are using Fireworks to design for the Web or for a CD-ROM project to be viewed on the screen, you should always use 72 pixels per inch. Compared to print graphics, 72 pixels per inch is a low resolution, meaning that the image has comparatively less detail. Additional details wouldn't be visible onscreen anyway, and would add substantially to the file size. Because many people still rely on modems to view Web pages, minimizing the file size of all your graphics is critical.

After you click OK, the canvas appears. The canvas marks the boundaries of the graphic. Anything you put on the canvas will appear in the graphic when it is exported. You can store graphics in the gray area, called the workspace, but anything placed in the workspace isn't visible when the graphic is exported. Notice that this logo graphic is fairly small. Knowing that an inch holds 72 pixels, and that this graphic is only 120 by 100 pixels, its small size should not surprise you.

The location of the file doesn't matter for now, as long as you remember where you put it!

Many more tools are available in the Tools panel than you can see at first glance. Often, whole groups of tools are hidden behind a tool. In the Tools panel, any tool with a small arrow beside it contains additional hidden tools.

Tip

You can also toggle through the shape tools using the keyboard shortcut: U.

You use the Ellipse tool to draw ellipses and perfect circles.

As you press and drag diagonally using any shape tool, Fireworks draws the shape. Holding down the Shift key as you draw constrains the shape. Ellipses are constrained to perfect circles. Rectangles are constrained to perfect squares. This technique, called Shift-constraint, extends to other tools as well. For example, when you hold down the Shift key and draw with the Line tool, lines are constrained to 45-degree angles relative to the canvas.

Depending on your settings, the shape can have a fill and/or stroke. The default setting is a gray fill with no stroke. As long as you can see the circle you drew, its fill and stroke don't matter for now; you'll change them later.

First, you'll finalize the size and placement of the circle. You can resize objects in Fireworks in one of two ways. You can resize an object visually (that is, eyeball it) using the Scale tool in the Tools panel. Or, if you know exactly how large an object should be, you can resize it with numeric precision using the Property inspector.

In this step you're numerically resizing and positioning the graphic. In a normal design situation, you'd probably discover the proper size and positioning visually through trial and error. To help you match the graphic created in the book, and to see for yourself that it's possible to numerically resize and position objects, we're using the numeric approach in this step.

[View full size image]

The final graphic has five circles, so in the next step you'll create the remaining circles.

Tip

A faster way would be to use keyboard shortcuts. Ctrl+C (Windows) or Command+C (Macintosh) copies, while Ctrl+V/Command+V pastes.

When you've finished this step, the screen doesn't look any different. That's because Fireworks pasted each copy directly on top of the original. Don't worry; all five circles are there.

[View full size image]

Dragging a transform handle scales the selected object. If you drag a corner transform handle, you scale in two directions (left-right and up-down). If you drag one of the handles in the middle, you scale only in one direction (left-right or up-down). When you drag a corner handle, Fireworks automatically maintains the object's aspect ratio. In other words, if you scale down 20 percent horizontally, you'll also scale down 20 percent vertically. Fireworks' automatic preservation of the aspect ratio prevents you from distorting the shape.

[View full size image]

Note

The figure has been magnified to make it easier for you to see the size and positioning of each circle.

You don't need to be a perfectionist in this step. Just do the best you can. If you feel a circle needs to be resized or repositioned, you can change it later.

Tip

A convenient way to reposition objects is to use the arrow keys on the keyboard. When an object is selected, pressing one of the arrow keys "nudges" the object one pixel in that direction. Once you've dragged something roughly into place, nudging is a great way to fine-tune positioning.