Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Techie Button
rss

Techie Button

Author: EmpireDezign More by this author


We'll begin this tutorial, by creating a new canvas at a size of 273 x 148 then fill with Black as the color.

Next, select the "Rounded Rectangle Tool". Draw a rectangle as illustrated below with a radius of 3 pixels and color e2e2e2. Name this layer "Button Frame".

image 1

Now right click on the "Button Frame" layer and select, "Blending Options...". Now click on "Drop Shadow".

image 2

Do not click "OK" yet. Still more to do.

Now click on "Inner Shadow".

image 3

Do not click "OK" yet. Still more to do.

Now click on "Inner Glow".

image 4

Do not click "OK" yet. Still more to do.

Now click on "Color Overlay".

image 5

Do not click "OK" yet. Still more to do.

Now click on "Stroke".

image 6

You may now click OK.

You should now have the below image.

image 7

Next, select the "Rounded Rectangle Tool". Draw a rectangle as illustrated below with a radius of 3 pixels and color e2e2e2. Name this layer "Button Window Back".

image 8

Now right click on the "Button Window Back" layer and select, "Blending Options...". Now click on "Inner Shadow".

image 9

You may now click OK.

Now click on "Bevel and Emboss".

image 10

Do not click "OK" yet. Still more to do.

Now click on "Contour".

image 11

Do not click "OK" yet. Still more to do.

Now click on "Color Overlay".

image 12

Do not click "OK" yet. Still more to do.

Now click on "Gradient Overlay".

image 13

Do not click "OK" yet. Still more to do.

Now click on "Stroke".

image 14

You may now click OK.

You should now have the below image.

image 15

Next, duplicate the "Button Window Back" layer and clear the layer style. To do this, right click on the duplicated layer in the layers palette and select "Clear Layer Style". Name this layer "Button Window Front" in the Layers Palette.

Next download this pattern.

image 16

Now right click on the "Button Window Front" layer and select, "Blending Options...".

image 17

Do not click "OK" yet. Still more to do.

Now click on "Pattern Overlay".

image 18

You may now click OK.

You should now have the below image.

image 19

Select the "Text Tool" and use the below settings:

image 20

Now type your prefered text.

image 21

Now right click on the text layer and select, "Blending Options...".

image 22

Do not click "OK" yet. Still more to do.

Now click on "Drop Shadow".

image 23

Do not click "OK" yet. Still more to do.

Now click on "Color Overlay".

image 24

You may now click OK.

You should now have the below image.

image 25

I then added a small circle using the "Elipse Tool" on each side of the button frame. I hope you enjoyed this tutorial.

The Results!!!

Techie Button Tutorial: Final Result



Author's URL: www.empiredezign.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Techie Button"