Tutorialaday.com - Design and Online Business Articles

Every website needs a great header and navigation to anchor the site, and in this tutorial I’ll show you how to create a great web 2.0 style header and menu. This is nothing new, or groundbreaking, but I’m still going to take you through it; hopefully this will help a bunch of you guys starting out in web design, or wanting to create more web 2.0′ish sites. Let’s get to it.

Step 1

Fire up Photoshop, and create a new document 800px x 300px. With a white background. Now, create a new layer, and grab the Rectangular Marquee Tool (M). At the top of the document, create a rectangle15px or so high, starting from the top edge. Fill that rectangle (Right Click > Fill) with #262626.

Create a new layer, and with the marquee tool, make a rectangle maybe 3px high immediately after the first rectangle. Fill it with #525252. It should now look a bit something like this:

Make a new layer, and again with the rectangular marquee tool, create a rectangle immediately below the last, about 80px-100px high. Fill this with #3d3d3d. Add a layer style to this layer. Choose Gradient Overlay, and set the foreground color to black, and then choose foreground to transparent (so black fading out). Set the opacity to 20%.

Now, one more rectangle for Step 1. Create one last rectangle, about 10px-15px high, below the first three, and fill it with #8eb26a. It should now look like this:

Step 2

Now that we have our background set up, it’s time to add the tabs for the menu. Click on the layer right below the top one, and grab the Rounded Rectangle Tool. The reason you clicked on the second to first layer is because we want the tabs to show up under the bottom, green bar. Set the radius of the rounded rectangle to 5px, and then create a menu tab. Fill the path with the green color from step 2 (#8eb26a) It should be proportioned like this:

Now, simply duplicate this layer, and fill it with color #acc0a5. Now move it over to the right, until there is exactly 1 pixel between the tabs. Use the right and left arrow keys to nudge it if you have to. Keep duplicating and moving tabs until you have enough. Here is mine:

Step 3

Now all you have to do is add text. I’m using Myriad Apple, and I just center the text between each tab, and I added a header “logo” (ok, so it’s just text ).

Now all you have to do is code it. Here’s a great tutorial on coding a tabbed CSS menu:

http://www.sitepoint.com/article/accessible-menu-tabs

Hope you enjoyed this tutorial, and found it useful. If you have any questions or need any help, just ask!