Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Easy Menu in Minimalist Style

Easy Menu in Minimalist Style


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

Easy Menu in Minimalist Style image 1

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:

Easy Menu in Minimalist Style image 2

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

Easy Menu in Minimalist Style image 3

Easy Menu in Minimalist Style image 4

Easy Menu in Minimalist Style image 5

You can see the result:

Easy Menu in Minimalist Style image 6

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:

Easy Menu in Minimalist Style image 7

Then apply the Outer Glow layer style for this layer:

Easy Menu in Minimalist Style image 8

And now our substrate should look like this one:

Easy Menu in Minimalist Style image 9

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

Easy Menu in Minimalist Style image 10

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

Easy Menu in Minimalist Style image 11

Easy Menu in Minimalist Style image 12

Easy Menu in Minimalist Style image 13

Your picture should look as mine:

Easy Menu in Minimalist Style image 14

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

Easy Menu in Minimalist Style image 15

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

Easy Menu in Minimalist Style image 16

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

Easy Menu in Minimalist Style image 17

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%.

Easy Menu in Minimalist Style image 18

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:

Easy Menu in Minimalist Style image 19

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

Easy Menu in Minimalist Style image 20

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:

Easy Menu in Minimalist Style image 21

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.

Easy Menu in Minimalist Style image 22

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

Easy Menu in Minimalist Style image 23

To get something like this:

Easy Menu in Minimalist Style image 24

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

Easy Menu in Minimalist Style image 25

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

Easy Menu in Minimalist Style image 26



Author's URL: PhotoshopStar
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Easy Menu in Minimalist Style"

Only registered users can write comment

No comments yet...