Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Dark Clean Menu Header

Dark Clean Menu Header


We'll begin this tutorial, by creating a new canvas at a size of 609 x 158 then fill with b5b5b5 as the color. Next, select the "Rounded Rectangle Tool". Draw a rectangle as illustrated below with a radius of 5 pixels and color Black. Name this layer "Menu".

Now we will create a few anchor points to the shape as illustrated below. Select the "Add Anchor Point Tool" and place new anchor points in approximately the same place as I have done.

Click to enlarge
Click to enlarge

Next, select the "Direct Selection Tool" and select the two anchor points that I have selected below. Now, using the up arrow key on your keyboard and the "Shift" key, move the anchor points up three times as illustrated below.

Click to enlarge
Click to enlarge

Now right click on the "Menu" layer and select, "Blending Options...". Now click on "Drop Shadow".

image 5

Do not click "OK" yet. Still more to do.

Now click on "Gradient Overlay".

image 6

Do not click "OK" yet. Still more to do.

Now click on "Stroke".

image 7

You may now click OK.

You should now have the below image.

Click to enlarge
Click to enlarge

Select the "Text Tool" and use the below settings:

image 9

Now type in your menu items as I have done.

Click to enlarge
Click to enlarge

Next, select the "Line Tool" and draw a one pixel line using white as the color and turn the fill down to 11%.

Click to enlarge
Click to enlarge

Using the "Line Tool" again, draw another one pixel line using black as the color.

Click to enlarge
Click to enlarge

Select the "Text Tool" again and use the below settings:

image 13

Now type in your site title. The typeface used for the "Q" was "Neorpol" with d81313 as the color. It was also a larger size. The slogan was "Verdana" and was a size of 8pt.

Click to enlarge
Click to enlarge

Next, select the "Rounded Rectangle Tool". Draw a rectangle as illustrated below with a radius of 5 pixels and color White. Name this layer "Tab". This layer will be beneath the "Menu" layer in the Layers Palette".

Click to enlarge
Click to enlarge

Then, select the "Direct Selection Tool" and select the top left anchor points and using the right arrow key on your keyboard and the "Shift" key, move the anchor points to the right one time. Do the same on the otherside as well.

Click to enlarge
Click to enlarge

Now right click on the "Tab" layer and select, "Blending Options...". Now click on "Inner Shadow".

image 18

Do not click "OK" yet. Still more to do.

Now click on "Gradient Overlay".

image 19

Do not click "OK" yet. Still more to do.

Now click on "Stroke".

image 20

You may now click OK.

You should now have the below image after placing the "Tab" layer to the left as the image illustrates below..

Click to enlarge
Click to enlarge

Select the "Text Tool" and type in the tab menu item using step 7's settings.

Click to enlarge
Click to enlarge

The Results!!!

I duplicated the tab and added some gloss to the tabs as well as a reflection. I hope you enjoyed this tutorial.

Dark Clean Menu Header Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: EmpireDezign
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Dark Clean Menu Header"

Only registered users can write comment

No comments yet...