With the release of Adobe^R Flash^R Catalyst^TM beta, designers have a new tool for creating Flash projects and with the help of Photoshop^R or Illustrator^R, we can make our projects much more visually appealing. For those of you who haven't downloaded the free beta release, Catalyst was developed with the designer in mind and with its visual-based tools, the designer can add workable user interface components to a UI layout with no programming skills required.

So where does Photoshop come into the picture? Most UI layout designs begin in Photoshop, when the designer creates a mockup. After the mockup is approved, it's time to create the actual graphics for the UI. This is also usually done in Photoshop. Now, with Catalyst, we can also create the final layout in Photoshop and import that layout into Catalyst, where we will add the Flash-based navigation for our portfolio. All the layers, styles and other aspects of your Photoshop image will still be there when the file opens into Catalyst. The beautiful thing about Catalyst is that we can use the graphics just as we created them in Photoshop and turn them into UI components, such as buttons, without any special preparation.

In this tutorial, we will be making the graphics for a small portfolio of some websets that I have sold at DIYeStores.com. These websets are created specifically for the site's DIY website builder. The look and feel of each webset is reflected in the webset logo. For this project, I decided to create a portfolio of these logos. For the purpose of this tutorial, we will have only three logos but you will probably want to have more samples in your portfolio. Our first step is to decide which logos we want to include in our portfolio and the order that we wish them to be viewed.

The logos for the websets are all 450 x 250 pixels in order to match the website builder specifications. I decided the overall size of the application will be 500 x 500 pixels. This will give use enough space for a title at the top, the logos and the thumbnails under the logos, which will become the buttons that control the image viewer application. We will need to create a 100 x 100 thumbnail graphic for each of our logos. If we just reduce the size of the logo to the size of our thumbnails, much of the design will be too small to appreciate. It would be better to choose a section of each logo that best represent the design and use that for our naviation buttons. Now that we have all the samples for our portfolio, it's time to build the layout for the application.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.