Flash Catalyst – Photoshop Project Layout

In the last tutorial, we assembled the images for our portfolio that we will be making in Photoshop^R and Flash^R Catalyst^TM. Now let's work on the layout. You should have all of the logos and thumbnails open in Photoshop.

The design for the portfolio will be a layout of simple rounded rectangles. The bottom 500 x 500 rectangle will have a simple gradient from these two colors – #ffffff and #c9c1a5.
Next, I added one large and three small mats for the logo and thumbnails. With the Foreground color set to black, I used the Custom Shape tool and the rounded square shape to draw the four mats. I then added a combination of Drop Shadow, Inner Shadow and Inner Glow layer styles to finish the mats.
Using the Engravers MT font, I added the title to the top of the portfolio layout. Next, I rasterized the text and applied the same layer styles to the text as I did to the mats.
Next, I added the three thumbnails to the mats in the order that I wish the logos to be viewed from left to right. Of course, we will set up the navigation buttons in Catalyst so that the viewer can view the logos in any order.
Then, I added the logos to the Layers panel in the same order.
Finally, I added a Drop Shadow (default settings) to the background layer.

This project is very small and I usually do not use folders in the Layers panel for a project of this size. However, I do wish to demonstrate that the information from Photoshop's Layers panel will be maintained when we import the file into Catalyst. For this purpose, I placed all the thumbnails in a "Thumbnails" folder, all the logos in a "Logos" folder and all the background graphics in a "Background" folder.
Now we are ready to import this graphic layout into Flash Catalyst. Save your Photoshop file as PortfolioLayout.psd.
Open Adobe Flash Catalyst. On the Welcome screen, we will use Create New Project from Design File – From Adobe Photoshop PSD file. Browse to your PortfolioLayout.psd file.
In the dialog box, notice that Catalyst already has recognized that our project will be 500 x 500 pixels, from the size of the PSD file. Set the Fidelity options to Keep Editable and the Background color to match your webpage.

Let's examine the Layers panel in Flash Catalyst. Notice that we have all the same layers and folders as in our PSD file, along with their respective names. Also notice that Catalyst has created layers to contain the layer styles that we applied in Photoshop. If you click the visibility icons, you will see that we still have control over these styles.

In the next tutorial, we will start to make UI components out of our graphics.

Join us in the Flash forum.

Join us in the Digital Art and Design forum.