PhoNuts

Create a rounded, sleek, and wonderfull white menu bar for your website in no time using this tutorial!

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…

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.

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

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!

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!

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!

Please Login or Register to download the source files.