gradient
 
gradient
 
 
 
 
title

17. Saving Images For Flash

title
sign
 

 

Saving images for Flash is a process totally different from that of saving a Photoshop layout for the web. In Flash you must rebuild your layout with "pieces" exported from Photoshop. You must break apart your entire Photoshop layer in individual images that you will reposition and animate in Flash. So the simplest way you can break apart your Photoshop layout is by layers: exporting the content of every individual layer. But this is not every time necessary as you may export a group of layers as an individual image so they will be animated together as a group. It is very important to know that if you have solid color elements or simple gradients it's not necessary to export them as an image from Photoshop because you can create them directly in Flash and save in terms of file size. The first step is to imagine how will look your layout as a Flash animation then you'll know which elements you need to export.

Open the index.psd file located in template/psd (Note: if the opened file has the slices visible just press Ctrl+H to hide them):

To export a single layer or a group of layers you must have only that layer(s) visible. So you must hide the rest of the layers from your layout. First of all let's export the background image with the gray draws above it. So hide all the layers until the layout will look like this:

This will be our first image for Flash. Now go to main menu and choose File -> Save for web...

Saving for web is recommended because Photoshop optimizes the image and you can see its size depending on different settings.

In the Save for web window it is possible to appear the slices too. You can simply hide them by pressing "Q" from the keyboard or clicking on the Toggle Slices Visibility icon:

After hiding the slices look at the settings panel to the right. Choose from "Presets" one that suits your needs (generally gif, jpg & PNG-8 are for images with no transparency and PNG-24 is for images with transparency) but keep an eye at the bottom left corner of the window where you can see the size of the exported file:

Save the file as JPEG High, for example, because the resulting file's size is the smallest. (Note: we have already exported the images for Flash and they are located in template/html/flash_version/images)

Continue with the next element you want to export. This time we will choose an element that must be exported with transparency because it has a drop shadow effect that has to be included in the exported image.

Reveal all the layers of the layout. Now hide all the layers except "main draw" layer and the layers above it that create the header image:

To save image size you must crop this image because the more transparency you have the bigger will be the resulting file. So choose the Crop tool from tools and drag a rectangular area close to the draw's borders but not to close because you must include the drop shadow in your selection and press Enter (Return) from keyboard or double-click:

This is the cropped layout:

Now Save for web...In the Save for web window choose to see the Original layout by clicking on the "Original" tab (marked below), then hide the slices by pressing "Q" from the keyboard or clicking on the Toggle Slices Visibility and finally choose from Presets (marked below) the PNG-24 preset (We recommend you to use this preset for all images with transparency but not only. PNG-24 is the single preset that saves quality images with transparency. If you choose gif it will save images with transparency but you'll notice the difference in Flash. Saving files as PNG-24 the file size will be bigger than jpg or gif but the quality will be better)

Now let's save for Flash another image. From Layers palette go and click on "img" layer to select it. Ctrl+click on the layers thumbnail preview to select the content of the layer. This is the quickest way to select a layer's content:

Because this image doesn't require to be saved with transparency you may apply crop now and save for web the cropped image. Doing this you do not need to hide all the layers because there is no layer that has its content over "img3" layer.

With the layer's content selected go to main menu Image -> Crop

Save this image for the web too. A JPEG High Preset should be a good choice for export.

Very important! If you have images with thin borders it is not recommended to crop them like we did with the "img3" layer because it may be possible to look not so well in Flash. For this kind of image crop the layer with little transparency on margins so that the content of the layer not be tangent with the crop area borders and save as PNG-24. This "rule" applies for bullets or pixel images. They will be well reproduced in Flash if they are saved with a few pixels of transparency on margins.

(Note: after every crop action you must go back in "History" to a step where your layout is complete to continue to select, crop and export the other images for Flash)

Now that you know how to export images for Flash continue to export layout's elements according to your needs or take a look at the images we have already exported in template/html/flash_version/images