About Advanced Flash Tactics

Advanced Flash Tactics or AFTs are techniques that come from deep within the Flash Art Of War, the oldest Flash military treatise in the world. Each AFT is designed to be quickly digested, usually only taking a few minutes to get up and running, and contains valuable information you can directly apply to your next Flash campaign. In this AFT I will go over - Photoshop for Developers.

As a Flash Developer chances are you rely on Photoshop for most of your external image editing needs. That is why I thought I would put together a short list of tips to help make your life easier. The goal of this AFT is to introduce you to a few features that are huge time savers for developers and help you pass the knowledge over to any designer friends who are not in the "know". I am using Photoshop CS 4 for these examples but most, if not all, of these are available in CS 3 and earlier. Lets get started!

Copy Merged

Here is the situation, you have a layered PSD and you want to copy out a selection of the image across all the layers. A normal copy only works on the active layer, in this case you want to get everything within your selection and flatten it into a single image. This is where Copy Merged comes in. You can find Copy Merged in the edit menu under copy.

Source Image

Here we are making a normal selection to copy:

Regular Copy

Since we are in the tape layer, when we hit copy all we get is this:

Copy Merged

If we use Copy Merged we will get all of the layers within the selection:

As you can see Copy Merged is a great way to copy out parts of a design without having to flatten the entire image. I use this so much I hardly ever use regular copy anymore.

Save For Web

I am still mourning the loss of Image Ready after Adobe merged its product line with Macromedia. All is not lost however because we still have the Export For Web. There are a lot of features here but hopefully this window is intuitive enough for you to figure out what is going on. Here are some features I use the most:

Save For Web Menu

When you select Save For Web you will see this screen:

Two Up View

I use this view to see how my compressed image looks compaired to the original.

Optimize File Size

This is a great way to have Photoshop automatically attempt to compress the image based on the desired file size. It can even auto select a gif or a jpg for you.

Image Resize

This is a simple resize option in case you want make your file smaller then the original.

It's important to mention that Fireworks has more options but if you are quickly compressing some images for the web or you like using Photoshop as your one and only image editor this is the way to go.

Layer Comps

Layer Comps are probably the most valuable and underutilized feature in Photoshop. Layer Comps save out the state of each layer and group it into a single "comp". Each layer comp stores whether a layer is visible or not visible, its position, and a few other parameters. You should use Layer Comps when ever you have a complex design that has multiple states and you need to quickly toggle through them. Imagine you wanted to see all of the button over states in a design, or you have several versions of the same image and you need to show it to someone to make a decision. Instead of manually toggling on/off each layer, make Layer Comps instead.

You can find the layer comp panel under the window menu right below layers. Here is a screen shot of some Layer Comps I made and what they look like when toggled:

Layer Comps

Here are the exported images from each of those Layer Comps:

Default Layer

Stains

Tape

Tape & Stains

As you can see I now have the ability to switch between versions to find the right one. This feature is also great when you are going through a website design and need to find a section, or pull out specific parts from each design to build.

Photoshop Automation

Now that you have an understanding of Layer Comps it's good to know how to export all of them into jpgs, pngs, or even psds. Photoshop has an incredible built in scripting/automation system. To go into how all of it work is a little out of the scope of this post but it is something I definitely suggest you take a look at. For simple automation there are a few scripts ready for you to use. Lets take how the Layer Comps to Files script works:

Layer Comps to Files Menu

You can find the script under File -> Scripts menu:

Layer Comps To Files

Here you can setup where the Layer Comps will be exported to, a prefix name and what kind of file you want:

Output

Finally here is a preview of the files created from the script:

The End

So this is a small sampling of the features I use every day as a developer when working in Photoshop. Although these aren't as "developer centric" as one might think, they play a crucial role in cutting down the production side of things. If you have other features you use and want to share, please leave a comment below.

Read more from Jesse Freeman.