How To: Create a Deep Zoom Photo Album

Florence Ion — Wed, 14 Jan 2009 15:00:03 -0600

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.

With your images still highlighted, point your mouse towards the tool bar at the bottom, left-hand side of the screen and click the following: align left, distribute vertically, align bottom, distribute horizontally. This pattern will ensure that your photos end up in a horizontal line. Go through and eliminate any images that stick out, or resize them.

The easiest way to align your images is to right-click and select “Arrange into Grid”, filling out the values and creating your own table. For this particular project, we’re doing 4 columns and a 0 cellpadding. There is also the option to drag and place them yourself. This becomes a simpler task if you zoom out and use the entire canvas to your advantage. Eventually, you should have something similar to the image below.

You can separate and arrange your images anyway you like; it all depends on your preference and how you want to present your photo album. We’re going to stick with one big cluster of photos, which will fit one screen and make scrolling and zooming simple.

4. Export your Project

We’re finally headed into the homestretch of this photo album project. Select “Export” at the top of the window. You’ll see a preview of your finished project on the left-hand side and options for exporting the file on the right. You can either upload the file as a singular image to Windows Live, providing you have an account, or you can select “Custom”, which will provide you with a few options.

Saving your project as “Images” will export processed image chunks of your project into dozens of folders. Be forewarned – this could mean up to thousands of tiny pictures. Exporting as Silverlight Deep Zoom saves your project as a Deep Zoom file, but the one we want to use is Seadragon Ajax so we can embed the final product onto an .html page for the entire world to see.

Select “Seadragon Ajax” as your output type and provide an project alias. Then, take note of the location where you’re saving it and choose what format you’d like to export it as. We went with JPEG at full quality, since it loads up quickly in most mainstream browsers. Keep in mind that if your pictures were not high quality to begin with, they will inevitably blur whether you save it as JPEG or PNG.

5. Upload your Album

If you’re running your website off of a free hosting service, such as Blogger or Geocities, you won’t be able to upload your photo album unless you have some sort of FTP access to these sites (Geocities does offer FTP access with a paid account). However, inexpensive shared server hosts, like 1&1 and Dreamhost work like a charm.

Locate the generated album folder. If you stuck with the default location, then it should be in My Documents\Expression\Deep Zoom Composer Projects\ project name, under Exported Data. Inside this folder, you’ll find your .html file and a folder titled Generated Images. All of these should be uploaded to your webspace in order for the script to work.

Fire up your FTP client, preferably something light like FileZilla, and upload all of these files, including the entire contents of dzc_output_files, located in Generated Images. If you take a closer look at the properties of this folder, you’ll notice there are roughly thousands of image files in this folder. Depending on your bandwidth, this may take up to an hour to load, though the end result is worth the wait and the hassle of uploading individual photos to your website.

Upload every single one of those files to your server, placing them in the same folder as your Deep Zoom generated .html file. Assign your .html file a name, if you wish to do so, and you should be set to share your Deep Zoom photo album.

6. Share your Album

In order for you to share your photos with your friends and family, you should let those who will be viewing it know that they have to have both the Silverlight 2 and Seadragon Ajax plug-in to view it. Though you cannot right-click and save individual photos, this is a great alternative for artists and photographers who want to share their artwork but are afraid of copyright infringement.

The great thing about Deep Zoom Composer is that because the final product is exported into an .html file, you can play around with the HTML and customize the page to your liking. Add a background, change the text color and size, and add your own descriptions. You can even take some liberties and create your own web layout to go with your exported product.

Time for a New Tech Preview of Deep Zoom Composer

Mark Edward Soper — Wed, 22 Oct 2008 15:35:05 -0500

Microsoft has released an updated technology preview of its cool Deep Zoom Composer tool for Silverlight 2. As we reported back in July, Deep Zoom Composer gives you the ability to display multiple high-resolution thumbnails, zoom in for a closeup, and pan back again. You can use Deep Zoom Composer to create mosaics (as in our original story), or to bring a new level of interactivity to online collections (as the Hard Rock Cafe has done).

If you want to give it a try, install the latest version of Silverlight 2 beta first, then install the Deep Zoom Composer technology preview 0.9.0005. Deep Zoom Composer runs on Windows XP SP2 or SP3 and Windows Vista, and requires a 2GHz Intel or AMD processor, at least 1GB of RAM, and a Microsoft DirectX 9-capable video card with at least 256MB of video memory.

See the Teaching Ideas and Resources blog at MSDN for more information about this and other imaging tools from Microsoft.

Hit the Comments button to share links to your creations!

Maximum PC Deep Zoom Composer RSS Feed