Easy Vista Style Button and Menu

Vista has a pretty modern look and I thought this tutorial could show you techniques
to develop a button that looks similar to Vista’s menu.. Also, you could use this
tutorial to create a menu bar for a site or anything else you may want to do.

First start off with a 400X200px canvas. File>>New and change your width and height
to 400X200px.

Now we are going to create a few guides to help keep our different layers even and neat.

To set your first guide go your menu and click View>>New Guide:

After you get to the New Guide settings click horizontal and in position write 90px
like this:

Now do two more guides, one at 105px, and the other at 120px.

The regular vista menu usually goes across the screen and has no rounded edges but to make this an actual button I think it fits to be rounded. So I will grab
the Rounded Rectangle Tool:

It doesn’t matter what color you make the rounded rectangle because we are going to change the color of it later with a gradient overlay.

Also make sure in your shape options it is set to fill with a color:

Now that we have our rounded rectangle tool chosen start a new layer and draw the size of the button you want within the guides like so:

This layer is only going to be the top of the button so duplicate the layer so our top and bottom portions will be the same.

Now choose your top layer. In my case it is Layer 1 copy but you can change the names if it helps you keep up with each layer.

Pages: 1 2 3

Topics: Design, Menu, Photoshop, Vista