Welcome to the MacNN Forums.

ashtoash · Jun 27, 2005, 02:22 PM

I want to make buttons in this style, BUT I want to make them in different shapes as well, not just circles. I notice many buttons have the half-moon style reflection which is just a duplicate of the button layer with a circle part cut out. I've seen tutorials on this but none that really capture the clean style of these mac buttons. Can somebody lay out in step by step how I can create this type of button with ANY SHAPE from scratch in Photoshop? The other tutorials out there are cheesy and have too much gel effect.

Thorzdad · Jun 29, 2005, 03:46 PM

There are several basic tutorials on how to make aqua-type buttons out there (which is where the whole "shiny button" trend came from.) You can take those basic tutorials and extrapolate the instructions to whatever shape you want.

Here's a typical one.

loki74 · Jun 29, 2005, 11:55 PM

thats all fine and dandy but it only covers B&W stuff... and i think the result of that tutorial looks ugly.

Basically its pretty simple. you have a gradient and a specular. The gradient gets lighter in the opposite direction of the light source. This is because it is actually the light reflecting off of the back of the shape (seen through the shape) which, of course, would be a concave surface. The specular goes closest to the light source. It can be a gradient (brighter towards light source) or solid.

This is a little thing i threw together just now... PM me w/ ur email if you want the .psd

As I mentioned earlier, the backing gradient is supposed to be light reflecting off of the internal back of the object, passing through the object. Thus when the light gets to the eye, it has been thoroughyl filtered by the glass object. Thus, there should be no white in the gradient. The lighter part should be a lighter hue. Notice on the blue aqua buttons in OSX, the lighter part of the back gradient is not white, or even light blue. Its kind of a cyanish color. Basically, yellow is the lightest hue. So gradiate from color x to its neighbor closest to yellow. ie red->orage, blue->cyan, orange->yellow, etc. However, something like purple is paradoxical, because neither red or blue look necessarily lighter than it. In that case, go for the white. Also go for white (or lighter version of color) when you want it to look decidedly desaturated.

ashtoash · Jun 30, 2005, 03:34 PM

Originally Posted by loki74

thats all fine and dandy but it only covers B&W stuff... and i think the result of that tutorial looks ugly.

Basically its pretty simple. you have a gradient and a specular. The gradient gets lighter in the opposite direction of the light source. This is because it is actually the light reflecting off of the back of the shape (seen through the shape) which, of course, would be a concave surface. The specular goes closest to the light source. It can be a gradient (brighter towards light source) or solid.

This is a little thing i threw together just now... PM me w/ ur email if you want the .psd

As I mentioned earlier, the backing gradient is supposed to be light reflecting off of the internal back of the object, passing through the object. Thus when the light gets to the eye, it has been thoroughyl filtered by the glass object. Thus, there should be no white in the gradient. The lighter part should be a lighter hue. Notice on the blue aqua buttons in OSX, the lighter part of the back gradient is not white, or even light blue. Its kind of a cyanish color. Basically, yellow is the lightest hue. So gradiate from color x to its neighbor closest to yellow. ie red->orage, blue->cyan, orange->yellow, etc. However, something like purple is paradoxical, because neither red or blue look necessarily lighter than it. In that case, go for the white. Also go for white (or lighter version of color) when you want it to look decidedly desaturated.

THIS was very helpful, thanks I sent you a PM for the .psd file.

OwlBoy · Jul 23, 2005, 03:14 AM

Originally Posted by loki74

thats all fine and dandy but it only covers B&W stuff... and i think the result of that tutorial looks ugly.

Basically its pretty simple. you have a gradient and a specular. The gradient gets lighter in the opposite direction of the light source. This is because it is actually the light reflecting off of the back of the shape (seen through the shape) which, of course, would be a concave surface. The specular goes closest to the light source. It can be a gradient (brighter towards light source) or solid.

This is a little thing i threw together just now... PM me w/ ur email if you want the .psd
http://i8.photobucket.com/albums/a8/loki74/glasstut.jpg

As I mentioned earlier, the backing gradient is supposed to be light reflecting off of the internal back of the object, passing through the object. Thus when the light gets to the eye, it has been thoroughyl filtered by the glass object. Thus, there should be no white in the gradient. The lighter part should be a lighter hue. Notice on the blue aqua buttons in OSX, the lighter part of the back gradient is not white, or even light blue. Its kind of a cyanish color. Basically, yellow is the lightest hue. So gradiate from color x to its neighbor closest to yellow. ie red->orage, blue->cyan, orange->yellow, etc. However, something like purple is paradoxical, because neither red or blue look necessarily lighter than it. In that case, go for the white. Also go for white (or lighter version of color) when you want it to look decidedly desaturated.

Nice!

-Owl