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
Now create a new layer. Using the marquee tools, make a selection similar to the one below and fill it with black #000000.
Now create a new layer and make a selection about half the height of the rectangle you just created.
Now open the gradient tool and select the gradient below
Fill the selection with the gradient starting from the bottom to the top (like the arrow below).
Create a new layer. Make a selection with the rectangle marquee tool like below.
Use the following gradient settings
Now fill the selection with the gradient, start from top to bottom. You image should now look like the one below.
Create another new layer and make a selection with the rectangle marquee tool like the one pictured below.
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.
Here are the gradient settings
Now add a stroke
Apply the layer style. Your image should now look like the one below.
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.
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.
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.
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.
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.
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.
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.
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.
You can then add your search button and any other touches. The final image should look like this.
Popularity: 18% [?]
Other Related Tutorials
on May 24th, 2007 at 9:47 am
Thank you bro..nice tips..
on May 31st, 2007 at 10:43 am
wow nice i will trying do that thank you
on June 13th, 2007 at 2:20 am
Nice tutorial, perfect for beginners and not only.
on August 16th, 2007 at 12:43 am
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
on March 28th, 2008 at 8:08 am
Good site!!! Thank you!
on March 28th, 2008 at 10:13 am
Good website. I shall visit again and I shall inform my friends
on March 29th, 2008 at 2:00 pm
Hi WebMaster! Real good website! Good work!!!! Thank You!
on March 29th, 2008 at 9:08 pm
This site is asomeee, well done, thanks for all!
on March 29th, 2008 at 11:13 pm
Very good website! I add this site to bookmark. Thanks
on March 30th, 2008 at 12:01 pm
Good website! I like this site and add it to bookmark. Thanks!
on March 30th, 2008 at 6:26 pm
Cool design!!! Your site the beso of the best!!!! I add this site to my statrpage!!! Thank you and please update every day!!!
on March 31st, 2008 at 9:15 am
Good site!!! Thank you!
on March 31st, 2008 at 12:00 pm
Cool design!!! Your site the beso of the best!!!! I add this site to my statrpage!!! Thank you and please update every day!!!
on April 1st, 2008 at 2:05 am
Very good website! Thank you!
on April 1st, 2008 at 10:02 pm
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!
on April 2nd, 2008 at 5:00 am
Good website and happy messages. I like it. Thank you master!
on April 2nd, 2008 at 1:10 pm
Good site! I like m doing this research paper on legalizing pot.
And i love the information that u have given me! Thank you!
on April 2nd, 2008 at 4:06 pm
Cool website! Best regards and nice day!
on April 5th, 2008 at 9:40 am
Cool erbsite. Thank you master!
on April 5th, 2008 at 2:41 pm
Thank you master fot this site! I love you!
on April 14th, 2008 at 11:03 am
Real good website! Sorry for this post but I very need moneys
Best regards!
on June 14th, 2008 at 11:26 am
Hi all!!! Good website and very intereted pages!! I love this resource!!! Thanks owner!
on June 30th, 2008 at 2:43 pm
Cool design and very informative site. Thank you mister!
on July 2nd, 2008 at 12:57 am
Nice site. Good content and cool design. Thank you!
on August 8th, 2008 at 7:43 pm
Good website and very big job!!! Thank you MASTER and regards!
on August 9th, 2008 at 3:14 pm
Cool website, cool comments. Thank you.
on August 10th, 2008 at 10:39 am
Cool site… Thank you master! I add this site to my bookmarks!!! Regards!
on August 11th, 2008 at 1:15 am
Good website!!!!!!!!!!!!!!!!!! I add this site to my bookmarks!!!!!!!!!!! Big thanks for webmaster!
on August 11th, 2008 at 1:51 pm
Hi master! Your site is cool and very interested. Thank you for big job!
on August 13th, 2008 at 8:43 am
Very good website. Thank you master!!!!!!!!!!!!!!!!!!!!!!!!!!
on August 13th, 2008 at 1:38 pm
Very good website. Thank you webmaster!!! Best regards!!!
on August 13th, 2008 at 3:40 pm
Hi all!!! Good and nice site!! I ad this site to bookmark!!! Regards!!!!!!!
on August 14th, 2008 at 11:14 pm
Very hot and nice website. Thank you webmaster!!! Best regards!!!
on August 20th, 2008 at 10:37 pm
Good website!!!!!!!!!!!!!!!!!! I add this site to my bookmarks!!!!!!!!!!! Big thanks for webmaster!
on May 21st, 2009 at 6:41 am
[...] Technorati Style Header [...]
on May 27th, 2009 at 5:42 pm
Great share, this could be helpful to many people.. Good tutorial! KIU!
on September 20th, 2009 at 12:14 pm
Very nice Post! Really love it your post! thank you very much for your Information
on September 25th, 2009 at 5:11 am
Nice tutorial. Thanks for share it.
on October 13th, 2009 at 12:21 pm
[...] Fuente | Haz un header para web al estilo del del Technorati [...]
on March 20th, 2010 at 4:46 am
[...] Gregory Maynard wrote a new blog post: Technorati Style Header Tutorial Posted: 20th March 2010 by Free Blog – Site Wide Activity in Free Blog 0 Gregory Maynard wrote a new blog post: 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. Technorati Style Header Tutorial [...]
on March 20th, 2010 at 4:47 am
[...] Fernando Sweeney wrote a new blog post: Technorati Style Header Tutorial Posted: 20th March 2010 by Free Blog – Site Wide Activity in Free Blog 0 Fernando Sweeney wrote a new blog post: 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. Technorati Style Header Tutorial [...]