How I Work with Color
I’ve had more than a few people ask how I approach color in my pieces and whether or not I could put together a little walkthrough. I’m going to try and explain, to be the best of my ability, some of the tools and tricks I typically utilize when it comes to color grading my work. Some of it might be useful to you, some of it might not be. But, hey, it’s free.
Once upon a time, in another life, I worked in the world of print media. While designing imagery for this monthly magazine, one of the major hurdles we had to overcome on a regular basis, was taking photography from different photoshoots and repurposing them for a single article. In order to get some sort of consistency for the story, we’d need to do a pretty hefty load of color grading on the principal photography. Oftentimes, that meant exaggerating the color tones of a scene to fit a particular editorial tone. Other times, it meant recoloring a scene altogether.
Since then, I’ve taken some of what I learned there and tried to repurpose some of those techniques in the illustrative world to capture narrative tones and to define unique color palettes that work as an ensemble.
Color is an enormous part of how our work communicates. The right tone can create an emotional depth by suggesting an atmospheric impression, whereas mismatched colors are jarring and create friction points in the narrative. Getting color right is pivotal for successful experiences. With it, we can imply, direct, and even inspire our audiences.
Let’s take a look at an example at the impact of color on the same object:
While both of these recorders are the same illustration, the left device doesn’t feel particularly grounded to one specific time period. The colors are straightforward and the tonally gray elements are pure grayscale. In contrast, the color grading we’ve applied to the right recorder intrinsically feels more vintage in tone.
This is color at work.
For this walkthrough, we won’t be getting too technical on the specifics of color grading — largely because I only know what I know — but if you’re looking for some additional clarity on just what those effects look like, be sure to check Grade’s Color Reel from The House on Pine Street.
Instead, we’ll be using this guide to take you through a few steps I use that may help contribute, in part, to you building more ownable, pleasing color palettes. It won’t be everything, but it’ll be a start.
Setting Up a Color Palette
Typically, I’ll begin building out my palettes in Illustrator. At this stage in the game, I’m usually not too worried about how perfect those colors are as I’m more interested in just what generally the colors are going to be — meaning that if I’m to be using an orange, blue, and a black, I’ll likely just grab any old orange, blue or black; knowing that I’ll be manipulating that palette in post-production. So, at this point in the build, go nuts: Don’t let you dreams be dreams. They can even come from the Illustrator’s default color swatches (I know, right?).
For this example, we’re going to be using a color palette directly from the default Illustrator swatches, just to show how we can alter these colors through color grading.
We’ll also set up an illustrative example so that we can see these colors in the context of an environment. To the right of the illustration, we’ve pulled out each of the 5 colors in the example for reference.
If you’re not working with an illustration at this point (or even if you are, this is the Free World), it might be helpful for you to set up a playground for these colors. For me, patterns work well for seeing how all of the colors interact with one another. When you build one, try to set it up so that each color has at least one point where it’s interacting with each of the other colors. Below, you can see one I threw together as an example.
Now that we’ve got some colors to work with, and a scene to play with them in, let’s bring them on over to Photoshop to start grading this palette to something a little more visually interesting (or at least easier on the eyes).
Working with Photoshop’s Adjustment Layers
Welcome to the raster realm again! Now that we’ve got our working file, let’s bring it on in to the wonderful world of Shoppe de Photo.
We’ll be working with a few tools in here that make our color grading possible. Let’s talk about a few of them.
- Curves: An adjustable graph that controls an image’s tonal range
- Levels: An adjustable graph that corrects the tonal range and color balance of an image by adjusting intensity levels of image shadows, midtones, and highlights.
- Selective Color: A channel mixer to directly affect a specified color.
Those three are, by no means, the only tools you can use in Photoshop for color grading, but they do compose a great deal of what I utilize while in the app.
We can access these adjustment layers by going into Layer > New Adjustment Layer > and then specifying which type of adjustment layer we’ll be adding. For this example, let’s start with Curves.
Adjustment Layers: Curves
Above, you’ll see the Properties controller for Curves. While this isn’t a conclusive breakdown of all that Curves can do or control, for the purpose of this example, we’ll largely be working with the Channel selector (that currently reads “RGB”) as well as the line graph that currently runs from the lower left quadrant to the upper right. For a more detailed breakdown of just how Curves work on a technical level, consult the good folks at Adobe.
We’ll be working with our RGB channels (since our canvas is in RGB for this specific piece) first. Let’s start by selecting the Red channel for manipulation. To start grading this image, let’s interact with that pretty line graph.
For reading the line graph, the lower left area represents the shadows related to this channel within our piece, whereas the upper right area represents the highlights of that channel. For each point you click on the line graph, it will place an anchor point that is able to be manipulated by simply dragging it.
For the above example, we’re just working with the Red channel, but we’ll want to use all 3 as we go. My personal favorite is Blue, since it can cool things down with rich purples and blues, as well as introduce some nice, warmer yellows into the highlights.
In working with Curves, some of the best advice I’m can give you is to encourage you to play with these controls. As far as I can tell, there’s no limit to the amount of anchor points you can place. If you can dream it, you can click it.
Tip: If you’re feeling like you want to play it a little safer, try placing a single point in the middle of the graph, then place anchor points on either side so that you’re able to manipulate the highlights and the shadows separately without affecting the whole piece.
Adjustment Layers: Levels
Levels work in a fairly similar way to Curves. Again, we’ll be manipulating the tonal range of an image. However, instead of a line graph, we’ll be using sliders to affect the tonal range of shadows, midtones, and highlights.
That pink circle points where the 2 sliders are (which affect, from left to right, shadow and highlight outputs) that we’ll be working with here today. Again, this isn’t everything you can do with Levels; just some quick hits to get you started.
Similarly, we’ll be calling on those RGB color channels again, so as to affect our channels in isolation. A couple things to keep in mind: We’re going to be affecting the shadows and highlights of an image — where it’s the blackest, as well as where it’s the whitest. Doing this is going to affect the “trueness” of those dark and light tones, meaning that our blacks will no longer be fully black and our whites will no longer be truly white.
For example, if we’re in the Blue channel and we pull that Shadows Slider (the black one) to the right, we’re going to be introducing a level of blue into our blacks and anything that has a black value of some sort. Essentially, the entire image (aside from pure whites) will be saturated with a flood of blue that will increase just how dark the darkest parts of our image are.
Conversely, dragging the Highlights Slider (the gray one) to the left is going to introduce its counter (in this case, yellow) to the whites and any color value with a white value in it (everything but a true black).
Tip: Playing with these will alter the contrast your image has, so you may need to do a little toying with the Brightness & Contrast to maintain your desired settings.
Adjustment Layers: Selective Color
This step is going to be the hardest to walk through, since it’s more about finessing the colors you’ve been working with.
While Curves & Layers are going to do wonders for the palettes you build, there are occasions where, no matter how much you toy with the variables, one color may feel a bit overpowering or just plain out of place.
Remember when we created that pattern to try out those different colors in a single lockup? Let’s check it out again with some modified colors (via Curves & Layers):
Seems like it’s coming together, but that red is looking hella hot. If only we could correct that red in isolation, right? Well, folks, today is your lucky day.
In these situations, Selective Color might be just the tool we’re looking for. With it, we’re able to select a single color (with some generous classification), and manipulate it in isolation within the piece.
From the Colors dropdown, you’ll be able to specify the precise color you want to affect and you’ll work with CMYK percentage values to introduce or remove the specified color value from your selected color.
By the time you’ll be getting to Selective Color, you’re going to have to start trusting your gut and your eyeballs in search of cohesion. In many cases, this finessing will be the little bits of glue that fuse your palette together with even more consistency and precision. Use it and use it well.
And That’s About It (For Now)
I mean, just for this article, really. Because there’s still so much more to talk about and, to be honest, this is already a lot longer than I was thinking it would be. Hopefully there’s something in there that’s helpful to you in building cohesive color palettes.
If not, sorry about the length.
You can read a hundred articles on this process, what works for some, what doesn’t for others, but there’s really no substitution for getting into your preferred program and just futzing around with the various techniques to work with color.
It won’t always work the first time, so keep at it! And don’t forget that you can stack adjustment layers over adjustment layers over adjustment layers. If that first Curves layer didn’t achieve what you were hoping it would achieve, try another layer built on top of it. You’ll be surprised by some of the color combinations you can come up with after some experimentation.
Below, I’ve assembled a handful of results using only the Curves, Levels, and Selective Color adjustment layers applied to the original default color palette we built at the beginning of this article.
It’s all about experimentation. Pressure test your color palettes. Write with text on them and build scenes out of them. Test them against various backgrounds across a multitude of mediums and note how they read when the elements are scaled. There’s so much to do and still so many new, interesting palettes to discover.
So get out there, start building on this in your own way, and make something totally fresh for yourself.
