Fireworks Tutorial

Making a simple banner in fireworks is simpler than your might think. It involves creating a solid rectangle from a vector tool and modifying it with an array of presets. (1) First of all, canvas size must be set - something around 800 pixels for the width and 100 for the height. Then, it all starts with the creation of a simple rectangle using the "Rectangle tool" in the Tools menu under "Vector".


(2) Cover the entire canvas using the cursor as shown. A rectangle with your chosen color (solid) should appear. From this point on, there are millions possibilities for creativity. However, in my perspective, there are four important tools that can be used to make an outstanding banner - gradient, pattern, texture, and text. Once the rectangle is created, these options will be displayed at the bottom of the screen in the properties window - if they aren’t present, go to "Windows" and enable “Properties”. The first tool we’ll use is list of gradients. In the Windows version of Fireworks, they can be found underneath the dotted line as shown. These preset graphics alter solid colors, images, and more. Here, the solid black rectangle you previously have created is shown below with a with the "Linear" gradient selected.It’s THAT easy! You can also change the color scheme by clicking on the paint can directly to the left. Be creative


(3) Just below the gradient menu is the texture tool. This tool, like gradient, alters the current rectangle by placing a preset "texture" over it. You can alter the effect of the texture with the percentage option directly next to it. Pictured is our previous image with "Onyx" selected.


(4) If you are getting tired of using just solid rectangle colors, you can also choose to use a preset pattern, located above the gradients. Once the "pattern" option is selected, go to the square paint can located directly to the left and choose a pattern. Unfortunately, you cannot use both pattern and gradient at the same time; you can however use the texture tool and pattern together to produce fantastic results such as the one shown below.


(5) In addition to the texture and pattern tools, this banner also utilizes the text tool and the use of another rectangle. As you can see, using these few basic tools, astounding results are possible!



[Q] Why won’t my image appear in my website?

[A] If you are ready to use your image for a website, you must convert the file to another format by going to "File" then "Export." (usually a .gif or .jpeg)

[Q] After I converted my image to a .gif I can’t edit it anymore! Why is this?

[A] It is important to understand that anytime you try to edit your images in Fireworks, you must open the original .png file (which is the default).

[Q] The properties window is open but I don’t see the properties discussed above.

[A] If you can't find the properties such as "Texture" despite the fact that the properties window is displayed, make sure the rectangle you are working on is selected.