Technorati Style Header Tutorial

This tutorial will show you how to create a website header that is similar to the new header at technorati.com. For this tutorial I will be using Adobe Photoshop CS2.

Start with a new document 900×150 pixels
Technorati Style Header Tutorial

Now create a new layer. Using the marquee tools, make a selection similar to the one below and fill it with black #000000.
Technorati Style Header Tutorial

Now create a new layer and make a selection about half the height of the rectangle you just created.
Technorati Style Header Tutorial

Now open the gradient tool and select the gradient below
Technorati Style Header Tutorial

Fill the selection with the gradient starting from the bottom to the top (like the arrow below).
Technorati Style Header Tutorial

Create a new layer. Make a selection with the rectangle marquee tool like below.
Technorati Style Header Tutorial

Use the following gradient settings
Technorati Style Header Tutorial

Now fill the selection with the gradient, start from top to bottom. You image should now look like the one below.
Technorati Style Header Tutorial

Create another new layer and make a selection with the rectangle marquee tool like the one pictured below.
Technorati Style Header Tutorial

Fill the selection with any color (a will use black). Right click on the layer in the layers pallet and select blending options. Apply the following blending options.
Technorati Style Header Tutorial

Here are the gradient settings
Technorati Style Header Tutorial

Now add a stroke
Technorati Style Header Tutorial

Apply the layer style. Your image should now look like the one below.
Technorati Style Header Tutorial

Use the text tool to add the link text. I used Arial 14pt for the font. The word “Home” is in black #000000. Everything else is the shade of green #46a407. You should space the words out so that they look like the image below.
Technorati Style Header Tutorial

We will now add the divider for the links. Create a new layer and use the line tool to draw two lines side by side. The first line should be #ababab and the second one should be #ffffff. I zoomed in to do this.
Technorati Style Header Tutorial

Now you can select the divider layer in the layers pallet. Right click it and select duplicate layer. This will make an exact copy of the line.
Technorati Style Header Tutorial

Now select the arrow tool and then click the duplicate layer. Position the lines in between the links using the arrow keys on the keyboard. Repeat the last two steps for each divider. Once all dividers are placed your image should look like this.
Technorati Style Header Tutorial

Now I will add a TeamTutorials logo. Create another new layer and use the rounded rectangle tool with a radius of 6px and a color of #54c400.
Technorati Style Header Tutorial

Create a new layer and select the shape tool. Use the four leaf clover (built in shape) with a foreground color of white #fffff. Draw a clover like below.
Technorati Style Header Tutorial

Select the clover layer and press ctrl+e to merge the layer down with the rounded rectangle layer. Apply a stroke of 2px to the rounded rectangle layer with #fffff as your color. Then I will add the words “TeamTutorials” using the font 42pt Sego. The color is white #ffffff. Technorati uses a slightly different font (neo sans), however, it is not freely available. Your image should turn out like the one below.
Technorati Style Header Tutorial

Now you can create a new layer and add your search box. Use the rectangle marquee tool and create a selection like below. Apply a 1px black stroke the rectangle.. Fill it with #ffffff. Add the advanced search text using Arial 14pt white.
Technorati Style Header Tutorial

You can then add your search button and any other touches. The final image should look like this.
Technorati Style Header Tutorial

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join the TeamTutorials mailing list and get the latest tips, tricks, and special discounts for members only.

Thanks! Please click the link in the email we just sent you to confirm.

  • Thank you bro..nice tips..

  • wow nice i will trying do that thank you

  • Eonir

    Nice tutorial, perfect for beginners and not only.

  • Awesome tutorials!
    A real nice addition to my vocabulary of tutorials
    I would greatly appreciate it if you could submit some of your coming tutorials

  • Good site!!! Thank you!

  • Good website. I shall visit again and I shall inform my friends 😉

  • Hi WebMaster! Real good website! Good work!!!! Thank You!

  • This site is asomeee, well done, thanks for all!

  • Very good website! I add this site to bookmark. Thanks 😉

  • hot

    Good website! I like this site and add it to bookmark. Thanks!

  • Cool design!!! Your site the beso of the best!!!! I add this site to my statrpage!!! Thank you and please update every day!!!

  • Good site!!! Thank you!

  • Cool design!!! Your site the beso of the best!!!! I add this site to my statrpage!!! Thank you and please update every day!!!

  • Very good website! Thank you!

  • Very good site! I like it! I just wanted to pass on a note to let you know what a great job you have done with this site.Thank you!

  • Good website and happy messages. I like it. Thank you master!

  • Good site! I like m doing this research paper on legalizing pot.
    And i love the information that u have given me! Thank you!

  • Cool website! Best regards and nice day!

  • Cool erbsite. Thank you master!

  • Thank you master fot this site! I love you!

  • Ana

    Real good website! Sorry for this post but I very need moneys 😉 Best regards!

  • Ana

    Hi all!!! Good website and very intereted pages!! I love this resource!!! Thanks owner!

  • Cool design and very informative site. Thank you mister!

  • Nice site. Good content and cool design. Thank you!

  • Amy

    Good website and very big job!!! Thank you MASTER and regards!

  • Cool website, cool comments. Thank you.

  • Cool site… Thank you master! I add this site to my bookmarks!!! Regards!

  • Good website!!!!!!!!!!!!!!!!!! I add this site to my bookmarks!!!!!!!!!!! Big thanks for webmaster!

  • Hi master! Your site is cool and very interested. Thank you for big job!

  • Very good website. Thank you master!!!!!!!!!!!!!!!!!!!!!!!!!! 😉

  • Kim

    Very good website. Thank you webmaster!!! Best regards!!!

  • Hi all!!! Good and nice site!! I ad this site to bookmark!!! Regards!!!!!!!

  • Very hot and nice website. Thank you webmaster!!! Best regards!!!

  • Good website!!!!!!!!!!!!!!!!!! I add this site to my bookmarks!!!!!!!!!!! Big thanks for webmaster!

  • Pingback: 18 Photoshop Header Tutorials | The Roxor | Design blog for resources and inspiration()

  • Tim

    Great share, this could be helpful to many people.. Good tutorial! KIU!

  • Very nice Post! Really love it your post! thank you very much for your Information

  • Nice tutorial. Thanks for share it.

  • Pingback: Tutorial para hacer un header al estilo del de Technorati | Recursos para Diseñadores Gráficos y Web | Creativos Online()

  • Pingback: Gregory Maynard wrote a new blog post: Technorati Style Header Tutorial | Free Blog Hosting()

  • Pingback: Fernando Sweeney wrote a new blog post: Technorati Style Header Tutorial | Free Blog Hosting()

  • I like the tutorial and it has a great outcome.

  • Laxman

    Excellent Tutorial. I was working hard to since two days to create a header and could learn it within 20 minutes. Keep it up sir.

  • Pingback: 18 Header para photoshop | Wordpress Dicas()

  • sahar

    very good site! I see torials every week! thank you for this good information

  • EHS

    That was really cool thx alot:)