BarsClubsCoffee/CafeContact UsDevonshire QuarterHomeHotelsLeopold SquareMenusPhotosPubsRestaurantsSportTheatres etc.TransportWeatherWest Street

Photoshop Panoramas

In this (fairly) advanced tutorial, we are going to take a series of images, 'stitch' them together in Photoshop, 'Zoomify' them and place them in a website, where you can scroll from side to side and zoom in/out.

Watch a short video.

Ever needed to place a large, high resolution photo on a website so your visitors could see all the fine details in the image, but the file size and pixel dimensions made it impractical? It may have been a product shot for a company, or perhaps you have an online portfolio of your photography work and you wanted to show higher resolution samples of your images, but it just wasn't something you could easily do on the web, at least not without making your website completely inaccessible to most of your visitors. Thanks to Photoshop CS3 (and later) and its Zoomify Export feature, those days are over! With its new Export To Zoomify option, Photoshop CS3 comes with built-in support for making high-quality images zoom and pan on the web for fast, interactive viewing. In this tutorial, we'll see how easy it is to do.

To see where we're going, take a look at this example. Get the picture?  Use your mouse wheel to zoom in and out and press and drag to scan from side to side.

What you need for this tutorial is Photoshop CS3 or later (that's when the Photomerge and Zoomify commands were introduced), a fairly decent camera + tripod and Dreamweaver (or other web-authoring software).

When I say 'fairly decent' camera, you don't have to spend hundreds on this and fancy lenses.  Instead, go for a digital cameral that has a high number of megapixels.  I used this one, which is around $100 at present and has 14 megapixels (and 18x optical zoom!).

Setting up the shot: To get the most out of Photoshop's Photomerge command, it's highly recommended that you use a tripod when taking your photos, although it's not entirely necessary as long as you remain standing in the same spot as you snap the images and don't wander around. You'll want to lock in your exposure, focus and focal length so they remain constant in each photo. It's also very important that you overlap each image by at least 25% so that Photoshop has enough detail to compare between images when trying to stitch them together. If you're shooting with a wide angle or fish eye lens where a lot of geometric distortion occurs in the images, you'll want to double or even triple that amount since Photoshop will need much more information to work with. Finally, keep in mind that the more photos you're stitching together, the more memory Photoshop will require since it needs to open all the images at once. If your digital camera shoots massive-size files, it may be a good idea to save smaller versions of the photos first and work with those, otherwise Photoshop may slow to a crawl or may even run out of memory before the panorama is completed. (To get you started, you can download this zipped set of 12 portrait-style images).

After downloading your images to your computer, it's time to get into Photoshop.  Go to FILE...Automate...Photomerge... This dialogue box will appear:

Photo Merge dialog box

Use the 'Browse' button to find your images (they will then appear in the centre pane).  Along the left side of the Photomerge dialog box are the Layout options, which are basically different ways that Photoshop can try to align the images together. In most cases, the Auto option at the top works great so you'll definitely want to try that one first. If, for some reason, the Auto option doesn't give you the results you expected, you can always undo the command and try again with one of the other options, with Perspective, Cylindrical and Spherical usually being the three best choices. However, since Auto works almost every time and it's selected by default, you usually won't even have to worry about these Layout options:

This can be a lengthy process as Photoshop 'works out' how to best blend the images together. It will create layer masks etc. automatically.  When this process is complete, an extremely large file will have been created (If you are using the sample files on the download, it will be approx. 600 Mb.)  This is because the same number of layers will have been created as the number of images which were used to make the panorama. (For more details on this process, see this)

The first task is to go to LAYER...Flatten Image.   This will considerably reduce the file size. It is highly likely that the image will have a 'ragged' top and bottom. 

Original panorama

Bring in the rulers (Ctrl. + R) and drag in a couple of guides (shown above in yellow).  Select the Rectangular Marquee Tool Rectangular Marquee Tool and drag a selection between these guides - making sure the ragged edges at both left and right sides are omitted.  Go to IMAGE...Crop.

Cropped panorama

This will give a neat image as above.  We're nearly finished with Photoshop and it's time to 'Zoomify' the image.

IMPORTANT: Zoomify only works with .jpg and .png files (not .gif).  If you go to FILE...Save for Web & Devices, you will probably get this message:

Save for Web

This is because of the massive image size, lack of memory etc.  Instead, go to FILE...Save As and make sure .jpg is selected under 'Format'.

Next, let's go to Zoomify>>>