To the Vector Go the Spoils

Widget KnobRemember how I created those Aqua-style sliders and buttons a few weeks ago for that project at Behavior? After having finished designing them in Adobe Photoshop, I had come to the realization that they needed to be built using Adobe Illustrator instead, so that the buttons would scale easily and be less processor-intensive when used in Macromedia Flash.

So here are a few of the widgets that I built in Illustrator, with one of them scaled up to show how it maintains its fidelity at larger sizes. It took quite a bit of fussing around to get comfortable working in this style, but I managed to do it. They were about as difficult to build in Illustrator as in Photoshop, but I can’t imagine how much more difficult they would have been had I not essentially ‘sketched’ them out in bitmap form, first.

Aqua Widgets

The irony of the whole effort was that, having so painstakingly rebuilt them with vectors, we ended up using Flash’s Trace Bitmap feature to trace pixel-rendered versions of these widgets anyway. All the extra care I had invested in creating special blends and gradients for these buttons using Illustrator’s somewhat kludgy tools resulted in fairly bloated Flash objects. I was a little disappointed in this, but not too greatly because I felt it was a worthwhile experience to learn this illustration method.


One Comment