This tutorial will show you how to create a website header similar to the on use on the social book marking site digg.com. I will be using Adobe Photoshop CS3 for this tutorial.

Start off with a new document 900×125 with # e5ecf3 as your background color.

Select #e5ecf3 as your foreground color and press CTRL+Backspace to fill the background with the blue/grey color.

Create a new layer. Select the Rounded Rectangle tool with the following settings.

Set your foreground color to # 1b5790 and draw the rounded rectangle. Draw from the bottom up so the top part of the Rounded Rectangle gets cut off.

Now hold down the CTRL key and click on the layer with the Rounded Rectangle in the Layers Palette.

This will select the rectangle you just drew. Now, Using the Marquee tool, hold down the ALT key and drag the mouse over the top section like below.

When you let go you should have a selection like the one below.

Now you will need to download the FFF Forward font. Add the dig logo using the text tool bar and FFF Forward 21pt sharp as your font. The color should be white (#FFFFFF).

Using the text tool again add the “Join Digg”, “About” and “Login” links. The font I used was Arial Bold 14pt and the color is #d2dcf3.

Create a new layer and draw a 1 pixel line between the links using the same color.

Related Posts

• September 7, 2008 -- jQuery Pop Over Effects (1)
• August 18, 2008 -- Password Verification and Strength Checker (3)
• June 23, 2008 -- Dynamically Add Textbox to Site (33)