Subscribe to our rss feed

Recreate the Digg.com Header

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

Now we will add the “Popular” and “upcoming” buttons. Create a new layer and draw a Rounded Rectangle with a 4px radius like below.
Digg Header Photoshop Tutorial

CTRL + Click on the layer in the layers pallet to select it. Using the marquee tool hold down the alt key and select half of the rectangle. Then select the move tool and press the left arrow to move the selection.
Digg Header Photoshop Tutorial

Now select the other rectangle. I use the magic wand to do this. Fill the selection with #d0e5ad.
Digg Header Photoshop Tutorial

Using the text tool with the same Arial 14pt Bold font with # 325b0a as the color type the words “Popular and “Upcoming”.
Digg Header Photoshop Tutorial

Create another new layer and draw a white rectangle for the search box.
Digg Header Photoshop Tutorial

Select the circle marquee tool. Hold down the shift button to make a perfect circle and make a selection like below. Then press the delete key to delete that part of the box.
Digg Header Photoshop Tutorial

Create a new layer and make another slightly smaller circle and fill it with # 92afcd
Digg Header Photoshop Tutorial

Create a new layer. Draw another small circle inside that one and fill it with # e1ebf4.
Digg Header Photoshop Tutorial

On the menu go to Edit > Stroke.
Digg Header Photoshop Tutorial

Now add a 1px stoke using the # 1b5790 color to the outside.
Digg Header Photoshop Tutorial

Once you have the stroke, use the line tool to add the handle to the magnifying glass and the finished button should look like this.
Digg Header Photoshop Tutorial

Now add the “Search Digg…” text using Arial 14pt Regular with #676767 as your color.
Digg Header Photoshop Tutorial

It looks pretty good. All you need to do is add the RSS button and the category links and you should have something like this.
http://www.1001fonts.com/font_details.html?font_id=2580

Popularity: 18% [?]

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