Crop an Image in Fireworks MX 2004

Main Menu | See a Movie of the Process

Fireworks provides a "crop" tool which allows you to select a portion of the entire canvas and cut out everything that is not inside the selected portion. This has the advantage of letting you eliminate wasteful as well as possible "unsightful" parts of your image. The concept is one of a "cookie-cutter" where you will create an object on top of your image (raw dough) and press the cookie-cutter into your image cutting out everything outside the edges of the cookie-cutter.

The actual "cropping" process requires you to first select the crop tool and create a rectangular region on your canvas. The crop tool is located in the lower right corner of the Select Panel. Mentally visualize a rectangle shape on your canvas that is to be the final image. You start making the rectangle by clicking on one corner and dragging to the opposite corner of the rectangle. If you are satisfied with the initial location, you are lucky. Most often you will want to "adjust" the rectangle over your image just a little. You can move the crop region with the arrow keys on the keyboard or use the mouse with the re-sizing points on the rectangular region to make the necessary adjustments. When you are satisfied with the location of the rectangle, you are ready to crop.

The actual cropping requires that you position the mouse inside the rectangular region and double-click. This will accomplish two things. First, the canvas is reduced to the size of the rectangle. This will be important when you export your final product later. Second, all parts of the image outside the rectangle are deleted.

You should get the idea from the picture below.

Positioning the Crop Region
The Cropped Image

One of the more common "cropping" tasks has to do with adjusting the canvas size to match the size of the object on the canvas. This process is necessary before exporting an image for use on a web page. There are several places where you can reduce the canvas size. We shall take a look at a couple of them.


Suppose you have created a 'button' that needs to be exported for use. The typical process calls for selecting the cropping tool and making a rectangle around the object. Then you would double-click inside the rectangle.

 

The resulting process would crop the canvas down somewhat. However there is still some "space" between the edge of the canvas and the edge of the button. Generally, you will want to remove all of this space because this white space will be a part of the button unless you crop some more. It isn't too difficult to adjust the canvas size down even more. You could continue to use the cropping tool to select smaller and smaller rectangles. The process will get tedious as you get closer and closer to the edges of the object. If you are somewhat "mouse-challenged" by the drawing of smaller and smaller rectangles, you might want to try a less tedious process.

From the main menu at the top you can select the:
Modify + Canvas + Canvas Size option.

 

This will allow you to manually enter the correct horizontal and vertical size of the canvas. Simply take a look at the size of the button in the Properties Panel and enter the correct dimensions.

An alternate plan to colapse the canvas to the dimensions of the button is somewhat easier. If you click the mouse on the canvas you will bring up the Canvas Properties Panel. Notice the button on the right circled in red.

 

 

 

 

Simply click on the Fit Canvas Button and the canvas will be "cropped" to the edges of the object (in this case, the button). This second process seems easier and less prone to typing error.

 

The canvas has been cropped to the exact dimensions of the button. Note that this 'canvas-trimming' process will leave some white space in the corners. This is because the canvas is a rectangle while the object is not an exact rectangle. You can decide which is easer.

 


Review: You learned how to select the Crop tool, make an initial crop region, make any adjustments with the keyboard or re-sizing points, and complete the actual crop. You also explored two ways to adjust the size of the canvas in preparation of exporting images for use.

Suggested Activities: Open an image from the Images folder on the Resource CD. Select on from the Photographs folder. Create interesting edits of the original by eliminating portions through cropping. You should perform this exercise several times. You might also try to create an object with the drawing tools and trim the canvas to the size of the object you draw.


Main Menu | See a Movie of the Process