Creating Animated Gifs and Special Text Effects

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

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
"New Button."
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
button" window.
You will now see a copy of your buttons as a
combined "png file."
Use "preview" to test what are the two states of
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 enable
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

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 each
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 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.
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

See Earthmove, Earthmove2, and Carmove
Moving Circles gifs
Robin Williams' example of animated Gif
Robin Williams' Mouseover effect
LandRover Animated Gif: Short Movie Clip Effect
Robin Williams' Homepage
Robin Williams' Hat Collection
See Smile.gif
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
changing.
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