Making Use of Bitmap Selection Tools in Adobe Fireworks
 
 

Selection tools allow you to select all or part of an image for functions such as cut, copy, and paste, as well as image editing.  Whenever you click on an object in the Layers panel or use the Pointer tool in the Tools panel, you are selecting an entire object.   However, when you use the selection tools located in the Bitmap area of the Tools panel, you can select a certain area of an image, then edit only that area without making changes to the entire image.

In this article, we will learn how to:

  • Use the bitmap selection tools options

  • Use the Magic Wand tool

  • Use the Lasso and Polygon Lasso tools

  • Use the Marquee tools

  • Convert a bitmap selection into a vector path

Bitmap Selection Tools Options

Before we cover the bitmap selection tools, let's take time to discuss some of the common options associated with these tools. This knowledge will help you be more successful when we start to learn how to use them. 

One option you will have with most tools is to set the edge that you want. You will be able to choose from Hard, Anti-Alias, or Feather.

  • A Hard edge results in a jagged and pixelated selection.

  • Anti-alias will blend the selection with the areas that are not selected.

  • Feather gives a less accurate selection, but it is softer and better blended. You can also set a pixel value for a Feather edge.

You also have the following options when using the Elliptical or Rectangular Marquee:

  • Fixed Size means the height and width is set to a defined dimension in pixels.

  • Normal means the height and width are independent of the other.

  • Fixed Ratio means the height and width are constrained to defined ratios.

In addition to being able to set options, you can also use the Select menu on the Menu Bar to help you work with your bitmap selections.

Select Inverse lets you toggle between the selected area and the unselected area. Sometimes you may find its easier to select the area of an image that you do NOT want to work with. By using Select Inverse, you can then toggle to the area you want to work with. You can also expand, contract, or smooth your bitmap selection by choosing one of these from the Select menu.

In addition, the Live Marquee feature is available for all the bitmap selection tools.   This lets you have immediate control over the edge of your selection once you draw it. By default, it is automatically turned on in the Properties Panel.

NOTE: All changes you make with the bitmap selection tools are permanent. You may want to save a copy of the original image before beginning.

The Magic Wand Tool

The Magic Wand tool allows you to select pixels in a bitmap image that is based on color. For example, if you want to select the white board in the image below, you can use the Magic Wand tool to do this quickly.

To use the Magic Wand tool, first select it from the Tools panel. It looks like this: 

Next, move your cursor over the area of the image you want to select, then click your mouse button.

As you can see in the snapshot above, it selected most of the board, but not all of it.

To fix this, we are going to go to the Properties panel.

Make sure Live Marquee is checked, then increase the tolerance.

We adjusted it to 100, but as you can see below, this meant more than just the board was selected.

Lower the tolerance if you need to until the selection is as you need it.

Next, go to View>Zoom In and zoom in so you get a clear view of the edges.

The bottom edge of our selection is still extending down into the bricks.

Enter in 1, then click OK.

You can then use the Up arrow on your keyboard to increase pixels and smooth the marquee.

Now, let's apply a Live Filter to the selected area.

We are going to adjust the color.

To do this, go to Filters>Adjust Color>Levels.

Use the sliders below the Histogram to adjust the levels.

You can now see how we have adjusted the color of the board.

Take the time to experiment with the different filters in the Filters menu.   Learn how they affect the look of the selected area of your image.

NOTE: When using the Magic Wand tool, Alt+Click decreases the size of the selection. Shift+Click increases the size of the selection.

The Lasso and Polygon Lasso Tools

The Lasso tool lets you draw a selection on your bitmap image by using your mouse.   The Polygon Lasso tool lets you click plot points around the area that you want selected, then closing the shape by clicking on your first plot point or double-clicking your mouse.

Let's use the Lasso tool to select the pipes in our image.

Click on the Lasso tool in the Bitmap area of the Tools panel.

Draw around the area you want to select by dragging your mouse.

We then used the Burn tool to darken our selection:
 

The Polygon Lasso tool is grouped with the Lasso tool. Click on the Lasso tool and hold the mouse button in until you can see the Polygon Lasso tool. 

When it is selected, it looks like this in the Tools panel: 

Click to place points around the area of the image that you want to select. Create your selection, as shown below.

