Design, Code and technology

Fireworks tips: convert to alpha

I’m a big fan of Adobe Fireworks. It’s by no means perfect; but an arsenal of vector tools, bitmap editing capabilities, symbols (like Photoshop Smart Objects, but better) and layer filters make it a great piece of image manipulation software for the screen.

One of my favourite features (and one that I use all the time) is the Convert to Alpha filter. This converts the colour of whatever is on that layer to the alpha equivalent; the lighter the colour, the more transparent it becomes. It’s a simple and very useful concept.

I’ll demonstrate how this feature can be used in combination with some other layer filters to convert the first flat image to the second alpha-transparent image. This will all be done in a non-destructive way, so we won’t actually editing the original image.

To begin with we want to make this image black and white. We’ll start by converting it to greyscale by desaturating it.

Select the image by clicking on it. The options in the Properties panel will now change.

Add a new layer filter from the properties panel (by default this is at the bottom of the screen below the canvas).

Choose ‘Adjust Color → Hue/Saturation…‘;

We’ll bring the saturation right down to ‘-100‘.

Now the image is two-shades of washed out grey. This is great as it means we can easily convert it to black and white by adjusting the levels.

To do this we’ll need to add another layer filter ‘Adjust Color → Auto levels‘;

We now have a black and white image.

Now it’s time for our special move. We can convert the image so it has an alpha transparency by adding the filter ‘Other → Convert to Alpha’

Almost there…

We can now add our last filter ‘Adjust Color → Color Fill‘;

Choose the desired colour and we’re done!