Emphasing a Product with Monochrome Graphics

Nothing stands out better on a website then a product image in full color while the rest of the image and site are monochrome (shades of gray).

Let me give you an example of what I mean. Let's imagine that you have a new client who is a musician, and they just cut their first music CD. You have someone take a high resolution digital photo of your new client holding the CD. With me so far?

Open the high resolution digital photo in your graphics software program and carefully outline just the product (the CD in this scenario) with the free hand selection tool of your software. Most every graphic software program has this option, you just have to know where it is and how to find it if you are not familiar with your software's features. Do a search in the help section of your software if you don't know where to locate it. We've included a few suggested search keywords at the bottom of this article to assist you.

Now invert your selection and apply a monochrome filter. Inverting means that rather than selecting what you initially outlined, you want to select the opposite of that selection which is everything that you did not select.

Now look at what you just accomplished with little to no effort. You can use this image as a splash page intro or for the main product photo. What better way to promote a product then de-emphasizing everything but the product and with a photo of the person who developed it? Cool idea? Why not suggest this technique to your next client who has a product they want to sell.

Check out two web templates we have developed in the past with this concept. One of them has an option for a package of swap-out graphics that utilize the same effect. Monochrome Web Templates

Try the following keyword searches within your graphics software to find the tools used in this mini-tutorial: "select", "invert", "invert selection", "monochrome", "monochrome effect", "monochrome filter".

IMPORTANT NOTE: Do no confuse monochrome with grayscale. There is a big difference. That big difference is the number of gray colors in each type of file. Grayscale is a compressed file size that has most of the grays stripped out and leaves you with a minimal amount of gray shades (8-bit). Monochrome on the other hand is True Color (24-bit).

After this article is published I hope to see many websites published in monochrome emphasizing a product. If you develop a well-designed site using this concept, let us know, and we'll link your URL within this tutorial.