In This Issue...

• Introduction
• New Book, New Concept
• HDR for Web Designers
• Design Spotlight
• What's New on SitePoint!
• Hot Forum Topics
• New Blog Entries

Make Your Web Design Business More Profitable

>Web designers! Get much more flexibility and power with WSCraft:

• Use WSCraft as a development platform to create powerful dynamic Websites without a programmer; only HTML and CSS are needed
• Deliver Websites powered by a fully functional content
  management system to your clients
• Seamlessly integrate any design, layout, and structure
• Extremely speed up development time and reduce project costs
• Create content-rich business Websites that cover any needs of your clients and anticipate their wishes

Click here to learn more about WSCraft.

Introduction

Welcome to Design View #26 -- the two-year anniversary edition!

Web browsers -- they can make you laugh, they can make you pound your head repeatedly into your wireless, ergonomically designed keyboard. So how is the "browser landscape" shaping up over the next 12 months?

According to a Janco Associates whitepaper, although Firefox, Netscape, and Opera (where is Safari?) have continued to erode Internet Explorer's marketshare, their growth rates are slowing. Internet Explorer now makes up just on 75% of the browsing population -- down 8% from this time in 2005.

Remarkably, Netscape (presumably 8.0) -- which I'm sure most developers discounted completely when testing (my hand is up) -- went from a negligible 0.29% to nearly 5% over the last 12 months. Opera, too, experienced a sizable relative increase during the period as it more than doubled its market share -- a nice endorsement for the 'Free Opera' gambit.

The major reasons cited for the slowdown in Firefox's growth are:

1. The business market remains conservative when it comes to new browser adoption.
   
2. IE7 beta's fixes and features have gone some way to restoring the frayed confidence of a number of IE users -- if they're not completely satisfied, they're at least willing to wait and see what happens next.

It was also officially announced that the full IE7 release will be tagged as a "security update," meaning that users connected to Microsoft's automatic update service will be upgraded to the new browser without even knowing about it -- something that I'm sure will cause much consternation in the future.

So, does all this mean IE is about to storm back to its former dominance? Not likely -- Firefox has too many fanboys -- but I think it means that we probably have an 80/20 (IE/Others) market for most of the next year.

Either way, with IE7 and Firefox 2.0 we look to be in for 'Beta Browser Wars' for the rest of 2006.

Alex Walker
Editor
SitePoint Design View

New Book, New Concept

In case you missed the launch, August saw the release of one of our most original book concepts to date -- Deliver First Class Web Sites: 101 Essential Checklists by Shirley Kaiser.

This is a brand new concept in the web design book market -- I can confidently say you've never used a book like this before.

While we all have our strengths, not many of us can claim to be experts in all aspects of web design, development and marketing.

With Deliver First Class Web Sites: 101 Essential Checklists, you don't need to be. Shirley provides you with a comprehensive "running sheet" for your project, from concept to completion.

The focus is on giving you a methodical but -- more importantly -- easy way to deliver high-quality work to your clients every time.

The book includes downloadable PDF versions of 100+ checklists that can be printed off for each new project.

Check out some sample checklists here.

The checklists cover everything from Project Planning to Usability to Information Architecture to SEO ... and a bunch more.

In short, if you've ever spent time on the phone soothing an angry and disappointed client, Deliver First Class Web Sites: 101 Essential Checklists is definitely worth a look.

HDR for Web Designers

The "landscape panel" is a web design mainstay. Although the styling changes with the seasons, the basic device has been with us since Tim Berners Lee decided that two 'W's just weren't enough.

Whether it's used to showcase a location (tourism, real estate, etc.), or simply to give an organization some 'bricks 'n' mortar' tangibility, the landscape panel is a trusty tool in most web developers' toolboxes.

However, if we are going to lavish so much real estate and attention on it, we'll generally want that image to be as compelling as possible. High Dynamic Range (HDR) imagery is a method you might find useful for producing detailed, almost painterly panel images for your web design work. I thought we might take a quick tour of the technique today.

First, Some Background

When we talk about as image's "dynamic range," we're talking about the relative difference between its brightest spots and its darkest spots. While better lens and higher quality equipment can record higher dynamic ranges than lesser equipment, the recording process inevitably squeezes the image information into a range, clipping off image data as it does.

