Gloss effect is very popular weapon in the arsenal of web 2.0 designers. You can create it using any main stream app but I will show you how to do it in Adobe Illustrator CS3 (any version will do I guess except maybe some ancient one
) . This is I believe the easiest way yet and gloss effect can come handy for many things if you are Aston (or any other app) skinner. You can use it for instance for glossy balls like in Vista glossy orb start button, icons or whatever. Ok launch your Illustrator and create any size basic rbg document (use rbg document for all that does not need to be printed on paper – that is the fastest explanation I can give). Size of the document or of the objects is not important since we are dealing with vectors here and we can always resize it at any time without any fear of quality loss. In order to have something to apply gloss effect to I’ll show you by the way how to create nice blended object which is neat alternative for gradient fills and can lead to some pretty cool results.
Step1
Let’s quickly draw two circles by using the elipse tool, set the color of the larger circle to darker color than the one inside and set the stroke to none.

Step 2
Now go to menu > Object > Blend > Blend Options and set it to specified steps and set the number of steps to 140 (general rule is that the higher the numbers the smoother the blend you’ll get).

Now to apply this settings select both circles (ctrl+a keys will do), go again to menu > Object > Blend and hit Make, options that we have set for blend will take the effect and you should end up with something like this
We have now created blended object which will be really cool base for what I will show you next.
Step 3
Now to make it look glossy and wet. Slect the elipse tool again, draw a circle and fill it with gradient from white to black and set the angle to -90 (or 270).
And now the last step go to transparency tab and change the blending mode from normal to screen
As soon as you set it to screen you will get something like this.
Ok this was really easy and fast (I hope) . Of course you can make it more eye-pleasing and complex by dropping shadows and stuff but this is a good staging ground for more complicated stuff. In the next tutorial I will show you how to use vector masks with gloss.
Download
Adobe Illustrator CS3 source file












Hi,
I tried this tutorial, and I got to the last step. I have CS2. When I chose “screen” in the transparency window, it just turned the ellipse white. Do you have any suggestions? Thank you for your time.
well sorry for late reply, most likely the ellipse was not clear white to black gradient it is very important before turning it to “screen”
How do you turn the white into clear white in CS3? I know it’s kind of a noobish question but I cannot figure it out coming off of CS4.
how do you mean clear white? transparent , glossy, if that is what you mean than than by changing the blend mode to “screen” instead of “normal”
No I mean in the gradient options for the ellipse and turn the gradient to clear white into black. I can’t figure out how to make the clear white, like turn down the opacity in the white part of the gradient to make it clear/transparent.
Sorry if that was even more confusing, was the best way I could describe it. The options are all there in CS4
No, the “gloss effect” did’nt work for me either!! Did exactly as you but i also just get it plain white in blend mode “screen”. Turned the gradient into greyscale so it is “plain white” and “plain black”. Any suggestions?
Make sure that the white is white #FFFFFF and the black is black #000000 in the gradient before setting it to screen, or download the included source file and have a look.
Thanks man, works great!
rad, thanks a ton!
didn’t work for me either till i pasted my graphics into your source file. then it woked great…. would be interested to find out why this is.
yes sure why not, what version of app do you use?