Aqua Button | Web Layout

First, create a new image, 250x100 pixels and fill the background with the color that you like.

Use Custom Shape Tool [U] to draw a shape that you want your button to look like.

Now is the time to add Inner Glow to your shape. Right click on the text layer and select Blending Options...

Layer Style window will open, select the settings that you see on the screenshot.

In the Layer Style window select Bevel and Emboss on the left and use settings that you see on the screenshot.

In the Layer Style window select Satin on the left and use settings that you see on the screenshot.

In the Layer Style window select Color Overlay on the left and use settings that you see on the screenshot.

In the Layer Style window select Gradient Overlay on the left and use settings that you see on the screenshot.

In the Layer Style window select Stroke on the left and use settings that you see on the screenshot.

Press ok when you done and your image should look like mine.

Aqua Button

Congratulations, now you know how to create aqua-style buttons in Photoshop.

Rainer August 22, 2008 says:

Complain to this comment

Great tutorial. Is there any chance to see it translated into german? :?:

nekoi March 26, 2008 says:

Hello!
I'm trying to follow this tutorial in Photoshop CS3 but in step 10 it won't let me do the changes to the alpha channel. Can anyone give me some help in this one. Thank You.

rlinsurf January 10, 2007 says:

Ok. There is yet another flaw in step 8. He says to:

"Press D then X to reset the foreground and background colors."

This is incorrect. D sets the colors back to the defaults of Black and White. He is mistaken that D will set Black while X will set White. What X actually does is Exchange Swatches, so in the next step, the foreground color will be White, and the background Black -- the opposite of the default colors. This will screw the rest of the tutorial.

So, finally -- Step 8 should read as follows:

8. Now load the selection from the 'button back' layer and contract the selection by 10 pixels. Then contract the selection by 6 pixels. Then feather the selection by 7 pixels. Now you are going to Layer > New Layer.., and a window should pop up. You want this window to popup, that's why we create a new layer by going through the menu. Now in this new window, name it 'bottom highlight' make the Mode: Color Dodge, and then check the box 'Fill with Color-Dodge-neutral color (black). Now press ok, then Press D to reset the foreground and background colors. Then hold shift and press the down arrow twice to move the selection down by 20 pixels. Now open the Fill dialog by going to Edit-->Fill. Select White as the color, and change the fill percentage to about 40%. Click OK to Fill. Then load the selection from the 'button back' layer again, checking the Invert Checkbox. With the selection made, press delete. Now deselect.

Unfortunately, you will still get stuck while doing the fill of the Layer Mask.

Unbelievable that the author has never bothered to correct these dumb mistakes. What a dork. <sigh>

DLSPhoto March 11, 2006 says:

To save time when applying the effect to future buttons save the layer styles in step 8 as a style. Then you can just click on that style to apply all four effects. Be sure to check "Include Layer Blending Options" when creating the new style.

Dave S.

pandaran August 30, 2005 says:

Hehe, man, I got worried I was wasting my time on this when I read these comments, but I had no problems with it. The place I suspect everyone was getting hung up in Step 8, slasher's way should work (but I didn't read it until after I'd done it). I just made sure the Move Tool was selected before arrowing down and it moved the actual selection instead of just the selection outline. Pretty neat tut!

Hope that helps with the confusion.

Edit: Or maybe people were having the problem I'm having now! The first time through I followed his instructions exactly ('cept for the part I mentioned before) just to make sure that it actually worked. Now I'm trying to apply it to a smaller button and I can't get the part in Step 8 to work right. I've tried adjusting the numbers when I Contract and Feather, but I can't get the color to look right once I fill in the selection on the new layer. *sigh* If anyone's got an idea drop me a line, please!

slasher August 03, 2005 says:

The problem with step 8 is part of it's out of sequence on one part. When it says to fill the selection with white, shift and down arrow twice, then load alpha...you actually should shift/arrow down twice, then fill. That way when you load the alpha and invert it crops the pixels outside of the main image.

I saved my .psd if anyone wants it let me know

chel June 29, 2005 says:

its the contracting part.. contract it by 10 and then 6 again?!..

meh.. i dunno..

mcanosa June 26, 2005 says:

I have a lots of troubles with step 8, how does he does it?
i'd thank anyone sending me a reply

gadgetguru May 13, 2005 says:

unfortunately not

I did found other similar tuts, but none of them had the same nice restult as this one.
So should anyone still pass here, I 'd appreciate the .psd file or a link to a similar tut.

thanks,

hallyscomet May 09, 2005 says:

It does go sour at #8. Did you get the .psd? I'd love to have it as well. Thanks,
Liza

gadgetguru April 04, 2005 says:

This is an awesome tut - however I 'm having some probs with it.. Can somebody send me the .psd ?
It goes sour at step 8.
thanks !

Reiven January 11, 2005 says:

Thanks, Venekirsa!

Now all images are on their places.

venekirsa January 10, 2005 says:

some images are missing

Name*
E-mail*