Instructor Richard Harrington shows you how to use the Photoshop plug-in Zoomify to share high resolution images on the web.
Distributed by Tubemogul.
Tags:How to Use the Zoomify Plug-in in Photoshop,photoshop
Grab video code:
Enhance your Photos for sharing, for printing, and for the web. Understanding Photoshop
Hi my name is Richard Harrington and welcome to another edition of understanding adobe Photoshop. Today we are going to look at a cool plug in that comes Photoshop, that is a great way to share high resolution images on the web so your clients could check them out. It is called, Zoomify and what it does. This takes a large high resolution image and breaks it up into an interactive image that can be viewed on the web quite easily. Let us see how.
So, I have gone ahead and open up an image here and you can use really any photo that you have and what you want to do is choose file export Zoomify. Now this is part of Photoshop CS3 so you will need to have that installed. When I do that it says what you want to do and you are presented with a couple of templates, here you could use a black, gray or white background or you could toss in a navigator. I highly recommend using the navigator because that will be useful as they try to navigate around the image. Now if you have got a photography background you know that the best way to present images is over a gray background. The idea here is that by using a neutral gray you are not influencing the viewer’s eye with the color.
The over black or white it may change how they feel about the exposure of the image or the saturation of color. A neutral gray is just that very neutral and has minimal impact upon the viewer’s experience of the photo. Well then choose the gray background here and we specify in output location. So let us just go to our desktop because all folders belong on the desktop and we will call this Zoomify. And I hit choose and then we have the ability to specify a quality here, now we are going to specify to use the maximum quality which is fine, which is down as 10. Although technically that is not maximum quality you can go all the way up to 12.
I have never quite understood why JPEG calls 10 maximum quality but the slighter goes 12 but that is okay, I am not a web person. Let us jump that back on the 10 which should be more than adequate and we will tell it to optimize the tables. You then specify how big of a window you want to use in the web browser. Currently it is going to use of 400 by 400 pixel image because these images is wider than it is tall. I going to changes this to 400 by 250 to more closely matches the original aspect ratio of the photo which is wider. We leave the open and web browser button check and then we can click okay. When you do this Photoshop is going to quickly cut this open to small pieces and build a webpage for you. You could then use this and put it into an existing webpage using an embed code copy and paste in the code etc.
You see here we have got our little image up top is the navigator showing us what is going on and we can go ahead and zoom in. And you see as you zoom in the image actually load at higher resolution, you could pen around the image and look at the individual details of the photo. The navigator up top here is just like Photoshop’s navigator you can actually grab that box, move around, and notice that when you pause it loads the image in at high detail. So, we have the ability to go in very far from magnification and actually pen around. This is a great way if you have a particular client who wants to look at the finer details of the image or do things like really check focus and that works great. You have got some basic navigation controls here that let them pen as needed and the last button will zoom you out. So very, very simple and its works very well this is actually a flash players scripts so you can go ahead and embed that as a swift file into a page. Let us jump back to Photoshop for a second; we will do that one more time with another image.
Let us go ahead and see file export zoomify. We will go ahead and go at the desktop there is a new folder that’ is fine. Good, and maximum quality, let us this time just use a gray background without the navigator and we will click okay. There we go it is loaded you see you could zoom in to see the image and as you zoom in it loads at high resolutions so you could check details like focus. We could pen around and look at the image seeing individual details and as we get to areas of the image it at loads at high resolution. This cuts down unload times because it only loads the quality image when it needs too when you are zoomed in.
Click the button here and that pulls all the way back out. If we drop out to the desktop really quick you will see here that we can actually easily access this. Here is this zoomify folder and inside is an HT mail document and then a folder full of images. It is using a swift file to play that back and then all of the individual image titles are preloaded so you can zoom in to different magnifications. This is a piece of cake you could very easily embed this into a website or webpage as needed. For understanding your adobe Photoshop I am your host Richard Harrington, be sure to check out resource blog at rastervector.com where you could subscribe to the free weekly pod cast as well as download additional tutorials and resources to help you get more at of adobe Photoshop.
For more resources visit. www.rastervector.com, read the blog and check out the book Understanding Adobe Photoshop.