Working with Vectors and Shapes in FireworksTutorial by: Bookie
One of the reasons I like Fireworks so much is because not only is it a great bitmap editor, but it is great with shapes and vectors too. Most people neglect, or do not even know about the certain commands you can use to create unique shapes instead of that boring old rectangle. Believe it or not, not all objects need to have 4 sides. This tutorial will cover creating small buttons that can be used for your website.
So start up your fireworks and create a new document. A good size for a button is 100x30 px. Now you've got the canvas waiting for some action. Don't just sit there, click down on the rectangle tool and hold. Choose the Rounded rectangle tool and create a rounded rectangle on your canvas, change the rectangle roundness which can be found in the properties bar (or option if your using Fireworks 4) so it looks like the one below.
Alright, so now you have yourself a rounded rectangle, terrific. Give it a 1px black stroke border by selecting it, and choose the flyout color menus beside the pencil in the properties bar. Choose black. Fill the rectangle grey (#999999). Great, its all colored now. In the center of the rounded rectangle, create yet another rounded rectangle. Make it about 8/10 the size of the original, and make the roundness about half. Give it a black 1px stroke and a fill of navy blue (#336699). You should have something like this:
Now we can get into the effects of fireworks... Select the inner rounded rectangle, and in the propertie bar click the + sign beside effects (or go to the effects docker in Fireworks 4). Go to Bevel and Emboss and select "Inset Emboss". Put the settings to the same as below for an inset effect:
Its starting to look pretty good eh? NOW we can make the bar that goes across the button. No click the rectangle tool (not the rounded one), and create a small 4 px wide rectangle on the side of your blue rounded rectangle like below:
Zoomed in to show example.Just a regular boring rectangle now, it need some 3Dness to stand out. What I did was fill it with a gradient to give it that standing out effect. Simply click the rectangle, and in the property bar go to the dropdown menu beside the painbucket icon (or the Fill docker in fireworks 4) . Choose fill options. In the dropdown in the flyout that comes out choose linear.
Click on the edit button to edit the gradient fill. Generally when you are creating pipes of some time you will want to go from a dark to light, to dark, and just a little light at the end to give it a great looking effect. Set it to something similar that i have below:
Fill order: #666666, #CCCCCC, #999999, #666666, #FFFFFFYou now have the gradient, but it is horizontal! To make it vertical select the black pointer tool. A black circle and black square show up attached with a line. Move the circle to the top of the rectangle, then drag the square to the bottom of the rectangle. This will make it a vertical fill. Excellent.
You can now go to edit > clone to clone the object. Then move the cloned object to the other size of the blue rounded rectangle. You now have the two endpoints where the pipe comes out. To creat the actual pipe just clone one of the ends, and move it to the middle. You can now use the scale tool, or use the white pointer tool and move the verticies to resize the object. The pipe should stretch from one end to the other, and be 2 pixels smaller in height than the end points. To give it an enhanced effect click the + sign by effects in the properties docker while the long recatngle is selected and go to adjust color > brightness and contrast. Drag the brightness up to about 20.
Furthering the effect: You can now do some final adjustments. What I did was clone another rectangle, make it about half the length. I adjusted the brightness to -50, and drew a black line on the left of the rectangle, and a white one on the right. Then I set the opacity down to 50% and put some text in there.
That is all, you now have a nice looking tube button!
