Learn how to create a very sleek professional menu, definetly worth learning! Category: Web Layouts

Learn how to create a very sleek professional menu, definetly worth learning!

Step 1: Start off with a new 300 x 300 px document.

Step 2: Now I like to zoom in on my document around 300% so I can see what I am doing. While I am zoomed in, I take the "Rounded Rectangle Tool."
Rounded Rectangle Tool.


Use these settings:


Step 3: Now set your foreground color to #e1911e, and your background color to #feb302. Create a new layer, and draw a rectangle in the middle of the document approximately this big, doesn't have to be accurate, were going to be cutting this up.


Step 4: Now select your "Rectangle Marquee Tool."
Rectangle Marquee Tool.


Use these settings:


Step 5: Now click the fixed rectangle like below, the objective here is to cut all the round parts on the right side off.


Step 6: With that selection made, You will now need to inverse it, Select > Inverse (CTRL + Shift + I). This will select everything around the selection you made rather than selecting what you made. Hit "Del," Deselect (CTRL +D), and you should now have this.


Step 7: Now you need to add a gradient, just click the "Add A Layer Style" icon ( ), and select "Gradient Overlay...." Make sure you select the light orange to dark orange gradient, which are your foreground and background colors.


You should now have this:


Step 8: Change your foreground color to #f5d938, and create a new layer. With the new layer selected, grab your pencil tool, and draw a yellow line like below.


Step 9: Now change your foreground to #fd8000, and draw a line below the header this time, on the same layer as Step 8, but draw it like below.


Step 10: Now change your foreground color to #fbf465, and draw a line right below the last one you just did.


Step 11: Create a new layer, and put the layer behind both layers. Make a box like below and fill it in with #fee066.


Step 12: Now change your foreground to #ffcb69, and draw a line at the very bottom of the box you just created. Hide your background layer and go up to Layer > Merge Visible, than unhide your background layer. Add your menu items, and there is how you create a professional content box.

home: photoshop tutorials