Sign Up Now
Twitter Facebook Flickr Buzz
PhotoshopSociety.org
 
Search:   
 
Social Networks

LOGIN     

Go
Forgot Password? Go Join Now
Sign Up for Starter's Pack (Free)
Call (800) 223-8720
Email custserv@photoshopsociety.org
 
Need Web Solutions? Get Free Sample Issue

Inside Photoshop: Search Articles

  Search Library:  
 
2018 |  2017 |  2016 |  2015 |  2014 |  2013 |  2012 |  2011 |  2010 |  2009 |  2008 |  2007 |  2006 |  2005 | 
 

Export high-resolution web images with CS3's Export to Zoomify command

Added on Tuesday 22nd of April 2008 07:18 am EST
 
Application:
Adobe Photoshop CS/CS2/CS3
Operating Systems:
Microsoft Windows, Macintosh


Optimizing web images has always been a difficult balance between image quality and file size. But with CS3’s Export to Zoomify command, you can now flaunt your high-resolution images on the web without increasing your load time.

To export high-resolution images for web viewing, we’ll:
 

  • Introduce you to the Export to Zoomify command and its origins, to acquaint you with this new feature better.
  • Show you how to use the Export to Zoomify command and explain the different export options.
  • Fill you in on some of the known issues with Export to Zoomify so you can better prepare yourself.

Anyone who’s ever optimized web images knows that the struggle to maximize image quality but minimize file size is often a fruitless battle. In the end, bandwidth dictates that file size usually prevails and image quality suffers. But Photoshop CS3 comes to the rescue with the new Export to Zoomify command. Now you can post high-resolution images to the web for an unparalleled end-user experience. We’ll show you how.

What is Zoomify?
Zoomify is a new export option bundled in Photoshop CS3 that allows you to export high-resolution images to the web. But that’s not all: End-users can then zoom and pan the image for an interactive experience. When you use the Export to Zoomify command, the mini-application Zoomify breaks your image down into image tiles that you store on your web server with the rest of your web content.
                 Yes, Zoomify is an application created by the company Zoomify, Inc. According to Zoomify’s website (www.zoomify.com), the Export to Zoomify command included in Photoshop CS3 is a beta version. This is where a little bit of bad news comes in. The Export to Zoomify command “involves technology not considered ready for sale or use on production web sites and is provided solely to support testing to ensure a high-quality final shipping product,” states Zoomify in a disclaimer on their website.             But that doesn’t mean you can’t still have some fun with this new feature!

Let’s zoom!
You can’t fully appreciate the Export to Zoomify command until you see it in action, so let’s test it out. To follow along with our example, download the file zoomify.zip from the URL given at the beginning of this article. Then, extract the file hug.psd, launch Photoshop CS3 and open the file. (Images provided by PhotoSpin. Some images modified for educational purposes.)

Note: Unfortunately, due to image rights, we can’t supply a high-resolution image for download. However, the image we supplied is larger than a standard web graphic, so it will still suffice for this tutorial. You can also follow along with any other high-resolution image.


A

To Export to Zoomify:
  1. Make sure your image is 8-bit (Image > Mode > 8 Bits/Channel) and in sRGB format (Choose Edit > Color Settings, select sRGB from the Working Spaces RGB pop-up menu). The reasons for these settings are that the Flash player requires 8-bit images and sRGB format will ensure consistent web color across Macintosh and Windows platforms.
  2. Choose File > Export > Zoomify to display the Zoomify Export dialog box.
  3. Select an option from the Template pop-up menu to determine how your web page displays. We selected Zoomify Viewer (Black Background) for our example, as shown in Figure B.

Tip: The options include different colored backgrounds and the option to include a navigation window or not. The navigation window is similar to Photoshop’s Navigation panel. For this example, we find the navigation window distracting to the image, but you should test all the options to find your personal preference.


B

  1. Click the Folder button located in the Output Location pane to display the Choose The Output Folder dialog box.
  2. Navigate to an existing folder or create a new one with the dialog box options, a...