I’ve been spending a lot of time with Photoshop recently… Whether it has been retouching video or images, creating panoramas, or working with my aerial photos, it has been a lot of fun. One thing that I’ve been doing is exporting really large images to the web. So far this has been a very manual process… Export from Photoshop using Zoomify. Then, since the default Zoomify renderer uses Flash (and I want this consumable on mobile devices), take the Zoomify image tiles, and put them into a custom-coded HTML experience using the Leaflet tile engine with a custom tile layer.
Leaflet is normally used for web-based mapping, but it is a perfect solution for rendering image tiles on the web. It already has touch and mouse interactions, inertial scrolling, progressive viewing, and a comprehensive API that can be extended if you so choose.
I’ve done this enough times that I figured “There has to be an easier way”… and there definitely is. I’ve created a new Zoomify template that allows you to export from Photoshop’s Zoomify feature directly to HTML, leveraging the Leaflet engine. All of the code and installation instructions are below in this post. Check out the video below to see it in action:
Samples
Here are few samples from the Zoomify output; both are the compositions that I showed in the video above. Use the mouse or touch interactions to pan and zoom on each of them.
The first is an export from a 10MP aerial panorama (4340×2325 pixels), which was created by stitching together multiple images captured with a GoPro camera and remote controlled helicopter.
Click here to view in a new window.
The second example is a massive 139MP composite image (14561×9570 pixels). I created this by stitching together 48 10mp images in Photoshop. It’s not perfect, but shows how far you can zoom into an image… some images had different exposures, some were out of focus, there is still some perspective warp, and I definitely have some bad stitching seams. This image is so huge that I actually maxed out the system RAM, and filled up all hard disk space with the memory swap file when creating it (I had over 100 Gigs of free space)!
Click here to view in a new window.
Installation
Disclaimer: This is not an official Adobe sponsored process – you will get no technical support for any issues that you may run into.
It’s really easy to get this template set up in just a few steps:
- Download the template code from https://github.com/triceam/Leaflet.Zoomify (there is a “Download Zip” link).
- Extract the zip file and copy the following files to Photoshop’s Presets/Zoomify directory. On OS X, with the default configuration, these files should be located in /Applications/Adobe Photoshop CC/Presets/Zoomify/
- L.TileLayer.Zoomify.js
- Zoomify Leaflet HTML.zvt
- leaflet.css
- leaflet.js
- Restart Photoshop.
- When you have a file open that you want to export, choose File -> Export -> Zoomify
- Then select the “Zoomify Leaflet HTML” template that should now be in the list. Select an output location, base name, and image options, and hit “OK”. Ignore the browser width and height, since the template ignores these. Instead, it takes 100% of the width and height of the browser window.
- This will generate all of the image tiles and the HTML structure. From here, do whatever you want with it… You can modify it, put it on a server, or anything else. the file output will look something like the image below. You will have a folder that contains the generated HTML file, the Leaflet JS and CSS files, and a directory that contains the generated tiles and appropriate XML metadata.
All of the code is available on github at: https://github.com/triceam/Leaflet.Zoomify.
Enjoy!