How to Combine Color and Black and White in an Image
I’ve always had a faible for Black and White Photography, and in my experimental filmwork – especially for the advertising industry in Europe – I then integrated an item in color. It is a good way to focus the viewers’ attention exactly where we want to have it.
However, this was very complex and costly in the old days.
Today, with the incredible advancement of modern technology and especially Graphic software, programs and tools like Adobe Photoshop CS4 – it has become so easy… if you know what you do!
In this Web Graphics Tutorial I will show you, step-by-step, how to combine Color and Black and White in an Image – one image. I will do this using the same picture with the honey bee on a flowering gum that served to introduce you to one of several ways of creating rounded corners – which we need for our brand-new Semiomantics eSHOP. Yeah… I better get my act together and create them for myself too… it will happen :)
How to Combine Color and Black and White in an Image
Here’s how to combine Color and Black and White in an Image using Adobe Photoshop CS4 – just follow the steps, ideally with a picture that has a clearly defined focus – like perhaps your face – and a background that’s not just plain but has some Laura Ashley movement in it… meaning some sort of floral or other design … not just a simple plain background:
1.
Open your Photoshop and pull in your designated jpg for instance.
You see it on the LAYERS menu to the right, a nice colorful picture. If you don’t see that menu, open it from Windows at the top. Fine!
2.
At the top under IMAGES > ADJUSTMENTS open the drop-down menu and click on DESATURATE.
As a result, you get a black and white picture – all colors are gone now. Check it on your Layers menu – it’s the same. As you see on my example, even the legend at the bottom is in black now.
3.
Open your HISTORY menu now – also to the right – and you see your original in color and, underneath, the ‘desaturate’ command you just implemented. Fine!
4.
On the bottom of the History menu you see a SNAPSHOT button – click it to take a snapshot of the current black & white image. You see it showing immediately underneath your original in color.
5.
What we want to do now is restore the color in the bee… (… or your face…) and as I did in a second stage, in the main flower – so the background basically remains monochrome.
Right – let’s go!
First, make sure the original picture on top of the History menu shows the History ICON to the left – it means we will work on the colors.
Alternatively, if we want to say restore some of the black and white background as we messed it up, then we need to tick the Snapshot picture… so the idea is to move between these two to get the desired result.
Don’t stress about it if it’s not yet clear to you, just follow the steps and you will see it all falls into place!
6.
We will now use the HISTORY BRUSH on the left tool menu and – with the mouse tip or, better, a graphic pen – paint on the picture.
If you followed the above advice, you will see that the moment your pen tip touches your image, it restores the original color of the picture! Just do it and observe how this works… there’s no other way of learning this.
If you color in too much – say you create some color spots on the background that you want to keep grey, then go back to the History Menu on the right side of your screen and tick the Snapshot. Now get to work again and you see that you can take away color this way.
So you understand that you can add of the original color or eliminate it as you wish.
For the delicate areas use the zoom at the top or on the navigator to increase the size so you can work more precisely.
You can also change the diameter of the History Brush on the little dropdown menu at the top depending on the size of the area you are working on – and you can adapt the opacity as well if you do some refined work in transitional areas, say between hair and the background – you see it on the light fluff on the back of the honey bee. Of course, one can spend lots of time refining this – and in real Artwork etc you would. Here my main purpose is to demonstrate how it works and to get a pleasing result myself.
7.
Once you have colored an item while leaving the monochrome background untouched and you are satisfied with your result, SAVE the image for the web and upload to your server.
of course, nothing stops you from going to Layer > Duplicate Layer… and play with filters and adjustments now – that’s how I achieved the blue background. Have Fun!
Adobe Photoshop CS4 at YCADEMY Workshops
We will look into this as well as yesterday’s ’rounded corner’ exercise and also how smart Plugins can make our life much easier … at today’s Ycademy Workshop starting at 7 pm London time in our YCADEMY Conference Room.
Related posts:
AMAZING !!!!!!!
Thank you Bianca !!
Your tutorial is so well done that I’ve been
able to follow even on my french Photoshop.
I am very happy with the result I had… it
changes a photo completely and it’s so nice !
THANKS again :))
CHEEEEEEEEEEEEEERS !!!
Thank you for this information. Can I do this same technique with photoshop 10?
Hi Kathleen and thanks for commenting. I would say: try! I am on CS5 now… so no idea! But try!