I really enjoy making and playing with patterns. I don’t know why I like it so much… I usually don’t have any good practical use for what I come up. Most of my results are fairly busy and not suited for the web design and photo retouching projects that I do for “production” most often. But I can spend hours playing with patterns anyway. I should have been a gift wrap or fabric designer instead!

A lot of the patterns I come up with end up being grayscale which at first doesn’t seem to be very interesting. But actually there’s a lot of potential in greyscale patterns. They don’t limit you by having pre-existing colors that you may or may not like, or force you to try to change one color that you don’t like to make it fit into your project’s color scheme. They’re blank color canvases, just waiting for you.

This tutorial will be about the Gradient Map method of colorizing two different types of grayscale patterns. This method can give you complete control over the way the colors are rendered, or allow you to use blending modes with preset options to come up with some interesting and sometimes surprising coloration. Gradient Map shading works by taking all the colors in an image in order of value and replacing any pixel in an image by its “match” in a gradient you choose. It is an interesting effect but depending on what gradient you choose to apply can often come out with garish results. You’ll learn how to take even the most gaudy gradients and turn them into something more sophisticated.

Grayscale patterns can be grouped into two categories, each of which has slightly different applications for Gradient Maps:

Limited Shade Patterns

2 shade (B&W)

3 shade (black, white & gray)

These are halftone patterns I made for another tutorial you can download.

Many shade grayscale patterns

Unlimited amount of shades

To apply a Gradient Map, choose Image->Adjustments->Gradient Map…

Limited Shades, Simple Colorization

A good rule of thumb for patterns with 3 or fewer shades of gray: limit the maximum number of “stops” in your gradient to the number of colors in your pattern. For instance if I’m going to apply a gradient map to a 3 shade grayscale pattern, I wouldn’t pick a gradient that has 5 or 10 stops in it. I’d pick one that has 2 or 3 stops for a smooth coloration.

Here are some examples:
2 Shade Patterns - 2 Stop Gradient:
Same gradient (colors in my palette), second is reversed

3 Shade Pattern - 2 Stop Gradient:
“Purple” Gradient, the second is reversed

3 Shade Pattern - 3 Stop Gradient:
“Blue, Yellow” Gradient, the second reversed

“Orange, Yellow” Gradient, the second reversed

Many Shades, Many Surprises

Applying gradient maps to patterns with many shades of grey requires some extra steps to come out with something that isn’t completely gaudy. You’ll also end up with some suprises because you can’t really tell until you are finished what the colors will appear.

A good rule of thumb for many shaded patterns is to use a many colored gradient. But if you use a gradient with more than 4-5 colors, be forewarned - at first it will be ugly:

“Spectrum” Gradient Map:

That couldn’t be a lot harder to look at. So we’ll fix it with some blending modes. Make sure to make a duplicate layer of your pattern before you apply the map so you have something to blend back into.

Here’s the same pattern blended with its original

Normal Blend 50% Opacity	Multiply Blend 100% Opacity	Color Blend 50% Opacity:	Screen Blend 50% Opacity

Blending gives very interesting and aesthetic results, though I couldn’t have guessed what they’d look like beforehand. This is a good technique to use if you don’t already have a color palette in mind for a project or as a way to possibly just experiment with colors.

Customize for Control

You may also create your own gradients for full control over the results of your colorization. This is handy if you have a restricted palette for a project.

Here are some examples of gradients I created specifically to color this pattern and the results:

You may download the gradients I made if you would like to use them for your projects.

To create your own custom gradient:

1. Click on the Gradient Tool on your toolbox palette or if the Paint Bucket Tool is visible click and hold it until you can choose the Gradient Tool.
   
2. Click on the Gradient that will appear on the toolbar at the top to open the Gradient Editor.
   
3. Edit your gradient:
   
   • Add stops by clicking below the gradient
   • Remove stops by clicking on them and pressing the delete key
   • Change stop colors by clicking on them and using the dropper tool to pick up a new color or clicking on the sample next to Color below the gradient bar to open the Color Picker dialog
   • Move the midpoints between the colors by clicking and dragging the small diamonds that appear underneath the gradient bar between two stops.
4. When you are done, type a name for your gradient in the Name text box and click New
5. Your gradient will show in the Gradient Picker the next time you use it.

I hope this tutorial will give you some ideas the next time you find a neat grayscale pattern that you like, or if you never really thought about grayscale patterns before, a new perspectives on the possibilities!