An earlier tutorial on how to make a shiny button in Illustrator using the Opacity Mask feature can be improved upon greatly by adding a sexy brushed steel surrounding ring to your amber jelly button!
As previously explained, the shiny “web 2.0″ button look can be made by placing a circle with a linear black-to-white gradient over a circle with a radial gradient and selecting Make Opacity Mask in the Transparency palette with both selected. See the first row in key below.
Other crescent shapes can be added by putting a smaller circle on top of another and Option-clicking on the second icon from the left of the Shape Modes row in the Pathfinder palette, the tool tip says “Subtract from shape area (Option-click to expand)”. This is a one click way to subtract one shape from another and something I use all the time in Illustrator. See rows 2, 3 and 4 below.
In row 5 below, the steel rim. Double-click the Scale Tool (S) enter 125% and hit Copy with the orange button selected (go Release Opacity Mask in the Transparency palette and get rid of the black and white circle. Put a linear gradient going white-to-black-to-white onto this larger circle. Duplicate the orange button again by pasting in front (Cmd/Ctl-F) get rid of the black and white circle and go Object > Compound Paths > Make (Cmd/Ctl-8).
Finally put all the elements on separate layers in Illustrator and go File > Export and choose Photoshop (psd) from the Format drop down menu. Choose RGB, 72 ppi and make sure you have the Write Layer radio button clicked on. Now we move into Photoshop for some final tweaking and blurring. Open the PSD you exported from Illustrator and you will see all your layers from Illustrator on different layers in Photoshop (top tip!).
Play around with it by blurring the crescent shapes a bit and copying and colouring layers a bit.
Most of the work I did was to the steel rim layer. Add a Drop Shadow and an Inner Glow in Layer Styles in Photoshop. Add Grain or Noise and a horizontal Motion Blur for the steel effect.
I put the orange button layer on top of the House layer and set it to Linear Burn Blend Mode.
They look quite nice as navigation icons.
Nice buttons
Great buttons, I will be using these tips in my next design project.
@Jenny and @Greenvilled Web Design, thanks for your comments!
these is great and prefect….i used to try once but the result was not as good as your. will try using your way to redo.
Hope it goes well, Wallace!
Thanks for the tip!
Is there anybody can help me…I have not enought technical skills to do it.
I just can’t create the circle ???
I would like to abble to build up the firts 3 steps of that explanation.
Anybody can help me …
Thank you … cstumpo [at] sapo.pt (Portugal)
Thanks for the comment, Ben. Carlos, I’ve sent you an email.
Thanks a lot for sharing! I like this shiny web 2.0 effect.
Brill,
You’re welcome, Photoshop User and Jon bann00n!
Cool. I keep trying this out but I use gimp and I can’t figure out how to do the steel rim layer thing. It always looks atrocious.
Hi Bray, I’m sorry I’ve got limited experience with GIMP. I’m sure you should be able to add the Noise and Motion Blur filters. GIMP maybe doesn’t have layer styles like Photoshop, but are you able to somehow darken the outside and lighten the inside by modifying selections? Good luck, anyway!
Damn those buttons looks nice.
Loves your tutorials Rob…
Thank you, Multimediedesigner
Very nice example. But I’ve just try that in Corel Draw 12. Thank you!
Thank you, Eugene. Good to hear it works in Corel Draw.
Thanks! Very nice!
Awesome stuff. And some more good news for cheapskates: I’ve just managed to get it to work in Photoshop Elements 5, using a white-to-transparent gradient instead of the opacity mask.
Oddly, the trickiest part was creating the curve in step 3; the solution was to intersect an elliptical marquee with a circular one and then smooth out the corners.
Cheers for the tip, Rob – nice one.
Hi Jon. That’s great news. I love to hear how these techniques work in platforms other that CS3. I know a lot of people use Elements, Gimp and Xara, etc. and they work very well. I’ve used the white to transparent gradient before in Photoshop to do the shiny bit many times! Thank you!
Thank you, Zoltan, you’re very welcome!
Hi! I have seen a lot of Corel draw and photoshop tutorials, but I do not remember finding one that is so descriptive and easy to follow. I am gonna try it out with my next project. Thanks for sharing.
merci bcp pr les explication
thanks
Hi Sajt! I’m glad you found it descriptive and easy to follow. Best of luck when you try it with your next project.
Bonjour, tedd62. De rien!
im addicted to web 2.0!! Can’t get enough
these are some spiffy icons
Thanks, this is what I was looking for.
Thanks you very much again.
the tutorial is nice , but you have not mentioned which version of photoshop illustrator is in use . it is important to match the steps you are going through .
Thank you Rob!
I have managed to make a very nice shiny button with your help!
@Admitting it is the first step, WordPress Hosting
@talyp, you’re welcome, you’re welcome
@outsource web design. This tutorial was done while I had CS2. I now have CS3 and it’s no different. I can’t remember which version of Illustrator the Make Transparency Mask option came in or the Transparency palette (I think about 7 or 8). That would be the only problem you’d have with an old version. What version do you have?
@Rob van der Hoek from The Netherlands. Well done, I’m glad you found it helpful.
Thanks. The button would be good in site application, I think.
these pointers have helped me out quite a bit with my new real estate site. i’m going for that web 2.0 look. thanks for the illustrations and how to.
Glad it’s been of help to you guys, Bayan and daytona beach. Let us know if you have any of the results of your efforts online.
Nice.
I already knew the opacity mask trick but the brushed steel with the motion blur was a good idea (have always done this with a rendered fibers layer composite in the past).
Just one thing though – if you’re going to use drop shadow this is a pixel based effect (as far as I know). I would opt for using a mask with a gradient wipe instead so everything will scale nicely (that’s if you’re doing it in Illustrator rather than Photoshop).
Yes, the drop shadows in Illustrator are made with bitmaps rather than vectors. To do a vector drop shadow I use the Blend tool in Illustrator. Thanks for the comment.
Nice Button. Thanks.
nine nice nice!!! teach me more…
Thanks for sharing, great tutorial of course.
Hello Testii, steve, and Andy, I’m glad you all liked the tutorial. More to come, of course. Thanks for the comments!
Thanks for the awesome tutorial, nicely explained, was easy to follow and the buttons look great.
Thx Rob!
Very nice and clear tutorial!
quite helpfull
Very nice.
How about a rollover version of this?
Great post m8, looking forward to more posts like this, so i bookmarked you
keos last blog post..Link feed – submit your blog to get better page rank !
Thank you, SJL, Mr K, mr m and keo! Keep on coming back for more. Maybe I’ll do a rollover!
Nice tutorial Rob! Very neatly explained, maybe rollovers would be an interesting post?
Nice tut. Added bro
wow….nice button…learn something new here…tats great!! keep it on
Very useful tutorial.Thanks
Cool buttons. This tutorial can help many new bees to learn and design glossy 2.0 style buttons at there own.
SEO Co, yes, I should do something about rollovers.
Hello Andy, thanks for adding
Hi sherene, glad you like the button designs.
Hello Mani, hope the bees learn! Thanks!
They have done really wonderful work here………
Great buttons, I will be using these.
web 2.0 buttons ?! do you know what web 2.0 is? hint… it has nothing to do with design or visual properties whatsoever… so there cannot be any web 2.0 buttons.
The concept of web 2.0 design has been with us for ages. You can go elsewhere on the internet to seek to re-define definitions in a living language – hint: give up!
what a moron… how about thank you?
I really like this tutorial. Easy and simple to follow. I always struggle with Web 2.0 anything. Specially the buttons.
Thanks, Henry, I appreciate the comment. I’m glad you found the Web 2.0 tutorial helpful.
Excellent! You explained the concepts rather than listing lots of parameters… which probably wouldn’t work on a different size or shape. Thanks Rob!
No problem, Marco, this has proved to be one of my most popular posts. Making 3d buttons is such a staple of the web designer’s world!
Nice. I like.
Well worth the read. Thanks for sharing this information. I got a chance to know about this.
These are all cool ideas for buttons. Thanks a lot for writing about this because I am into web design and this is very useful for me.
Thanks for this nice tutorial dude, love it awesome. And now I know.
Nice post. Many thanks for sharing this informative resource. These buttons are really cool
Wow! it is so simple! Thanks!
a video would help a lot!!!
Fantastic jelly buttons. I need some !! Thanks for the tut. Regards -
Great article, love the designs.
This was some of the best information that I got from your blog. My friend suggested me to visit this blog. Really good one!
Lovely. This button is to die for.
Hello Afam, thank you, and thanks everyone for the comments!
have been reading ur website around a few days. really like your posts. by the way i’m doing a research regarding this topic. do you know any other good blogs or maybe online forums where I might learn more? thanks a lot.
Great post, thank you. I signed up for your rss feed – hope you post mor.
Great job!!! Thank you!
thank you!
Is there anymore facts you can give on this subject ? It answers a great deal of my questions but there is still more information I need. I will drop you an email if I can find it. Never mind Let me just use the contact form. Hopefully you can help me further.
Great post, thank you. I signed up for your rss feed – hope you post more.
Excellent! You explained the concepts rather than listing lots of parameters… which probably wouldn’t work on a different size or shape. Thanks Rob!
I tried looking around but could not find the theme your using, if you have a moment could you email me Hutti@yahoo.com , and let me know? Or just reply to this comment, I will be back to check =)
Very good job my friend! Great tutorial.
Great post, thank you a lot!
Ah this is exactly what I’ve been looking for. I’ve always wanted to know how to make those shiny and reflective “bubbles”.
Glad I could help you here, Danny
Great creative concepts, thanks for the help!
Nice blog….i like read your post!
Very nice style and design and great written content , practically nothing else we require : D.
the tutorial is very clear and the image is very vivid.
Thank you, my man
Thanks for the tutorial! It was very useful and easy to follow.
Hey, no problem, Gina
illustrator 4 best forever thnx macromedia
cool article thanks dostlar
Great article, many thanks for sharing!
Thanks, Jason
Love this! The tutorial is very easy to follow, I’m going to enjoy improvising with this.
Thanks!
Thanks a lot for sharing! I like this shiny web 2.0 effect.