Written by Steve Patterson, Photoshop Essentials.com
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 its new 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.
Photoshop CS3's Zoomify Export: Bringing High Resolution Images To The Web!
Here's an image of an SUV open inside Photoshop CS3:
Let's say I needed to upload this photo to my website. I want my visitors to be able to see all the fine details in the image, which means I'll need to keep the image as high resolution as possible. Of course, that's not so easy to do on the web, when a lot of people are using small size monitors set to low desktop resolutions of 1024x768 or even 800x600, and of course the web browser itself takes up a lot of screen real estate, not to mention the fact that many people are still using slow speed dial-up internet connections and the file size of a high resolution image can easily be 1 MB or larger, which would take far too long for those people to download.
With my image open inside Photoshop, I'm going to go up to the Image menu at the top of the screen and choose the Image Size option to bring up my Image Size dialog box so we can see exactly how large this image currently is.
Photoshop's Image Size dialog box tells us two main things - the actual pixel dimensions of the image in the appropriately named "Pixel Dimensions" section, and how large the image will print on paper in the "Document Size" section. Since we're dealing with the web here, we really don't care how large it will print, so all we're concerned with is the top portion of the Image Size box, "Pixel Dimensions", which is telling us that this image is currently 2963 pixels wide by 1659 pixels high. Considering most people run their desktops at 1024x768 or lower, at its current size, this image wouldn't even fit on their screen! What to do.... what to do...
Normally what you'd have to do in order to get this image onto a web page in a practical manner would be to reduce the size of the image considerably, but then that means we don't end up with the high resolution image we needed, so that's not going to work. We need to somehow get this full size image onto the website.
Photoshop CS3 and Zoomify to the rescue!
Photoshop CS3's Zoomify Export: File - Export - Zoomify!
If it looks a little intimidating at first, don't worry, it's really very easy to use. The Zoomify Export dialog box is divided up into four main sections - Template, Output Location, Image Tile Options, and Browser Options. It won't take long to cover each one, so let's take a quick look at them.
Template:
The first option inside the Zoomify Export dialog box, "Template", gives us a few choices for how we want the Zoomify Viewer - the area in which our image will appear - to look on our web page. We can select from a simple black, gray or white background and have the image appear on its own in its Zoomify Viewer (which we'll see at the end of this tutorial), or we can also include a little Navigator window in the top left corner of the Zoomify Viewer, which acts very much like the Navigator palette inside Photoshop and will give your visitors an easy way to scroll around inside your image when they've zoomed in close. Again, we'll see how this works at the end of the tutorial, but for now, since my web page here uses a white background, and I want to include the little Navigator window in the top left corner, I'll choose the bottom option, "Zoomify Viewer with Navigator (White Background)".
Output Location:
The "Output Location" is pretty straightforward. It simply lets you specify where you want to save the files that you will then upload to your web server. It also let's you specify a "base name", which is just a name that all of the Zoomify Viewer-related files will start with so you'll know which files to look for. My SUV image is named "suv-large.jpg", so I entered "suv-large" for a base name. I'm pretty original that way. You can enter whatever you like.
Image Tile Options:
The "Image Tile Options" section is really the image quality options section. This is where you specify how much jpeg compression is applied to the image. The lower the quality setting, the smaller the file size but if you set the quality too low, you'll notice a lot of compression artifacts in the image, making it look unappealing and kind of defeating the whole purpose of being able to show high resolution, high quality images on your website. You can type a number between 0 and 12 directly into the Quality input box, with 0 being the worst quality you've ever seen and 12 being a ridiculously large file size, or click on the drop down list and choose one of the preset quality levels. I'm going to choose "High" for my quality level, which automatically sets a quality value of 8 and is a fairly good balance between file size and acceptable image quality. There's also a slider bar that you can drag left and right. Dragging to the right reduces the file size, and dragging to the left improves image quality. Leave the "Optimize Tables" option checked.
Browser Options:
Finally, we have the "Browser Options" section. This is where we specify how large we want the Zoomify Viewer to be on the web page. By default, it's set to 400x400, but I've changed it here to 640x480. You can set your Zoomify Viewer dimensions to whatever size you need. The "Open In Web Browser" option, when checked, will tell Photoshop to open up your web browser after it's done doing its thing and show you what your "zoomified" image looks like with the options you've selected.
Now that I have all my settings selected, and I have my desktop set as the location where my Zoomify files will appear, I'm going to go ahead and click OK, and Photoshop will convert my image into it's "zoomified" version.
Photoshop CS3's Zoomify Export: What's Happening To My Image?
When you click OK, Photoshop CS3 and the Zoomify Export feature take your large, high resolution image and slice it up into a bunch of much smaller sections, as you can see below:
These little sliced up sections are called "tiles", which is why the option for setting image quality in the Zoomify Export dialog box is called "Image Tile Options". What I was really doing there was setting the quality for each of these little image tiles that it was about to create. It then places all these little image tiles into a folder in the location you specified and names the folder whatever you typed in as your base name, followed by "-img", indicating that this folder contains all of your images. In my case, I ended up with a folder named "suv-large-img", since the base name I entered was "suv-large", and it was placed on my desktop, since that was the location I specified.
Photoshop also adds two additional files into that folder - an "ImageProperties" XML file and a "zoomifyViewer" Flash file. This Flash file is the Zoomify Viewer that you'll see on the web page, and it's what fits all those little image tiles back together like puzzle pieces and displays your image as a whole in the web page. You don't need to worry about any of this though. In fact, you don't even have to bother looking inside the folder if you don't want to concern yourself with any of these little interesting tidbits. All you need to know is that you'll need to upload that entire folder to your web server in order to view the image on your website.
Zoomify will also create an HTML file for you which is the web page that your zoomified image will appear in. It will be named whatever your base name is, with a ".html" extension on the end. In my case, the file is named "suv-large.html", and again it was placed on my desktop. This HTML file contains all the code needed to display the Zoomify Viewer on the page. All you need to do is upload this HTML file, along with the folder containing your image tiles, the XML file and the Flash file, to your web server. So one file and one folder, that's it. Make sure you upload them both to the same place on your web server. Then simply point your web browser to that page on your website and assuming you've uploaded everything correctly, you'll see your image inside the Zoomify Viewer!
If you want to see what everything looks like and how it works before uploading it to your web server, just double-click on the HTML file and it should automatically launch the page inside your web browser. If everything looks the way you expected, you can then go ahead and upload the folder and the HTML file.
Photoshop CS3's Zoomify Export: The Zoomify Viewer In Action
Okay, we've talked about how to set up the Zoomify feature long enough without actually seeing what it does. Time to put it to work. Now, I'm going to take things a step further here and rather than having you click on a link to go to a completely separate web page to see how the Zoomify Viewer works, I'll just embed it right into this page. If you're interested in learning how to embed the viewer into an existing web page, I'll cover that in another tutorial, since it's beyond the scope of this one.
And here, at long last, is Photoshop CS3's Zoomify feature in action:
| Powered by Zoomify |
How does it work? Well, at first, it may not look like much. What you're seeing above is the Zoomify Viewer, set to dimensions of 640x480 since those were the dimensions I set in the options a few minutes ago. I also selected a template for it that included the Navigator in the viewer, and if you look in the top left corner of the viewer, you'll see it there. So what now? Well, go ahead and click anywhere inside the image! The SUV will zoom in! Click it again, and it will zoom in further! Once you've zoomed in a ways, click and drag your mouse around on the screen and you'll pan the image around! You can also click and drag your mouse inside the Navigator to move the image around, just like you can with Photoshop's Navigator palette.
(Note: If you're viewing this with Internet Explorer, you'll probably have to click the Zoomify Viewer once to activate it and then click it again to see the image zoom in. You can blame Microsoft for that one.)
You can also use the slider bar at the bottom of the Zoomify Viewer to zoom in and out. Drag it right to zoom in and left to zoom out, or click the "+" and "-" buttons to zoom in and out, and then use the arrow buttons to the right of the slider bar to pan the image up, down, left and right, or you can use the arrow keys on your keyboard to do the same thing. The last button on the right resets the image back to it's default zoom setting.
Notice how parts of the image appear very blurry and low quality at first and then slowly fade up to high quality? That's how the Zoomify Viewer is able to display such large, high resolution images on the web. Rather than trying to load the entire high resolution image at once, it only loads the small portion of the image that you're currently looking at in the viewer. That's why it divided the image up into all those smaller tile sections, so it could load only a few tiles at a time as needed. Again, this isn't something you need to know in order to use the Zoomify Export feature. I just find it interesting. All you need to know is how to access the option (File - Export - Zoomify), what settings to enter into the Zoomify Export dialog box which we covered above, and then how to upload both the HTML file and its companion folder to your web server. That's all there is to it!
Adding large, high resolution images to the web is now extremely easy and practical thanks to the new Zoomify feature inside Photoshop CS3!
No comments:
Post a Comment