The Marquee and Oval Selection Tools

The Marquee and Oval selection tools are grouped together under the Marquee tool in the Tools panel.

The Marquee tool looks like this: 

The Oval Marquee tool looks like this: 

Use these tools when you want to select a rectangular area (Marquee) or oval area (Oval Marquee) in your bitmap image.

Converting a Bitmap Selection to a Vector Path

You can easily convert bitmap selections into vector paths in Fireworks.   This is helpful to do when you are working with selections if you tend to accidentally delete selections, as is easy to do. In addition, by converting a selection to a path, you can then scale the path. You cannot scale a selection.

In the image below, we have used the Magic Wand tool to select the board.

To convert it to a path, go to Select>Convert Marquee to Path.

Click on the Pointer tool in the Tools panel.

Now we can change the Fill and Stroke Color of our new vector object in the Colors area of the Tools panel.

There is a lot more you can do with the selection now that you have converted it into a vector object. 
------------------
Working with Vector Shapes

While bitmap images are made up of pixels, vector images are made up of paths.   By definition, a vector is a path between two points on the screen. In Fireworks, you can create vector shapes and paths by using the tools in the Tools panel, as well as Auto Shapes located in the Shapes panel.  

In this article, we will learn how to:

  • Draw a basic vector shape

  • Create compound vector shapes

  • Use the Knife tool

  • Work with colors

  • Use the Pen tool

  • Use the additional vector tools in Fireworks

Drawing a Basic Vector Shape

Take a look at the Vector section of the Tools panel.

This section of the Tools panel contains the tools you will need to draw basic vector shapes.   We have labeled the various tools below.

To create a shape, such as the rectangle, click on the tool, then click and drag on your document.

Take a look at the shape above. You can see the points on each corner of our rectangle. You can also see the paths (lines) that connect the points to make up the shape.

Now let's go back to the Tools panel. Click and hold on the Rectangle tool to see the other tools grouped with it.

All these shapes are vector shapes that you can draw.

Let's create a doughnut shape by selecting the doughnut tool.

Click and drag to add the shape to your canvas. 

Interested in learning more? Why not take an online Adobe Fireworks course?

Take the time to practice drawing the different types of vector shapes grouped with the Rectangle tool. Learning what each shape looks like, as well as how to add it to your canvas, will help you after you finish this article and start to use Fireworks on your own. 

Drawing Compound Vector Shapes

A compound shape is a shape that's made up of two or more simple shapes, such as rectangles. 

To create a compound shape in Fireworks, start out by drawing one shape.   We drew a rectangle below.

Next, go to the Properties panel and select a compound path mode. These are pictured below.

From left to right, the modes are:

  • Normal

  • Add/Union

  • Subtract/Punch

  • Intersect

  • Crop

Let's explore each one of the modes to see how they work.

Add/Union

We are going to start by drawing a rectangle on our canvas.

Next, we are going to click on Add/Union. It looks like this: 

Now draw a few more shapes. 

As you can see in the snapshot above, we added a few more rectangles.

Next click the Pointer tool in the Tools panel. Click outside of the canvas to deselect the shapes.

The shape have now been joined, as shown in the snapshot below.

Subtract/Punch

To show you how Subtract/Punch works, we have drawn an ellipse shape on our canvas:

Next, click on the Subtract/Punch mode in the Properties panel. It looks like this: 

Draw another shape that partially overlaps with the ellipse.

As you can see, the second shape subtracts from the first shape – or punches out the part of the second shape that overlaps the first.

Intersect

When you use the Intersect mode to create a compound shape, you create a new shape out of the intersecting areas of other shapes.  

Let's show you what we mean.

Below we've drawn a rectangle.

Next, we are going to click on the Intersect button. It looks like this: 

Now we are going to draw another rectangle that slightly overlaps the first one.

As you can see above, the compound shape above was created by the intersecting areas of the two rectangles.

Crop

The crop button looks like this: 

To create a compound shape using the Crop mode, let's start out by drawing an ellipse.

Click on the Crop button in the Properties panel.

Now draw another shape.

Crop mode crops away all areas of the shape that aren't overlapped by the new shape.

The Auto Shapes Panel

