Glass Button Technique...

As I'm sure some of you already know, the new Mac OS X will feature an interface that they are calling "aqua."

The buttons that they use look great. They look like glass capsules. I've tried to recreate the buttons in Photoshop without much luck.

Can someone tell me, step-by-step, how to make the button that says "aqua" at the top of this web page...

http://www.apple.com/macosx/aqua.html

The person that answers this question will have to spend some time typing out the step-by-step procedure, so I've made this question worth 300 points. It would also be nice if you could also post the button somewhere where I can see it or e-mail it to: MysticKnights@yahoo.com

By the way, I'm using the most recent version of Photoshop and I either have, or have access to any filters that may be necessary.
BoingomanAsked:
Who is Participating?
 
forkbeardConnect With a Mentor Commented:
I did a test of this before and let's see if I can do it again.  I imagine there must be an easier way with a 3rd party filter but I don't have it so here is how to do it manually.  I used Photoshop 5.5

1.  Make a new document at 150 dpi

2.  Draw the shape of the button.  I used the round marquee tool to make the rounded ends and then used the rectangle marquee to connect them.

3.  Fill this shape w/ white. ( Name this layer: White)

4.  Then make a new layer and fill the same shape w/ a blue color.  I used # 3399CC.  I set this layer to multiply and moved the opacity to 70%. (Name this layer: Blue)

5.  Make a new layer and still using the same shape, I contracted the shape by 5 pixels (Menu Bar:Select:Modify:Contract. ) then filled this w/ the same blue color. I also set this layer to Modify. (Name this layer: Dark)

6.  I erased a portion of the top layer to give it an inner shadow effect.  Brush #65 at 100%

7.  Make a new Layer. Draw white in the general area you just erased. Paintbrush #45 at 100%. ( Name this layer: Light) Then deselect everything.

8.  Go back to layer "Dark" and use the Gaussian Blur at 2.5 pixels.

9.  Then go back to layer "Light" and use Gaussian Blur at 10.0 pixels.

10.  Duplicate the white layer and then rename it "Highlight 1".  Then move this layer to the top of layer list.

11.  Free Transform this to about a 1/3 the full height and move the width in about a 1/8 inch on each side.  Position this shape a few pixels down from the top.

12.  Load the selection of this layer by holding down the Command key for Mac (Control key for Win) while clicking on the layer in the layer palette.  Then hide the layer and make a new layer.  Call this new layer " Highlight 2".

13.  With the selection of "Highlight 1" loaded use the Gradient Tool set to Linear and Foreground to Transparent.  Make sure white is the foreground color then draw a vertical line downward starting near the top of the selection and ending roughly in the middle.  If done properly the selection should fill w/ white at the top and fade out as it moves down.

14.  Deselect everything and then apply a Gaussian Blur to layer " Highlight 2" at 1.0 pixels. Then change the opacity to 80%

15.  Time to put in the type for the button.  First make sure the foreground color is black.  Click on the main window with the type tool selected.  This will bring up the Type Tool window.  To match the font used on the real Mac OS X buttons as closely as possible I used Helvetica at 23 point size and 0 tracking.

16.  Now for a background. Make a new layer and title it "Ground" (instead of "background" which could be confused with a background layer).  I drew a grey horizontal line and then drew a selection around just a part of it.  Make sure you draw the selection box to include an equal amount of blank space above the line to match the thickness of the grey line.  (ex. If the line is 5 pixels thick, make the box 10 pixels tall.) Not sure if this makes sense but it really isn't important since it is just the background. With the section selected, go into the menu Edit:Define Pattern. Then select the whole canvas and go into the menu again Edit:Fill.  In the pop-up window in the Contents section change the drop down menu to read Pattern. Then click Ok.  If done properly the whole background should fill w/ a grey and white stripe pattern.  Like I said this isn't really important if it works because the main thing is getting the button to look good.

17.  Almost done.  Change the "White" layer opacity to 60% to give the button a see-thru quality.

18.  I decided to go back and tweak the layers to give a better color quality.  I brought the opacity of layer "Blue" back up to 100%.  I then duplicated the layer "Dark" to give the image a sharper contrast.

19.  Now to soften the edges of the image.  I loaded the selection of layer "Blue" then selected Inverse. (Menu:Select:Inverse)  This will select the opposite of what was selected before.  Then feather the selection at 3 pixels. (Menu:Select:Feather)  Then make sure you have layer "Blue" selected and hit delete.

20.  Make a new layer titled "Shadow" and position it between the "Ground" layer and the bottom most layer "White".  Load the selection of the "White" layer and then feather the selection at 5 pixels.  Then fill this selection w/ black and then adjust the opacity to 25%.  Move this drop shadow down until the top is about 1/2 way down the button image.

21.  I decided to soften the layer "Light".  I deselected everything and then choose the layer. Used a Gaussian blur at 9.0 pixels and then changed the opacity of the layer to 90%.

22.  I also decided to go back and add a dark blue hint to the bottom edge of the button.  Use the paintbrush #45 and set to 100% opacity.  I loaded the selection of layer "Blue" and used the blue color from before.  I then clicked on the "Dark" layer and then painted a soft blue edge along the bottom of the button.

23.  Now you want to double check your image and make sure the layer order is correct. The order of layers should be: Aqua, Highlight 2, Highlight 1 (hidden), Light, Dark copy, Dark, Blue, White, Shadow and Ground.  If there is nothing else you want to do to the image, you are ready to flatten the image but first save it as a ".psd" so you will be able to edit the image later if you wanted.  Now flatten it. (Menu:Layer:Flatten Image)  It will ask you if you want to "Discard hidden layers?"  Hit "Ok".

24.  Now change the resolution to 72 dpi. (Menu:Image:Image Size).

25.  Now save your image but make sure you give it another name so you don't copy over your ".psd" version.


Boingoman,
I will send you screen grabs of the steps I took to make the glass buttons.  I have re-read the steps several times to double check everything but if you have any problems or questions just let me know.

Note the number of the jpg's dont necessarily correspond to the number of the steps.  Just whenever something seemed to change visually I took another screen grab.

Good luck,

Forkbeard
0
 
BoingomanAuthor Commented:
Thanks for the help!
0
 
forkbeardCommented:
Looking back at step  24. Now change the resolution to 72 dpi. (Menu:Image:Image Size).
This will reduce your image by more than 1/2 its previous size.

What I forgot to tell you is to is to make sure all the boxes are checked at the bottom of the Image Size window, then write down or remember one of the Pixel Dimensions (Width or Height).  When you change the Resolution to 72 pixels/inch the Pixel Dimensions Width and Height will also change.  Then go back and put one of the numbers (Width or Height) back to what it was originally.  If you change the width it will automatically set the Heigth and vise versa.  Then hit "OK" and your image will stay the same size but be at the new resolution.

I had you work at a higher resolution to be more precise when designing the button, but you will need to lower it down to 72 dpi because that is the highest resolution monitors can display.  Anything higher will not make your image sharper and only be waisted.

Thanks for the points and enjoy.
0
All Courses

From novice to tech pro — start learning today.