Easy image decompositing with Adobe CS

October 12, 2011 11:13 AM

What is the best way to use Adobe CS to chop an illustration into multiple graphic files that can later be recombined by software to recreate the original illustration?

I have about 250 cartoon images. Each image has a background and two or three foreground characters.

I need to turns each cartoon image into separate graphic files (probably PNGs) that can be layered on top of each other (composited) to recreate the original cartoon image. There needs to be one graphic file for the background and one for each character.

So far this is trivial. You just bring the cartoon image into Photoshop, cut/paste each character and the background into separate layers, export each layer as a PNG with transparency, and you have have a set of PNGs that can be composited to recreate the original image.

Here's the nontrivial part: I want each of the foreground character images to be trimmed down to the minimal bounding box that will fully contain it. In other words, trim off all the excess transparency. It is easy to do this in Photoshop and then save out that image. The problem is that I then have to manually look up and record the position of that character's bounding box in the full illustration, so that I can place it correctly during the compositing process.

I would rather not do this by hand. I suspect that there is some straightforward workflow that will do what I want --- or something close to it --- automatically. You've got to be able to export layers from Photoshop with minimal bounding boxes in a format that allows them to be composited, don't you? I suspect I'm reinventing the wheel here, using inappropriate tools, and I'd rather not do that.

I have programmers on hand, so if the data doesn't come out in exactly the right format, that's not a problem. We can massage it. So if, for example, Adobe CS can turn this into a web page with html that places each image, that's fine.

We have Photoshop, Illustrator, and Flash on hand, and we could get other tools if there's something that will make this tax go more quickly and painlessly.

posted by alms to computers & internet (12 answers total)

Hmm, maybe this could be done with Adobe Fireworks?
posted by alms at 11:22 AM on October 12, 2011

It might help if you tell everyone what version of the CS suite you're using and on what platform.
posted by Brandon Blatcher at 11:59 AM on October 12, 2011

CS 5 on the Mac.
posted by alms at 12:24 PM on October 12, 2011

I don't understand the nontrivial part, are cropping the foreground images just to re-place them at the same position? Are you just trying to save diskspace or something?
posted by rhizome at 12:25 PM on October 12, 2011

Are you just trying to save diskspace or something?

We're creating graphic assets to be used by a game.

Here's another example that might be easier to understand. Here's the home screen of Cut the Rope. It consists of a background, three large buttons, and two smaller buttons.

Let's say this screen was designed by a graphic designer using Photoshop. Then it comes time to create assets for the programmers to put into the app. So the designer exports the background image and the five buttons, for a total of six PNG files. However, when it's time to put them in the app, the programmers need to figure out exactly where to place the buttons. That information has been lost in the process of exporting the six PNG files from Photoshop.

I'm asking for a way to export those six PNGs from Photoshop (or Illustrator, or Flash, or whatever) without losing that information.

Of course, it's possible to create this home screen with a single PNG rather than having separate PNGs for the buttons. But there are advantages to having separate PNGs, especially when it comes time to highlight buttons as they are pressed, etc.

My circumstance is analogous to this.
posted by alms at 1:09 PM on October 12, 2011

Can the programmers use a reference image that has all the elements as a background object. Then, layer the actual production background and objects over it, matching-up the location. Then, when everything is in-place, remove the base reference image.
posted by Thorzdad at 1:15 PM on October 12, 2011

Can the programmers use a reference image that has all the elements as a background object.

We do that when we're laying out the images using a GUI tool, like Interface Builder. So that's what we'd use for something akin to the Cut the Rope example. But for the situation I'm looking to address now, we're not using a GUI layout tool. We need the location of each image as a pair of numbers that we put in an XML file.

This does raise an interesting possibility, though. It would probably be pretty simple to write our own layout tool for this purpose. It would let you open and place images and then generate the XML. Hmmm...

Well, that's a possible fallback if there's no way to do it built into CS. I'm still feeling like there must be, though.
posted by alms at 1:43 PM on October 12, 2011

It may be a better idea to just save the PSD with the layers, and have the programmers read the PSD file. It's not really a lightweight format, though.
posted by zsazsa at 1:46 PM on October 12, 2011

Try this:

Create a box in Illustrator fits over the entire dimensions. Then give a fill and stroke of none. Once it's read into other CS apps, they'll position the elements based on the placement of the unstroked and unfilled boundaries of the Illustrator box
posted by Brandon Blatcher at 1:58 PM on October 12, 2011

If you create slices for each layer, you can export it to HTML and set it to absolute position each slice. This would create a CSS file with each image's coordinates. This would only work if your layers don't overlap. And creating all those slices might be more work that just writing down each layers bounding box manually.

You could import the PSDs into Illustrator, then export to HTML. This will create individual images with an alpha channel for each layer, all exactly the same size as the whole image. From there, your programmers could write to script to figure out the top-most and left-most non-transparent pixel, which would give you the coordinates for that image. Then crop it down to its minimum bounding box.
posted by AlsoMike at 2:05 PM on October 12, 2011

I used to use something like this at a job 10 years ago--it would split out a PSD into separate layers and a text file with coordinates for the images.

However, it was a custom in-house tool and the company no longer exists. However, PhLayer looks to the exact same thing!
posted by fifteen schnitzengruben is my limit at 4:14 PM on October 12, 2011 [1 favorite]

AlsoMike: I figured out yesterday that you can do a pretty good job of it with slices. The trick is to make just one layer visible at a time, create a slice for that layer, do the export, delete the slice, make the next layer visible, etc. We'd need to do most of this anyway to export the PNGs, and by adding the slices we get the coordinates in easy-to-parse xml.


But, that's not necessary because fifteen schnitzengruben is my limit has found an app that does exactly what we need! Yay! fsiml, thank you so much. You have just save me and my coworkers mountains of work and headaches over the next couple of months.

Thank you, thank you, thank you. And thanks to everyone who chimed in to help figure this out.
posted by alms at 8:29 AM on October 13, 2011