Professional and Affordable Web Design

0800 080 5401

Selectively removing colour

Before imageBefore image
After imageAfter image

These two images are different in one very small detail: The semi colour image has the main object in colour, but the background is greyscale.

By the way, for this tutorial I used an image from

So let’s get to work!

We have to somehow extract the main object from the background, convert the background to greyscale while remaining the Butterflys colours.

1. Open the image in Photoshop
2. Go to Layers Palette
3. Duplicate the Background Layer. Simply grab the Background Layer and drag it onto New Layer Icon in the bottom right corner of the Layers Palette

Create a new layer in PhotoshopCreate a new layer in Photoshop
Duplicate layer visibleDuplicate layer visible

4. Now we have to convert the top layer to greyscale. In older Photoshop you’d probably use the “Hue/Saturation” command which is quite good, so go to Image>Adjustments>Hue/Saturation or simply hit Ctrl+U keyboard shortcut

Hue / saturation settingsHue / saturation settings

5. Set the Saturation Value to -100 by sliding the bar to far left
6. Hit OK
7. If you’re using Photoshop CS4 its nicer to use Black & White Command (Image>Adjustments>Black&White or Alt+Shift+Ctrl+B shortcut) with these settings

Photoshop CS4 Black and White commandPhotoshop CS4 Black and White command

8. Once you’ve converted the top layer to greyscale, we have mask the area where the Butterfly is. To do this select the top layer and click Add Layer Mask button on the bottom of the Layer Palette

Select the Black and White layerSelect the Black and White layer

After that you Layer Palette should look like this

Layer mask addedLayer mask added

9. Now pick the Brush Tool and set Foreground colour to Black

Select the Brush toolSelect the Brush tool

10. Select top layer with the layer mask, click on the mask and start painting around the Butterfly. Use Left Bracket Key to increase and Right Bracket to decrease brush size. You can also Hold Shift and Left or Right Bracket to soften the edges of the brush.

11. You have to paint all over the Butterfly including all small and nasty details. As you do it you will see the colourful Butterfly revealing.

From Black and White to recolouredFrom Black and White to recoloured

12. That’s it. The final image should look something like this:

Selectively recoloured butterflySelectively recoloured butterfly

Comments0 Comments

All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.

Make a Comment

Notify me when someone responds

Quick Contact

See Full Portfolio Some Of Our Work

Screenshot of website

Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...

Screenshot of website

County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...

Customer News & Resources

At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.

Introduction to sitemap.xml

Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »

Center a web page in CSS

One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »