Crafting Interactive Panoramas with Photoshop CS3 and PTViewer

Scott Onstott
Book & Video Author

One of the most amazing things Photoshop CS3 can do is stitch multiple photos together into a seamless panoramic image. This ability to merge photos has been in Photoshop since CS2, but to tell you the truth, Photoshop wasn't that good at it at first. Special-purpose image stitching software such as RealVIZ_Stitcher was required for professional level work—but that's all changed in Photoshop CS3.

You can create stunning panoramic images in Photoshop CS3 with little effort—in fact you don't even have to use a tripod. I took these_ten_shots_in_Vancouver with my digital camera while I turned in place, shuffling my feet as I rotated my body. The camera's position, center of rotation, and exposure varies a bit in each photo, but it doesn't matter because Photoshop can automatically align and blend the seams in one fell swoop.

A little post-processing is required to clean up and crop the edges, and I'll show you how to do that—and a lot more in this tutorial. Incidentally, merging photos like this is the budget way to build high resolution imagery without needing a professional 12 megapixel camera. Even a 2 megapixel camera can create massive resolution if multiple photos are stitched together. But that's not what I want to talk about here. My main goal is to show you how to make interactive panoramas like you see here:

Drag the panorama to pan the camera target left, right, up, and down. Shift-drag to zoom in and hold down Ctrl (Option on the Mac) and drag to zoom out. You are looking at a 330 KB image here, so high resolution was traded for small file size and fast downloading.

The interactive panorama runs as a free java applet called PTViewer, so it will only display if you have Java installed (and yes, most people do). There are other ways to do this (QuicktimeVR for example), but I like the Java approach because it works on all platforms and there is no plug-in to download. So let's get started!

Download the site photos, unzip them, and launch Photoshop CS3 (or Photoshop CS3 Extended). Choose File > Automate > Photomerge. Choose Folder in the Use drop-down if you put the site photos in their own folder, or Files if they share the same folder with other images. Click the Browse button and select the folder where you stashed the site photos, or select the ten files individually. In Layout, select Auto, and check Blend images together. Click OK and you'll have to wait a minute as Photoshop works its magic.

Take a close look at what Photoshop has given you—zoom in and pan around the panorama. The seams between photos are practically invisible—seams are hidden by layer masks. Alt-click on a mask thumbnail to view it. Do that again to show the layer.

The pixels have all been aligned and blended so it looks almost perfect—well, except for the edges, that is. It is possible to merge photos vertically and horizontally at the same time, and that is the approach to take if you want to be able to interactively pan up and down very much. However, I didn't have the presence of mind to shoot two rows of overlapping images in the field.

Here the source photos overlap horizontally only, so you'll have to deal with the ragged transparent edges that you see on the top and bottom—these are areas where there is no pixel data from the source photos.

You could crop out the top and bottom edges, but I'm afraid that you'd lose too much of the ground, sea, and sky if you do that right away. Instead, you'll have a chance to flow the sea and sky into the edges to save more of the panorama from being cropped away.

Choose Layer > Flatten Image first, because Liquify doesn't work as a Smart Filter. The transparent pixels will turn white as multiple layers get flattened into the background, and that's OK. Now choose Filter > Liquify. Zoom in and adjust the brush size with bracket keys. Drag the Forward Warp tool (which is the default) over the edges to flow the sky up and sea down into the white pixels. Scroll over and continue warping all the edges the best you can for about 5 minutes. Click OK and dismiss the Liquify dialog box. Hopefully you reclaimed some height that would have otherwise been cropped.

Zoom out and drag the Crop tool over the entire image. Carefully adjust the crop handles to eliminate any edge areas that couldn't be convincingly liquified. Optional: Use the Clone Stamp tool to get rid of any smudges, dust, scratches, or stitching artifacts that you don't want in the panorama. I got rid of a boat antenna that got partially masked by Photomerge.

In my haste at the site, I neglected to photograph a tiny fraction of the scene in the parking lot. Choose Image > Canvas Size and add about 400 pixels onto the right edge of the panorama. I added my logo into this space; you can add yours or some text there if you like, or leave it blank. It's actually a nice technique to identify you or your firm somewhere in the panorama. I'll even show you how to identify this as a hotspot in the interactive panorama, so that clicking on the logo makes a hyperlink jump.

