Monday, May 28, 2007

Making Menu Bar for Your Web Graphic

Now what were going to make here is a really nice sleek web 2.0 menu bar.

Step 1

First create a new document size, 500 by 300. So go to layer/create new layer. Call it menu. Now grab the rectangle tool and draw out a rectangle. That will be our base for the rectangle. Then go to layer/rasterize layer.

Step 2

Go to layer/layer style/blending options. Then click on color. Make it the color C1BF00. Then click on stroke. Make the stroke, E3E3E3.

Step 3

Go to layer/duplicate layer. Then cut off most of the shape leaving a 5 pixel rectangle at the top.

Step 4

All you have to do is go to blending options, and remove the stroke and the color. Then give it the gradient with the colors C1BF00 and 000000.

Step 5

Then do the same thing on the bottom but just reverse the gradient. So now this is what you should have so far.

Step 6

No create a new layer again. Call it menuetop. Then make a rectangle over the one we already have and make sure its the color White or FFFFFF. Then just cut it in half but selecting half of it and pressing backspace. Then go to blending options and make the opacity to 25.

Step 7

Now its time to add the text. Make sure the color is FFFFFF So just write out the text across on top of the lighter rectangle. Then open up a new document. No matter the size. Then drag the text in. Then go to image/rotate canvas/ flip 180. Then flip canvas horizontally. Now drag the text back. Then align the two texts together.

Step 8

Grab the text under. You will go to blending options and give the gradient with these two colors. BBBA00 and FFFFFF. Then go to blending options and give it an opacity of 40.

Step 9

we will make the tiny bars that separate each link. So on top of all the layers create a new layer call it separate. Then make a two pixel selection and color it in black. Then give it a gradient with these two colors, B2B000 and CAC840.

Step 10

Duplicate out the separate bar to separate every link. This is what I have so far.

Step 11

So now we will make a selection over one of the links. Then we will color it in white.

Step 12

No just make the opacity to 25 by going to blending options. Then your done. You have made your web 2.0 nice and sleek menu. Good luck but this is what I got.

Thank the data and the picture from PSTuts.com

AddThis Social Bookmark Button

0 Comments: