Create a Stylized Website Menu

picture9

Step 1 – Create a document with the dimensions: 620×50. Depending on what color your website is, you’ll want to have it filled a certain color. For today’s tutorial, we’re going to use white.

picture1

Step 2 – Grab your Rectangle Marquee Tool rectangle tool, and create a shape that spreads out near the edges of the document. Fill that with black. Duplicate this layer, and with the copied layer shrink it so that the black background layer looks like a border behind it.

picture2

Then add this emboss blending option.

picture3

Step 3 – Here we’re going to stylize the button a bit. This is an optional step, and you only need to do this if you’re using it for an artistic based website. Here just grab your paint brush, and find a brush you like and add some fun effects to it.

picture4

Then add some text, so people will know where they’re going when they click on the button.

picture5

Step 4 – Now we need to create some cohesiveness to link the buttons to each other. Creating the menu effect. Grab your rectangle marquee tool rectangle tool again.Create a very thin rectangle that protrudes from your Home button.

picture6

Step 5 – Here, I like to create smaller buttons than the home button. You’ll still want them to look similar though. So grab your black button background layer and copy it. Slide it over to the connecting bar on the right. Transform it and shrink it a bit.

picture7

Now, do the same for the top button layer. Add whatever text you want for that button

picture8

Step 6 – From here you’re just repeating steps until you have the amount of buttons you want in your menu. Here’s what my final product looks like..

picture9

Leave a comment