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

Creating Custom Menu in Techno Style


First of all, create a new document sized 500x300 px, all the default settings and my background gradient colors are #244e49 and #001e17:

Menu in Techno Style image 1

Then apply Filter > Texture > Grain with similar settings to these:

Menu in Techno Style image 2

Ok, now we have something like this one below:

Menu in Techno Style image 3

Go to the next step. Time to add the grungy texture to the background. For this you can use my brushes. Create a new layer and make a couple of prints using the Brush Tool and black color.

Menu in Techno Style image 4

Make this grungy texture a little bit sharp. For this effect use Sharpen Tool.

Menu in Techno Style image 5

Now you need to make a curvy shape (it will be your navigation bar) using the Pen Tool, and color of #67716e:

Menu in Techno Style image 6

After that rasterize this shape with Layer > Rasterize > Shape and then apply Filter > Texture > Texturizer:

Menu in Techno Style image 7

See the filter effect now:

Menu in Techno Style image 8

Ok, to stylize this bar. Right-click your navigation bar layer in your layer's palette then go into the Blending Options, click and apply the following settings:

Menu in Techno Style image 9

Menu in Techno Style image 10

Menu in Techno Style image 11

Looking pretty much good now.

Menu in Techno Style image 12

Now I would like to bring grunge texture to the navigation bar to. Now, select the navigation bar with Select > Load Selection, after that create a new layer, then select the Brush Tool and make a new print with grunge brushes.

Menu in Techno Style image 13

Remove the selection with Ctrl+D, then use the Sharpen Tool again to make this layer sharp. Set opacity to 50% for this layer.

Menu in Techno Style image 14

Ok, begin to create button. Select the Ellipse Tool and make a rounded shape like on picture below:

Menu in Techno Style image 15

After that apply following layer styles for this layer:

Menu in Techno Style image 16

Menu in Techno Style image 17

Menu in Techno Style image 18

Menu in Techno Style image 19

Look at the picture below. Your button should look like this one:

Menu in Techno Style image 20

Now it's time to add a nice, glossy shine to the button. Start by making a selection around your button with Select > Load Selection, then contract your selection by about 3 pixels with Select > Modify > Contract and fill it with white color.

Menu in Techno Style image 21

Contract your selection by about 3 pixels again and press Delete to clear selected area.

Menu in Techno Style image 22

Deselect this area with Ctrl+D and apply Filter > Blur > Gaussian Blur with following presets:

Menu in Techno Style image 23

This is satisfactory result. Your image should look like this one:

Menu in Techno Style image 25

Now, change layer mode to Overlay and you will see the difference.

Menu in Techno Style image 26

After that I think we should bring glare to the button. Create a new layer, and then select the Pen Tool to create a shape for the future glare using white color.

Menu in Techno Style image 27

Rasterize current layer (Layer > Rasterize > Shape) and set opacity up to 40%. Now, use the Eraser Tool and a soft round brush about 90 px to make this shape semitransparent a little bit on the bottom.

Menu in Techno Style image 28

We are done with the button design. Now you can add text. Use the Horizontal Type Tool to write out button title.

Menu in Techno Style image 29

You can duplicate this button five times and you will receive the next navigation bar with menu:

Menu in Techno Style image 30

Thanks for reading this Photsohop tutorial, everyone. I hope you enjoyed it, and even learn something!

Menu in Techno Style Tutorial: Final Result



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 "Creating Custom Menu in Techno Style"

Only registered users can write comment

No comments yet...