Nov 01
5 Steps to achieve nice aqua effect
2004 at 02.10 am posted by Veerle Pieters
Due to popular demand, here it is, a step-by-step tutorial on how to achieve an aqua effect on a circle. Fire up your Illustrator CS (or 10) and get ready…
Step 1 - draw the circle
Draw the circle using the Ellipse Tool (click drag while pressing shift key). Fill the circle with a circular gradient. The values of the first gradient color I used are R194, G247 and B255, the second gradient color: R75, G147 and B255. The values of the color for the border around the circle are R76, G159 and B240 with a 1pt thickness.
Step 2 - edit the gradient's position
Edit the gradient's position by using the Gradient Tool. Hold down the shift key and click drag a vertical line upwards in the middle of the circle (from somewhere at the bottom to a bit above the middle of the circle).
Step 3 - add a white ellipse on top
Draw a smaller white ellipse on top of the circle and center align it with the circle (select both shapes and select the center align objects option in the Align Palette).
Step 4 - create an opacity mask
Copy the white ellipse and paste it in front (command/control + f). Select both ellipse shapes and select the "Make Opacity Mask" option in the Transparency palette.
Step 5 - edit the opacity mask if needed
To edit the gradient mask (if needed) to achieve the desired result, you need to select the gradient mask in the the Transparency Palette. Now that the mask is selected you can play around with the black and with gradient in the Gradient Palette. Or you can use the Gradient tool to alter the direction or position of the gradient.
The final result
When you've achieved the preferred result, deselect the opacity mask by clicking back on the image icon in the Transparency Palette. Voilà there you go :-)
Experiment with other shapes or techniques
Try experimenting this technique to other shapes like buttons with rounded corner for instance. Below you find some examples of other shapes and other techniques to achieve the aqua effect.
Want to learn more?
A good and not expensive source to learn more about Illustrator, Photoshop, or web design is by joining the Tuts+ sites. You get access to the source files for just $9 a month. So your ONE membership gives you access to members-only content for ALL the Plus sites. I've written a tutorial for the Vector Tuts section.
25served
1
Once again excellent tutorials Veerle!
2
Thank you, thank you, thank you Veerle!
I am designing a website and searched on a tutorial to do this buttons with aqua-effect. This is VERY timely.
btw: Your site/graphics/... are absolutely gorgeous!
3
Excellent tutorial Veerle, and you manage to present it very well!
4
Hi :)
Very nice.
Can you tell me what font do you use for comments in differents screenshot ? Is it Verdana ?
Thx!
Antoine
5
@Antoine, I’ve used the pixel font “standard 07_56”. It can be found on this site. You need to scroll all the way down till you see the “standard” collection.
6
Thank you very much Veerle!
Have a nice day.
Antoine.
7
What a sexy tutorial! Splendidly done!
-Shade
8
Cool… I’ve never made aqua button’s with Illustrator before (Always with Photoshop). Nice tutorial.
9
“Due to popular demand”
Eh? I’m not pupular :P
Thanks very much for the tut Veerle! I’ve indeed been wondering when you’d get round to this for a long time.
And now it’s here, I just can’t believe it’s so easy (or is it just that you make it look easy?). It isn’t a moment to late either…expect to find this technic in a major site soon :D
10
I never understood why Illustrator CS makes it so hard to create a simple solid to transparant gradient. As primarily being a Photoshop user, I’ve found this to be quite an annoying problem in Illustrator.
For some strange reason I seem to be able to work a lot easier with Macromedia Fireworks MX.
I guess it’s a matter of knowing it now, though it still takes time getting used to it.
11
You know, you figured everyone knew how to do this…but there are many, many who don’t. It’s nice to have an official tutorial I can point others to when they want to know how to make the nice aqua effect.
In PS-CS they have a preset in the styles that puts on the ‘white-to-transparent’ gradient for you. Makes things simple.
*bookmarked for my peers*
12
Great Job. First professional English Aqua-Tutorial :) And those of you guys who prefer a German version, may check out this Tutorial . ..
13
Excellent. I’ve been using Photoshop’s Bevel and Emboss feature. No more, thanks to Veerle!
14
Your self explanatory tutorials allows me to do it in Freehand too!
btw, how would you deal with a mouse over effect on the aqua gloss?
15
Awesome , really excellent, the auqua effect is usable for any graphical work !
16
Wilson: In step 1, make the gradient colour lighter for ther over image and darker for the out one.
17
great tutorial. i found it very helpful. and then today i found this. i have no idea what it says, but it is eerily familiar.
18
@nat, the tutorial that you are referring to is from Wolfgang and he has done a similar tutorial in German. He is a reader of my blog and has mentioned it here in the comments (look for the 12th comment)
19
This is a really great tutorial, very straight-forward and easy to follow.
Please do a few more veerle ;)
20
thanks Veerle!, I followed the tutorial in Fireworks MX (my editor of choice) and it worked perfectly. For anybody else using Fireworks just set the highlight shape to the “screen” setting to achive the same effect as Veerle’s Opacity mask.
21
As this has bothered aqua design, all will be speed of light-blue colour.
22
Hahah! This is awesome! Thanks a lot, Veerle! And thank you too, nikobe!
I tried doing it on Freehand, but couldn’t figure it out. After seeing nikobe’s comment, I tried it on Fireworks MX, and it worked! Now I can say I know how to make aqua-style graphics. ;)
23
i already knew how to make this kind of aqua-buttons in bitmaps but not vectorial ones… this helps me a lot. thank you very much verlee!
24
Nice tutorial!
I wonder when this kind of look is going to get old…
25
Great tutorial.
Commenting is not available on this article.