In addition to drawing your own shapes, Fireworks CS6 provides you with already drawn shapes that you can quickly add to your documents. These shapes are found in the Auto Shapes panel, as pictured below.

To add one of these shapes, simply click on it and drag it't where you want to place it in your document.

Using the Knife Tool

The Knife tool allows to split a vector shape that you've drawn in half.

Below we have drawn an ellipse.

To cut this shape in half, click on the Knife tool in the Vector area of the Tools panel. It looks like this: 

Drag the knife from one side of the shape to the other, as shown below.

When you release your mouse, you will see two points added. The first point is where you started cutting with the knife. The second point is where you stopped. Keep in mind these points will always be on a path.

Next, using the Knife tool again, connect the two points.

You can see how the knife is now cutting the shape in half.

Next, click on the Pointer tool in the Tools panel.

You can then click and drag on either half of the shape to reposition it.

Working with Colors

Whenever you create vector shapes in Fireworks, there's little doubt that you will also want to add color to those shapes.   In this part of the article, we're going to show you exactly how to do that using several different tools available to you in Fireworks.

Adding Stroke and Fill Colors

Every vector shape has a stroke color and a fill color. You can add and change the stroke and fill color for any vector shape using the tools in the Colors area of the Tools panel. What's more, you can create custom colors as well.

The stroke color is the color of the border around the shape.   However, do not confuse the border of the shape with the path of the shape. The path of the shape is always in blue and appears when you are working with the vector tools. 

The fill color is the color that appears inside the shape.   In the image below, you can see a red stroke color around our shape, but a tan fill color inside.

To change the stroke color, go to the Colors area of the Tools panel.

Click the swatch that appears next to the pencil. It looks like this:

You will then see the Color Picker.

You can click on one of the color tiles to select that color.   In addition, you can enter a HEX number or enter RGB (Red, Green, Blue) values. You can also click  if you do not want a stroke color.

Click the color wheel  to access the Color dialogue box where you can create a custom color.

To add a fill color, click on the swatch to the right of the paint bucket. It looks like this:

Follow the same steps you took to create a stroke color to create a fill color for your shape.

You can further edit fill and stroke colors, including specifying the thickness of the stroke, by using the Properties panel, as shown below:

The Eyedropper Tool

The Eyedropper tool allows you to copy a color from an image, shape, or object, then apply that color to a shape.

Let's show you what we mean.

Take a look at our canvas below.

We want to use the light green in the image on the left as the fill color for the shape on the right.

To do this, we are going to select the shape for which we want to add the color.

Next, we are going to click on the Eyedropper tool. It looks like this: 

Since we want to use the green color as our fill color, we are also going to click on Fill color in the Tools panel, as we did in the last section.   However, we don't need to select a color. Instead, we just need to click on it to tell Fireworks that we want to add a fill color.

Once we've done that, we are ready to use the Eyedropper tool. Move your mouse to the area that contains the color you want to copy. For us, it's the green color in the bitmap image.

You will see a little eyedropper appear as your mouse pointer.

Click on the color that you want to copy. Again, we are going to click on the green in the bitmap image.

The color is instantly applied to our shape.

The Paint Bucket Tool

The Paint Bucket tool is an easy way to change the color of a selected shape. 

Take a look at the image below.  

Right now, the fill color for this shape is brown.  

Notice that the shape is not selected. We don't need it to be. 

Let's change the fill color of the shape to yellow.

To do so, we are going to click on the Paint Bucket tool. It looks like this: 

Next, we are going to click on the swatch for Fill color and change it to yellow.

Move your mouse over the shape on the canvas.   You will see the mouse cursor turn to a paint bucket, and the shape will become active (selected).

Click to apply the new fill color.

Creating Gradients

The Gradient tool is grouped with the Paint Bucket tool. It looks like this: 

Once you've clicked on the Gradient tool, click on the Fill Color swatch to bring up the Gradient menu.

In the Gradient dropdown menu, choose the type of gradient you want to apply.

Click on the stoppers that appear below the color bar to choose the colors for your gradient.

Click on the ones above the color bar to set the opacity.

You can move all four stoppers to further customize the look of your gradient.

Take time to experiment so you produce a look that you like.

We added a gradient to our star, as pictured below.

Using the Pen Tool

