Tear down: How to create a pulsing button using Fireworks and Flash

When using vector tools for drawing realistic objects, many subtle tweaks are required here and there to give that realistic “fit and finish”. The process is not linear, like many tutorials are for certain things. There is no step 1, then 2, then 3. Rather, there is a cycle that is more like “rinse, wash, repeat if necessary”. So let’s tear apart a finished, realistic-looking vector object to see what makes it tick after all is said and done.

I like to think of drawing in vectors as more like modeling with clay than, say, painting. When I paint, or simply use bitmap tools in Photoshop, I think in 2D. I don’t see layers as much as I see the final product. But with vectors, I’m aware at every step that each object is like a little piece of clay I can mold, add to, or remove as necessary. As multiple brush strokes quickly fade from my frontal lobe memory, each little bitty I draw in a vector program remains in my memory (more or less) and I’m always cognizant of the constructed nature of what I’m doing. Maybe it’s even a bit like Lego’s, where I know I can “undo” and “reattach” anything I do at any time.

Now, with a process like that which is very iterative, a linear tutorial just doesn’t make sense. A time lapse video might work too, but then it would take way too long to sit through. So, what I’m going to do here is start with the final product and work it backwards, using the tear down method, to reveal what I did. Hopefully looking through this will be of some use to someone wanting to get started creating realistic vector illustrations.

The problem, even with the tear down, is that it might give the illusion that showing the layers that together make up the image represent a linear process of creation. This is not the case. What you see here are the finished layers that combine to create the button at the end. You can’t really see my unending fudging and tweaking, but you can see the end result.

It’s very important to remember that each layer has some kind of effect on the overall image. Unfortunately for some people, I’m the guy that can spot 1 pixel being off by 10% from across the room on a dirty LCD. So some of these layers might not look like they affect the final product much or at all but they do in some subtle, cumulative way.

Let’s start with the final product in Flash, and tear down the layers from there:

What we have here is two PNG images cross fading over one another in Flash. The “off” layer sits on the bottom, and the “on” layer fades in, and then out, and so on, on top of the “off” layer. The transparent PNGs with their shadows are sitting over a brushed metal texture I also imported into Flash.

Here is the final “on” layer with typography after being reduced before being imported into Flash.

I reduce some vector artwork when I convert to bitmap for the same reason that many illustrators using traditional media work at a slightly larger size than the final reproduction. Reducing artwork has a tightening, polishing effect you just can’t get by hand. Same applies to vector artwork, at least for me.

Here is the final “off” layer after reduction.

This is the final, full size “on” layer that shows the interaction of all the layers. I did not add typography to this, as I wanted Photoshop (and not Fireworks) to set the final type so I could carefully control the kerning between letters as I had to get it just right, as well as the aliasing. Fireworks CS3, as any Fireworks user knows (before CS5) has a lousy type engine.

We removed the vector reflection, which is filled with white and white set to transparent, giving it the fade out effect. One great strength of Fireworks is the ease of which you can create and edit gradients on vector objects that have transparencies in it.

I removed the flat black circle to reveal another simple circle filled with a gradient.

I turned off a dupe of the orange ring. It’s subtle, but if you look at this image and the preceding one, you’ll notice the preceding image has more orange glow casting ambient light on to the lower part of the bevel of the button.

Here, I’ve turned off the inner area of the button that is “scooped out” in the preceding image. Notice how the “scoop” circle above has a slight glow which adds white to the “rim”. It’s this complicated interaction between glows and gradients that gives wonderful, sometimes accidental effects.

Another orange glow layer has been turned off. Notice how there is almost no ambient orange on the underside of the button, but there is some at the top of the button.

The large fundamental black gradient circle with black inner glow has been turned off. We now see the base orange shape (arbitrary color) with a stroke of orange, and a slight glow.

Here, we just have the base circle I started with.

I deleted the orange circle to reveal a set of black circles with have their shadows and glows interacting for a complex shadow that simulates diffuse lighting coming from a few different directions.

How did this get here? At some point, I grabbed the shape used up higher in the layers that had the right glow on it, and I duped a copy to the back and played with it’s shadows yet again. I do this a lot, not caring what is in the layers that I can’t see, kind of like how a clay sculptor doesn’t care what some parts of his wireframe actually look like.

Messing with a few more shadows…

This layer supports a hard, dark shadow that is important for the contrast it creates.

The final layer here is one of the oft-duped circles but with a motion blur at a slight angle.

And finally, our base metal texture.

And to recap, the final “glow” image once more:

Putting it all together

The process of creating realistic graphics using vectors is a very personal, customized, iterative process that requires the use of the following tools and tricks:

• gradients
• gradients with transparency
• translucent layers
• shadows
• glows
• multiple dupes of core shapes with different effects applied to them to create complex visual interactivity.

The Flemish Renaissance painting Masters developed a technique of painting that relied on optical mixing of layers and colors to achieve their depth and brilliancy. I’ve applied some of those same concepts here, as it’s most important to realize you can’t get the right effect with just one simple shape and effect layer. Let the layers mix for you and dazzle you with unexpected exhuberance!

You can see the “real” button live in use on a client site if you’d like.

Happy vectoring!