Boating Lake, aka Photoshop is still useful for the web

So I made a silly thing one evening. I’ve embedded it above, and you can see the source at https://github.com/crccheck/boating-lake for more details about the inspiration and implementation. I thought my two readers might be interested in my process for preparing the graphics.

Finding the source

A quick Internet search revealed a clean source for the comic. I downloaded it and brought it into Photoshop.

Creating a mask from line art

Making cutouts is the infantry of the Photoshop army. There are more tools and techniques for making cutouts than any other Photoshop task; I thought I’d show favorite technique of cutting out line art.

Duplicate the layer to preserve your original. The goal of the next steps is to use the art as its own alpha mask. Select All (Ctrl+A), Copy (Ctrl+C), Create a layer mask, Alt+Click to Enter the layer mask, Paste (Ctrl+P), and then Invert the the mask (Ctrl+I).

If you exit the mask, you’ll see that you’ve sort of created a mask without using a brush, eraser, lasso, or wand!

Now to fix the alpha, go back and re-enter the layer mask (Alt+click the mask in the Layers palette).

Edit the mask’s levels (Ctrl+L). I’m going to make a mask for the characters in the “Key” area first, so I’ll set the black point and white point accordingly.

It’s a good idea to tighten up the black point and white point a bit to make the alpha cleaner.

Now I have a nice mask for the characters.

Now I just Copy Merged (Shift+Ctrl+C)/Paste (Ctrl+V) each shape into its own layer. I kept finding mistakes and had to go back to fill in the robot’s face, and resize the characters to be 15% smaller so they would fit in the boats.

The process is the same for getting the boat and waves, except you pick the water as the black point for the layer mask.

Repeat this process to create a mask for any other element you want to isolate. I also grabbed the title and the entire key.

Automating the export

To export each sprite, make sure their layer is visible, and hide all the rest.

Then go to File -> Scripts -> Export Layers to Files…

Make sure File Name Prefix is empty, File Type is PNG, Transparency is on, and Trim Layers is on. The process may take some time, but you’ll end up with a nice pile of sprites.

Extra Hints

• Depending on how clean the source material is, you’ll probably want to run the “Despeckle” de-noising filter to remove jpeg noise.
• If your alpha isn’t very clean, you can try tightening the black point of the layer mask.
• I have a layer called “bg fill” that I usually fill with a solid color. I use this to help catch mask spills and refine edges.
• If you need to do isolated manual cleaning on a layer, I create a new document with just that layer. There’s a shortcut for doing this! Layer -> Duplicate Layer… Then set the Destination Document to “New”.
• You’ll notice the file names look like  _0000_boat.png or _0000s_0001_robot.png. The number is the layer number, and multiple numbers mean it was in a group. I once wrote a Photoshop script that did the same thing but without those numbers, but Photoshop’s built in script got better, and I didn’t feel like upgrading my script, so I just use the built in script now and manually clean off the numbers. If you need to do a lot of files, you can use a mass file renamer (For Windows, I recommend ReNamer by den4b, which has preview and supports regular expressions).
• To speed up the export, delete as many hidden layers as possible. The script isn’t very smart.

Errata

I ended up exporting the waves separately for some reason, so they’re not documented here. Also, I prefer Photoshop for Windows over Mac.