Create and edit a mask

Create and edit a mask

Now that you’ve made various modifications to the classic car image, you’ll perform one last procedure to give it the appearance of becoming gradually transparent. In Fireworks you can apply two kinds of masks:

vector masks and bitmap masks. For this tutorial, you’ll apply a simple bitmap mask to the car image. You’ll then modify it by giving it a gradient fill. The pixels in the mask will either display or hide the car image, depending on their grayscale value.  

Apply a mask 

Work with layers and objects

Work with layers and objects

Layers divide a Fireworks document into discrete planes. A document can be made up of many layers, and each layer can contain many objects.

In Fireworks, the Layers panel lists layers and the objects contained in each layer. Using the Layers panel, you can name, hide, show, and change the stacking order of layers and objects, as well as merge bitmaps and apply bitmap masks. You can also add and delete layers using the Layers panel.

In this part of the tutorial, you’ll use the Layers panel to merge the two bitmap images. Then you’ll name the objects in your document. You’ll also use the Layers panel to change the stacking order of objects. Later in the tutorial you’ll use the Layers panel to apply a mask to the merged image.

Merge bitmaps 

  

Now that you’ve applied Live Effects to the background image, you will merge it with the grayscale car image to create a single bitmap.

1 If the Layers panel is minimized or isn’t visible, click its expander arrow or choose Window > Layers.

2 Click the thumbnail of the grayscale

Add and edit Live Effects

Add and edit Live Effects

Next you’ll apply Live Effects to the original bitmap image. You’ll change the image’s hue and saturation and apply a blur.

1 Click anywhere on the desert image to select it. (Be careful not to click on the car, however.)

2 In the Property inspector, click the Add Effects button (the button with the plus (+) sign).

3 Choose Adjust Color > Hue/Saturation from the Effects pop-up menu. The Hue/Saturation dialog box opens.

4 Choose the Colorize option and click OK. The image becomes colorized on the canvas, and the effect is added to the Live Effects list in the Property inspector. Live Effects

Import a bitmap and select pixels

Import a bitmap and select pixels

Next you will import a bitmap image and create a floating selection from its pixels. Import an image You will modify an image of a classic automobile. First you need to import the image.

1 Choose File > Import and navigate to the Tutorial1 folder that you downloaded from the Macromedia website. Browse to the Tutorial1/Assets folder.

2 Select car.jpg and click Open.

3 Align the insertion pointer with the upper left corner of the canvas as shown in the following illustration, then click. The image appears, selected, on the canvas.

4 Click anywhere outside the selected image to deselect it.

Create a pixel selection 

  

Next you’ll select the pixels that make up the car in the image you imported, and copy and paste the pixels as a new object.

Create and edit vector objects

Create and edit vector objects

With Fireworks, you can create and edit two kinds of graphics:

vector objects and bitmap images. A vector object is a mathematical description of a geometric form. Vector paths are defined by points. Vector paths do not show a degradation in quality when you zoom in on them or scale them larger or smaller. The leaf in the illustration below is a collection of vector objects. Notice how smooth the leaf ’s edges appear even when you zoom in.

Explore the Fireworks work environment

Explore the Fireworks work environment

Before you continue, examine the elements of the Fireworks work environment:

• In the center of the screen is the Document window. 

In the center of the Document window is the canvas. This is where the Fireworks document and any graphics you create are displayed.

• At the top of the screen is a menu bar. Most Fireworks commands are accessible from the menu bar.

• On the left side of the screen is the Tools panel. If the Tools panel isn’t visible, choose Window >

Create and save a new document

Create and save a new document

Now that you’ve viewed the final.jpg file, you’re ready to begin your project.

1 In Fireworks, choose File > New. The New Document dialog box opens.

2 Enter 480 for the width and 214 for the height. Ensure that both measurements are in pixels and that the canvas color is white, and click OK. A Document window opens, with a title bar that reads Untitled-1.png (Windows) or Untitled-1 (Macintosh).

3 If the Document window isn’t maximized, that is, if it doesn’t fill the center of the screen, maximize it by clicking the maximize button (Windows) or the zoom box (Macintosh) at the top of the Document window. This will give you plenty of room to work.

View the completed file

View the completed file

View the completed tutorial file to see what your finished project will look like.

Note: If you are using Windows, be sure to unzip the files you downloaded for this tutorial before proceeding. (On the Macintosh, StuffIt Expander unzips the files for you automatically.)

1 Start your web browser.

2 On your hard disk, navigate to the final.jpg file. The file resides in the Complete folder (inside the Tutorial1 folder that you downloaded from the Macromedia website).

Note: Some versions of Microsoft Windows hide exte

Graphics Design Basic Tutorial 01

Graphic Design Basics Tutorial

This tutorial will guide you through the basic tasks of designing graphics with Macromedia Fireworks MX 2004. You’ll get hands-on experience using the industry’s leading web graphics application and learn basic graphic design concepts along the way. If you are already familiar with designing graphics in Fireworks, you may want to proceed to the “Web Design Basics Tutorial,” where you’ll learn about designing web pages with Fireworks. What you’ll learn  

You will learn to do the following:

• View the completed file

• Create and save a new document

• Explore the Fireworks work environment

• Create and edit vector objects

• Import a bitmap and select pixels

• Add and edit Live Effects

• Work with layers and objects

• Create and edit a mask

• Create and edit text

• Export the document

What you should know Although this tutorial is designed for beginning Fireworks users, it covers many advanced features in Fireworks, so experienced Fireworks users can benefit from it, too. You don’t need to be a graphic designer to perform this tutorial, but you should possess basic computer skills and be able to use common desktop applications. This includes knowing how to browse for files and folders on your hard disk.