Break an image into tiles

January 30, 2008 9:01 AM

Help me automate the splitting of an image into tiles.

I'm making a tile-based map-like program, and I want to be able to split a very large image into tiles for use in this. It might result in hundreds or thousands of tiles so I clearly won't do it all manually.

My initial image will probably be an .ai file, and I want to be able to output it as .png files for transparency. (So one cheap program I found online won't work, since it outputs to .jpeg.)

I have Photoshop CS3, and I think it's possible that I could make a batch processing macro of some sort, though I will need to learn more about it to figure out how.

So, any good tutorials on how to code more complex batch processing in Photoshop, or recommendations for other software I should use?

posted by RobotHero to computers & internet (8 comments total)

ImageMagick: convert -crop 50x50 myoriginal.ai mytiles_%d.png
will do the job, where 50x50 is your desired tile size. (I've never used it with an .ai file, but afaik that will work.)

See previously.
posted by Wolfdog at 9:12 AM on January 30

Also, check out the Slice Tool in PS3. It's got a lot of options and may be what you need. Particularly check out the "Divide..." button in the Slice Tool toolbar. It lets you chop up an image right quick.
posted by picea at 9:21 AM on January 30

Can you make a template in Image Ready that has one (blank) layer pre-sliced into equal squares and then just paste whatever in the layer behind it? This makes sense to me now, but I haven't used the program in a while.
posted by JeremiahBritt at 9:26 AM on January 30

Can ImageMagick name the tiles according to x and y indexes?
posted by RobotHero at 9:43 AM on January 30

Can ImageMagick name the tiles according to x and y indexes?

the documentation doesn't seem to specify how it names the output files, i'd give it a try and see what you get. if it doesn't do it automatically it would be simple to whip up a script to customize the output filenames. if you know the dimensions of the original images, just calculate the coordinates of each tile and call imagemagick -crop for each tile passing it the coordinates and specifying an output file in whatever format you want.

if you aren't sure how to do this drop me an email and i'll whip up a script for you this evening (6 hrs or so from now)
posted by waxboy at 9:58 AM on January 30

Photoshop and slices can certainly divide it up. I believe one of my crappier image editing tools can do this too and also create a zoomable (ala google maps) HTML page for you. Unfortunately, I'm at work and will need to get back to you on this. It was probably PhotoImpact.
posted by chairface at 10:50 AM on January 30

Zoomifyer comes with a tool that does just this, called Zoomifyer EZ. It splits an input image into 256x256 JPEG tiles at a range of resolutions, named according to their row/column in the source image. I've heard that some of this functionality has been wrapped up in a new version of Photoshop, but can't confirm. We have a tutorial connected to Modest Maps that shows how such tiles might be used as a geographic map. If your input image is truly huge, you may want to look into a tool such as VIPS, optimized for random-access to big files.
posted by migurski at 11:08 AM on January 30

If you are good with javascript you can write a script that will run in Photoshop.
posted by doctor_negative at 1:14 PM on January 30