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
a webpage for guidelines for your Web genre site)
1. See the latest version of Dr
Lewis' Webgenre site.
2. See Student
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
Museum of Art
- Life Magazine Home
- USA Today.Com
2. Creating Rollover Buttons with Fireworks and Dreamweaver-- the
little trick that makes it all work
- Open up a new png file and select "Insert" and
- Make a Button using the shape tool, and then
use "Copy up Graphic" to make an exact copy
of that button.
- Change either the background or text color of
the "Up Button" to make the "Over Button."
- Remember to "Trim Canvas" before you try to
save the buttons. You want to just save the
buttons, not the background too.
- After selecting the "Active Area" of your buttons,
choose "Link Wizard."
- After using the "Link Wizard," close the "Insert
- You will now see a copy of your buttons as a
combined "png file."
- Use "preview" to test what are the two states
your rollover button. This tells us the buttons works.
- Now select "Export Preview" and save the buttons
as a gif file.
- Choosing these "save file" settings will now
Fireworks to create two "rollover buttons": one
an "up state" and the second an "over state."
- To insert this rollover button in Dreamweaver,
just insert the image where you want the
button to be.
- This gif image file contains all the info
to make the button work.
3. Using Fireworks to Create Pop-up Menus
- Open a new file in Fireworks
- Go to "Edit" and select "Insert" and
choose "New Button"
- After creating the button, right click
on it and select "Add Pop-up Menu."
- Fireworks is a much more advanced
tool for creating pop-up windows.
4. Using Styles in Fireworks
- You can use Styles in Dreamweaver to make
pre-selected buttons, images, and text.
- Be careful how you use these style effects. They
can often look a little over-done.
4. Using Fancy Type Effects for Webpage Titles
Fancy 2-D Type Effect, example
Fancy 2-D Type Effect, example
Fancy 3-D Type Effect, example
5. Creating Image Collages with Fireworks
See Example of CU Collage.
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?
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
- Sliced image objects appear faster. It takes
longer to download larger files
- You can vary the "optimize" settings for
sliced image objects.
- Using slices, it is easier to update small
sections on an image webpage.
- Use the web slice tool to select an area on
an image you want to slice.
- After selecting the various slice areas, you
can optimize and treat each slice part as
a separate image.
- Now select that area and use the slice tool to
precisely cut out the shape you want.
- See Slices.htm for an image that
needs to be sliced.
- After you cut the image into slices, right click on
of the slices and you can make it a rollover. You can
also right lick on the slice to make it an image swap.
- Having made these slices and given them behaviors,
you can save each of these slices using the
"export individual slices" command.
- 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.
- 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
Moving Circles gifs
Williams' example of animated Gif
Williams' Mouseover effect
Animated Gif: Short Movie Clip Effect
Williams' Hat Collection
- See Bounce.gif
- See Stickperson.gif
- To create animated gifs,in Fireworks,
you must go to "Window" on the
menu bar and select "frames.
- You create animated gifs by varying
parts of the object from frame to
frame, so that it looks like the image is
- See two examples of basic animated gifs:
anigifex.gif and anigifex1.gif
- You can copy all of the parts of an
image by first selecting "select all"
and then copying it.
- Now paste this copied image into a
new frame. Go in and change some of
the features of the image.
- Remember, you need to adjust looping
so that the animation either stops after
awhile or runs forever.
- You save an animated gif by going to
"Export Preview" and selecting file
and choosing "animated gif."
- You can also set various features of your
animated gif in the window.
- 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.
- Try not to put too many animations on a
webpage and try to set them to run for
no more than ten times.
- Too many animations can disorient the
reader on your page.
8.Animated Gif Sites
Free Animated Gifs