View Full Version: Techy Interface Button:

Paradise Pixels > Still Image: > Techy Interface Button:


Title: Techy Interface Button:
Description: Photoshop Tutorial


Scott Walker - April 6, 2006 12:10 AM (GMT)
This button is a little more techy than the first. I think its outcome is great, however, you might think differently. Take a look!

1. New Document (100x30 Transparent Background)

2. Fill the background with black.

user posted image

3. Now, enter the layer styles menu. And use the following settings:

Stroke:
user posted image


Stroke's Gradient:

user posted image


Gradient Overlay:
user posted image


Bevel & Emboss:
user posted image


Inner Glow:
user posted image


Inner Shadow:
user posted image


Alright, so now your button should look like this.
user posted image


Now its time to add a bit of a techy look to it.

4. Make a new layer. (Layer > New Layer)

5. Grab your "Ploygonal Lasso Tool" and make a selection like this:

user posted image

Now fill it with color #CDCDCD which should be a light grey.

user posted image

6. Now do the same thing for the other side.

7. Now bring up the layer styles, and use the following settings:

Drop Shadow:
user posted image


Inner Shadow:
user posted image


Inner Glow:
user posted image


Gradient Overlay:
user posted image

Gradient Options ^ :
user posted image


Stroke:
user posted image


And Now, your finished result should look something like this. Let me know what you think of it.

user posted image

[Optional]

You can use the Shine method that we used on the previous button, if you'd like. This is what it looks like then.

user posted image

-Scott




Hosted for free by InvisionFree