Tutorial

Resizing an image and applying a transparent watermark is a relatively simple process in Fireworks. However, it is also one of those tasks that tend to overwhelm the designer in massive numbers - like that Friday client whose 500 hi-res photos need to be processed for Monday's online gallery opening.

Thankfully you can save much time by teaching Fireworks to handle such tasks by itself. All you need to do is create a custom watermark command and optionally, a unique export profile ; then bring these together in a batch process. This tutorial takes you through the first step: how to create a custom scale+watermark command right from the Fireworks interface, without writing a single line of JavaScript code.

To complete this tutorial, you will need the following:

• Fireworks MX 2004 or higher
• A high-resolution image
• Watermark image (Watermark.png)

Creating the command

1. Start by opening a hi-resolution source image in Fireworks. I used a 2048 x 1536 JPEG photo straight from my digital camera, but any other resolution is fine.
2. Open the History panel if it is not open already. (Window > History or Shift+F10).

It's possible to do the following steps in many different ways, but from this point on, it's important to follow the instructions closely! Specifically, do not click anywhere on the image or do anything other than the processes below, as your actions may introduce extra unwanted steps in the History list.

3. Go to Modify > Transform > Numeric Transform or press Ctrl+Shift+T. Both actions bring up the Numeric Transform window. Here you have the option to scale the image down using either pixel values ("Resize") or percentages ("Scale").



Figure 1: Numeric Transform Window

Although pixel values are easier to set up, scaling with percentages is more versatile. When you use percentages, the command will work both for horizontally ("landscape") and vertically ("portrait") orientated images. If orientation is not an issue, feel free to use exact pixel values.

For this tutorial, we will use "Scale". To obtain the right percentage ratio, divide the target image resolution by the source image resolution. In my case, the gallery image's resolution has to be 539 x 404 px, so I just divide 539 x 2048 px (the width of my original source image). I got 26.3, so let's put that value into the Numeric Transform window.