You’ve probably seen HDR images many times, and thought wauv! How can anyone catch these colors and depth…? Well, it’s actually quite easy! At least if you have the right hard- and software by your hand.

You need;

- a camera capable of shooting pictures with different exposure
– the software Photomatix Pro (Also Adobe Photoshop can be used)
– your eyes

I was playing around with this in the evening, sitting in the sofa with my laptop, so I didn’t went out to shoot my own pictures. Instead I found the images below, which where perfect for just learning the software and the basics;

Normal

Over exposed

Under exposed

Well, with your three photos you are now ready to make your first HDR photo.

Step_01

Open up Photomatix and click “Generate HDR image”

Step_02

Browse or drag the files you want to base your HDR photo on. In this case I use the “venice”-files. Click the “OK”-button

Step_03

A new window opens. I used the standard settings, as you see below. But you can play around with the settings as you like…

After you click “Generate HDR” Photomatix will start working with the images;

Step_04

Sometimes you can get an odd looking image, but don’t worry. Just click the button “Tone mapping”…

Step_05

Now you use the sliders and the tools to make your HDR photo. If you know a bit about image editing or have worked with Photoshop before, all the sliders and tools will make sense to you.

When you are satisfied, you go click “Process” and afterwards you can go to “File” > “Save As” to save a tiff or jpg file.

Step_06

Below you see a couple of results from my first HDR experience. I hope soon to get out and shoot some photos myself, and process them.

Credits

I learned a great deal of this from abduzeedo’s tutorial.

Update

We removed the preloader functionality on our site, because external sources such as flickr and twitter sometimes made the preload go for 5-8 seconds. But if your site isn’t pulling data form external servers, go ahead!

____

Preloading entire pages has always been something belonging to Flash sites, but recently I found a solution with the excellent jQuery! Take a look here, and achieve a preloader functionality as on mumsstudio.com.

Demo

Example

Background

We want to have a div which is covering the whole site, and disappears when all content is loaded. The preloader requires the jQuery library – you can see the code in the source which can be downloaded at the end of this post.

HTML

The markup is very straightforward. Right after your place something like;

<div id="preloader"></div>

A simple div…

CSS

The CSS is more up to you. You can change color and the preloader graphic (a simple animated gif). In this example I go with this code;

div#preloader {
 position: fixed;
 z-index: 999;
 width: 100%;
 height: 100%;
 background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
 }

Javascript

$(window).load(function(){
 $('#preloader').fadeOut('slow',function(){$(this).remove();});
 });

Simply, when window (all content) is loaded, fade out the div with id preloader and remove it.

Easy and smooth!

Links & downloads

Note: There is a file embedded within this post, please visit this post to download the file.
Easy ajax preloaders
Example