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
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

Website Header in Photoshop


In this tutorial, we will build a website header in PhotoshopR which we will animate in FlashR CatalystTM. The animation begins with an empty background, and the design elements slide-in to "build" the header before our eyes. The animation will be programmed to begin "on load" and will last just a few seconds. This website header will be for a factious greeting card business.

Our first step is to build the header in Photoshop. We will put each design element on its own layer in preparation for working with them in Flash Catalyst. As you can see, we will have 6 design elements.

1. Background
2. Bottom bar across width of header
3. Company Name
4. Birthday Card
5. Pumpkin Notecard
6. Christmas Card

  1. Let's start a new project in Photoshop. Set the Width to 1000 pixels, Height to 225 pixels and the Background to transparent. This size will fit nicely at the top of our webpage.

  2. The only element that will be visible at the beginning of the animation is the white background. Fill the first layer of the image with the background color of your choice. In the Layers panel, rename this layer "Background".

  3. To create the shaded edge, I used the Inner Shadow Layer Style. Double click on the Background layer and check the box next to Inner Shadow. Set the Distance and Choke to 0 and Size to 49.

  4. Next we will add the thin border around the image with the Stroke Layer Style. I've set the Color to a brown (#6e674f), the Size to 2 and the Position to Inside.

    Next we will add the cards. I've reduced the size of my greeting cards to 230 x 175 pixels. This will keep them in proportion to the size of the header.

  5. Let's copy/paste the Pumpkin card into our header. Name the new layer "Pumpkin". Click Edit Free Transform to rotate the card slightly to the right. Click on the Pumpkin layer and apply the Drop Shadow Layer Style, keeping the default settings.

  6. Repeat the last step for both the Birthday and Christmas card.

    Next, we will add the bar at the bottom of the header. We will tuck our cards behind this bar to emulate cards on a shelf.

  7. Add a new layer to the Layers panel and name it "Bar".

  8. With the Rectangular Marquee tool, select the bottom area of the header, just inside of the brown border. Choose a color for your bar and fill the selection with this color.

  9. Double click on the layer and add the Stroke Layer Style as you did to the Background layer.

  10. Click on the Horizontal Type tool and choose a font for your business name. I've used the same brown color as the border color. Type the business name on the left side of the header.

  11. This step is optional. We will rasterize the text. Right-click on the text layer and choose Rasterize Type from the menu.

  12. Save your project in Photoshop .psd format.

Join us in the Digital Art and Design forum.





Add Website+Header+in+Photoshop to Twitter Add Website+Header+in+Photoshop to Facebook Add Website+Header+in+Photoshop to MySpace Add Website+Header+in+Photoshop to Del.icio.us Digg Website+Header+in+Photoshop Add Website+Header+in+Photoshop to Yahoo My Web Add Website+Header+in+Photoshop to Google Bookmarks Add Website+Header+in+Photoshop to Stumbleupon Add Website+Header+in+Photoshop 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
Creative Cloud Classroom with Mike McHugh

Adobe KnowHow Learning Center

Silhouette Studio New PixScan Feature

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