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

Aqua Buttons


In this tutorial, I'll go over making aqua style buttons.

First, of course, create a new image. size doesn't matter.

Now, grab the Rounded Rectangle Tool image 1 and set the Radius to 15px

image 2

Now draw a rectangle with a height of 25px (the width doesn't matter; the height doesn't matter too much either)

Next we need to rasterize our shape. apple-click (right click) on the new shape in the layers pallet, and select Rasterize

Now for some styles. Double click your shape layer in the layers pallet to bring up the Layer Style window. Now for our styles.

Drop Shadow

image 3

Inner Shadow

image 4

Gradient Overlay

image 5

Still on the Gradient Overlay, click the gradient (under the opacity) to bring up the Gradient Editor enter use the following settings:

image 6

Strock

image 7

your image should now look like this:

image 8

Now, create a new layer above your shape.

Still on your newly create layer Command-Click (Ctrl-Click) the thumbnail on the shape layer in the layers pallet to load its selection.

image 9

Next, contract the selection by 2 (Select > Modify > Contract)

image 10

Next, feather the selection by 2 (Select > Feather)

Still on the new layer, grab the Marquee Tool image 11 Hold Option (Alt) and drag the selection halfway up the rectangle, this will delete the bottom part of the selection.

image 12

Now, with a foreground of White (pressing D then X on your keyboard will reset your color pallet to this), and still on the new layer, grab the Gradient Tool. While holding down Shift drag a line from about 5 pixels above your rectangle, to the bottom of your rectangle.

Now change the Opacity of your new layer to 55%

Still on your new layer, Command-Click (Ctrl-Click) the thumbnail of this layer in the layers pallet to load its selection.

image 13

Again with the Gradient Tool, holding down shift, drag a line from the top, to the bottom of this selection.

That's it, you're done..

Aqua Buttons



Author's URL: Nathanael Mitchell
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Aqua Buttons"

Captcha