Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

Creating Animated Gifs and Special Text Effects

Assignment: Your Web Genre website is due on
Friday, Feb. 25th. Be prepared to present your
Web Genre website. (See Basic elements of
a webpage
for guidelines for your Web genre site)

1. See the latest version of Dr Lewis' Webgenre site.

2. See Student Image-swap example.

3. I will be in my office on Thursday from
11:00 to 5:00, if you need any help finishing your Web Genre website.

1. Creating Image Websites

  1. MSNBC

  2. The Metropolitan Museum of Art

  3. The Louve Museum

  4. Life Magazine Home Page

  5. National Geographic

  6. USA Today.Com

  7. LandRover.Com USA

2. Creating Rollover Buttons with Fireworks and Dreamweaver-- the little trick that makes it all work

  1. Open up a new png file and select "Insert" and 
    "New Button."

  2. Make a Button using the shape tool, and then
    use "Copy up Graphic" to make an exact copy
    of that button.

  3. Change either the background or text color of
    the "Up Button" to make the "Over Button."

  4. Remember to "Trim Canvas" before you try to
    save the buttons.  You want to just save the
    buttons, not the background too.

  5. After selecting the "Active Area" of your buttons,
    choose "Link Wizard."

  6. After using the "Link Wizard," close the "Insert
    button" window.

  7. You will now see a copy of your buttons as a
    combined "png file."

  8. Use "preview" to test what are the two states of
    your rollover button.  This tells us the buttons works.

  9. Now select "Export Preview" and save the buttons
    as a gif file.

  10. Choosing these "save file" settings will now enable
    Fireworks to create two "rollover buttons": one
    an "up state" and the second an "over state."

  11. To insert this rollover button in Dreamweaver,
    just insert the image where you want the
    button to be.

  12. This gif image file contains all the info
    to make the button work.

3. Using Fireworks to Create Pop-up Menus

  1. Open a new file in Fireworks

  2. Go to "Edit" and select "Insert" and
    choose "New Button"

  3. After creating the button, right click
    on it and select "Add Pop-up Menu."

  4. Fireworks is a much more advanced
    tool for creating pop-up windows.

4. Using Styles in Fireworks

  1. You can use Styles in Dreamweaver to make
    pre-selected buttons, images, and text.

  2. Be careful how you use these style effects.  They
    can often look a little over-done.

4. Using Fancy Type Effects for Webpage Titles

  1. Fancy 2-D Type Effect, example 1

  2. Fancy 2-D Type Effect, example 2

  3. Fancy 3-D Type Effect, example 3

5. Creating Image Collages with Fireworks

  1. See Example of CU Collage.

  2. Collages can be cool but be careful.  What is
    the larger goal of your site?  Does your collage
    provide a clear focal point image for your site?

  3. You can feather your images before you combine
    them in your collage.  This will take the hard
    edges off your images and give your collage
    a cleaner look.

5. Using Slicing to better control images on a webpage

  1. Sliced image objects appear faster. It takes
    longer to download larger files

  2. You can vary the "optimize" settings for each
    sliced image objects.

  3. Using slices, it is easier to update small
    sections on an image webpage.

  4. Use the web slice tool to select an area on
    an image you want to slice.

  5. After selecting the various slice areas, you
    can optimize and treat each slice part as
    a separate image.

  6. Now select that area and use the slice tool to
    precisely cut out the shape you want.

  7. See Slices.htm for an image that needs to be sliced.

  8. After you cut the image into slices, right click on one
    of the slices and you can make it a rollover. You can
    also right lick on the slice to make it an image swap.

  9. Having made these slices and given them behaviors,
    you can save each of these slices using the
    "export individual slices" command.

  10. Select the slice you want to save and "right-click"
    on it. A menu will now come up giving you the
    option of saving just this slice.

  11. Having created and saved these individual slices,
    you can put them together as images in a
    Dreamweaver file and save the file. When the
    page comes up on the web, you can't tell
    that they were individual slices.

6.  Creating Animated Gifs: the Basics

  1. See EarthmoveEarthmove2, and Carmove

  2. Moving Circles gifs

  3. Robin Williams' example of animated Gif

  4. Robin Williams' Mouseover effect

  5. LandRover Animated Gif:  Short Movie Clip Effect

  6. Robin Williams' Homepage

  7. Robin Williams' Hat Collection

  8. See Smile.gif

  9. See Bounce.gif

  10. See Stickperson.gif

  11. To create animated gifs,in Fireworks,
    you must go to "Window" on the
    menu bar and select "frames.

  12. You create animated gifs by varying
    parts of the object from frame to
    frame, so that it looks like the image is

  13. See two examples of basic animated gifs:
    anigifex.gif and anigifex1.gif

  14. You can copy all of the parts of an
    image by first selecting "select all"
    and then copying it.

  15. Now paste this copied image into a
    new frame. Go in and change some of
    the features of the image.

  16. Remember, you need to adjust looping
    so that the animation either stops after
    awhile or runs forever.

  17. You save an animated gif by going to
    "Export Preview" and selecting file
    and choosing "animated gif."

  18. You can also set various features of your
    animated gif in the window.

  19. After saving the animated gif, copy it
    over to the server. Only when the gif image
    is on the server will the animated gif work.

  20. Try not to put too many animations on a
    webpage and try to set them to run for
    no more than ten times.

  21. Too many animations can disorient the
    reader on your page.

8.Animated Gif Sites

  1. Free Animated Gifs


  3. More Free Animated Gifs

















Good Web Design Sites
Award-winning Web Designs
Great Web Design Books
Sewall Class Web Designs

| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
94198      by Chris H. Lewis, Ph.D.

© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 23 February, 2005

Digital Design Course homepage