Using Photoshop

If you're using Photoshop to create Flex component skins, you'll be creating bitmap assets instead of vector assets. When using bitmaps for skinning, there are a few issues you should be aware of:

• As I mentioned in the "Scalability" section, gradients in bitmaps only scale well in one direction. If you need to create artwork with gradients, and they might need to stretch in both directions, you might consider using Flash or Illustrator to create vector artwork instead.
• Photoshop doesn't currently have built-in support for scale-9 grids, so if you need to edit the grid for a skin part, you'll need to tweak the CSS file, as described in "Editing scale-9 grids for bitmaps" later.
• Photoshop outputs individual bitmaps for each skin part, rather than a single file containing all the skin parts.

Before you get started, here are a few tips for working with the Photoshop skin template file:

• In general, you'll have an easier time if you create your skin parts to be the same size as the parts we've provided in the templates. If you make them larger or smaller, you might need to edit the scale-9 grids as well (for parts that require them).
• The CSS file we provide assumes that the exported symbols/files will have specific names, so you should avoid changing the names of the layer slices in the Photoshop file.
• For controls that have text, like Button, you can't control the attributes of the text (position, color, size, font, and so on) from the skin file, which is why we don't show text on the skin parts in the template. The "Tweaking styles" section later describes how to set text attributes using CSS.
• The default Halo Aeon skins are semi-transparent, so they pick up a little of the background color of the container they're in. This is why they look grayish in the skin template files we provide. You can follow a similar strategy for your skins, or just make them opaque.
• You might not want to skin the application background as a bitmap, since it's likely to need to scale in both directions. The "Tweaking styles" section describes how to set the application's background to a solid or gradient color using CSS.
• Because of the way Flex 2 handles scrollbars, you'll want to make sure that each of the bitmaps for the different states of the scrollbar thumb includes the portions of the track on either side of the thumb, with one pixel sticking out to the left of the thumb. You can see how this looks in the skin template file.

• Certain skin parts, such as the panel control bar background skin, are either fully transparent or have transparent pixels around them in the sample file. (In the case of the panel control bar, this is done in order to avoid overlapping the shadows at the edges of the panel.) If you need to do something similar for your own skin parts, and have difficulty making Photoshop export transparent parts or transparent pixels around the edges of a part, you can do one of the following:

  • Remove the layer slice for that part and then draw a normal slice using the same name as the layer that includes the transparent area.
  • Manually edit the exported bitmap for that skin part to include the transparent pixels. If you do this, you may want to remove the slice for that part from the master template file so that it does not overwrite your manually edited file the next time you do an export.

1. Download the sample skin files

Download the flex_skins_photoshop.zip file and unzip it to a folder on your machine. This should create a single folder called flex_skins_photoshop. If you like, you can work in a copy of this folder, leaving the originals untouched, in case you want to make different skins later on.

2. Edit the skin parts

Launch Photoshop and open the flex_skins.psd file from your working folder. You'll see all the Flex 2 skin parts laid out on the canvas; each of the skin parts is a separate layer.

To edit a skin part:

1. Select the layer for the skin part you want. You can do this one of two ways:

   • Find the skin part in the Layers palette. They're organized into layer folders by component name; so, for example, the Button layer folder contains Button_upSkin, Button_downSkin, etc.
   • Select the Move tool and then go to the Tool Options bar at the top of the screen, check Auto Select Layer, and uncheck Auto Select Groups. Now you can simply click on the skin part you want to edit on the canvas, and the relevant layer will be automatically selected.

2. Edit the selected layer until the skin part looks the way you want:

   • Make sure that the rest of the layer outside of your skin part remains transparent; Flex assumes that any non-transparent parts of the layer are part of your skin.
   • Make sure that skin parts don't overlap, since we'll be using slices to export the individual parts.

3. (Optional) Use multiple layers to build up a skin part

By default, each skin part is made up of a single layer. However, you might want to use multiple layers to build up a single skin part (for example, if you want to add shape layers). The export process (described below) uses slices to cut up the image into skin parts. We've pre-created layer slices for each layer to make the export work automatically, but if you want to use multiple layers for a skin part, you can do this by replacing the original layer slice with a user slice of the same name. Here's how to do it:

1. Create the layers for your skin part in an empty part of the canvas.
2. Choose the Slice tool and draw a slice around your layered skin part. (This will automatically make all the other slices visible as well.)
3. Choose the Slice Select tool and double-click on the original skin part.
4. In the Slice Options dialog box, select the name of the skin part (e.g., Button_upSkin) and press Command+C (Mac OS) or Control+C (Windows) to copy it. Cancel out of the dialog box.
5. Double-click your new slice and paste the name from Step 4 as the name of the slice. Click OK.
6. Delete the original skin part layer.

4. Export the skin files

After you've created all the skin parts, follow these steps to export them as individual files:

1. In the Layers palette, scroll to the bottom and hide the HIDE BEFORE EXPORTING layer.
2. Choose File > Save for Web. This might take a minute because of the number of slices.
3. Make sure that the Preset pop-up menu on the right is set to PNG-24.
4. Click Save.

5. In the Save dialog box:

   1. If you're not there already, navigate to the folder into which you extracted the skin files. Do not navigate to the images subfolder; you should be in the folder that contains the flex_skins.psd file.
   2. Make sure Save As Type is set to Images Only (*.png).
   3. Make sure Slices is set to All Slices.
6. Click Save.

Photoshop will save the individual images for each skin part into the images subfolder as separate PNG files (e.g., Button_upSkin.png). Together with the flex_skins.css file, this is all you need to skin a Flex application.

Don't close Photoshop yet, though! If the shapes of your skin parts are substantially different from the original skin parts—for example, your corners are larger and more rounded, or you changed the size of some skin parts—you'll need to tweak the scale-9 grid coordinates in the CSS file, and you'll need to refer to your Photoshop file while doing this. Skip to the "Editing scale-9 grids for bitmaps" section. If you don't think you need to edit the scale-9 grids, you can skip to "Tweaking styles."

Page 5 of 10

Previous Page

Next Page