Tutorial -:- Watermarking Images in Macromedia Fireworks -

This tutorial shows you how to add a watermark to your images in Fireworks. Before you start make sure you have the Properties and Tools toolbars visible.

If they are not, click on Window and select Properties and Tools to make them visible.

1. Before we begin you will need something to watermark, it can either be graphics that were designed in Fireworks or any other application as it can open or import most common image file formats.

I will use a design I've made for the Swedish phpBB support site as an example.

2. Now that you know what image to watermark, let's create the actual watermark.

Start by clicking File -> New

Picture A

Set the width to 400 pixels and height to 32 pixels. For the canvas colour, click Custom and choose black (see the Picture A). You should now have an empty image, as shown in Picture B.

Picture B

Picture C

3. Use the text tool (see picture C) and click inside the empty image. Choose a font you like. Use white or black as font colour. This depends on characteristics of the image you intend to watermark, if it's dark, use white text and vice versa.

Click the small square beside to the right of the font size drop-down list of the Properties Panel (if you can't see it, select Window -> Properties) to select the fill colour of the text. Select a font, size and kerning of the text so that it covers the whole width of the image.

If it doesn't cover it all, move it to the center, you could also adjust the canvas size to adjust it to your text (Modify -> Canvas -> Canvas Size…).

Picture D

4. If all is working as planned you should now have an image similar to the one in picture D. Now, select Modify -> Canvas -> Canvas Color…, and make the canvas transparent (see picture E).

Picture E

5. Select File -> Save As…, find the folder you installed Fireworks too, open the Configuration folder and the Patterns folder inside it. Save your image there, name it watermark.png or copyright.png, the name doesn't matter just make sure you remember it. By saving it in the Patterns folder it will automatically be available in the patterns fill list. Hang on and I'll show you.

6. You may need to restart Fireworks for it to recognize your newly added pattern. I suggest you do it to be sure. Open (File -> Open) the image you want to apply the watermark to. Start by creating a new layer by selecting Edit –> Insert -> Layer. Use the rectangle tool (see picture F) to draw a big rectangle that covers the whole image, it doesn't matter if it overlaps.

Picture F

In the Properties Panel click the drop list second next to the paint bucket icon and select Pattern. The rectangle will not be filled with the first pattern in the list but that's not what we want, so you will need to pick the pattern your created. Click the small box left to the fill type drop list and choose your pattern from the list. The pattern will have the same name as the file, the PNG file extension omitted. Ta da!

Picture G

Have a closer look, it doesn't really look like semi-transparent watermark, does it? No, you need to change the opacity of the rectangle first. Fireworks allows you to set the opacity with the opacity input box (see picture G). Click the small button with the arrow pointing down to show the slider, or set the opacity value by entering it manually.

And voilá, almost done! That was pretty easy, wasn't it? If you want to skew the pattern, you can do so by pulling the directional handles. I didn't skew mine, you can see the final result in picture H.

Picture H

You can save the image now as a PNG file and continue working with it in Photoshop and Paint Shop Pro or you can slice it and export it as any format you'd like.

Remember not to send the PNG file saved with Fireworks as any person can then open it and simply delete your watermark layer, you must flatten it which means merging all layers. Slicing and exporting or opening and saving it with another graphics editing software will achieve that.

The Fireworks manual covers slicing in great detail and the chapter "Slices, Rollovers and Hotspots" will answer most of your questions.

If you liked this tutorial and would like me to write more, please tell me and I may write others. My contact details are on my Web Site.

This tutorial was written by and displayed with the permission of Jakob Persson. If you find this tutorial useful please visit the authors Web Site.