Flash Tutorials
& Resources
Fireworks &
Illustrator Tutorials
Web Design
Tutorials & Resources
You are here : : Home > Free Resources > Fireworks Tutorials & Resources > Tips and Tutorials  


Featured Fireworks & Dreamweaver Template

Animals Template 6
Animals & Wildlife

Fireworks Tips and Tricks Fireworks Tips and Tutorials

Written by

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.

Fireworks Rollover ImagesCool 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 Fireworks 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:
    Curved Edges

    Fireworks Feather
  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

    Fireworks 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. Fireworks EffectsEffects
    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!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.