Animated GIF Module
Revised February 19, 2002

In this module, you will create a slide show of the pictures you scanned in and manipulated in Photoshop. For this module, it may be necessary to scan in more photos. There is a minimum of six needed in the slide show that is produced in GifBuilder.

You will also do a series of drawings in photoshop and animate them in ImageReady. Plus, do a clever looking animated masked image in ImageReady.

Note: This module must be performed on the Mac side of the CCLI.
The end product will be insertable in your web page in a future module, so it make good.

The process will include:

In Gifbuilder:

  1. Opening pictures in Photoshop.
  2. Copying the pictures and pasting them into GifBuilder.
  3. Creating transitions between the pictures in the slide show.
  4. Timing the transitions between pictures.
  5. Bonus: Animate a simple series of drawings.

In ImageReady:

  1. Layer letters and an image and make the image move behind the letters.
  2. Animate them.
  3. Bonus: Draw a series of ten pictures showing movement. [You can the use the same ones that you used in GifBuilder]


GifBuilder
Step One:

  1. Open Photoshop 6.
  2. Open GifBuilder from its location: LOCAL APPLICATIONS>GIFBUILDER.
  3. In GifBuilder, go to 'Window' on the Menu Bar, and open all the possibilities:
  4. Now go back to Photoshop and open one of your pictures.

  5. If it isn't already, make the Image Mode into Indexed Color by going to Image>Mode>Indexed Color, then save the picture as a CompuServe GIF. (If the Indexed Color option is grayed out, go to Image>Mode>8 Bit) and then follow the instructions above.

  6. Make sure all of your pictures will be the same size. (This is to assure that the originals will not be altered and that the slide show will look good.)

  7. You can import your images into GifBuilder in two ways. First, in PhotoShop, open the Marque tool and select the area of a photograph to be put into the slide show. Under the Edit menu, copy the picture. Return to GifBuilder. Select Paste from the Edit menu and put the picture into the software.

    OR

  8. In GifBuilder go to File>Add Frame>and locate the the first individual file.

  9. Repeat either of these processes until you have all the desired pictures in the Frames window.

