In my previous post I described how I see Deep zoom as a resource for the classroom, rather than just as image design tool for web sites. In this post, I am going to explore how easy it is to create your own Deep Zooms and use them as a medium for visual story telling.

To take part in this workshop, you will need to download and install the following:

  • Silverlight plug-in. You should already have this installed if you have been exploring the Hard Rock Cafe Memorabilia site.
  • Deep Zoom Composer. This is a free application and can be downloaded from this site.

blogplanning_thumb

Creating your first Deep Zoom

When thinking about using Deep Zoom in the classroom, it's a good idea to think about the context in which it will be used. This helps with the planning of imagestories and what images need to be collected. An ideal starting point is a trip to a museum, historical site or building.

Deep Zoom Composer divides the creation of a Deep Zoom into three sections:

  • Import - where the images that are going to be used are selected.
  • Create - where images can be positioned, resized, zoomed in and out and embedded. 
  • Export - where you are able to view your Deep Zoom and publish it in a number of different formats, including to your local hard drive.

To begin, make sure that your students have planned an outline for their stories. This will guide them on the photos they need to  capture. Their ideas will obviously evolve and develop as they find out more during the activity. My simple story will focus on the activities that people performed in their houses in the past.

The images you use don’t have be taken with a digital camera. They be sourced from photo sharing web sites, screen captures, image scans or created in a paint package. But they must be in JPEG format.

<><><><></> </> </> </>
So let's begin. Open Deep Zoom composer and choose New Project. Give the project a relevant name, in this case cheesehouse. This will create a file with the extension .dzprj.

Click OK to begin constructing your composition.
image

image image

Your added images will appear in a column on the right hand side of the window. Right clicking on an image will allow you remove an image. Clicking the Add Image button again will allow you to add further images.

Now you need to add the images that you are going to use in your Deep Zoom. Click Import and then the Add Image button, situated in the top right corner. You will be presented with the usual Windows file navigation window. Navigate to the folder where the your photos are saved. You can use the usual shortcuts to select the photos, such as Ctrl+A to select all or Ctrl+Click to select multiple images of your choice.

These are the photos I am using, taken at the Welsh National History Museum.  Right-click to download these images if you want to use them in this workshop.
IMG_0353 IMG_0355 cheese

Once you have added all images you are going to need, click Compose. Now you will see your added images along the bottom of the screen. On the lefthand side you will see a toolbar. The majority of the buttons are alignment tools that can be used to arrange a collection of images, as with the Hard Rock Cafe site.


The main tools  you will need for this project are the Select and Pan tools.

 

    image
Select Tool image
Pan Tool image
image

Select the image that will be your starting point. Click and drag it from the bottom row in to the central work area. Use the Select tool to resize the image to the size of the work area.

Now decide where you are going to embed the next image. Zoom in using your mouse scroll wheel or select the Zoom tool image and click. Press the ALT key and click to zoom out.

image

I am going to place my next image of the dairy in the window frame, as it shows the inside of the house. Click and drag it into the work area. Use the Select tool to resize the image. (I wonder what those two ladies are talking about? I might use them in my story).


At this point if you wanted to embed more photos, you need to move around the image to find other areas.  Remember to use Pan tool to do this, not the Select tool, as the image will move and all your carefully-positioned photos will be misaligned. (Thankfully there is an Undo function in the Edit menu.)

image image


In the same way, I am now going to zoom into this photo of the room and place an image of people making cheese in the wooden bowl. This image has been taken from the web, and illustrates how you can combine images from various sources. You will also notice the stunning details of the wood that this technology allows you to to show.

Select the Pan tool (so you don’t inadvertently change the image positions) and zoom out to the original image. You will notice a number of pushpins have appeared. These show where you have placed an image.

Its a good idea to Save your project at regular intervals, so click Save on the File menu. At this point you can continue adding and embedding images until you are happy with your composition. For the purposes of the workshop, we are stopping at three.

 

Next click Export. You will now be able to preview your Deep Zoom in the Preview area. Take the time to zoom in and out and explore the images you have embedded. If you wish to make any changes, click Compose and edit your composition.


On the righthand side, you will see two tabs that offer options of where to publish your Deep Zoom. Let’s start with the online option.

image
If you have a Windows Live account (if not, why not sign up for one), you can upload your work to the DeepZoomPix web site.
This site allows you to display your finished deep zoom compositions. The site is currently only a demonstration and expires at the end of the year. But it does allow you to quickly publish and share your deep zooms without the need for a specific web site.
Click the image below to see the completed Deep Zoom project.

IMG_0353
image Here you will get the option to create a new album or add your Deep Zoom to an existing album. In this example, we are creating a new album by typing its name in the dialogue box blog examples.
Take the time to choose an album cover; clicking Select Album Cover will allow you to choose one of the images you have used as a cover for your album. Next click Publish and your Deep Zoom composition will uploaded to the DeepZoomPix web site.
image It may not always be practical or desirable to upload the work of students to a web site. If that is the case, choose Custom Option. You will be presented with a number of options. First under the Output type, select Silverlight Deep Zoom. Now give it a name (it's easier to use the same as the project). Next choose a location where you want the Deep Zoom to be stored (in this case, my Desktop). Select Export As A Collection (Multiple Images). From the drop-down menu, select Deep Zoom Classic + Source. Finally, click Export.
A folder wish the name you chose will be created in the stated location. To view the file, you need to follow this pathway.
<name of deep zoom folder>\ DeepZoomProjectWeb Folder\ClientBin Folder\DeepZoomProjectTestPage.html

Your Deep Zoom will automatically open in your browser. It's a good idea to add this URL to your Favourites for later reference and use. 
If students want to use this Deep Zoom in a presentation then they can create a simple hyperlink from this.
image

So far I have only come across one error message in the creation of Deep Zooms. This occurs when the number of pixels in your composition exceeds 4 billion. To solve this, use lower resolution images (this may need a change of digital camera settings -- see this post) or resize the images in your composition.

I hoped you enjoyed this workshop and have been able to create your own Deep Zooms. If you have any questions or require any help with this workshop please email me at v-sball@microsoft.com. If any of you would like to send me links to your own creations, I would be more than happy to share them in my next post.

In the next post, I will look at some advanced features of Deep Zoom, such as creating hyperlinks from your composition and looking at the relationship between Deep Zoom and Seadragon.

But, what about my story? Well, in the1800s you couldn’t just visit a shop to buy some cheese. People often made it in their own houses, and women would stand outside and gossip while it was being made. Have a look for yourself by zooming in through the window. This room is the dairy. You can see some of the equipment where the people who lived in the house made their own cheese. It must have been very hard work, as you can see by zooming into the plate.

The end.

IMG_0353