The result is usually that the contrast in certain parts of your image is sacrificed to enhance other parts. Of course, you can attempt to rebalance the dynamic range in Photoshop, but by this stage the shadow and highlight details simply aren't there any more, and we can't get it back.

HDR is a technique that gives us back some control of that dynamic range -- particularly when working with complex and high-contrast subject matter. Make no mistake -- we're still ultimately limited by the display ranges of our monitors -- BUT we can decide which areas of the image get the most range.

What Do I Need?

The three things you need to produce HDR images are:

1. A camera that gives you control over exposure -- ideally a digital SLR camera, but you might be able to improvise.
   
   
2. A sturdy tripod.
   
   
3. Photoshop CS2 -- the first version of Photoshop to contain HDR functionality.

To create an HDR image, we'll need at least two images of the same subject, shot a different exposure levels. Also, if your camera shoots RAW image format, you can export new versions of the same image with different exposures directly from your original shot.

As a simple example of Photoshop's "Merge To HDR" functionality in action, I've selected a couple of festive shots I came across on Flickr. Allan & Cheryl Edwin were helpful enough to shoot and upload two versions of (almost) the same shot with different exposures.

As you can see, the second image does a better job at giving the yard dimension and space, but the first image retains much more detail in the subject -- the reindeer and sled.

Photoshop's HDR function will allow us to combine the best of both shots.

HDR in Photoshop

1. Once you've obtained your source images and transferred them to your computer, open Photoshop.

2. Go to File/Automate/Merge To HDR...

3. Browse and select the files you wish to combine into your HDR image -- 2 images will be good, but more shots will be better. If your tripod moved slightly during your shoot (as was the case with these example images), be sure to check the 'Attempt to Automatically Align Source Images' option to correct the offfset.

4. Clicking 'OK' will send Photoshop into a frenzy of activity as it organizes your files. After a few seconds, you should see the following dialog box:

If you shot your images in RAW format, these values will have been recorded with each image, and automatically accessed by Photoshop. If you're working with JPG, TIF, or other image formats, you'll need to enter these values manually for each image -- don't be afraid to experiment with a few variations to find the best result.

4. When you're ready, hit 'OK' and Photoshop will display the 'Merge to HDR' preview window.

Your preview result should have more space and depth in the shadowed areas, and better defined shape in the highlights. Adjust the levels slider on the right to get a good balance between the two.

5. Hit 'OK' when you're ready and you should have yourself a spiffy new image.

Your image is now 32 bit, and that's the best way to keep it, but you will need to make 16-bit copies in JPG or PNG format if you want to use it online.

A JPG of the final image is available here.

If you don't own the newest version of Photoshop, all it not lost.

HDRSoft's Photomatix is a highly-evolved, standalone HDR tool. If you're interested in taking Photomatix for a spin, HDRSoft currently offers a free, fully functional beta -- although it will watermark your images, it's good for getting a feel for the strenghts of HDR.

In fact, Photomatix seems to be the preferred tool of trade among Flickr's very active HDR Group members. There's some really cool work there!

Although it's probably fair to say that HDR is in danger of becoming passe among the Flickr geeks, I've tended to get blank looks when I've mentioned it to other web developers. As such, I think it could provide some really interesting possibilities for web designers for quite a while yet. I hope you find it useful.

Design Spotlight

August's Design Spotlight from the marketplace is slightly out of the ordinary -- it's a magazine masthead.

MidSouth will be launched next year as a new magazine aimed at the owner-builder market, and called for a brand in reds, yellows, and black, which would work well in print, TV, and yellow pages promotions.

Uncle Bob, from the intriguingly titled BigNut Designs, applied his slightly left-field perspective to the challenge and presented this big, sharp, friendly design.

A very slick result.

That's all for this issue -- thanks for reading! I'll see you in a few weeks.

Alex Walker
design@sitepoint.com
Editor, The SitePoint Design View

Help Your Friends Out

People you care about can benefit from the wealth of information on new and maturing technologies available on the Internet. Help them learn how to do it by forwarding them this issue of the SitePoint Design View!