Spicing Up Dull Photography
As is most often the case when beginning any web design project, we are saddled with a mish-mashed collection of stock photos, amateur photos and all with dissimilar styles and coloring. This article is going to provide you with a few ideas as a springboard to Photoshop your way to a cohesively designed photo collection for use in your web design.
Use the steps below as a guide and try your own variations to accommodate and fit into your own design aesthetic. As a starting point, an amateur photo was used (provided by a client) and the resolution was lowered to 144 lpi with physical dimensions of 10″ x 7″. Photoshop filters work more finely at higher resolutions, and this starting point resolution has been found to work with the combination of filters described in this article. Once completed, the photo would then be sized for use within a particular web design.
Over the years I have found a technique which works for me involving a three-layer process, all set at different opacities, creating the finished look I desire. As a side-note, I like to leave the original photo, completed untouched and unadjusted, on the Base layer for posterity. And you may choose to convert each layer for smart filters, so you can go back and adjust each later.
Layer #1: Original Thinking
In the first and bottom layer, I keep the original photo with only one enhancement. I adjust Image > Adjustments > Levels and, if needed use Image > Adjustments > Variations, to color-correct the original photo. This layer will be left at an opacity of 100%.
Layer #2: Colorize Your Photo Collection
Duplicate Layer #1 to make Layer #2, as you will build from the adjustments in Layer #1. With this step, adding color to your photo can be a simple matter of adding saturation, or you can replace colors in each photo of your collection to match your design. It’s totally up to you.
For the photo in the example, I wanted to saturate the color and used two techniques to add color. First, I adjusted Image > Adjustments > Hue/Saturation to fully saturate the colors in the photo. Because this layer will have the opacity adjust to 50%, I want to over-saturate the color. Second, I chose prominent colors and used Image > Adjustments > Selective Color to create more saturation in the reds, magentas and greens while stripping out the Blacks in those colors. You will want to play with the settings for each photo.
Layer #3: Texture Adds Character
Adding texture to a photo can make the photo appear to be original art. This can add a sense of originality and warmth to your web design, as well as adding a professional artistic flair to your design. This can be especially helpful to break the cookie-cutter template look.
Again I duplicate Layer #2 to create Layer #3. Now I use the two Photoshop Filters, Noise and Unsharp Mask, to add a unique texture to the photo. I add Noise to the photo first as it gives the Unsharp Mask filter something to grab and enhances the texture.
First, use Filter > Noise > Add Noise and, at 144 lpi, I generally set the added Noise somewhere between 12 and 16. Next I use Filter > Sharpen > Unsharp Mask with settings of Amount = 350%, Radius = 2 pixels, Threshold = 20 Levels. You’ll want to play with these settings, as well, and remember this layer will be used with its opacity set somewhere between 20% – 60%, so overdo the texturing effects.
Last Steps: It’s Crystal Clear
As last steps, play with the opacity of Layers #2 & #3. I set Layer #2 to 50% and Layer #3 to 40%. Then I would create the final web graphic be resizing the photo, cropping and saving it in your preferred file format for use on the web.
It’s In The Details
Below you can see the photo-art used in a finished website design. Creating a cohesive look for all photography used throughout any marketing piece is the type of detail which will make the difference between a mediocre and a superior design.
