Learning Center
Plans & pricing Sign in
Sign Out

Fireworks Techniques


									Fireworks Techniques
Basic Steps for Creating a Patterned or Textured Background
full tutorial at

    Open a new image with an oversized canvas (about 400 x 400 is good) Create a square (about 40 x 40 is good) and place it on the left side of the canvas (remember you can use the pixel width and height and X and Y coordinates to get it perfect) Use any of the tools to modify the square into a pattern (marble fill, spatter stroke, etc.) Use your imagination and colors. Don’t be afraid to go crazy (but start simple… marble is an easy one)

Creating the Pattern
      Clone the square and move the clone to the right. Stop moving to the right when the pattern starts to line up (don’t go too far) After cloning and moving, group the two patterns together Clone again and move the clone to the right a second time. Stop when the pattern starts to line up (again, don’t go too far) Repeat the steps until you get a pattern across the top of the canvas Now do the same steps going down the canvas When you get done, just about your whole canvas should be filled with a pattern

Making the Tile (this is the hard part)
  Using the slice tool, cut out a slice which will establish the pattern The slice can really be any size, but remember that it will be tiled when it’s put up as a background. The hard part is adjusting the borders of the slice so that when it’s a background, it will all line up properly. It’s tough to get started, but after 34 tries, you’ll start to get good at it. Export just the slice as a gif into a folder and call it background1


Checking Your Tile
    Start Dreamweaver and define a site into the folder you exported the background Choose Modify/Page Properties In the page background choose the background you created If the edges don’t line up properly, go back to Fireworks, adjust the sides of the slice and export again. You might need to do this several times to get it right.

Using Masks
   Open or create a picture in Fireworks Create a new layer Using the drawing tools, draw a shape or some lines on the new layer (remember that when a mask is used it’s the darker colors that become transparent). A good starting example is to draw a solid shape using the gradient fill. Also make sure you use a grayscale mask

Making the Mask
   Cut the layer you just drew On the layer with the picture, choose Edit/Paste as Mask and you’ll see the shape you created as a mask Select the “Grayscale Appearance” choice to see the gradient as the mask

Modifying the Mask
 Move and resize the mask by selecting the “Mask” icon in your layer and changing the settings in the property inspector

Creating a Background Like Crinkly Paper
full tutorial at

  Create a 308 x 340 canvas, gray background (#999999) Draw a 149 x 165 rectangle, linear fill from white to ECE9D8. It should look like this:


Clone the rectangle and position the clone directly to the right of your first rectangle as so:


Clone these two rectangles and position the clones directly underneath so that just about the whole canvas is filled up.

Making the “Crumpled” Look
  Show the grid and set the grid to 20 x 20 (View/Grid/Show Grid and View/Grid/Edit Grid) Choose the distort tool and distort the lower right corner the lower right rectangle as shown:

 

Change the fill selection from “Linear” to “Cone” Edit the gradient and select the following colors from left to right: White, #FBF9F1, White, #DFDBC9

Adding a Torn Paper Border
   Group the four rectangles together Add the Alien Skin Splat LE, Edges effect Choose the settings: Edge Width – 10.00; Margin – 5.00; Feature Size – 52; Edge Mode – Torn Paper; Select “Transparent Fill”

Once you’ve created this sample, experiment on different backgrounds of your own. Try making them out of burlap, wood, or painted paper.

Creating a Navigation Bar
Full tutorial at

    Open a new Fireworks canvas at about 160 x 220. This will be a three button navigation bar. As you get more used to it, you’ll create canvases of different sizes to fit your buttons Draw a rectangle and set the size to be 140 x 50, fill color of solid of gray #CCCCCC With the rectangle selected, choose Modify/Symbol/Convert to Symbol Give the symbol a unique name and choose “button” as the symbol type. Click OK

Creating the Up, Over and Down States
  Double click your new button to invoke the button editor Modify your rectangle to look like a button. You can use the sample below as a starting point


This sample was done by adding a small black rectangle to the left (30 x 50, solid fill of black); Arial text, 20 pt, black; and an Outer Bevel effect with a bevel edge shape of “flat”, a width of 10, a contrast of 75%, a softness of 3, an angle of 135 and a button preset of “raised”. Create the Over, Down and Down While Pressed states by using the “Copy Up Graphic” button so that you don’t have to redraw your entire button. Modify areas of the button for each state. For example, change the color of the text and little rectangle to gray for the “Over” state, change the little rectangle to white for the “Down” state, etc. Modify the Active Area to cover just the area of the button you want the user to press. Click Done when finished editing the button.


 

Creating the Other Buttons in the Navigation Bar
 Your canvas should now look something like this:

 



Click once on your button and clone it. Position the clone directly under the first button. Make sure there is enough room to see the beveled edge (that’s why we made the canvas slightly larger than the button rectangle Once you have three copies of the buttons on the canvas, select the second button and, either in the Property Inspector (Firworks MX) or the Object Window (Fireworks MX 2004) change the Button Text to “Links!”. Change the third button text to “Tools!”

Exporting Into Dreamweaver
      Save your work as a standard PNG file Choose File/Export and export your navigation bar to your Dreamweaver Site folder. Make sure to choose Export HTML and Images In Dreamweaver, open the page which will hold the navigation bar Select Insert/Interactive Images/Fireworks HTML Browse to your navigation bar file and click OK Select each button individually to name the URL that each button will use

To top