Step Two:

  1. Arrange your pictures in your desired order. They can be rearranged by clicking on one and dragging it up and down the list.

  2. Then go back to the top picture and highlight it.

  3. Go to OPTIONS > INTERFRAME DELAY. This option allows you to determine how long this first image will be visible before it is replaced by the next one. The window will have the number 10 highlighted. Note that this is 10/100 of a second. Change this number so that people will be able to comfortably view each slide before the next appears. This step can be done on each picture, or you can hold down the shift key and select all of the frames.

  4. Now go to EFFECTS>TRANSISTION. Choose the desired effect for each transition. Just as with the interframe delay, each transition can be set one at a time or done with the shift key and selecting them all. However, I want you to use all the different possibilities, so do them one at a time. You can select the number of "Steps". Each step equals one frame.

    There may be a memory problem on some machines. Be sure that you are working on one of the G3(blue) or G4(clear/gray machines. If you are on one of these machines and still have problems, SAVE your project in your Home Directory and then Quit the program. On the desktop click on Macintosh HD>Applications>GifBuilder. When you get to the program folder, click ONCE on the GifBuilder Program icon and go to File>Get Info and select Memory under Show. In the "Minimum Size" and "Preferred Size" boxes, type in 10,000. Close all of this and restart GifBuilder.

  5. To view the slide show, go to ANIMATION > START or push the Alt key and R at the same time.

  6. Adjust the show so that it your best work.

 

ImageReady
The Steps:

  1. Go to the Apple>Local Applications>Adobe ImageReady to open the software.

  2. Create a 'New' file. Make it about 250 pixels square and select 'Transparent Background' before you close that dialog box.

  3. If it isn't already open, go to Windows>Show Character to open the panel.



  4. Make the text very large. About 150 font size will do. Also find a quirky font style and make it bold.

  5. Choose a color for the font from the foreground color box on the toolbar on the left of the screen or from the "Color" menu on the Character panel.

  6. Select the text tool from the menu bar (the one that looks like a "T") and type in your initials. Space them to look good by experimenting with the settings on the "Character" panel. Adjust the size of the picture if necessary.

  7. Next, insert a picture already scanned in, preferably one with you in it, on a new layer. Do this by opening the picture in PhotoShop, then use the marque tool to box in the part of the picture you want to use. Go to Edit>Copy and click. Then close the graphic. Go to the ImageReady graphic and click Edit>Paste. This part of the picture will appear in a new layer.

  8. In the layer window, delete any other layers besides the one with your initials and the one with the graphic. Do this by right-clicking on the layer and choosing 'Delete Layer' or click once on the un-needed layer and drag it to the small trashcan icon at the bottom of the layers pallette. Be sure the bottom layer is the one with your initials.

  9. Now place the cursor (without clicking) on the line between the two remaining layers, then press the 'Alt' key (PC) or Option key (Mac). The cursor turns into two little circles. Click and the top layer is masked behind the bottom layer. You will notice the top layer becomes indented. This shows it is masked by the layer below it.



  10. Go to the toolbar and choose the cursor [or, as ImageReady calls it, the move tool]

  11. Now the fun part: Click on the graphic layer in the layer window so that it is blue. This indicates that you are dealing with this layer only.

  12. Move the graphic so that it is not seen behind the letters.

  13. Now go to the Animation Window [it should be at the bottom of the screen]. Click on the "Duplicates Current Frame" icon at the bottom of this pallette (it's the one next to the trashcan with the left corner turned up.)



  14. With this second frame highlighted, move the graphic a little so that part of it is seen behind the letters.

  15. Repeat this process (at least five times) until the graphic has moved out of the letters again.

  16. At the bottom of the Animation Window are the controls to run the animation (they look like they do on a CD player or a VCR). Click on the play button.

  17. At the bottom right corner of the Animation Window, you will see the word "Forever." Click on it and you can determine how many times this animation loops.

  18. If the timing doesn't look right to you, hold down the shift key and click on all of the frames. All the frames should become highlighted. Then click on the time indicated under one of them and the timing choices box will pop up.

  19. Choose the time you want in the choices window and they all will become the same.

  20. To save this file, go the File>Save Optimized As... and choose your saving location. Under "Format", select "HTML and Images" from the drop-down menu. Then choose Save.

  21. Once you have saved your work, you can open the HTML in any browser and see your creation as a Web page (ImageReady wrote the HTML code for you. It will play as many times as you set it to loop.)

Turning in your work:
Place the files into your GifBuilder folder (you probably will have to create this) under Groups>Classes>HU2644_Spring2002>MacTurnIn >Your_folder. Place them in a folder named with your userID (this means your login in name, not your student ID number). Name them GifBuilder1, ImageReady1. Place your HTML file in here too.

Points:
Turned in on time......................10
Followed the steps....................60
Instructor's Discretion................15

Bonus Points:
Both parts need to be done for the bonus points. The rewards are worth the effort.

Use the drawing tools in Photoshop and create a series of ten pictures that show some movement of an object (i.e., a ball bouncing, a plant growing, a stick man walking, a shape changing.) Something simple is all right. Number them 01.gif, 02.gif, etc. [so that the tenth one is 10.gif] and so forth.

GifBuilder:
Put these into a GifBuilder file and make them move. Save this as GifBuilderBonus.gif in your MacTurnin folder.


In ImageReady:

  1. Use the same pictures you drew for the GifBuilder bonus project.

  2. Save each one as a numbered file: the first one should be 01.gif, the second 02.gif, etc. through ten pictures (minimum. Number the tenth 10.gif).

  3. Save all of these into a folder named ImageReady on your home directory.

  4. Go back to ImageReady Software.

  5. Go to File>Import>Folder as Frames. Then choose the folder with the series of drawings. Do not choose in individual drawings. Take the whole folder.

  6. In the Animation Window at the bottom of the screen, you will see the pictures appear in order.

  7. At the bottom of the Animation Window are the controls to run the animation. Click on the play button.

  8. At the bottom right corner of the Animation Window, you will see the word "Forever." Click on it and you can determine how many times this animation loops.

  9. If the timing doesn't look right to you, hold down the shift key and click on all of the frames. All the frames should become highlighted. Then click on the time indicated under one of them and the timing coices box will pop up.

  10. Choose the time you want in the choices window and they all will become the same.

  11. To save this file, go the File>Save Optimized As... and be sure the HTML box is checked as well as the Save Images box. Then choose Save. Save it as ImageReadyBonus.

Points........................................15
Total Points..............................100

Return to Schedule