GIF Works

Using GIF Works

This is series of classes conducted to show the capabilities of GIF Works.

Classes offered (Click on a subject to go directly to that class):

Making a fancy 3D name
Crop, transparify and insert text
Effects and optimize

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.

Introduction

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

Part 1 -- Making a Fancy 3D Name at GIFWorks

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.

Step 1:

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.

Step 2:

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.

Step 3:

You can select different sizes for your name, but for this class, leave it on "Default".

Step 4:

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.

Step 6:

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.

Home Work

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.

Good Luck!

View Homework

Class Dismissed
Return to class list

This class was conducted by Farmer-Dave, a moderator, on 30 October 2000 and again on 24 July 2001:

Part 2 -- Crop, Transparify and Insert Text

Introduction

We will use this banner to learn the Crop, Transparify, Insert Text and Smart Crop capabilities of Gif Works:

http://members.tripod.com/~d-hicks/class/banner.gif

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:
(http://www.gifworks.com/?)

or through a tool site like Momp's Tool Box:
(http://members.tripod.com/~Momp54/F-key2/imagege n.html?)

or Owens 4Tools:
(http://members.tripod.com/~Owens4/tools.html)

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:

http://members.tripod.com/~d-hicks/class/bannerb. gif

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:

http://members.tripod.com/~d-hicks/class/banner.g if)

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.

Homework Assignment:

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):

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.

View Homework

Thank you for attending this class.

Class Dismissed

Return to class list

The following class was taught by Farmer-Dave, a moderator, on 6 November 2000 and again on 31 July 2001:

Part 3 -- Effects and Optimise

Introduction

We will use the same gif as for the last class:

http://members.tripod.com/~d-hicks/class/banner.gif

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.

Step 1 -- Effects

First we will examine some of the many effects that Gif Works has to change the appearance of gif images.
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.

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 reducing colors.
Try it! You will be amazed and happy with the faster loading time.

Thank you for attending.

Class Dismissed! Return to class list