How to Create a Flash Website Using Photoshop

Since Adobe bought Macromedia's Flash, Photoshop and Flash are much more compatible. One of the benefits of this compatibility is that you can now create a website design in Photoshop, then import it into Flash. Flash will keep all of the layers separate so that you can add your Flash animation. This tutorial will explain how to create a Flash website using Photoshop.

Things You'll Need

• Adobe Photoshop
• Adobe Flash

Instructions

1. Open a new Photoshop file. Set the width and the height to the same size you want your flash website. This will vary depending on your intended audience or the design of your web page.

2. 

   Design your website in Photoshop. Use the "Paint Bucket" tool to fill the background layer with the color that you want for your Web page background. Go to "File>Place" and place any images on separate layers. In the example, the JM logo is an image. If you have more images, such as a banner or navigation buttons, create new layers for each image.

   Select the text tool and type the heading, navigation text and other non-graphical text. Make sure that each text item is on a different layer.

   It is extremely important that each section of the website is on a separate layer because when you import the Photoshop file into Flash, Flash will use these layers to create the animation layers.

   Save the website as a .psd file.

3. 

   Open a New Flash document. Import the .psd file into Flash by clicking on "File>Import to Stage."

4. 

   Select the .psd file that contains your website. De-select any layers that you do not want to import.

5. 

   Customize how the layers import into Flash according to your preference. For example, you can import text as editable, vector or flattened. Select the box next to "Create Movie Clip for This Layer."

6. 

   Select the checkbox next to "Set stage size to same as Photoshop's canvas (### x ###)". This will set the size of the stage in Flash to the same size as the size of your Photoshop website. Press "OK."

7. 

   Notice that Flash imports your website from Photoshop with all of your layers separate. Complete the Flash website by creating the desired animation in Flash.