web academy title search icon Search mp iconSite Map  
Course Resources | Video Tutorials | Tutorials | Presentations | Handouts | Calendar | Evaluations | Contacts | UEN
Dreamweaver     |     Fireworks     |     Flash     |     my.uen     |    Virtual Tours
Fireworks
Photo Editing
Masks
Vector Objects
Text
Text on a Path
Shapes
Drawing
Borders
Web Tools
Samples
Tutorial Home
Cropping an Image  

Open up a Sample image file. The one on the right is "mikebath.jpg" and is in the sample files you can download. Notice the resolution or pixel dimensions of this image along the bottom of the window. In this case the image is 3135 pix by 2106 pix. Fireworks has automatically zoomed out to 18% so the entire image can be seen on the screen.

In order to prepare this image to go online a little planning needs to take place. For instance; How big is it going to be? Iis there any parts of the image that aren't needed and what quality does it need to be? In this case the image is going to fill a 400px by 400px spot on one page and it only needs to be of medium quality. The quality affects the the file size which in turn determines how long the download will be.

thumb
Click to enlarge

  1. Select the Crop Tool from the tool bar on the left.
thumb
Click to enlarge

  1. Click and Drag out a rectangle around the area to be kept. Once the crop area has been selected it can be altered by dragging any of the black handles or by typing in a numerical value in the property bar. Also the selection can be moved by clicking and dragging within the selection. The end result for this image needs to be square so the width and height need to be the same. Don't worry about the number of pixels yet, just get them equal.
thumb
Click to enlarge

  1. Once the selection iscorrect, Double Click within the area to be kept. The area/pixels outside this area are cropped and discarded. Notice the image size is now 1554 by 1554. Still too large but the next step of resizing will take the image down to a usable size.

 

 


Next: Resizing the Image

thumb
Click to enlarge