You use the Pen tool to create a path.   The path is made up of curved and straight segments. These segments are created by anchor points. When you click the Pen tool  in the Vector area of the Tools panel, you can draw corner points and straight segments. If you drag the Pen tool, you can create smooth points and curved segments. These segments will have direction handles so you can change the direction of the segments.    You can use Smart Guides to help you align segments, as you'll see in this article.

That said, let's use the Pen tool to create a rectangle. 

First, click on the Pen tool.

Click on the canvas to create an anchor point. This appears as a blue dot.

Now, click to create a second anchor point in a different location.

As you can see, a line segment appears between the two anchor points that you created.

Continue to add anchor points to create your shape.

To create a closed path, connect your last anchor point with the first anchor point. A straight line is an open path. A circle is a closed path. So is a polygon and rectangle.

Next, let's learn to draw a curve with the Pen tool.

To do this, you're going to click to place the first anchor point, just as before, but now you're going to click and drag. 

Now, release the mouse and move to where you want the second point to be.

Click and drag again.

As you can see, your curved line appears between the two points.

The shape of your curve is defined by the length and direction of the handles.  

You can add more anchor points and handles.

Click on the Pointer tool when you're finished to see your shape. Remember, just as with lines, segments are drawn from the previous to the new anchor point. To create a closed path, connect the last point with the first.

Add and Delete Anchor Points

In Fireworks, you can add, subtract, or delete anchor points to modify a path.   Here's how to add anchor points:

Select the object for which you want to add an anchor point.

Make sure the Pen tool is selected.

Hover your mouse over the path where you want to add the anchor point. You will see a small plus sign (+) appear beside the Pen tool cursor.

Click your mouse to add the new anchor point.

You can now click and drag on the anchor point to modify the segment. 

Click on an anchor point to delete it.

NOTE: You can use the Subselection tool to edit paths by clicking and dragging on an anchor point.

The Text Tool

In Fireworks, any text that you add will appear inside a text box.   The text box is actually a vector shape.

In the snapshot below, you can see an example of a textbox with text inside:

To add text to a document, click on the Text tool in the Vector area of the Tools panel. It looks like this: 

Go to your Fireworks document.  

Click on the location where you want the text to begin, and start typing. 

As you type, you will see the text box form around the text that you enter. 

To format the text, click in the text box until you see the blinking cursor, then select the text that you want to format. 

Go to the Properties panel to format the text using standard word processing tools. 

Insert Special Characters

The Special Characters panel lets you insert characters that you may need with your text.   This includes the copyright symbol.

To insert a special character, click inside the text box where you want to place the character. 

Go to the Special Character panel, and click on the character you want to insert.

Wrapping Text

To wrap text around an object, select the object.   Draw a path outlining the object's shape using the Pen tool.

In the snapshot below, we have drawn a path using the Pen tool.

Next, use the Text tool to add your text.   Put the text in the same layer as the shape. If you want, you can temporarily hide the shape while you add your text.

Next, with both the text and the shape path visible, press CTRL+A to select both.

Go to Text>Attach in Path.

Additional Vector Tools

Once you understand what a vector shape is and how to create them, using the rest of the tools available in the Vector area of the Tools panel just takes a little practice. 

We are going to list the other vector tools below, along with a description of what they do. Once you master drawing basic and compound shapes, as well as using the Pen tool, take the time to practice using these tools as well.

 The Vector Path tool is grouped with the Pen tool. This tool allows is like the Pen tool, but it offers more precise control for those using a stylus or drawing tablet. 

 The Redraw Path tool is also grouped with the Pen tool. It is used to edit an active path by connecting a segment drawn with this tool to the active path. The path you draw with this tool must start out intersecting with the active path or shape.

 The Freeform tool lets you alter the shape of vectors using your mouse instead of editing anchor points. You can simply use the mouse to push or pull on a path. Fireworks will add or remove points as needed. You don't have to worry about it.

 The Reshape Area tool is grouped with the Freeform tool. It is like a smudge tool for vector shapes. However, instead of smearing pixels, it edits a path's shape by pulling out on the path.

  The Path Scrubber tools are also grouped with the Freeform tool. It increases or decreases the heaviness of the stroke that's applied to the path. In order to use these tools, you must paint over the parts of the path you want to "scrub."