The Siamese button. The coolest and new standard for web 2.0

Web 2.0 style is taking over the new standards for web development, and complex buttons are difficult to create. When the button has reflections, refraction, shadows, glow, lighting… composing new shapes and rollover states is very time comsuming.

How to streamline the process

The big “how” here is “downloading the native files linked below”.

Fortunately Adobe Illustartor can handle multiple fills and outlines with their mutiple effects for each on them, all for the same path. So you’ve just got to move one node, one path, to change all the fills, all the effects, at the same time.

That, combined with multiple path effects (exclusion, subtraction, etc.) that allow new effects applied on top and so on… makes possible the Siamese button.

Here’s a video that shows you how easy is to change the button’s shape, with one single stroke (I used nudges at first, so you can see it with antialiased rendering. Ai doesn’t refresh the preview while dragging a curve, until it’s released)

The possibilities on different styles are limited just by your imagination. You can go as far as your brain collapses on keeping track of all the nested effects.

I noticed not many people use Illustrator’s appearance palette as they could, so while you get used to work with it in this advanced way, here is a start-up. Below, is the link to the native Ai file for download, including many button styles.

About the author:Sergio Zambrano

Print designer until it started to die, Web Designer by hobby and Coder by force. Living in Miami and getting less sun than russians in winter, but I like Wordpress develpment even more.