Choose File > Save for Web & Devices. Click the Preset drop-down and select JPEG Low. While you're still in the Save for Web & Devices dialog box, select the Image Size tab and type 700 in the new Height text box. Click Apply to make the panorama slightly smaller. Click the Save button and save the file as granville.jpg on the desktop.

I find that making a low quality JPEG with a large pixel size gives similar quality but smaller file size in the small interactive panorama window, compared to a high quality JPEG of a much smaller image size. Of course, using a low quality JPEG only makes sense if you are posting the interactive panorama on the Internet where you must optimize download times.

If on the other hand, you are planning to put the interactive panorama on a DVD-ROM where file size isn't an issue, then by all means set JPEG quality to Maximum. This will allow the viewer of the interactive panorama to zoom in greatly without sacrificing image detail. At this point you have completed the Photoshop CS3 portion of this tutorial. Save your work as a PSD file for future reference.

In case you are interested in exactly where I was in the world when I took the site photos, here is a placemark for your reference. The interactive panorama is hyperlinked within the placemark inside Google Earth. Consider creating this type of mashup for your projects.

The final portion of this tutorial involves editing the web page where the panorama applet will be displayed. I'm using Dreamweaver for this, but you can use the web design software of your choice, or even use a no-frills text editor such as Notepad on the PC. Don't worry if you've never done any web design or programming before—this part is very easy. You simply have to customize 10 lines of code to suit your purposes.

The applet that I am suggesting you use is called PTViewer. It is free and open-source software initially developed by Helmut Dersch, and later improved by Fulvio Senore—many thanks go to both of these most excellent individuals. I suggest using PTViewer version 2.8 for the best panning smoothness and speed. You can read about PTViewer 2.8 here and download the applet here. There are two versions of the compiled applet code, ptviewer.jar. I recommend using the smaller one that weighs in at 47KB, as I won't be showing you how to take advantage of the extra features in the larger version.

Click here to see the interactive panorama all by itself. Choose View > Page Source in your browser and take a look at the applet code. Then click the back arrow and come back here. The following is the applet code, reproduced on this page as non-executing text. I've numbered the lines in order to describe what each of them does (see below), but obviously you wouldn't number them in the HTML body.

01 <applet code="ptviewer.class" archive="ptviewer.jar" width=700 height=300>
02 <param name=file value="granville.jpg">
03 <param name=cursor value="MOVE">
04 <param name=pan value=60>
05 <param name=showToolbar value="false">
06 <param name=imgLoadFeedback value="true">
07 <param name=auto value=-0.1>
08 <param name="autoTime" value=220>
09 <param name=hotspot0 value="X97 Y50 u'http://www.scottonstott.com' n'Click me'">
10 </applet>

Line 01 identifies the java archive and class that is running the interactive panorama. Adjust the width and height as needed. Panoramas 2X wider than they are tall allow up and down panning.
Line 02 identifies the panoramic image source that you created using Photoshop CS3.
Line 03 is necessary to place the cursor into move mode, allowing interactive panning.
Line 04 sets the angle from the left edge of the image where the panorama will initially open.
Line 05 controls whether the toolbar will appear or not.
Line 06 displays "Loading Image" progress as a percentage while source is downloaded.
Line 07 sets up autorotation. Use negative value to rotate the other way. Omit tag to keep still.
Line 08 sets time for complete 360 degree rotation in seconds.
Line 09 creates a named hotspot that allows a hyperlink jump. Set URL and tooltip in single quotes. Set location by changing X and Y values as percentages within entire panoramic source image.
Line 10 closes the applet.

Click here to download the three files that are required to run the interactive panorama. They are ptviewer.jar, granville.html, and granville.jpg. Feel free to use these example files to help you bootstrap the development of your own interactive panoramas. Enjoy!

About the Author

Scott Onstott is a book and video author of AEC software tutorials. He has a degree in architecture from UC Berkeley and has served as an instructor there, in addition to working in several prominent engineering, architecture, and interiors firms in San Francisco. He has also worked as a technical editor and technology consultant.

Scott has contributed to over two dozen books and videos on AutoCAD, Architectural Desktop, VIZ Render, Revit, 3ds Max, VIZ, Photoshop, Illustrator, Painter, Fireworks, and Dreamweaver. He most recently co-authored AutoCAD:_Professional_Tips_and_Tricks with Lynn Allen. He can be reached via: www.ScottOnstott.com.

Tips & Tricks > Crafting Interactive Panoramas with Photoshop CS3 > Printer-friendly format