Zoomify your Panoramas in Photoshop

Over the past few version updates, Adobe has given us a Photoshop capable of creating some magnificent large images using the Merge to Panorama feature. Creating these images can give you quite a sense of accomplishment, but then how do you include these images in your portfolio? If you’ve creates a panorama that is six feet wide and two feet tall at full size, chances are that a typical web portfolio is not going to do it justice. The form factor is all wrong, and there is too much detail to consign such an image to the bounds of the average computer monitor.

Fortunately, Adobe Photoshop has included some technology to address just this issue. It’s tucked away in the recesses of the export menu, and has some strange requirements, but it is exactly the solution we need for this problem. I’m talking about the Zoomify plug-in, which has been with us for at least the last three versions of Photoshop. Zoomify is one of the more obscure features within Photoshop, but it is an excellent way to show your large images and let your audience explore the details.

Zoomify – an example

The image below, taken at Bryce Canyon in Utah,  is a very large panorama, composed of 19 images across. The level of detail is amazing, but you just can’t tell with the small version shown below:

Now, it would be possible to post a full scale image and link to it from the image above, but do you really want to put your high resolution images out there for anyone to grab? Probably not. That’s where Zoomify comes in. Zoomify is a plug-in that allows you to export from Photoshop, creating a web page with a special viewer that allows you to zoom in to details on your image, or zoom out to see the full picture – all through a Flash interface that never presents the full resolution image to the viewer in one piece.

Click the image above to open a new window with a Zoomify view to see what I mean. You can use the controls at the bottom of the interface to zoom, scroll and pan, and you can even drag the image around with your cursor. Nice, isn’t it? And the high res image is presented only in small chunks as you pan around the image, making it extremely difficult for anyone to reconstruct your full image at actual size.

[ Follow up note: I’ve made my Zoomify window 800 pixels tall – if you’re viewing on a laptop, this may be too tall for your screen, in which case you’ll have to scroll down to see the controls. Live and learn, I’m sorry about that! mh++]

What you’ll need

Zoomify is a plug-in that works from Photoshop’s Export… menu. However, there are a few technical details you’ll need to be aware of to use Zoomify, and to be able to post Zoomify images on the web. Here are a few requirements to be aware of:

• Zoomify works only on 8-bit images
• Zoomify does not automatically convert to sRGB. If your image is in another color space, you’ll want to convert it to sRGB first.
• If you have a 16-bit layered document in AdobeRGB or ProPhotoRGB, you’ll want to flatten the document first to preserve appearance as you convert to sRGB and to 8-bit. This isn’t mandatory, but prevents unwanted color shifts, and will potentially speed up the Zoomify process.
• Zoomify creates a web page – that’s right, html – and you need to have the ability to place the web page and supporting files on a server somewhere. You can’t just upload a Zoomify image to Flickr or to a blog – it has to be hosted on a web server.

How to create a Zoomify image

In this tip, we will not create a Panoramic image or other large format image. I’ll assume that you’ve already created the image and are ready to export to Zoomify. In order to prepare the image for export, you’ll want to follow these steps in the order listed, for best results:

Step 1: First, save your file. We will be making some changes and you don’t want to lose your work.

Step 2: As mentioned above, to reduce unwanted color shifts and to make this process faster, we will want to flatten the layers. Select Layer > Flatten Image.

Step 3: This is required if you’re using a wide gamut color space, such as Adobe RGB or Prophoto RGB. Select Edit > Convert to Profile. Choose sRGB, and change the Intent to Perceptual.

Step 4: This is required if your working document is in 16-bit color space. If the image is already 8-bit, you can skip to the next step. Select Image > Mode > 8-bit.

Step 5: Now, we are ready to export. Select File > Export > Zoomify. You will get the dialog box shown below:

The options are as follows:

Template: Sets the background (black, gray or white) and navigation interface for the Zoomify interface when it is viewed in a browser. Zoomify will always include the navigation controls at the bottom of the window, choosing one of the options “with Navigator” will produce a birds eye navigator window in the upper left corner of the interface.

Output Location: Sets the location where you will export the files for Zoomify, including the name of the html file that will be created. Zoomify will create one main html file and a folder with all the resources needed for your image. In this case, I’ve created a folder called “Zoomify” where I will deposit the output.

Image Tile Options: Sets the quality of the image that is output. I prefer to set this to the maximum, but this is a personal preference. Zoomify slices your image into many small squares at different image sizes, and this setting controls the JPEG quality of each square (“tile” in Zoomify lingo).

Browser Options: Sets the size of the Zoomify window. In my example, I’ve set the window to 800 pixels square, but you can set to any size you want. Keep in mind the desired final format – where will this be seen, and on what screen size or within what window size. Also, note the checkbox for “Open in Web Browser.” I’ve left this on so we can see the results right away.

Now go ahead and select OK and the export process will commence. When it is finished, Photoshop will launch your default browser to view the result. Depending on your security settings, you may have to click through a prompt to “Allow this page” or “Allow blocked content.”

Don’t worry, this is simply because the scripts in the html file are running on your local machine. They are safe, so go ahead and click “Yes” or “Allow.” You’ll see the Zoomify output and can experiment and test to ensure that you like the final result:

Now that we’ve created the Zoomify image, what’s next? Here’s where some internet savvy is required.

Uploading a Zoomify Image to the web

In order to understand what must be done, we’ll start by looking at what the Zoomify plug-in deposited into our hard drive. Using Windows Explorer (or Finder on the Mac) browse to the “Zoomify” folder we created above. Here is what we see in the folder:

Just two items: the .html file, and a folder of the same name ending with “_img” – this is what you’ll get each time you run Zoomify. We need to place these files on our web server, in a place that is accessible to the visitors we want to allow to view it. In my case, I will place it in a public place on my server, so that anyone can access the files.

Using my ftp program, I open up my web server:

Note that I’ve created a “Zoomify” folder under the root of my server, this is where I’ll place all my Zoomify objects. As long as each has a unique name, I can place multiple Zoomify images in the same Zoomify folder.

I’ll navigate to the Zoomify folder, and drag the images from my local computer to the web server:

And that’s all there is to it. Now, with the files transferred, I can open my browser to the web server and test the path that I’ve created. In this case, the path is:

http://www.hoffmanartdesign.com/Zoomify/BryceAmphitheater.html

Here are a few more Zoomify images I’ve created recently, in preparation for this tutorial. This first is another taken at Bryce Canyon national park, of a beautiful natural bridge. This is actually a multi-panorama – there are 5 strips of panoramas stitched vertically, and each strip is composed of 7-9 images across. The whole picture is a composite of 34 separate photographs. Click the image to launch the Zoomify version on my web site:

This next one is kind of a lark: At Goblin Valley State Park in Utah, I created a panoramic image using my iPhone 4, and stitched the photos together in Photoshop CS5. It isn’t as detailed as the previous two, but it is quite amazing considering this came from my phone camera! Again, click the image to view it with Zoomify:

Conclusion

Zoomify is an under-rated and under-used plug-in for Adobe Photoshop. With today’s high megapixel cameras, and the ability to stitch multiple images together into huge panoramas, shouldn’t you be showing your work with Zoomify?

Interesting footnote: as I was getting ready to publish this post, I ran across a link on Twitter, that directed me to Bert Monroy’s site – where he has just unveiled his (still work in progress) Times Square panoramic illustration. This amazing image is 5 feet tall, and 25 FEET across. And he has presented it for all to browse, in, of course: Zoomify!

Until next time!