Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Alien Interface Button

Alien Interface Button


We'll begin this tutorial, by creating a new canvas at a size of 266 x 145 then select the "Rectangle Tool". Draw the below shape as illustrated using White as the color. Name this layer "Base". The background color for this tutorial is 3e3e3e.

image 1

Now right click on the "Base" layer and select, "Blending Options...". Now click on "Inner Glow".

image 2

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

Now click on " Color Overlay".

image 3

You may now click OK.

You should now have the below image.

image 4

Using the "Rectangle Tool" once again, create the next shape using 282828 as the color. Name this layer "Base 2".

image 5

Next, grab the "Rounded Rectangle Tool". Draw a rectangle as illustrated below with a radius of 100 pixels with Black as the color. Name this layer "Button base".

image 6

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

image 7

Do not click OK yet... still more to do.

Now click on "Outer Glow".

image 8

Do not click OK yet... still more to do.

Now click on "Inner Glow".

image 9

You may now click OK.

You should now have the following.

image 10

Next, grab the "Rounded Rectangle Tool" again. Draw a rectangle as illustrated below with a radius of 100 pixels with White as the color. Name this layer "Button".

image 11

Now, right click on the "Button" layer and select, "Blending Options...". Now click on " Inner Glow".

image 12

Do not click OK yet... still more to do.

Now click on "Gradient Overlay".

image 13

You may now click OK.

You should now have the below image.

image 14

Select the "Text Tool" and use Neuropol (download typeface here) typeface at a size of 10, Faux Bold as illustrated below. Set the Tracking to 20 and use Black as the color. Type in your text, in this case, I'll type in "Empire Dezign".

image 15

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

image 16

You may now click OK.

You should now have the below image.

image 17

Now select the "Line Tool" and draw out a vertical line with a weight of 5px. Make certain that the foreground color is White. Name thius layer "Tube".

image 18

Now we will create a couple additonal anchor points to the line. Select the "Add Anchor Point Tool" and place a new anchor on the left and right side, centered.

image 20

Next we will need to move the newly made anchor points. To do this, select the "Direct Selection Tool" and select the anchor points that you just created, holding in the "Shift" key on the keyboard will add to the first selection. Now, using the arrow keys on your keyboard, move the anchor points to the left as illustrated below.

image 22

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

image 23

Do not click OK yet... still more to do.

Now click on "Inner Glow".

image 24

You may now click OK.

You should now have the following:

image 25

Duplicate this layer several times and move to the appropriate places as illustrated below. For the right side tubes, you will simply go to the main menu and select "Edit" then "Transform" and lastly "Flip Horizontally".

image 26

Next, select the "Elipse Tool" and draw a circle as I have done below using Black as the color. Call this layer "Tube Hole" and place beneath the "Base" layer in the Layers Palette.

image 27

Now right click on the "Tube Hole" layer and select, "Blending Options...". Now click on "Bevel and Emboss".

image 28

You may now click OK.

You should now have the following:

image 29

The Results!!!

As you can see, I duplicated this layer several times and move to the appropriate places as illustrated below. I hope you feel that you made something cool here. I'm happy with it.

Alien Interface Button Tutorial: Final Result

another sample in green

image 31



Author's URL: EmpireDezign
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Share print this page subscribe to newsletter subscribe to rss

Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Alien Interface Button"

Captcha