Photoshop Crops Up Everywhere

If it seems elitist to suggest that you need Photoshop to do any serious work in any visual medium, consider this:

• The most you will ever spend on Photoshop is $600. After that, it's (relatively cheap) upgrades.
• You will spend a lot of time trying to figure out how to do things in your budget image editor that Photoshop handles easily.
• Carl Sagan estimated that there are billions and billions of Photoshop tutorials and how-to's online. It's not hard to learn the basics.
• If you were really concerned with saving money, you would quit your bitching and move over to Linux. You can have the Gimp for free.

After all that, it occurred to me that you could actually do this in Fireworks. Oh, well. Whatever.

Next step is to open the images in PHOTOSHOP (uncomfortable pause, as after a fierce argument), and apply a transparency mask to the background.

Why a transparency mask, you ask?

I was thinking... we are going to get 'gipped on our coolness-to-kilobyte ratio using all these bitmaps with lots of empty white space around the interesting part. Unless... we apply a transparency to each one. Then we can use anything as a cool background inside Flash.

In this project, using the transparency mask is really a judgment call. On one hand, using it probably puts you just over the borderline in the departments of file size and processor demands. In this particular case, using a transparency mask instead of a plain background makes the difference between less than 60k and almost 100k. Personally, I don't rely on users' goodwill to get my content into their browser - I like to design so that something loads instantly (and the version using transparency does not load instantly).

Drawing the image with a transparency is also a strain on older processors, (the old pieces of crap that cheapskate consumers use - the ones that cutting edge multimedia is supposed to target). Users with CPU's as slow as Pentium I will see skips instead of smooth rotation. (I went ahead with the transparency because it is more fun, but when I do the actual project for which this was a demo, I will have to find a solution).

Some solutions would be:

• Use fewer images (maybe 10 covering 200 degrees of rotation - that would cut the file size in half).
• Use a plain background (instead of fussing with masks, just delete the bg).
• Take extra care to crop out all unnecessary areas (this wasn't done in this example, primarily because the initial novelty is wearing off and I'm ready to be done with this article).
• Incorporate the background into every .pad image, so that it appears to be static.

Sooo... my method is as follows:

• Use the wand tool to get the mostly-correct selection.
• Invert selection (Ctrl + Shift + I) so that (almost) only the model is selected.
• Change to quick mask mode (as shown here)

• Use the paintbrush tool (with a hard-edged brush) to get rid of the leftover scraps.
• Change back to normal mode.
• Duplicate the background layer, then delete the original.
• Apply a transparency mask to the copied layer (Layer > Add Layer Mask > Reveal Selected).
• Export for Web (Ctrl + Alt + Shift + S) and save as PNG24

Note: I would review each image individually as you export to look for little bits you missed in the selection process. Remember to check the "Transparency" option in the export dialogue.

If you are careful with each image, you should have a nice transparent set of images.

My 7¢ Photo Studio
3Dino - Another Approach to Flash 3D
Structuring the Flash Movie