How to Create a Transparent Background in Photoshop

Sometimes it will be much simpler to import a small GIF or JPEG image into Flash than to create it within Flash. The problem with this, however, is in the rectangular shape all bitmap images take. Without setting the background transparency, a rectangular box will appear around your object. This may be fine if the bitmap will be in the background of your movie, but not if it's to appear anywhere else.

Unfortunately, JPEG images do not support transparency. And while GIF images do support transparency, they are far more limited in the number of colors they can contain than are JPEG images. The solution, then, is to create image as 24-bit PNG images; images that contain all the color of JPEGs, but with the transparency support of GIFs.

 

1) Create a New Transparent File

Select File > New from the menu. A window opens like the one pictured right - this includes the option to make the file transparent.

Once the new file has been created, add your image content to one or more new layers. This will happen automatically if you copy and paste an image into the file.

2) Add a Transparent Layer

You can add a transparent layer to an existing file by selecting Layer > New > Layer from the menu.

The new layer will be added above the currently selected layer. Drag the new layer below the image's layer.

Whichever method you use, you should end up with at least two layers (as shown right). The image content is on one layer, positioned above the transparent background layer.

Notice how the transparent layer is checkered. This pattern is not part of the image - it is just there to help you identify transparent areas.

Make sure the content layer is selected before you continue.

Making the Transparent Area

Using the Magic Wand or Lasso tool, select the area of the image you want to be transparent.

You may want to experiment a few times with the tolerance and anti-aliasing settings to get the best selection. In the example shown here, the following Magic Wand settings were used:

Magic Wand Properties

 

 

Hit the Delete button. The selected area is removed and the checkered (transparent) background becomes visible.

Now that you have a transparent background you can save the file as a GIF or PNG to import to Flash

 

Using Alpha Transparency and PNG Graphics

Create a Transparent Image using Adobe PhotoShop

1. Open your image in PhotoShop. Select File/Open... Choose your file and click Open. The file open in a separate document window.

2. If the file is not in RGB format (16.8 M colors), convert it: Choose Image/Mode/RGB Color.

3. Now select the background area of the image (the area you wish to remove). If the image background has a solid color, select the Magic Wand Tool (W). Be sure to specify Tolerance=10, Anti-aliased and Contiguous in the selection options (dialog box on top, under the menu). You may need to adjust the tolerance value (it depends on your image). When done, click in the background area of the image (1):

4. A selection dashed-line appears around the logo and around the square border of the image. It means that the background is selected (not the logo). If the background is not made of a solid color, you can select it by using the Lasso Tools and even the Eraser tool.

5. Now, we'll select the logo only. To do so, choose Select/Inverse (Shft+Ctrl+I). It's almost unchanged but the dashed-line around the square border of the image has disappeared.

6. Choose Edit/Copy (Ctrl+C), then Edit/Paste (Ctrl+V) to create a new layer with the "extruded" logo in it. The "layers" list has been updated (see below). The new layer, which is selected, appears at the top of the list (1). The original image is present in the background (2). Now, we'll hide the original image by clicking on the "eye" button of the background layer (3). If you want, you can also delete it by drag-and-drop it on the trash (at the right-bottom corner of the list).

 

5. The image document now looks like shown below. The background area (which was white) has disappeared. Now you see a gray-checkboard-like texture around the logo (1) indicating that this area is in fact transparent.

6. We recommend to save the image to another file to keep the original one intact. Select "File/Save As...". In Format box, select "PNG" (our favorite format). Please note that BMP and PSD formats also support 32 BPP / Alpha Channel. Click Save. Select Interlace: "None", click OK.

7. You're done, the transparent version of your image is created.