AECbytes Tips and Tricks Issue
#19 (June 14, 2007)
Crafting Interactive Panoramas with Photoshop
CS3 and PTViewer
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 workbut
that's all changed in Photoshop CS3.
You can create stunning panoramic images in Photoshop
CS3 with little effortin 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 thatand 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!
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
youzoom in and pan
around the panorama. The seams between
photos are practically invisibleseams 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 perfectwell, 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
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 bottomthese
are areas where there is no pixel data from the
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
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
In case you are interested in exactly where I
was in the world when I took the site photos,
is a placemark for your reference. The interactive
panorama is hyperlinked within the placemark inside
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 beforethis 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 Senoremany 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
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"
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'">
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
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
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
Line 10 closes the applet.
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
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
with Lynn Allen. He can be reached via: www.ScottOnstott.com.
If you found this article useful and have not
yet subscribed to AECbytes, please consider
doing so. Subscription
is free, and more subscribers will allow this
publication to provide more of such content
Tricks > Crafting Interactive Panoramas
with Photoshop CS3 > Printer-friendly