Website Header in Photoshop - Digital Art and Design

In this tutorial, we will build a website header in Photoshop^R which we will animate in Flash^R Catalyst^TM. 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

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.
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".
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.
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.
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.
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.
Add a new layer to the Layers panel and name it "Bar".
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.
Double click on the layer and add the Stroke Layer Style as you did to the Background layer.
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.
This step is optional. We will rasterize the text. Right-click on the text layer and choose Rasterize Type from the menu.
Save your project in Photoshop .psd format.

Join us in the Digital Art and Design forum.