Fireworks CS4 Tutorials
Free Fireworks Resources
Other Fireworks Resources
Learn just how easy it is to create swap images in Fireworks. Swap images are fun, easy to design, and go a long way in making a site look attractive. Visitors also find this interactive and interesting. Fireworks makes it very easy to design web sites using swap images. Learn just how easy it right now! Examples of sites with swap images are www.illycollectioncups.com, Business Template 3, Business Template 1. Rollover the links to view the swaps. In this tutorial you will get step by step instructions on how to design web sites using swap images. Screen shots have been added for each of the steps so you'll find it really easy to follow. The only requirement is that you must have Fireworks - the best web design tool! Let's get started right away!
Step 1: Design all the swaps and also your rollover buttons. Position the graphics exactly the way you want it. Now here's what's important - Put all the separate swap images in different layers. You could probably put the common elements in the first layer, the rollover images in the second layer and the swap images in separate layers after that. This is very important as we will be using frames.
These are the layers we have used:
Structure - The common elements of the swaps are put in this layer.
Rollovers - The down state of the rollovers
Swap 1 - Swap Image 1
Swap 2 - Swap Image 2
Swap 3 - Swap Image 3
Step 2: Once you have put all your swaps in separate layers you need to put them into frames. . So here's what you need to do. Make the same number of frames as you have swap images. In this case there will be 3 frames because there are 3 swaps. Now in frame 1 you need to make sure only the layers are open. Similarly in Frame 2 you need to open only layers 'structure and swap2'. Basically each Frame will have a unique swap image and all the common elements. The only thing you need to remember is that if you also want simple rollovers, you need to make sure that . Fireworks take the images in Frame 2 for a simple rollover.
Take a look at the screen shots below to see what your frames should look like. In the second screen shot notice that the layer 'rollovers' is also open. This shows the down state of the rollovers. It must be placed in Frame 2.
|Image 1(a)||Image 1(b)|
|Step 3: The next step is to slice up the images. Slice the images and name it appropriately for easy reference. To the right you can see the way I have sliced up the images. Make sure the swap has only one slice.|
Step 4: Now comes the fun part.
Watch just how easy it is to create rollovers and swap images in
To create swap images or rollovers you need to use a feature called 'Behaviors' found in Fireworks.
Here are the steps:
Now for the swap images
By the end of it your behavior palette for each of the buttons should look like this:
Each sliced button should have 2 behaviors:
Make sure your behavior palette has both the behaviors
Take a look at the screen shot below for reference.
Fireworks will export a .htm file to the directory you have specified (along with the images). Browse the .htm file from IE or Netscape and you'll see your swap images working beautifully.
So concentrate on designing great swap images (you could also do multiple swaps and try out the different rollovers) and leave the rest to Fireworks. Another idea for swap images can be seen in Business Template 1. Another website we have designed with swap images is www.illycollectioncups.com. We can design swap images with rollover images for your website for only $75 (for up to 8 pictures)! Contact us today for details!
Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!