How to design a cool web 2.0 button in Illustrator and Photoshop

a cool web 2.0 button

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!).

a cool web 2.0 button tutorial

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.

5 cool web 2.0 button

They look quite nice as navigation icons.

Comments

  1. says

    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)

  2. Bray says

    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.

  3. says

    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! :)

  4. Jon says

    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.

  5. says

    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! :)

  6. says

    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.

  7. outsource web design says

    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 .

  8. Rob van der Hoek The Netherlands says

    Thank you Rob!
    I have managed to make a very nice shiny button with your help!

  9. says

    @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.

  10. daytona beach says

    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.

  11. says

    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).

  12. says

    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.

  13. says

    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!

  14. sven says

    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.

  15. Marco says

    Excellent! You explained the concepts rather than listing lots of parameters… which probably wouldn’t work on a different size or shape. Thanks Rob!

  16. Web Design says

    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.

  17. william says

    This was some of the best information that I got from your blog. My friend suggested me to visit this blog. Really good one!

  18. Horace Montalvo says

    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.

  19. says

    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.

  20. says

    Excellent! You explained the concepts rather than listing lots of parameters… which probably wouldn’t work on a different size or shape. Thanks Rob!

Leave a Reply

Notify me of followup comments via e-mail. You can also subscribe without commenting.