Popular animated movies, from Disney to Manga (Anime, Japanimation, etc) all use a process of step-by-step illustration to create their films. If we were to take a good look at a reel of film, we can count off the individual frames that make up that reel. Animators know that it takes anywhere from 16 to 32 frames of images (per second) to make a good animation. For this exercise, we will use only around four to eight frames using Photoshop.

Making the Rod and Lightning

Animated GIF images are still used, though are quickly being traded in for Flash animation. One of the main reasons for this is interractivity. Flash-based Adobe Animate SWF movies are truly interractive images. Secondly, animated GIF images can be very large in file size and can take some time to download. Though, they are still popular and can be seen all over the Internet.

1. Create a new folder in your Multimedia Folder and titile it "Animation"
2. Create a new folder in your Animation folder and title it "Lightning Rod"
3. Create a new Photoshop document (320 pixels by 240 pixels – 72dpi (Resolution))
4. Fill the background with black paint
5. Create a new layer and call it "Metal Bar."  Use the Rectangle Marquee tool to create a metal bar on the layer.
   1. Drop white paint in the selected area.
   2. Use the Layer Style/Gradient Overlay command to make the metal look for the bar
   3. Create a new layer and name it “Lightning 1”
   4. Apply a Layer Style to the layer using Outer Glow
   5. The glow can be Green, Yellow, Red, or Blue
   6. DO NOT USE DARK COLORS FOR THE GLOW!
6. Select the Pencil tool, set it’s brush size to “1” and draw squiggly lines on the metal bar – From one end to the other
   
7. Create new layer and call it “Lightning 2” (repeat the process for making squiggly lines on your new layer)
8. Lower the opacity of the layer “Lightning 1”. This will allow you to see the original pattern without it interfering with your new pattern. (In the industry, this is called “Onion Skinning”)
9. Now, select the layer “Lightning 2” and draw a new pattern of squiggly lines.
10. Try not to repeat the pattern of the layer “Lightning 1”.
11. Repeat step 6 – 8 for layers “Lightning 3” and “Lightning 4”.(If you want to create 8 layers instead of 4, it is purely optional. More layers mean smoother animation)
12. Save your file as “Lightning Rod.psd” in your Lightning Rod folder

Animating the Lightning Rod

1. In Photoshop, make sure the Window/Timeline option is checked. the Timeline usually shows at the bottom of the screen.
2. Click on the button labeled "Create Video Timeline" and change it to "Create Frame Animation"

3. In the "Layers" pallette, Make sure that the eyeball next to all the layers (Except for layer “Lightning 1” is turned off. You can do this by clicking on the eyeball icons.
4. In the Animation box, under the image of the bar, select a delay time of .1 second.
5. In the Animation Box, select the icon “Duplicates selected frame” (next to the trash can icon).

6. Click on the new frame.

7. On your layers palette, hide the “Lightning 1” layer by clicking on the eyeball and reveal the “Lightning 2” layer by clicking on it’s eyeball (Visibility).

8. Repeat steps 4 – 6 for “Lightning 3” and “Lightning 4”

9. Save your document as Lightning Rod.psd in the Lightning Rod folder

10 . Now, use the Export option (under File) and then Save for Web (Legacy) and then click the Save button to save the file as an animated GIF file. Save the GIF file in your Lightning Rod folder. You should see the Export window like what is displayed below) For some versions of Photoshop (if you do not see the dialogue box below, you simply just do a Save As and select GIF).

STEL 3 Integration of Knowledge, Technologies, and Practice

3B: Draw connections between technology and human experiences

3J: Connect technological progress to the advancement of other areas of knowledge and vice versa

STEL 7 Design in Technology and Engineering Education

7H Illustrate that there are multiple approaches to design

7I: Apply the technology and engineering design process

7O: Apply tools, techniques, and materials in a safe manner as part of the design process

7V: Improve essential skills necessary to successfully design.

7Y: Optimize a design by addressing desired qualities within the criteria and constraints