Marketing Technology Blog

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!

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.

When I launched Marketing Technology Vendors, I wanted to add some kind of feature to the blog that would highlight the new site. However, I didn’t want to make it overly obvious or take away from the blog itself.

The answer was tiny, but had a huge impact… adding a tiny new image to the link in the navigation menu. (click through to the post to see it in action). I ran with the link for several days by itself and got zero traffic. I added the image and now 8.5% of outbound traffic is going through that link!

Rather than actually embed the image in the HTML, I utilized CSS so that I could use it on other new features in the future. The CSS looks like this:

span.new {
background: url(/mytheme/new.png) no-repeat top right;
padding: 0px 18px 0px 0px;
}

The background anchors the image to the right top of the text and stops it from repeating. The padding pushes out the span 18 pixels past the text so that your image is in clear view. To embed it in the page is now easy, I just use a span tag around my text:

<span class="new">Reviews</span>

Sometimes it doesn’t take much to point your readers in a new direction!

Many of my friends are web designers – and I hope they don’t get upset at this post. First, let me start by saying that great web design can have a significant impact on the type of clients you attract, the response rates of prospects clicking through, as well as the total revenue of your company.

If you believe a great product or great content can overcome poor design, you’re mistaken. The return on investment on great designs has been proven over and over. It’s absolutely worth the time and expense.

That said… great design doesn’t have to cost you that much, though. Modern web content management systems such as WordPress, Drupal, Django, Joomla, Magento (for commerce), Expression Engine, etc. all have extensive theming engines. There are also many web design frameworks, like YUI Grids CSS, for sites made from scratch.

The advantage of utilizing these systems is that you can save a lot of your web and graphic designer’s time. Professional web designs can cost $2,500 to $10,000 (or more depending on the portfolio and references of the agency). A lot of that time may be spent on developing the page layout and CSS.

Rather than paying for layouts and CSS, why not choose from thousands of themes already constructed and simply have your graphic artist work on the graphical design? Breaking up a great design built in Photoshop or Illustrator and applying it to an existing theme takes a fraction of the time than designing all from scratch.

An additional advantage of using this approach is that the layout can impact search engine optimization as well as usability – something that theme developers are typically cautious of before they publish and sell themes online. Since many of my readers are WordPress users, one of the sites I love for this is WooThemes. For Joomla, the RocketThemes has a fantastic selection.

One additional piece of advice, when you subscribe or purchase these themes – be sure to get the developer license. The developer license on WooThemes is about twice the cost (still only starting at $150!). This provides you with the actual Photoshop file to provide your graphic artist to design with!

My favorite magazine is Practical Web Design – also known as .net Magazine. I think it’s got a great balance of marketing and technology in the magazine – perhaps leaning on the design and tech side.

The magazine always has inspiring designs and comes with some great software, tutorials and samples on an embedded CD.

For those of us that live across the pond, though, it’s not cheap – I was paying about $16 a magazine (worth it, though!). I find myself picking it up month after month. This month I finally got smart and ordered an annual subscription of the magazine.

I’d like to share the magazine with you folks as well, so each month I’m going to put a code in my RSS feed and email that you can enter in an online form. Each month I will buy a subscription for one of my readers. You must live somewhere the subscription can be delivered – currently the UK, the US and Canada. For US readers, that’s a $125 value!

Subscribe by email or by RSS today!