g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Home Improvement
Women's Fashion
Small Office/Home Office
Holiday/Seasonal Cooking
Crafts for Kids

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Flash Catalyst and Photoshop Project Planning

With the release of AdobeR FlashR CatalystTM beta, designers have a new tool for creating Flash projects and with the help of PhotoshopR or IllustratorR, 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.

Join us in the Digital Art and Design forum.

Add Flash+Catalyst+and+Photoshop+%96+Project+Planning to Twitter Add Flash+Catalyst+and+Photoshop+%96+Project+Planning to Facebook Add Flash+Catalyst+and+Photoshop+%96+Project+Planning to MySpace Add Flash+Catalyst+and+Photoshop+%96+Project+Planning to Del.icio.us Digg Flash+Catalyst+and+Photoshop+%96+Project+Planning Add Flash+Catalyst+and+Photoshop+%96+Project+Planning to Yahoo My Web Add Flash+Catalyst+and+Photoshop+%96+Project+Planning to Google Bookmarks Add Flash+Catalyst+and+Photoshop+%96+Project+Planning to Stumbleupon Add Flash+Catalyst+and+Photoshop+%96+Project+Planning to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Character Development Design by Mary Begin

Background Images for iBooks Author

Craft Photography - iPhones to Props

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2015 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor