Professional and Affordable Web Design

0800 080 5401

Selective colourization in Photoshop

This is a very simple effect - creating a black and white image from a photograph, and then restoring the colour to certain areas. By doing this, visual emphasis is placed on the coloured image. Its interesting how doing this often gives a completely different feel to the image.

We have broken down this task into 4 simple things to do.

Creating layers

As always, duplicate the original image. We will not alter our original image in any way, allowing us to always go back to the original image if required.
(The keyboard shortcut for this would be to select the layer, press "CTRL + A" to select all, then "CTRL + J" to duplicate the selected area)

Desaturating, or removing colour from our copied layer

We are imaginatively naming our duplicate layer "black and white". When the layer is duplicated, we are going to make it black and white - using the desaturate command:
(Image > Adjust > Desaturate)

Now we have our original colour image being hidden by a black and white copy. In order to recolour some areas, we will hide some parts of the black and white image. We are going to use a layer mask for this.

Adding a layer mask

Layer masks are a great way to cut out parts of images and leave other exposed. They are also risk free, as editing the layer mask will alter what parts of the image are shown - but it will not affect either the colour, or black and white image.

The layer mask we are choosing for this application is "reveal all". This means that as it stands currently, the mask is showing everything - nothing is being hidden.
Note how the black and white layer is selected.

Selectively colourizing your image

Ensure the layer mask layer is the topmost layer in the tools box. Select brush from the tools bar, and the colour black. Decide which parts of your image your image you want to restore colour too.
Then, just zoom in until you are confident you can easily draw in the coloured regions. Draw onto the layer mask, and colour will magically return to the image.
Change brush size depending on how detailed you want to be. And thats it - it is a piece of cake.

Fixing errors

If you draw onto the layer mask using a dark colour, parts of the black and white image will become hidden - exposing the colour image below.
If you make a mistake, and hide a part of the image you didnt mean to, simply select white, and draw on the layer mask.

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 »