jantuR CSS Frameworks Lab.“hurry-up and be creative” demands of the graphic design industry.

Easy Menu in Minimalist Style

In this Photoshop tutorial we’ll be designing an easy menu in minimalist style.

Now we’re going to make a background. Create a new document in Photoshop, something like 500×300 pixels and drag a linear gradient with colors of #ffffff and #d5dfe0.

Alright, now I would like to create a window to see how the future menu buttons will be situated. Select the Rounded Rectangle Tool (Radius: 7 px) and make a shape like on a picture below using white color:

After that apply Outer Glow, Inner Glow and Stroke layer styles to this layer:

You can see the result:

Ok, now we can begin the main part of tutorial creating the menu. First of all I would like to create some substrate under the buttons. Select Rounded Rectangle Tool (Radius: 7 px) again and draw a rounded rectangle onto your canvas as on picture below:

Then apply the Outer Glow layer style for this layer:

And now our substrate should look like this one:

I think the time to create the button. Select Rounded Rectangle Tool (Radius: 5 px) again and draw a rounded rectangle like mine:

After that apply Inner Shadow, Gradient Overlay and Stroke layers style to this button:

Your picture should look as mine:

Time to bring some glare to the button. Find and get out the Pen Tool and make the shape as below using white color:

Click the Layer Thumbnail in the Layers Palette and chose Rasterize Layer. After that apply Quick Mask Mode with gradient as below:

Then go back to Standard Mode. Now we have some selected area. Press Delete to clear image into the area.

Then press Ctrl+D to deselect area. After that go to the button layer and apply Select > Load Selection, then apply Select > Modify > Contract to contract the selection about 1 px and press Ctrl+Shift+I to invert selection. After that go back glare layer and press Delete to clear selected area. Press Ctrl+D to remove selection and change layer opacity to 60%.

Looking good, isn’t it? Ok, duplicate this layer with Ctrl+J, after that select the Rectangular Marquee Tool (Feather: 2px) and create the selection like on picture below:

Press Delete to clear the chosen area, remove the selection with Ctrl+D, then move this layer 1 px down.

The next step that we need to do add two lines to the menu button. Get out the Pencil Tool and draw two lines like on my picture:

The color I’ve used above for lines #e5f3ff. To finish the menu I think we should add some title to the button. You can do this with Horizontal Type Tool. I’m going to use Myraid Pro (Semibold Condensed, 15 pt, Crisp) font with is commercial, that’s why you can try the different one or get it somewhere.

To make the button title more contrast apply the Drop Shadow layer style for this layer:

To get something like this:

Good! Now I would like to add a couple of buttons more to get the real menu.

That is it for now! Hope this tutorial was interesting and useful for you!

Abdur Rahim jAnTu
Community Manager at kigg.com
Mobile : +880-1714-246603
E-mail : abdurrahim@dotnetshoutout.com ,bossjantu@hotmail.com
Website : privatebeta.dotnetshoutout.com