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

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


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

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
How to Create Patterns in Illustrator

Multiple Artboard Template in Photoshop CC

Design & Bind Your Creative Portfolio - Skillshare

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor