Custom-designed buttons have come a long way. We’re no longer tied to the standard HTML buttons dropped into our designs by the browsers, and there are many, many button styles out there. We see quick tutorials on how to create more complex button designs with gloss, shine, depth, shadow, texture, and general “make you want to touch it-ness”, and most of those how-to guides involve creating more refined buttons using several objects, vectors, layers, blend modes, etc.
I prefer to work with vectors and editable filters and effects whenever possible, because it makes it much easier to edit a design later when the size or color needs to be changed. I wanted to see if it is possible to create a more complex and detailed button with nothing but two vector objects: a button and a text label. Here’s how I did it.
Draw a 200 x 30 pixel rectangle. Give it a solid fill (#1E92C1) and a 2 px soft line stroke (#BBDDEC), then round the corners by 10 px (this option is in the Properties panel.)
Create a highlight as if there were a light source from above the button by switching the fill from solid to Gradient > Ellipse with the colors ranging from light in the center (#61B2D3) to dark (#1E92C1).
Adjust the color points in the gradient to give it a sharper contrast between the light and dark region, then adjust the gradient handles on the button fill to create a curved highlight at the top of the button.
Add some textures to the stroke and fill to give it a bit more character and make it less flat. Apply the Line-Diag 2 texture at 50% to the stroke, and apply the Mesh texture at 5% to the fill. (I use the mesh texture at a really light level to emulate adding noise; this smoothes the gradient for small objects. Fireworks CS5 now has gradient smoothing, but it is only available for Linear and Radial gradients, not for Ellipse.)
Give the button some edge detail to give it stronger distinction from the background. We could just draw a few more rounded rectangles with no fills and create a group of multiple objects for the button body, but my goal is to create this button with only one vector object.
Apply two Live Filters from the Properties panel:
- Glow (width = 1, softness = 1, offset = 0, opacity = 100%, color = #1E92C1)
- Inner Glow (width = 2, softness = 1, offset = 4, opacity = 65%, color = #18739A)
The button now looks like it has a subtle bead border trim.
Give the button additional lighting effects and depth as if the light source were directly overhead. (Fireworks and most other graphics programs default to shadows off the lower right corner, but most monitors are vertical surfaces likely to have light sources above them, so a shadow directly below the object is often more realistic.)
Apply two shadows to darken the lower portion of the button and give it some subtle elevation off the background:
- Drop Shadow (distance = 2, softness = 3, opacity = 70%, angle = 270, color = #666666)
- Inner Shadow (distance = 5, softness = 7, opacity = 40%, angle = 90, color = #111111)
Finally, add the button text (here we use Myriad Pro (Regular) 14 pt in #FFFFFF) and apply a tight drop shadow from the Live Filters in the Properties panel to better delineate the text from the button body and make it consistent with the overhead lighting.
- Drop Shadow (distance = 1, softness = 0, opacity = 50%, angle = 270, color = #000000)
And there we have it, a better than plain button created with only two vector objects, and everything remains editable!
Download the Source Fireworks File (right-click and Save As…)
UPDATE 1: Michel created this button variation and shared it with us. It’s much better!
Update 2: Kaelig created this button and used one of the available Photoshop Live Effects. (I changed the font from the original, because I didn’t have the same font Kaelig used, so this version looks a little different.)