Stylish Buttons in Techno Style

In this easy but nevertheless Photoshop tutorial I’m going to be showing you how to design professional menu for your website in techno style.

For the beginning create a new file of 500×200 pixels and 72dpi. Paint the first layer with black color.

Alright, now we need to make a part of header to see how the future menu buttons will be situated. Start by making a new layer. Now find and get out the Rounded Rectangle Tool (Radius: 5 px) and draw a rounded rectangle onto your canvas, this will be the part of your header.

Apply the following layer styles to this layer:
• Inner Shadow
• Gradient Overlay
• Stroke

 

And now your header should look like this one:

I finished up the header. Now time to add buttons. Select Rounded Rectangle Tool (Radius: 2 px) and
draw a rounded rectangle onto your canvas as on picture below:

Ok, now apply the next layer styles to your button:
• Color Overlay
• Stroke

To get something like this:

Good! Now I would like to add a glossy shine to the button. Start by making a selection around your button (Select > Load Selection) then activate the Gradient Tool and a white to transparent gradient, create a new layer and fill in the work area as below.

Deselect chosen area (Select > Deselect) and press Ctrl+J to duplicate this gradient. Hide the copy (click on the eye, which indicates layer visibility) and go back to the original gradient.
Make a new selection with Rectangular Marquee Tool and make clear the selected area.

Now go to the copied layer with gradient and make it visible again. Make a new one selection as shown below and make it clear to.

Remove the selection with Ctrl+D and set opacity up to 50% up for this layer. The button is done! Merge all layer of button in one and make two more copies of it, then move copies as on picture below:

Now you can add text!

Above I used Kroeger056 (8 pt, no Anti-Aliasing). Actually, this font is commercial. Feel free to try a different font, or you know, buy or ‘get’ a nice font from somewhere.
That’s it! We have a cool stylish buttons in Techno style for your website.

Posted in: Button,Effects