How-Tos

How To: Create a Deep Zoom Photo Album

Posted 01/14/09 at 03:00:03 PM | by Florence Ion

Seadragon image zooming software is one of the more interesting software technologies coming out of Microsoft Research Labs. Its implementation in web applications is potentially a big leap in the way we view images online. One such implementation is Deep Zoom, an Ajax-powered online viewer that lets you view, zoom, and pan through high-resolution photos and images in a way that is incredibly fast and smooth, regardless of the original image’s pixel density. Companies adopting this tech include the Hard Rock Café, which utilizes it in its music memorabilia showcase (http://memorabilia.hardrock.com/). Microsoft also developed and released a mobile application for Seadragon in the form of a really cool iPhone app which lets you view Deep Zoom image files.

But what if you want to turn your own photo albums into a Deep Zoom gallery? With Microsoft’s Deep Zoom Composer, you can now create a high-tech hassle-free photo album allowing you to display your images online using the Seadragon plug-in. We show you how with our comprehensive step-by-step guide!

Time = 20 mins

What You Need:

1. Download the Deep Zoom Software Cocktail

Before beginning any project, it’s imperative to gather the necessary materials. In this case, you’re going to have to procure a handful of Windows updates and new software, and make sure that your computer is up to speed.

Microsoft suggests that your system is powered by at least a 2GHz processor, 1GB of Ram, and a DirectX 9.0 capable video card with 256 MB or more of memory. After our own tests with the Deep Zoom Composer, we definitely agree with these minimum requirements. You’ll also want to make sure that your operating system, whether it’s XP or Vista, is completely up to date with Services Packs and updates.

We’ll be exporting our photo album to the Seadragon Ajax format, which uses Javascript for simple web embedding. For the plug-in to work, you’ll need Microsoft .NET Framework version 3.5 installed. Make sure that any pre-release versions of .NET Framework have been uninstalled and removed from your system beforehand. You can do this from your Control Panel, under Add or Remove Programs. You’ll also need to download the Microsoft Silverlight 2 plug-in in order to view your photo album on the web. You can get that at the official site at www.silverlight.net.

The most important component in this software cocktail is Microsoft’s Deep Zoom Composer. This program will prepare your images for viewing with Silverlight 2 and can export your photos into either Seadragon Ajax or Deep Zoom format. Keep in mind that this particular program takes up a significant amount of memory, so if possible, any heavy processes such as surfing the web or watching a video file should wait until after you’re finished.

2. Prepare your Album Photos

Gather all of your pictures that you want to share, grouping and labeling them in the order you want them to appear. Anywhere from forty or more photos will do, but beware that any more than that and the Deep Zoom window could get a little crowded, not to mention difficult to navigate for your audience. If you’re planning to show more than one set of photos, have each set located in their own separate folder for easy archiving and importing.

We suggest that all the photos are the same width-to-height ratio for symmetry, though this isn’t necessary. Also, it’ll be easier for the Deep Zoom Composer to arrange your pictures with automatic alignment if they all have similar dimensions. Don’t worry about how large the photos actually are—in fact, the bigger they are, the better they will zoom.

The photos can be in either JPEG or PNG format. However, for best viewing results, a high-resolution PNG should do the trick, since JPEGs often blur in Deep Zoom when zoomed in up close.

3. Import your Photos into Deep Zoom

Now that your pictures are ready to be imported, fire up Deep Zoom Composer and start a New Project. Pick a name for your project and click OK. Then, select “Import” and scroll your mouse over to the right side of the window to click on “Add Image”. From here, you’ll be able to import your photos according to how you grouped them up in the previous step.

You may want to keep in mind, for future projects, that Deep Zoom Composer can also use Layers to overlay images. You can manage the placement of each photo by selecting “Compose” and clicking on “Layers”. This particular feature is unnecessary for this project, though it may come in handy later on in your Deep Zoom endeavors.

The trickiest part about this project is aligning your photos to a grid, especially if you want all of your images nicely arranged. Click on “Compose” and select the first photo you’ve imported under “Images”, making sure it’s highlighted. Hold down Ctrl + A to select all and drag them into the blank canvas on the left side of the window. Your images will come out looking a little disheveled, but that’s alright.

Make sure your photos remain highlighted. Should you accidentally click away from the selection, you can always employ the Ctrl + A method or simply hold down the left mouse button and drag to select your batch. If you have a scroll wheel on your mouse, you can use that to zoom in and out of your canvas.