logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance
Comedy Movies
Romance Novels


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Santos Cage Doll SVG Cut File - First Steps

SVG Cut File Design of Top Hat

Offset Path in Illustrator

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor