Quite often, when searching for a relevant image to go on a new website we are designing, we’ll find one that’s almost right, but not quite! We might have a certain picture in mind but when we find it, the object in the picture is perfect but the colours are completely the opposite to what we wanted. Putting it into the design makes the image stick out like a sore thumb and the most important part - the content of the page - fades into the background.

We'll be changing the yellow hot air balloon to a red one

Read on to find out how simple it is to change the colour of a selected part of an image in Adobe Fireworks. In our example we’re going to change the yellow part of the hot air balloon from yellow to red. We’ll use the magic wand tool to select the area we’ll change and then a hue filter to choose the colour we want.

Step 1 - Click the image and choose 'save image as' to download

1. First of all, you’ll need an image you want to change. If you want to use the hot air balloon image we are using, download it by clicking the image above or by visiting sxc.hu, the free stock image website we got it from.

Step 2 - Using the magic wand tool

2. Open your image in Adobe Fireworks and choose the magic wand tool . In our example image we’re going to change the yellow area so let’s click anywhere in that area with the magic wand tool to select it. Your chosen area will be surrounded by a moving dashed line. Almost certainly, this area you’ve just created will either be too small and not cover the entire yellow area or be too large and encapsulate more than the yellow part of the balloon. In our example above, we haven’t selected enough of the yellow area so we’re going to need to alter the tolerance of the magic wand tool.

The tolerance tells the magic wand tool how much of a difference in the selected colour it can highlight. Our current tolerance is at 28 which means the magic wand tool is only highlighting the yellow area that is shadowed and not the side of the balloon that is in the sun. We can raise the tolerance level until it highlights the entirety of the yellow area. With a little bit of trial and error we can get the right tolerance level which for the hot air balloon is 150. Note that 150 also highlights a small amount of the black area but this will work well because that black area has a slight amount of the yellow colour reflecting on it.

Step 3 - Altering the hue to change the colour to red

3. Now we have the right area selected we can change the colour of it. With the area still selected, click ‘Filters’ > ‘Adjust Colour’ > ‘Hue/Saturation…’ and the Hue/Saturation dialogue will appear above. Experiment with the hue slider and you’ll notice your selected area is changing colour. For the red, we’ve chosen a hue of -42. It’s that simple!

You can also experiement with the lightness and saturation if you’re struggling to get the colour you want. We also recommend checking the ‘Colorize’ option if you want the area to have a slightly less vibrant colour that may appear more realistic in images that need it.

discuss this topic to forum