Glass Effect

[liquidstar]

The "glass" effect seems to be the in thing right now, and I was wondering if some of you graphic gurus could walk some of us lesser skilled individuals through creating on of the spheres.

A great example of this is at mac.com that cool bluish glass ball.

Also, there is a cool brand of Linux using this effect, as well, for their desktop icons gentoo.org/dyn/icons.xml

I know that one may get removed, but I'm just hoping someone can see these and help a guy out.

[le_gber]

Hi,

Have you tried googling for this?

here is the link [google.com]

<me being sorry>
sorry mods simple link to google, hope you don't mind
</me being sorry>

Hope this is what you're after :)

Leo

[edited by: mivox at 6:02 pm (utc) on June 17, 2003]
[edit reason] shortened Google link. ;-) [/edit]

[rogerd]

Looks like a 3D modeling program with settings for surface reflectivity and transparency (plus ray-tracing?) could create either the sphere or shiny round button effects. You could probably simulate a fairly simple effect like that without a full-blown raytracing program. Maybe one of the graphics gurus will weigh in...

<added>The aqua button effects described by le_gber look like a fairly easy way to accomplish the button effect without investing in 3D software. This should be fine if a highlight will do the trick instead of true reflections of light sources and objects. The full transparent sphere might be a bit tougher.</added>

[edit_g]

You can get Photoshop filters to do this sort of glass effecty - you just have to download them and pay for them.

Try a search for Photoshop filters +glass.

[araenae]

This effect are relatively easy to achieve, depending on wich software are you using. The effect works better if your buttons got a rounded / rectangular shape, otherwise it would be very hard to make it look good. I worked a lot to make this effects work on flash, cuz is awesome the way it looks, and are rendered as vectors so it take less time to download. Ok, now to the main procedure to make this effect in any graphics software:
1-Create the shape you will use as your button

2-Fill it with a horizontal gradient between a darker and a lighter color. Don't make gradients with too many different colors, or will look like sh*t. The gradient MUST be horizontal

3- Make two duplicates of the gradient filled shape, and scale'em 40% of its vertical size and 90% of its horizintal size, its not a proportional scaling

4- Redo the HORIZONTAL gradient fill on the duplicate shapes from white to transparent in one of them and from transparent to white in the other. Most graphics programs can make gradients from a color to transparent. PS 7, Fireworks MX, Freehand MX, Corel Draw 8.0+ and Flash MX could do that

5- Place the first duplicate shape OVER the original shape near the upper side of it, vertical aligned and do the same with the other duplicate but place it near the bottom of the original shape.

6- Voila!, you got it. One final tip: The smaller the button is, the best it looks

I build a lot of sites with this effect, but I can't give you the links, cuz the forum administrator told me I can't post it here, so mail me if you want me to give you that URL's. I could even give you a button template in PS-7, or Fireworks MX for free, in case it gets to hard for you to make it. :)

[kingkelly]

Easiest way is with plugins. Eyecandy can do it.

[liquidstar]

i have eyecandy, but haven't been able to get the effect I'm looking for. thanks for all the replies, some tutorials I've found have been great, but nothing has been exactly what I'm looking for.

[mivox]

I've never actually tried to emulate Apple's "gummy candy" button look... but I use a PS filter called Blade Pro for glassy and reflective/metallic effects.

I did once see a tutorial (I think it was in MacAddict magazine) that described how to use Fireworks to create a glassy oval button... so you definitely don't need 3D software to get the basic effect.

[edited by: mivox at 4:10 pm (utc) on June 18, 2003]

[limbo]

You are right Mivox

There are a number of filters in Fireworks that you can buy called Eye candy that are in someways more effective that the PS counterparts.

The glass filter applied to cirlce with a radial fill and highlights looks great.

Especially if you export it to PS - add a spherize to exagerate the reflection and then use a lighting effect set like omni to give a sense of solidity.

I love playing with mixed software, the things that can be generated between illustrator fireworks and Photoshop continually amaze me.

[jennij]

ACTUALLY_ you can make something very much like the blue ball on mac.com using CorelDraw. You may not want to use Corel to do it- but it's pretty simple and I very frequenly draw stuff there then import to flash or photoshop.

I think Corel had a tutorial (appropriately named 'Glass buttons') in one of their archived newsletter (on the site). They use an oblong shape, but it's great with spheres too.

AH! I FOUND IT - since this is a 'How-to' site, hopefully I can list the address here.. it's

[designer.com...]

If they take it out, stickymail me.

[mivox]

If they take it out...

OMG... I've become one of Them! hehehe... Now I have to think of some good rumors to start, and see if people start quoting me like, "Well, you know what they say, 'Blah blah blah.'"

[jennij]

hee hee :)
I never know if a link's going to be zapped or not- I'm pretty new but figuring it all out!

j

[hcstudios]

If you're using a specific product to make your glass balls, you can find product-specific tutorials by searching for "productname tutorial" which usually shows either the actual tutorials or else sites with lists of other tutorial sites (YMMV depending on SE). I did this at Google for Photoshop and found several general sites at the top of the results that had glass effect tutorials -- but if you're using a less popular graphics program it may be a little harder to find tutorials (Pshop seems to have tutorials on every corner).

User group websites and graphics magazine websites seem to often have links to tutorials as well. Also, I'm not a PSP user but those folks seem to hang out in herds (prides? flights?) and exchange tutorials on nifty techniques, so maybe searching for "productname forum" will provide what you need.