Fireworks Tips and Tutorials

Written by Rachna

Tips and tutorials on swap images, rollovers, image effects and lots of cool stuff!

As professional web designers we use Macromedia Fireworks to design web site layouts, logos, icons and innovative graphics. Fireworks makes it easy to design animated gifs, rollovers, swap images and other cool stuff. Take a look at some of the tips we've shared below and don't miss our step-by-step tutorials on creating swap images, animated images and more.

Cool tips and tricks on Macromedia Fireworks

1. Rollover Images
   Rollover images add a fun element to a site. Creating rollovers is extremely easy using fireworks so make sure you make some unique rollover buttons in your site. Trust me, users love creative rollovers.
   Here's how its done.
   
   
2. Swap Images
   This is a great tip so don't miss it - I couldn't believe how easy it was to create swap images in Fireworks and Boy! did the end result look neat! Here's a site we designed for one of our clients using swaps. Swap images add a touch of interactivity as users wait to see what's going to happen when they rollover a link or image. It also makes a site interesting and looks very professional.
   Click here to find out how to create swap images in Fireworks.
   
   
3. Paste Inside
   Here's another cool feature in fireworks. Have you ever wanted a picture to be in a particular shape - say a circle or a rectangle with curved edges. Well! With Fireworks that's extremely easy to do. All you need to do is follow these three simple steps:
   

   1. Make the shape that you want using the ordinary shape tools found in your toolbar (e.g. circle, rectangle etc.)

   2. Place the photograph or image where you want it (within the shape).
   3. Select the image and cut it (Cntrl +X)
   4. Then select the shape and click on Edit>Paste Inside (Cntrl+Shift+V)
   5. The picture is now placed within the shape. If you want to move the picture within the shape, click on the white arrow in the toolbar and select the picture. Now you can move the image within the shape to get the perfect position. The image and the shape is now an object. If you select the object with the usual select tool, you can add cool effects like an inner bevel or a drop shadow. Play around with it and you can get some really professional looking graphics. You can also paste multiple images within a given shape.
      
      
4. Rounded Edges/Curves
   

   To get a curved edge for a square or a rectangle all you need to do is double click on the square tool and enter a number for the curved edge in the options palette. 0 would be for no curve and 100 would give you a circle. Square Tool:

   
   
   
5. Feather
   Have you ever wanted only a part of a photograph? And have you tried to cut it only to get a very jagged edge and a terrible finish. Well! There's a great property in Fireworks called 'Feather' that you can use to get soft edges and a clean finish to images that you edit.
   Click here to find out how its done.
   
   

6. Photo Optics
   

   PhotoOptics is another cool tip on photo editing. You can adjust the brightness, color, contrast and more, using this feature. All you need to do is, select the image, go to XTras > PhotoOptics and play around with the options given.

   
   
7. Animated Gifs
   Creating animated gifs is easy and fun using Fireworks.
   Click here to see how its done
   
   
8. Transparency
   This is a great way of using pictures to make collages. By reducing the opacity of a photograph you can blend many images together to design great looking collages. Here's what we designed for one of our clients. Take a look at the header. We designed it using feathering and different percentages of opacity to give it look of a collage.
   
   
9. Effects
   Use the Fireworks Effects palette to make your graphics look professional. Try out the drop shadow, inner bevel, outer bevel and glow. They usually add a touch of something different. At the same time let me say this - simple designs are usually the best (but there's no harm in trying out different effects to see what looks best!)

Take a look at some of the sites we've designed for our clients using swaps, rollovers, effects and more. Don't forget to check out our Dreamweaver tips!

---