Enhancing Photos in Fireworks

We want to import an nice graphic of size 160x473px on the left side of our page. I picked an image that is tall and slender in proportion to those dimensions. Also the blue sky matches the blue color scheme of our page.

If you like to use this image, you can download here. Just right-click on the link and do a "Save Target As". Or you can use your own photograph. Often as designers, we need access to stock photography. There are quite a few stock photography sites out there, some of which are listed here. istockPhoto.com and dreamstime.com are popular sites that provide stock images at low cost. Stock Exchange has some photos at no cost. But please observe image copyrights and do not just perform a Google image search and grab images off the web, as these images are not consider public domain. Save the downloaded image in your project folder creativeworkscomp so that you have it on hand.

Often the image will be too large. We eventaully want an image that is 160x473 in size. To do this, you will need to use the crop tool as well as change the image size. Always make the alterations on a copy of the images so that the original remains unaltered.

In Fireworks, open the image file and change the view scale as necessary to view the whole file. I find that more often than not, my images from the digital camera comes out too dark due to poor lighting, bad settings, etc.

If that is the cae, you can lighten it by Filters -> Adjust Colors -> Levels and play with the sliders...

Or you can have Fireworks do it for you by Filters -> Adjust Colors -> Auto Levels.

Next I increased the saturation to bring out the colors a bit. But don't overdo it.

Feel free to make other enhancements such as Brightness/Constrast and Filter -> Sharpen -> Sharpen if needed.

Fireworks is decent in performing the common basic enhancements. But Photoshop can often do more and be better at photo touchups.

Resizing Images

This image that came out of my camera has a dimension of 2560x1920px and was over 3 MB in size in JPEP format. Obviously, we do not want such large images on our webpage. I resized my image to a height of 500px by Modify -> Canvas -> Image Size. By clicking on the lock icon in the Image Size dialog, I can lock or unlock aspect ratio. Keep it locked and change height to 500px. The width will automatically change to keep the image in the same proportions.

The reason why I resized the image to 500px even though I knew I wanted an image that is 473px high is because I may want to crop out some of the image at the bottom (such as that distracting roof). I don't want to have an image that is too small and then have to resize it larger. You loose quality whenever you resize an image larger since you are asking the computer to fill in pixels where there had been none before.

Cropping

Now that our image is smaller, it is time to use the crop tool to cut the image out to the exact dimensions of 160x473px. Select the crop tool and drag.

Don't worry about letting go of the mouse. Even after you let go of the mouse, you can further adjust the crop by its resizing handles as well as moving the entire crop outline as a whole. In fact, to get get the fine control needed for the precise dimensions, you most likely will need to release the mouse, zoom in, and adjust the crop outlines. Once you have the outlines as you like them, press Enter and the image is now 160x473.

When you save this image, Fireworks may ask

I'm just going to save it as JPEG format with the filename talltree.jpg in the folder creativeworkscomp.

Here is my final image. If you rather use my image for the rest of the lesson, just right-click on the below image and do a "Save As".

Next

In the next lesson, we will import this image into our CreativeWorks design comp.