A Digital Demo--Page Sixteen, Combination Web Image
Kalamazoo College
Richard Koenig

Office Location: Light Fine Arts 203, Phone: 337.7003

To digital page
To my homepage

Combination Web Image

As we saw with the last demo, Fireworks allows you to slice up images
It gives you complete control over each slice in terms of format, urls, effects, etc.
And it will write all the table and javascript information to keep it all together and make it work.

But first, let's look at the page to see this work.




rollover within a photo, individual slice optimization, embedded animated gif

Text with Effect
    place some text on the left side of the image
    add a duplicate frame
    add an effect that we can use for our rollover--i'm going to do gaussian blur
    make sure you're on frame 2 for this!
    again, test by clicking on frame 1 and 2 to see if it changes
    make sure you're on frame 2 when you...
Rollover Behavior
    ...add the behavior: simple rollover again
    don't forget to add a url at this time as well (behaviors, url tab)
    you'll have to let fireworks make slices for this
Slice and Dice
    the word has been sliced, but let's slice out the square inset picture as well
    we can later add the animated gif in its stead
    the slice tool is just to the right of the hotspot tool
    use the cursor to draw a box over the inset pic--you might want to hit "apple +" to do this
    you'll see the image get split up by red lines...
    and the box you draw will be green, but the other slices will be saved as well
Slice Objects: Add Formats, and URLs
    this slicing up of an image allows us to click on a particular slice and do several things:
    assign a url in the behavior palette (as we did before)
    but we also can optimize individual slices this way
    you can now save the particular slice with text as a gif...
    while the rest remains a jpeg for quality
    use the arrow tool and click on the slice with text and look at the "optimize" palette
    change to "gif" with "web adaptive" setting
Save As a "PNG" and Export
    remember to save this as a png at this point
    it will be your master in addition to the tiff you began with
    menu bar, file, export wizard, click "javascript rollover", raise quality to 90%, hit "export"
    this is how it will save any pieces we didn't set as gifs in the "optimize" palette
Wha?
    you'll see many jpegs (the slices) and one piece of html
    open that html in firefox to see if it worked
    you can modify that html with dreamweaver to make it look better (center, bg color, etc)
Embed an Animated Gif
    one more thing...i want to substitute one of our slices with an animated gif
    figure out which slice is the inset photo
    make an animated gif that size
    in dreamweaver, change the code just a bit:
    substitute the name of your animated gif for the name of the slice (of the inset photo)
    see if that works in firefox
    when happy with this, ship all elements to the server

Back to Index Page