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

Auqua Button

Author: Lindsay Coome More by this author


Open up a new image in photoshop, any size, but preferably about 500X500 pixels. Go to the channels window beside your layers window, and click the "create a new channel" button at the bottom right corner of the window. It's name should be Alpha 1. Now, using whichever tool you would like, (lasso tool, marquee tool) create a selection in the shape you would like your button to be (square, circle, oval). My pill shaped selection is shown below.


Now, still in the channels window with your button shape still selected, change your foreground colour to white, and fill in your selection. With your now white button still selected, go back to the layers window, click on your layer, and fill the selection with blue. (HEX code, #4171A7)



Go to layer>>layer style>>inner shadow, and use the settings below.


Now go to layer>>layer style>>bevel and emboss. Use the settings below.


Now apply satin by going to layer>>layer style>>satin, and use the settings below.


Apply gradient overlay layer>>layer style>>gradient overlay, and use the settings below.


Now, while holding down ctrl, click on the layer with your button on it. Your button should now look something like this:


Go to select>>modify>>contract, and contract the selection by about 25 pixels.
Then go to select>>feather, and feather the selection by 15 pixels.
While holding down Alt, click the New Layer button at the bottom of the Layers palette.
Create a new Color Dodge layer with color-dodge-neutral black color.
Fill the selection with white using the Paint Bucket tool.


Now click on the F at the bottom of your layers palette, and click on blending options. In blending options, set the fill opacity to 35%. Click OK.
Go to filter>>blur>>gaussian blur, and blur the layer by about 7 pixels.
Now, while holding down ctrl, click on your original button layer, to select it's transparency.
Go to the bottom of the layers palette, and click "add layer mask".



Select your original button layer, and click "add layer mask".
While holding ctrl, click on the button layer.
Go to select>>modify>>contract, and contract the selection by 25 pixels.
Then go to select>>feather, and feather the selection by 15 pixels.
With the selection still active, fill the selection with a light grey. (HEX code #A6A6A6).
Set the original button layer's opacity to 95%. With the rectangular marquee tool, create a rectangular shaped selection similar to below.



Create a new channel in the channels window and fill the selection with white using the Paint Bucket tool.
Go to edit>>transform>>skew and skew the selection as shown in the picture.
Hold down alt+ctrl+shift to create symmetry. The top of the rectangle should be smaller than the bottom.
Deselect, and gaussian blur by 10 pixels.
Go to image>>adjustments>>levels, and put the Input levels values to 120, 1, 132 and press OK.
Ctrl click the channel. Go to layers, and create a new layer. Press D.
Use the linear gradient tool, and while pressing shift, fill in the selection with gradient from the bottom to the top.
Set the layer opacity to 65%.

The finished product:



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 "Auqua Button"