The Blueprint
So in the past few months I’ve been following Aaron Ivey’s blog after coming across it through a mutual friend. I don’t know Aaron personally, but I have enjoyed reading his posts, especially those that showcase his photography (those are just a small sample). I really dig the coloring and post effects that he adds to his shots and I’ve had a few friends inquire as to how he might be achieving that look. I thought I’d play in Photoshop a bit and see if I could come up with something similar. The idea is not to copy directly, but to come up with something that’s of a similar style.
First off let me say that large part of the effectiveness of these shots begins with how they are captured. You have to start with a strong picture first. You can add effects and tweak a photo all day in Photoshop but if it’s not a good shot to begin with then just forget about it.
So here’s the photo that I used as my starting point. I picked it because it has pretty good color to begin with, it’s a fairly interesting shot and it has a strong depth of field which is really nice to have especially when paired with these post effects.
And here’s the final image with the effects added:
Here’s the breakdown of how I achieved this. I’m working in Photoshop CS3, which is only important because of how my layers were assembled. You can achieve the exact same look in CS2 but your layers will be slightly different. Here is a screenshot of my layer window:
This is a fairly simple setup. First I started with the original image which is in “layer 0”. Above that layer I created these 3 adjustment layers: color balance, curves, and hue & saturation. Using adjustment layers is key because that allows you to make tonal corrections to your image without actually altering the image itself.
I won’t go into all of the specific slider values for each of these adjustment layers because those will be different for each image. I will discuss why I added each adjustment layer and the basics as to what’s going on in each.
Color Balance
Color balance is a powerful tool because it gives you the power to adjust the colors in the shadows, midtones and highlights of your image separately. So I want to add more green into my shadows but more yellow in my highlights, I can. I’ve used to use the color balance tool to only make slight tweaks to my image, such as making it warmer but still keeping the original colors intact. Recently I’ve been getting more aggressive with it and now I completely change the colors of an image which is what I did in this example.
Curves
Curves is one of those tools that most people open and then just stare at blankly. It’s not the most user-friendly tool, but it’s super powerful. The key to curves in my experience is slight adjustments. If you add too many points and severely drag the lines around your image will quickly begin to fall apart. What I usually do is adjust the curves for each of the 3 color channels in an image, those being the red, blue and green channels. Then I go into the composite channel (rgb) I then make very slight adjustments, usually creating what’s called an “s” curve. You create an “s” curve by adding a point to the bottom left portion of the rgb curve and drag it down slightly and then add a point to the top right portion of the curve and drag it up slightly, thus making an “s” with the curve. This adds contrast and can really bring an image to life.
Hue & Saturation
In this example, I only used the saturation slider of the hue & saturation tool. I brought the saturation down to give this image a more muted look. Pretty simple stuff.
The order to these layers is important, since they each build off of whichever layers are under themselves. That’s why color balance is first, because I want to make those color changes right away. Then I want to adjust the curves to just tweak those colors slightly. Then the hue & saturation layer is on top of everything to bring the saturation down.
Lastly I made a couple of tweaks to the original image layer itself. This is where CS2 and CS3 part ways. In CS3 Adobe introduced “smart filters” which is similar to the adjustment layer idea of making adjustments but not actually affecting the original image at all. In CS2 anytime you added a filter to an image it was a permanent change. In CS3 you can convert the layer to a “smart filter layer”, which means you can add filter upon filter to that layer and not only keep the original layer intact, but also be able to go back into those individual filters and make adjustments down the road. Very powerful stuff. If you’re using CS2 and want to know how you can add those same filters without the use of smart filters, just leave me a comment and I’ll expand on that more.
So you can see that I added sharpen and lens correction filters to my image. In the lens correction filter I’m applying a vignette to my image. A vignette is an effect that darkens the corners of your image, which you should be able to see if you compare the original to the final image. Then on top of the lens correction filter I applied a sharpen filter to just slightly bring out more detail in the shot. Another key thing with smart filters is that you can adjust the opacity (transparency) of that effect on your image. In the case of the sharpen filter I dropped it’s effect down to 35%.
That’s it. In the spirit of knowledge sharing I’ve provided the psd file of this image in case any of you want to open it up yourselves and look at each layer more closely. You will be able to open this in CS2, but it will give you a few error messages and I think it will either apply or remove the smart filters that are on the bottom image layer. You should at least be able to see the adjustment layer settings, which are the more important pieces of this effect.
Hope this was helpful or at least fun to read. My thanks to Aaron Ivey for the inspiration, my friends for asking how to do this which encouraged me to try it out and for whoever it was that took the photo of this guy that I used in this example...maybe I should just thank Flickr for that one then.
Okay this is really cool. We browse the excellent articles of Smashing Magazine on a regular basis and today we were extremely surprised and honored to see that the design of our main menu made the list of Navigation Menus: Trends and Examples. A lot of care went into our menu when we designed it and it’s awesome to get recognition for our hard work.
Allow me to throw a little love back to Smashing Magazine. If you are a designer or developer and are not familiar with Smashing Magazine, then you owe it to yourself to visit their site and subscribe to their article RSS feed. It has proved to be a great resource of inspiration and information for us. Plus you can clearly see that they have good taste.