Masking Pattern with Fireworks Instructions

[Part of Constructing the OpenIcon Logo Icon using Visual Basic .Net for the Mandelbrot Set and Fireworks ]

Do do this project you will need Fireworks installed, a bitmap graphic file to work with, and a design you want for the finished icon. If you began the project with Visual Basic.Net and don't have Fireworks, you can use any bitmap graphics program that allows you to work with masks, such as Photoshop or CorelPhotoPaint. However, I found Fireworks to be easier to use for this particular task.

Here's the bitmap I started with. Well, actually, Visual Basic saved a .bmp file which Fireworks imported and made into a .png file. Most browsers can't open a bmp file but can open png, gif, and jpg files.

mandelbrot set fractal image example

To get the icon graphic at the start of this page from this bitmap I need to overlay the "i", masking out the rest of the bitmap. I'll make 3 rectangles and an oval. But you can design a mask using vector objects available in vector tools. If you just want to practice, make at least 2 rectangles (because you will probably want to learn how to group multiple objects).

In the Layers box, shift click to choose just the layers with your vector objects (not the original bitmap). Your objects will be grey. You want to go to the properties box and change the Fill to none. Then you will see the entire bitmap again, but with some blue dots showing where your objects are.

In the menu section, choose Edit, then Cut. This puts your group of objects in the clipboard. Now click on the Select pointer, then click the pointer on your original bitmap to select it. This is a crucial step.

Now choose Edit, then Paste As Mask. You are basically done; you should be able to see your icon. If you want you can drag it around to center it or position it how you want.

Now Save As, in order to save the Dreamweaver PNG file. If you want to do a redesign later, you can go back to this file. Now Save As twice more, once and a .gif and once as a jpg file.

I added my trade name, "OpenIcon" to the graphic specifically for creating Netstamps. I saved it under a different name as a jpg file, which is best for Netstamps. Dreamweaver works like pretty much any other program for adding text, so I'll leave that to you. Here's what my end product looks like:

openicon logo

Next: Making PhotoStamps with your design

Copyright 2008 by William P. Meyers