Content Marketing

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.

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. There are other programs that can perform the same functionality, so if you don’t have access to Photoshop please check the help documentation for your image editing program to see if you can perform these techniques.

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!

Unsharp Mask Dialog Box

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

Unsharp Mask filter

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.

Crop images contextually

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)

    Vibrance filter

  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.

Bill English

I'm a digital product designer based in Austin, Texas. I have over 12 years of experience both building new 0 to 1 product experiences and driving growth for high-visibility online destinations. I am currently at Hotel Engine, helping build the future of business and group travel. I thrive on continuous learning, turning user insights into action, and inspiring teams to think outside the box.

Related Articles

Back to top button
Close

Adblock Detected

Martech Zone is able to provide you this content at no cost because we monetize our site through ad revenue, affiliate links, and sponsorships. We would appreciate if you would remove your ad blocker as you view our site.