Introduction

Resizing an image and applying a transparent watermark is a relatively simple process in Fireworks. However, it's 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 / Fireworks 8 / Fireworks CS3
• a high-resolution image
• Watermark image (Download example watermark file)

 Overview 

1. Performing the actions and creating the command;
2. Testing the new command.
3. Limitations of the technique.

Let's look at each step in detail.

Performing the actions and creating the command

1. Start by opening a hi-resolution source image in Fireworks. I use a 2048 x 1536 JPEG photo straight from my digital camera, but any other resolution is fine.

2. Enable the History panel if it's not open already. (Window >> History, or Shift+F10)

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").

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, so I just divide 539 by 2048 (the width of my original source image). I got 26.3, so let's put that value into the Numeric Transform window. (Click on the image below to fullsize it.)

4. You will see that the original image has shrunk down considerably, leaving a large empty space surrounding it. Let's get rid of that space: Modify >> Canvas >> Fit Canvas (Ctrl+Alt+F).

5. Now we are almost ready to press the watermark image onto our picture. But before we do that, let's double-check the History window. It should show only the two actions we have performed so far (Transform and Crop Document). If your History list looks different than the screenshot on the right, you might want to backtrack and follow the instructions more closely. 

6. We are now going to tell Fireworks how to bring in and place our watermark image. Select File >> Import (Ctrl+R) from the menu. Navigate to the watermark image on your computer and press OK. This will make your cursor change into an upside-down "L" shape, indicating that your click will mark the location of the upper left corner of your watermark.

Carefully position your new cursor at the place you would like the watermark to appear. If you previously resized your photo with the percentage scale, it's recommended that you use a point near the origin (upper left corner), so that your watermark remains unaffected by orientation. As you can see from the screenshot, I chose the coordinate values (10,10). Once your cursor is in place, click. You will see the watermark appear at your specified position.

7. We are now ready to make Fireworks learn all this. Ctrl-click or Shift-click all the three steps in your History list, and then click on the little diskette icon on the bottom right corner of the History window. Give your new command a descriptive title (I called mine "Watermark") and then click OK to save the command.

Testing the new command.

Let's test if it works! Close the document without saving. Open the image again, and click the Command menu. All the way on the bottom, you will see your new command appear. Click on it and watch the magic happening. If done correctly, Fireworks now automatically scales your image down and applies the watermark at the specified position. If you still have the History window open, you will see "Command Script" in the list. Neat.

Limitations of the technique

There are certain actions that, although Fireworks recognizes them, cannot be included in a command script. These usually involve actions like dragging and typing, using live filters, or manipulating shapes. You can immediately recognize when an action cannot be included in a command script: if it is marked with a red X , or is surrounded by separator lines, these indicate that the action cannot be replayed or recorded. 

If you try to save actions and your selection includes ineligible ones, the following warning window will pop up (click the image to zoom in):

Where to go from here

To get the most out of this command, it's best to include it in a batch process, optionally combined with a unique export profile, if the presets don't suit your needs. On a broader scale, experiment: if you find yourself repeating certain actions, try to find the shortest route and record that sequence. If you keep the above limitations in mind, you can create quite complex action sequences without having to write anything in JavaScript - another testament to how harnessing the power of Fireworks can make a designer's life easier.