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

Sleek White Menu


1. Create a new document (350*128) and fill the background with #FFFFFF using the paint bucket tool.

2. Select a square size shape with your rectangular marquee tool and fill this shape with any color you like on a new layer using the paint bucket tool so you end up with this in the second step. You can see that i don't select what I've indicated with the guides but that's because we're going to cut of the lowest part of the button later in this tutorial and then I'll explain you why…

image 1

3. Make sure the rectangle is still selected and go to (select - modify - smooth) with 3px… Then go to (select - inverse) and press your delete button so you end up with a colored button with smooth edges.

image 2

4. The next step is to adjust the blending options on this layer like you can see in the screenshots below. So start adjusting!

image 3

image 4

image 5

image 6

image 7

5. Now duplicate the layer (layer - duplicate layer) you've just created and edited 2 times. Or more if you want more buttons! Place them next to each other to achieve this… This is already looking good and if you want to you can already add text with the horizontal type tool, but I'm going to take it a little further!

image 8

6. Like I said in step 2… We're going to cut of the lowest part of the button, so go ahead and make a selection like shown below. Then press delete to remove the lower part of it!

image 9

7. In this last step I've just added some text in #626262 using my horizontal type tool. The font is called microsoft sans serif and has a size of 9px… Note that I have caps lock on!

Sleek White Menu



Author's URL: PhoNuts.org
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: