Classes offered (Click on a
subject to go directly to that
The first class was conducted for the HTML_HELP List by Lil, a moderator, on 23 October 2000 and again by Farmer-Dave (with some modifications) on 17 July 2001.
We will be learning to use one capabiity of GIFWorks (making a 3D name) in this class.
1. Have a transloader on your Fkey
2. Have GIFWorks on your Fkey. Here is the address for GIFWorks:
http://angelfire.gifworks.com/ or http://www.gifworks.com
1. Go to GIFWorks.
2. There is a row of grey drop down boxes. You will click on the first one; it is called "File".
3. Find "New 3D Text" and click on it. This will take you to a new page.
1. You will see a large box with many small boxes of colors. You may choose one of these colors or you can type in your own color. We will be typing in our own color.
2. Go to the box called "color:" erase the code in there and type in this color code #CDAD00
3. A pop up box will appear telling you this may not be a safe color, click on OK.
There are 6 drop down boxes here -- over 100 different type fonts. Click on the one that says "serif fonts" and find "Bridge North" and click again.
You can select different sizes for your name, but for this class, leave it on "Default".
1. There are many different animation effects that you can choose for your name, but for this class, select "Stationary". I will explain why later. A brief explaination of the others:
a. Rotate Right/Left: Name will make complete rotations (as though suspended from a string) to the Right/Left.
b. Rotate Right/Left Single: Each letter of the name will make a complete rotation to the Right/Left.
c. Slide Right/Left: Entire name slides, like a marquee.
d. Swing: Entire name swings to the left and right (but not completely around) as though suspended from a string and gently nudged.
e. Swing Single: Each individual letter swings.
f. Flip Backward/Forward: Name rotates on its horizontal axis.
g. Zoom: Name will appear to move away from you, getting smaller and smaller.
h. Stationary: No movement of the name. We select this because it is fastest to make and fastest loading.
2. Looping Effect: For this class, select Run Forever. You can also designate how many times the name will rotate, swing, flip or zoom.
3. We will leave everything else as is, but here is what they do:
a. Speed: Fast, medium or slow animation.
b. Font Size: For the letters of the name.
c. Depth: Of the letters of the name. This is the "3D" effect, as though the name were cut from wood by a jigsaw.
d. Tilt Forward: To make the name appear to be tilted forward (backward if negative).
e. Tilt Right: To make the name appear to be tilted (rotated slightly) to the right (left if negative).
f. Frames: The most important feature. The greater the number of frames,the smoother the animation, but also the greater the loading and preparation time. A good choice is 12, but with a stationary name, we will use 1 (provided automatically when "Stationary" is chosen).
Step 5, Enter Text:
1. Erase everything in the large box. Type "Autumn Leaves" (without the quotes) in this box.
2. Now click on Accept. You will use the "Preview" button for your homework.
1. You will see the banner on this page. There are drop down boxes at the top of this page. Click on the first one called File. Find Save and click again.
2. If you have an angelfire account you can save your banner here. If you do not have an angelfire account, there is a place to get the URL for webtv users.
3. Scroll down this page and you will find a place that says Webtv Users "Click here" to get the URL of your banner.
4. On the next page Autumn Leaves will be displayed surrounded by black. It should look like this: Class Banner. Transload this to your account if you wish.
Using your name, experiment with the other parameters until you find a set that is pleasing to you and send your creation to the list. I will publish all submissions as an appendix to this class.
This class was conducted by Farmer-Dave, a moderator, on 30 October 2000 and again on 24 July 2001:
We will use this banner to learn the Crop, Transparify, Insert Text and Smart Crop capabilities of Gif Works:
Please transload it to your server and copy the URL after you have transloaded (press "Go To" and "Show Current" then cmd+a [highlight] and cmd+c [copy to memory]).
You also must have access to Gif Works, either on
a separate F-Key:
or through a tool site like Momp's Tool Box:
or Owens 4Tools:
Let me know when you have done this and are ready for Step 1.
Step 1 -- Crop
1. Take the banner to Gif Works
2. Select "Crop" under the "Edit" button
3. Move arrow to upper left corner and click
4. Next page, move arrow to bottom of banner and position it to leave the same amount of background as on the top and left side
5. View cropped image -- wasn't that a lot easier than cropping at Image Magick? No numbers to enter or figure out -- what you see is what you get (WYSIWYG).
6. You could transload now, but we will make the background transparent first. Let me know when you are ready for Step 2.
Step 2 -- Transparify
1. Hit your "Recents" button and select the cropped image at Gif Works
2. Select "transparify" under the "Edit" button
3. Move the arrow to the color you want to be transparent (the tan background)
4. View the image with a transparent background. This only works if the background is a solid, single color. Sometimes the backgrounds (black especially) look like a solid color, but when you transparify much of the background remains. This is because parts of the background are very dark grey, or other dark color, but not black. If this happens, keep selecting the "Transparify" button and point the arrow at another color you want to make transparent. It may take five or six tries.
5. Transload this image to your server:
a. Select "Save" under the "File" button
b. Next page, scroll to bottom of the blue box, find "WebTV Users Click Here" and click
c. Next page, you will see your image surrounded by black
d. Transload that image to your server
Let me know when you are ready for the next step in this lesson, Insert Text.
Step 3 -- Insert Text
This will have a lot of parts, but it goes fast and most of the things you have to do are listed at Gif Works. Here goes:
1. Go to Gif Works, select "Open Image" under the "File" button
2. Enter the URL of the basic banner in the box provided for fetching a remote image (scroll down, place cursor in box, erase http:// by pressing cmd+Delete and press cmd+v to enter the URL you have in memory)
3. Click on "Fetch Image" button
4. Select "Insert Text" under "Edit" button
5. Select color either from the color cube or enter the color number -- any color that will show up on a tan background
6. Select font. Rather limited here -- I chose "Comic"
7. Select style -- bold
8. Select font size -- 16 is good, but could be 18 or 20 -- your choice
9. Enter text. Erase what is in box (use cmd+Delete) and enter your name
10 Select the spot on the banner where you want the center of the text line to be. In this case, we are going to have two lines of text, so put the arrow 1/3 of the way down in the center of the blank part of the banner and click
11 View banner with one line of text. If it is not in the exact spot you want it you will NOT be able to press your back button to change it (at least I couldn't). You must use your "Recent" key and select the image with the blank banner to do it again. You can also select "Undo" under the "File" button, but then you will have to reenter the URL
Now for the second line of text:
12-16 Repeat 4-8, above (except I chose normal italic)
17. Enter text: member of HTML_HELP
18. Place arrow 2/3 of the way down, centered in blank space. Click
19. View completed banner and transload to your server. Here is what mine looks like:
Let me know when you are ready for Step 4 -- Smart Crop and Homework
Step 4 -- Smart Crop and Homework
Just to show what Smart Crop does:
1. Go to Gif Works
2. Select "Open Image" under "File"
3. Insert the URL of the image we started with tonight, from your file (or mine, if you don't know how to transload:
4. Select "Smart Crop" under "Edit"
5. View the presents, with all the background cropped away right up to the edge of the presents, top, bottom, and sides
6. Transparify, if you wish, to see that pieces of the background do not have to be connected to be made transparent.
Select a banner of your choice from the list below and practice the things we did tonight. Insert any text you wish, use your imagination!
Here are a lot of banner blanks to choose from (if you want to save any of them, please transload to your server):
http://www.katekreates.com/picnclick/dog.gif< br> http://www.katekreates.com/picnclick/fireworks.gi f
http://www.katekreates.com/picnclick/cat.gif< br> http://www.katekreates.com/picnclick/football.gif
Transload your creation to your server and then send it to the list for all of us to see what you learned at Gif Works tonight. I will post it to the homework page, as before.
Thank you for attending this class.
Return to class list
The following class was taught by Farmer-Dave, a moderator, on 6 November 2000 and again on 31 July 2001:
We will use the same gif as for the last class:
Please transload that gif to your server
and also have Gif Works or a tool site with Gif
Works on it as one of your F-Keys. The most
important part of this class is "reduce colors",
which will be discussed last.
Let me know when you are ready for Step 1, Effects.
First we will examine some of the many effects
that Gif Works has to change the appearance of
You cannot use jpg images at Gif Works -- gif only.
You must load the banner to Gif Works by either viewing the banner by itself (surrounded by black) and going to Gif Works where it will be loaded automatically OR by entering the banner URL on the "fetch image" page of Gif Works.
1. Chalk -- Under the "Effects" button,
select "Chalk". Observe the change to the banner
-- sort of a cloudy texture has been added.
Go back to the original image by selecting "Revert" under the "File" button OR by selecting the original image on your "Recent" key display.
2. Color Tile -- Under "Effects", select
"color tile". The image will appear to be made of
bathroom tiles now.
Go back to the original image as above.
3. Oil Paint -- See the change in
appearance of the image. A little more cloudy or
smoky than the "Chalk" option.
Go back to the original banner.
4. Fade -- Select the "Fade/Unfade" button
under "Effects". Enter 80 in the box on the next
page. See what happened to the banner: the
presents are lighter, but the background is
darker. We can lighten the background by
scrolling up to the buttons and selecting
"Replace Color" under the "Edit" button, the same
way we transparified in the previous class. The
"Fade" capability is used to make brightly
colored gifs lighter (more faded) so we can use
them as background on a page.
Go back to the original banner.
5. Buttonize -- This does exactly as it
says: It makes a button of the banner we are
using. Select the "Buttonize" button under
"Effects". On the next page, select whether you
want the button to appear lower (in) or higher
(out) than the page you will be using it on. Also
select the width of the edges and whether you
want a shadow and a border. The "Back" button of
your keyboard works for this function, so you can
make changes easily and get the exact kind of
button you want.
After you are finished playing with this, get the original banner once again.
6. Cylinder -- This is a neat effect that
shades the ends of the banner to make it appear
as though it is wrapped around a pillar or
column. You can make an arch supported by two
columns by using two of these cylinderized gifs
in a table and stacking them on top of each other
to make columns of any height you want. This
effect is best on a solid color banner, because
it distorts the presents at the left end of our
banner. We could have cropped the presents out
before we selected this effect to end up with a
more pleasing gif.
Any of the gifs you produced with the above effects can be transloaded and used as a gif in your pages. We discussed how to transload from Gif Works in the previous class.
There are many other effects available that you can observe at a later time.
Take a break and let me know when you are ready for Step 2 -- Optimize.
Reload the original banner and scroll to the bottom of the page. You will see the byte size of the banner (2074), also the width and height and number of colors.
1. Scroll to the top of the page and select the "Optimize" button. Under that, select "Reduce Colors".
2. On the next page, we see how the banner looks
as colors are removed. We also see the number of
bytes in the image and the % reduction in bytes.
There is no apparent change in the image until we
get to #7 -- a 48% reduction in file size.
This capabiity is important to reduce the loading time of images in signatures and web pages. Note the number of bytes in the image now -- about half of the original number. That means the image will load nearly twice as fast as the original with no noticeable change in the quality of the image.
This concludes the classes on Gif Works. Your homework assignment (should you choose to accept) is to:
A. Familiarize yourselves with the other things in Gif Works that were not covered in these classes, and
B. Optimize the size of your gifs in your
signature or web pages using the "Reduce Colors"
capability of Gif Works. The same color reduction
can be done at Net Mechanic (Owens4 calls it Gif
Bot). Net Mechanic works for jpg also, but
reduces the quality of the jpg images rather than
Try it! You will be amazed and happy with the faster loading time.
Thank you for attending.