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

Stylish Buttons in Techno Style


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

Stylish Buttons in Techno Style image 1

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.

Stylish Buttons in Techno Style image 2

Apply the following layer styles to this layer:

Stylish Buttons in Techno Style image 3

Stylish Buttons in Techno Style image 4

Stylish Buttons in Techno Style image 5

And now your header should look like this one:

Stylish Buttons in Techno Style image 6

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:

Stylish Buttons in Techno Style image 7

Ok, now apply the next layer styles to your button:

Stylish Buttons in Techno Style image 8

Stylish Buttons in Techno Style image 9

To get something like this:

Stylish Buttons in Techno Style image 10

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.

Stylish Buttons in Techno Style image 11

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.

Stylish Buttons in Techno Style image 12

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.

Stylish Buttons in Techno Style image 13

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:

Stylish Buttons in Techno Style image 14

Now you can add text!

Stylish Buttons in Techno Style image 15

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.

Stylish Buttons 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 "Stylish Buttons in Techno Style"

Only registered users can write comment

Reader's comments