Script to Resize Images & Slice into Square Tiles

Posted:

Inspiration

This Adobe Photoshop Script (written in JavaScript) is handy for use with Core Animation's CATiledLayer as used in the Xcode sample project: Photo Scroller. It was inspired by Cutting Large Images into Tiles for UIScrollView. I tried out that program, but it only worked on a photo by photo basis and only 1 level at a time. I wanted something that could do multiple images at multiples levels. Thus, I tried using Paul Alexander's ImageMagick Ruby script (tile.rb) for tiling images, but for some reason, my images came out better when I resized them with Photoshop than with ImageMagick, so I figured I'd rewrite Paul's script for Photoshop.

Learning How to Write a Photoshop Script

This is the first Photoshop script I've written, but I've had previous experience with JavaScript and the Photoshop JavaScript Reference has fairly good documentation. It's funny that I found it more useful than things I found online. Being a Ruby developer, I'm used to finding more goodies on the Internet. However, wherever the documentation did not have thorough examples, I just googled the property or method in question and was able to find sample scripts. For example, I googled historyStates undo and found this script that uses Photoshop undo history. You can also learn things by analyzing the interesting sample scripts that come with Photoshop and live in the directory that you install this script into (See the comments at the top of the script for install instructions.). Anyway, on with the fun!

How It Works

The script prompts you to select an input & output folder. Then, for every .jpg file in the input folder, it:

There are a few things you'll probably want to change in the script to fit your specs:

Discussion & Conclusion

I think that's it, but if I've missed anything, let me know. It's best to contact me through github. The program is not very modular rather procedural but should be pretty easy to understand. It uses historyState to go back to the original image after cropping it and saving each time. I didn't see a way to use the Slice tool within the JavaScript API. If you know of ways to improve the script, please let me know. It worked for me on Photoshop CS4 on MacBook and was fast enough for what I was doing. It only took like a minute or two to run on 20 pictures. Jeff LaMarche's Tile Cutter is probably faster because I think he uses NSOperationQueue to run the processing for each row of the image on a separate thread. That means it processes all the rows at the same time (asynchronously or in parallel) whereas this script does one row at a time (synchronously or in series).