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
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

Flash Catalyst Photoshop Project Layout


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

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. Then, I added the logos to the Layers panel in the same order.

  6. 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.

  7. Now we are ready to import this graphic layout into Flash Catalyst. Save your Photoshop file as PortfolioLayout.psd.

  8. 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.

  9. 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.




Add Flash+Catalyst+%96+Photoshop+Project+Layout to Twitter Add Flash+Catalyst+%96+Photoshop+Project+Layout to Facebook Add Flash+Catalyst+%96+Photoshop+Project+Layout to MySpace Add Flash+Catalyst+%96+Photoshop+Project+Layout to Del.icio.us Digg Flash+Catalyst+%96+Photoshop+Project+Layout Add Flash+Catalyst+%96+Photoshop+Project+Layout to Yahoo My Web Add Flash+Catalyst+%96+Photoshop+Project+Layout to Google Bookmarks Add Flash+Catalyst+%96+Photoshop+Project+Layout to Stumbleupon Add Flash+Catalyst+%96+Photoshop+Project+Layout 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
Design a Paper Bead SVG Cut File

Santos Cage Doll SVG Cut File - First Steps

SVG Cut File Design of Top Hat

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