Subscribe to our rss feed

Recreate the Digg.com Header

Posted in Photoshop Tutorials, Web Graphics by John Ward on the November 2nd, 2007

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.
Digg Header Photoshop Tutorial

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

Create a new layer. Select the Rounded Rectangle tool with the following settings.
Digg Header Photoshop Tutorial

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.
http://www.1001fonts.com/font_details.html?font_id=2580

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

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.
Digg Header Photoshop Tutorial

When you let go you should have a selection like the one below.
Digg Header Photoshop Tutorial

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).
Digg Header Photoshop Tutorial

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.
Digg Header Photoshop Tutorial

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

Popularity: 19% [?]

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • BlogMemes
  • Fark
  • Furl
  • Live
  • NewsVine
  • Reddit
  • Slashdot
  • StumbleUpon
  • TwitThis
  • YahooMyWeb

Pages: 1 2 3


Go Daddy $1.99 Domains

2 Responses to 'Recreate the Digg.com Header'

Subscribe to comments with RSS or TrackBack to 'Recreate the Digg.com Header'.

  1. Jalaj said,

    on December 3rd, 2007 at 4:23 am

    Good tutorial with exact fonts and looks.

  2. Jalaj said,

    on January 2nd, 2008 at 4:01 am

    December saw no new posts here.

    Wishing you a very Happy New Year and hope this blog sees new posts.

Leave a Comment