Prepping Your Photos For The Web: Tips and Techniques

If you write for a blog, manage a website, or post to social networking applications such as Facebook or Twitter, photography probably plays an integral part of your content stream. What you may not know is that no amount of stellar typography or visual design can make up for lukewarm photography. On the other hand, sharp and vivid photography will improve users? perception of your content and improve the overall look and feel of your site or blog. Using software tools such as photoshop and photoshop color wheel, you can ensure that your images are eye-catching and crystal clear.

At Tuitive we spend a good deal of time preparing other people’s photography for the web, so here are some quick pointers we’ve picked up along the way.

Please note: the technical instructions below refer to Adobe Photoshop CS4. Of course, there are several other photo editing software like Corel PaintShop Pro and PicMonkey (you can read the latter’s review on https://serp.co/reviews/picmonkey/) that has similar functionality. So, if you don’t have access to Photoshop feel free to use another software.

RESIZING & SHARPENING

Oftentimes preparing a photo for your website or blog requires you to make it smaller, especially if it is coming from a multi-megapixel digital camera. It?s important to know that a reduction in size implies a reduction in detail, as Photoshop is ?mushing? together neighboring pixels in order to fit the image to its new dimensions; this gives the photo a blurry look.

In order to ?fake? the detail you have lost you should apply the Unsharp Mask filter (Filter > Unsharp Mask). Nevermind the counter-intuitive name – the Unsharp Mask actually sharpens!

You can notice how much clearer and pronounced the details are in Figure 2 below.

The controls on the Unsharp Mask dialog box may look daunting, but the good news on preparing photos for the web is you won?t have to mess with them very much. I find an Amount of 50%, a Radius of .5, and a Threshold of 0 works almost all of the time.

CROP IMAGES CONTEXTUALLY

In some scenarios, you might want to create a series of thumbnails that link to a larger version of an image. Common scenarios for this are photo galleries or news headlines that have a thumbnail version of a larger photograph.

When reducing an image to thumbnail size, try to crop the image to its essential elements before resizing. This allows users to grasp the content and meaning of the image even at small sizes.

Figure 1 is an image that has been directly scaled to its thumbnail dimensions, but Figure 2 has been cropped to the most important elements of the photo. This allows users to quickly understand what the image is trying to communicate and encourages them to click for more information.

VIBRANCE & SATURATION

An image’s saturation is its intensity of colors. On under-saturated images, skin tones look sickly and skies look grey and dull. To add some life to your images, Photoshop CS4 has a filter I recommend called Vibrance.

If you want to quickly bring some life to your dull photography try the following:

1. Add a new adjustment layer (Layer > New Adjustment Layer > Vibrance)
2. Increasing the Vibrance slider (Figure 2) within the Adjustments panel will intensify color while protecting skin tones (preventing them from looking too orange). The Saturation slider will have a similar effect, but will change the entire image, including skin tones.

CONCLUSION

These tips are just the tip of the iceberg in terms of the rich and powerful features Photoshop offers for correcting and optimizing photography. Please give a note in the comments if there are any other techniques you would like to see explained.