Home » Tools & Technology

How to Create and Publish a Deep Zoom Composition in 5 Easy Steps

Submitted by 5 Comments | 4,133 views

Follow these steps to create and publish your own Deep Zoom composition:

Step 1: Download and Install Deep Zoom Composer

Deep Zoom Composer is a tool that allows you to prepare images for use with the Deep Zoom technology. You can download Deep Zoom Composer here.

Step 2: Import Images

Think about the type of composition you like to create and import the source images into Deep Zoom Composer:

Import Images into Deep Zoom Composer

For the Mona Lisa Deep Zoom Composition I used a high resolution version of the famous painting as the background and many other images to hide as Easter Eggs.

Step 3: Create Composition

If you like to convert a high resolution image (e.g. panoramic photo, large map etc.) to the deep zoom format all you have to do is click on compose and drag the image from the list of available images to the design surface.

Create Composition

To include multiple images into one composition just zoom into the areas where you like to place the image and drag you images to the design surface. For the Mona Lisa Deep Zoom Composition I also specified menu items. To add a menu item click on menu and drag images from layers to the menu. The Deep Zoom Viewer will display those menu items and automatically zoom to the area where the image is located.

Step 4: Export Composition

Click on the Export Tab and chose a name, location and output type:

Export Composition

For this example I used the default settings. By default the output type is Silverlight Deep Zoom. In this case to view the composition Silverlight is required. If you choose Seadragon Ajax as the output type a Ajax based viewer will be generated that can be viewed even without the Silverlight plugin installed.

Step 5: Publish Composition

To publish the composition all you have to to is copy the files generated by Deep Zoom Composer to a Web Server. There are no special requirements for the Web Sever. Any static HTTP File Server will do. If you do not have access to your own Web Server the easiest way to publish the Deep Zoom Composition is via Dropbox. Get a Dropbox account and copy the files to the public folder of your Dropbox:

Publish Composition via Dropbox

To get the public link right click the main html file generated by Deep Zoom Composer and choose copy public link. Your Deep Zoom Composition is now online and can be shared with others.

To integrate the composition into your blog you can use a modified version of the following tag:

<iframe width="570" height="400" src="http://yourserver.com/yourdeepzoom.html" frameborder="0" scrolling="no"></iframe>

By now you have a good understanding and many ideas how to use Deep Zoom Composer. Give it a go and share you links in the comments below. Have Fun!

Related posts


Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.