Bitmap Editing – Lesson 1

Bitmap Editing – Lesson 1 Objectives Define the difference between bitmap and vector graphics. Identify elements of the Fireworks interface. Create and set up a new Fireworks document. Make selections in Bitmap mode. Edit bitmap images. Bitmap Editing – Lesson 1

Bitmap Editing – Lesson 1 What is Fireworks MX 2004? Macromedia Fireworks MX 2004 is both a bitmap editor and a vector drawing program. What is a bitmap image? Most Web graphics are bitmap images. Bitmaps record information pixel by pixel and color by color. What is a vector image? Vector images use mathematical formulas to define the image. Vector images are easier to create and easier to edit. Fireworks has separate editing modes for these image types. When you select a tool, Fireworks knows what editing mode to enter. Bitmap Editing – Lesson 1

What is in the Fireworks interface? The Fireworks user interface is similar to other Macromedia products. There is a Document window called the canvas. The interface has a title bar and menu bar across the top of the screen. There is a Tools panel on the left side of the canvas. The Property inspector is at the bottom of the screen. The right side of the window has floating panels that can be turned on or off and used when needed. Bitmap Editing – Lesson 1

The Fireworks interface The figure below shows the main components of the Fireworks interface. Title and menu bars Tools panel Document window Floating panel Property inspector Docked panels Bitmap Editing – Lesson 1

The Fireworks Tools panel This figure shows the Tools panel. The Tools panel is divided into labeled sections. Each section has tools for a specific purpose. Bitmap-editing tools Web-related editing tools View-related tools Selection tools to select all or parts of images. Vector-editing tools Color-specific tools Bitmap Editing – Lesson 1

Bitmap Editing – Lesson 1 Create a new document When you open a new document, the New Document dialog box appears. You can specify the size of your canvas in this box, plus the background color and resolution of the image. The canvas size can be set in pixels, inches, or centimeters. The default image resolution is 72 pixels per inch, the default for Web graphics. Your background can be white, transparent, or some custom color you choose. Bitmap Editing – Lesson 1

The New Document dialog box The figure below shows the New Document dialog box where you can customize the appearance of your Fireworks document. Once you have created a document, the next new document you open will have the same settings as its default settings, but you can change them at any time. Set canvas dimensions and resolution up here. To set a custom color, click the Custom button, then click the Custom Color box beneath to open the color palette. Bitmap Editing – Lesson 1

Make selections in bitmap images When editing a bitmap image, you can select and edit either one pixel at a time or a range of pixels. To successfully edit a bitmap image, you must learn how to select the exact part of the image that you want to edit. Fireworks has several selection tools that can be used when working with a bitmap image. Bitmap Editing – Lesson 1

Bitmap Editing – Lesson 1 The Marquee tools The Bitmap section of the Tools panel contains the Marquee and the Oval Marquee tools, which are used to select specific areas of an image. The Marquee tool is used to select a square or rectangular area. The Oval Marquee is used to select a circle or an elliptical area. You can modify the style and edge of the Marquee tools using the Property inspector. Bitmap Editing – Lesson 1

Bitmap Editing – Lesson 1 Other selection tools You can use the Magic wand to select neighboring pixels of the same or similar color. You can set a Tolerance setting for this tool to determine the range of the selection. You can use the Lasso tool to draw a free-form selection area. Drag the Lasso pointer around in the canvas area to enclose your selection. When you have completed the selection, the area is surrounded by a floating marquee You can also use the Select Inverse command to deselect an area that has been selected. This will select all pixels in the image except the originally selected area. Bitmap Editing – Lesson 1

Feather and crop an image or selected area Feathering fades and softens the background of a selected area. Select the area using one of the selection tools, click the Select menu, and then click Feather to open the Feather Selection dialog box. Enter a pixel value in the Radius box to determine how much of the edge is affected. The Crop tool can be used to remove unwanted portions of an image. Drag the Crop tool around the area to select. When you release the mouse button, handles appear around the selected area. Drag the handles inward from any edge to “crop out” that portion of the image. Bitmap Editing – Lesson 1

Change the appearance of the edge of an image This figure shows the effect of applying an edge effect to a diagonal line of a bitmap image. Note the “stair” effect that occurs when a “hard” edge is applied to an edge that is not vertical or horizontal. In addition to a hard edge, you can apply a feathered edge, which makes the edge appear blurred, or an anti-aliased edge, which makes the edge appear smoother. Bitmap Editing – Lesson 1

Other bitmap editing tools You can flip an image horizontally or vertically by selecting the area to be affected and using one of the Transform commands from the Modify menu. You can paint a copy of a portion of the image to another area of the image using the Rubber Stamp tool. You can free-form draw in the image using the Brush tool, selecting a color and a tip size for the brush, and then just dragging it in the canvas to paint the selected color wherever you drag the brush. Bitmap Editing – Lesson 1

Bitmap Editing – Lesson 1 Set Brush properties This figure shows the appearance of the Property inspector when you select the Brush tool. There are several settings you can adjust to alter how the brush paints when you drag it in the canvas. Set color Tip size Tip preview Edge softness Set Stroke category and Opacity Bitmap Editing – Lesson 1

Bitmap Editing – Lesson 1 Summary In this lesson, you learned to: Define the difference between bitmap and vector graphics. Identify elements of the Fireworks interface. Create and set up a new Fireworks document. Make selections in Bitmap mode. Edit bitmap images. Bitmap Editing – Lesson 1