CS 1033Multimedia and Communications

Lab 07: Introduction to Animation using Photoshop

REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB!

LAB #7 - Exercise 1

Objectives:Upon completion of Exercise 1 you should be able to:

Import a group of images all at once into Photoshop and turn them into layers Turn the layers into frames Create a basic animation timeline Manipulate frames in timeline Create compute generated frames using tweening Save your animation as an animated .gif file

1. We will be creating something similar to this.Create a folder to use for this lab call it lab07 e.g. F:\cs1033\lab07

2. Go to (http://www.csd.uwo.ca/~lreid/cs1033labs/lab07 ), and save all the files and folder into a subfolder called images on your memory stick e.g. F:\cs1033\lab07

3. Open Photoshop

4. From the Menu Bar, select File > Scripts > Load Files into Stack…

5. A new window called Load Layers will appear. Change/make sure the Use: dropdown menu is on Files Press the Browse… button and choose the folder containing the images F:\cs1033\lab07\images

6. Then select all the files in the images folder by left clicking on ball.png, then, while holding down the Shift key left click on standing.png. All the images EXCEPT FOR sun.png should then be selected. Once you see the 5 images are blue, press the OK button. Save your files as exercise1_complete.psd (File>Save As then make sure you pick .psd)

7. Next, Photoshop will load those five images (it may take a few extra seconds as it is loading them). You should now see 5 layers each corresponding to a different image in the Layer Manager Pane.

8. We need to create a background layer and delete the portions of each of the pictures we do not need.

From the Layer Manager pane, make sure you are on layer “standing.png”.

From the Menu Bar select Layer > New Fill Layer > Solid Color. A dialog box opens. Leave the name as Color Fill1 (which is a default

name ) click OK.

9. In the Color Picker window that appeared choose white. You can do this by dragging the circle to the top right, or by setting R, G, and B to 255, or by typing ffffff in the textbox beside #.

10. You will end up with a new layer that looks like this:

11. From the Layer Manager Pane, highlight the layer Color Fill 1 by clicking on it. Then from the Menu Bar choose Layer> New > Background from Layer.

12. The layer Colour Fill 1 disappears and a Background layer is formed. You have just created a white background for you to build your animation on.

13. Now that we have imported our frames and created our Background layer, we need to isolate the objects in each of the pictures we imported. That will be the next steps. Start with the ball. Click on the layer ball.png.

14. From the Tool Panel click Quick Selection Tool. Click somewhere in the middle of the ball, continue

dragging until you can see the whole ball is selected (you will see a dashed outline).

Invert the selection by choosing from the Menu Bar Select > Inverse. Once the selection has been inverted press the delete button on your keyboard.

Next press Ctrl-D so that the dashed outline disappears. Hide the Background Layer by pressing the (eye icon)

beside the layer Background in the Layer Manager Pane.

Notice the white around the ball is now gone however it still exists on the other images.

Click on the (eye icon) next to the ball.png in Layer Manager to hide the ball while you work on the other layers

15. Click on the cloud.png layer and repeat Step 14 for the layer cloud.png to eliminate the background around the cloud. Then hide the cloud.png layer using the eye icon next to the cloud.png layer.

16. Repeat Step 14 for the layer footback.png. But use the Magic Wand tool instead of the Quick Selection tool. With the Magic Want click on any black part of the body. The entire person will be selected and that is what you want, since you are eliminating the white background in this step. Then from the Menu bar do Select>Inverse and then hit the delete button. Then hit Ctrl-D to deselect (make the dashed line disappear). Then hide the layer footback.png.

17. Repeat Step 16 for layers: footforward.png, standing.png. To work with each of these layer, hide the layers using the eye icon so that you can work with each layer by seeing it better.

18. When you are finished hiding the background on each layer, turn on the eye icon on each layer to make them visible, except Background layer. Your image should look like this. Save your file again.

19. We now want to have a starting point for our animation. Hide the layers ball.png, cloud.png, and Background layers.

20. Make sure the standing.png layer is selected by clicking on it in the Layer Manager Pane. You are about to move him to the lower part of your canvas.

Use the Move Tool and in the Options Bar make sure that AutoSelect is not checked (otherwise you will have problems moving the layers around) and Transform is checked (so that you can see what you have selected)

Move the standing layer to bottom left corner

21. Repeat the above step for footback.png and footforward.png and be sure to over place all 3 figures on perfectly top of each other.

When finished, it should look like this where all three layers are forming the person.

22. Next you are going to shrink the ball and place it near the foot.Click on the ball.png layer and make it visible.

Choose the Move Tool and make sure the Show Transform Controls is checked in the Options bar.

23. To resize the ball proportionately, press on Shift key and take any of the drag handles..

Using the transform controls, shrink the ball down to about 1/3 the size of the person and place it

just overtop of the forward foot like so. To accept the transformation, in the Options bar, click on the checkmark.

24. Still using the Move Tool select the cloud.png layer. Using the transform controls change it to be around 1/3 the width of the canvas and place it in the top left of the canvas. This is what your full canvas should look like so far.

25. Make your background layer visible.

26. While having the Move Tool, go to the options bar and uncheck the “Show Transform Controls”. This will help you so that the outline doesn’t show anymore.

27. Save your file.

28. We are now ready to create the animation. From the Menu Bar go to Window > Timeline. (If you are on CS5 or earlier you will have to get CS5 Extended or use Windows > Animation but it will have a totally different look and operation). In the labs MC 230 and NSC 105 Photoshop CS6 is installed. )

29. At the bottom of your window, the Timeline panel appears. In the middle of the Timeline panel, you will find a button with a dropdown arrow. From this dropdown select Create Frame Animation

30. Click on the Create Frame Animation button.

31. We now have a singular frame which you can see in the bottom left hand corner of the Timeline tab. In the top right of the tab click the and you will be

presented with a menu.

From this menu choose Make Frames from Layers this will create a separate frame for each of our layers giving us a good starting point.

Select the frame with the 1 in the top corner and push the trash can button to delete it. This frame was just our background layer and we do not need it.

32. Click the frame with the 1 at the top left again. Hold the Shift key on your keyboard and click the last frame which should be the one with the 5 at the top. Notice we now have all the frames selected.

33. In the Layers Manager Panel toggle the visibility (turn the visibility ON) for the Background layer, ball.png layer, and the cloud.png layer.

34. If done properly all 5 frames should now show the background and the cloud.

35. We are going to have the person kick a ball that bounces around the canvas. The Timeline tab allows us to modify layers for each frame.

Click the frame with the 2 in the top left. Notice that this is in the wrong order as kicking forward happens after kicking backwards.

In the Layer Manager Pane, toggle the visibility of footback.png so that it is visible, toggle the eye icon to make footforward.png disappear in the window.

When finished frame 2 should have footback.png visible but not footforward.png visible.

36. Repeat the above step for frame 3 except this time in Layer Manager Pane, the footforward.png should be visible and footback.png should be hidden, and the window should display the following:

37. Click on frame 1 and press the button to bring up the menu choose Copy Frame. Now click on frame 3 press the button again and this time choose Paste Frame and small window will appear. Select Paste Before Selection and click OK. Notice you now have 6 frames with the first 4 showing the person in standing, footback, standing, footforward order. To see it in the window, click on each frame in the timeline to verify the sequence.

38. Select frames 5 and 6, and turn on the visibility of the standing.png layer for both frames. Your Timeline tab now looks like so:

39. To play your animation. To see how your animation

looks so far, click the down arrow beside the Once in the Timeline tab.

Choose Forever

Now push the Play icon on the Timeline tab and you can see the foot move back and

forth over and over. To stop this press the button. Click on frame 5 and click on to access Copy Frame. Paste it before frame 6, two

times. (refer to the previous step to accomplish this if you can’t remember). You should now have a total of 8 frames.

40. Select frame 5. Click on the ball.png in the Layer Manager Pane. Then using the Move Tool move the ball in the ball.png layer to the middle of the canvas. Note that the other frames are not affected.

41. Select frame 6 using the Move Tool move the ball in the ball.png layer to the middle of the canvas. Note that the other frames are not affected.

42. Select frame 7 using the Move Tool move the ball in the ball.png layer to the beside the cloud as you can see, Note that the other frames are not affected.

43. Select frame 8 using the Move Tool move the ball in the ball.png layer to the beside the cloud as you can see, Note that the other frames

are not affected.

44. Your timeline tab should now have 8 frames and look approximately like this:

45. In frames 2, 4, 6, 8 move the cloud to be in the top centre of the canvas.

46. In frame 5 move the cloud to the top left of the canvas.

47. In frames 3, and 7 move the cloud to the top right of the canvas.

48. Test your animation so far by clicking on the Play icon. Notice that the animation is very choppy and very fast.

49. To cut down on the choppiness, first select all 8 frames (to do this select frame 1 hold shift then click frame 8)

50. On frame 1, click the down arrow beside 0 sec. and choose 0.1 seconds in the popup menu.

51. Play the animation again. It is still very choppy. Try adjusting it to 1.0 seconds so you can see in slow motion what’s happening. Then try 0.2 seconds, 0.5 seconds. Return it back to 0.1 seconds.

52. We can now add tweening to further reduce the choppiness, by getting the computer to generate more frames for us.

Select both frames 1 and 2 press the button

on the Timeline tab and choose Tween…. From the popup menu select the following options : Make sure frames to add is 4.

53. Play the animation again. Notice how kicking the ball part of the animation has slowed down.

54. Repeat the step above for frames 6 and 7 (the new 6 and 7, the inserted tween frames). You are tweening again. Select both

frames 6 and 7 press the button on the Timeline tab and choose Tween…. From the popup menu select the following options : Make sure frames to add is 4.

55. Play the animation again. Notice how kicking the ball part of the animation has slowed down. At this point you should have a total of 16 frames.

56. Repeat the tweening step for the following pairs of frames. Do these in order to achieve the proper results.

11,12; Tween and play 16,17; Tween and play 21,22; Tween and play 26,27; Tween and play 31,32. Tween and play

57. When you are finished you should have a total of 36 frames. Save your file and play the animation

58. Play the animation and notice that right now, the kicking of the foot looks a bit awkward because it is slow. Let’s speed it up just those frames (frames 1 to 16) Select frames 1 through 16

Change the delay between the frames to be No Delay. To do this click the underneath one of the selected frames and choose No Delay in the popup menu.

Press the Play button in the Timeline tab to see your animation in action. When you are

finished press the Stop button . Save your file again.

59. Now from the Menu Bar choose File > Save For Web and you will see the Save for Web window similar to here:

60. Notice the file size of the finished gif file in the bottom left corner. In the top right corner, under the dropdown box for Preset: select GIF 128 Dithered Notice that file size gets smaller. If you want to make the final .gif file a bit small, try dithering it.

61. Press Preview in the bottom left to see your gif in a browser.

62. After you are finished close the browser and push the Save… button in the Save for Web window save it as ballkick.gif.

63. Once you have exited the dialog box, save your file again.

LAB #7 - Exercise 2

Objectives:Upon completion of Exercise 2 you should be able to:

Add layers to an existing animation. Make the layers visible on existing and selected frames Make a layer rotate in an animation Save your animation with a different height and width than it was originally when

creating the animated .gif file

1. You will be creating something that looks similar to this. Go to File > Open and browse the lab07 files, go to the images folder and find sun.png file. Choose this file and open it in Photoshop.

2. Click to go back to your exercise1_complete.psd file.

3. On the Timeline Pane press the Sub Menu in the far right corner.

4. You’ll notice there is an option called New Layers Visible in All Frames make sure there is NO checkmark beside it should look like this:

5. From the Top Menu bar choose Layer > New > Layer… Name the new layer sun. In the Layer Manager Pane, move this layer so that it is ABOVE the ball.png layer

6. Click on the tab to see the sun.png image you just opened

7. We need to select just the sun. Click on the Magic Wand Tool in the tool bar.

8. Then click on the background (NOT on any part of the sun). This should select ALL of the background. Then from the Top Menu Bar choose Select>Inverse to select all of the sun and none of the background. Then copy it by choosing Edit>Copy (or hitting CTRL-C).

9. Now go back to the exercise1_complete.psd file by clicking on the tab. Make sure the sun layer is still selected AND make you have selected FRAME 1 in the Timeline Window. Then paste in what you just copied (Edit>Paste)

10. The sun is too large and in a strange position move it to the top right and make it smaller (CTRL-T or Edit>Transform>Scale) so that it looks similar to this:

11. We are going to have our sun rotate 45 degrees every frame. What we will do is create 8 suns representing these degrees of rotation 0, 45, 90, 135, 180, 225, 270, and 315, however Photoshops transform tool is -180 to 180 so our rotations are going to be 45, 90, 135, 180 ,-135, -90, and -45.

12. Let’s get started first we need 8 suns select the sun layer in the Layers panel and either press Ctrl + j or navigate to Layer > New > Layer via Copy.

13. Repeat the step above until you have 8 sun layers. Name the layers: sun, sun45, sun90, sun135, sun180, sun-135, sun-90, sun-45. When finished you should have something like this:

14. Now we are going to select the Move Tool while we have sun45 selected. Press Ctrl + T to enter the Free Transform mode or select it from Edit > Free Transform.

15. Change the angle to be 45 degrees like this:

Click the checkmark to apply .

16. Repeat the 2 steps above for sun90, sun135, sun180, sun-135, sun-90, sun-45. However instead of 45 degrees choose the degree corresponding to the layers name i.e. 180 for sun180 or -45 for sun-45

17. Finally we need to make each of the rotations of the sun appear in the proper frames. Let’s start with the sun layer. It is the one that we didn’t rotate. First in the Timeline panel click frame 1 so just it is selected. Now change all the sun layers visibility off except for sun. Your window should look like so

18. While holding Ctrl key down, click on every 8th frame after frame 1. So click on frames 9, 17,25, and 33. Toggle the visibility of the sun layer off then on. You should notice that all the selected frames now have a sun visible.

19. Now select frames 2, 10, 18, 26, 34 and turn on the visibility of the sun45 layer. Repeat this pattern for all the sun layers. Here is a table of which frames each of the suns should be visible on.

sun 1, 9, 17, 25, 33sun45 2, 10, 18, 26, 34sun90 3, 11, 19, 27, 35sun135 4, 12, 20, 28, 36sun180 5, 13, 21, 29sun-135 6, 14, 22, 30sun-90 7, 15, 23, 31sun-45 8, 16, 24, 32

20. When you are finished you can preview your gif in Photoshop again using the Play button in the Timeline panel. Save your psd file.

21. Finally let’s save our animation but this time we are going to change the size go to File > Save for Web. In the bottom right there is an Image Size box. Change the H: to 200. This changes the height to 200 pixels and you will notice the width scales down also since they are locked. Hit the Save.. button but the name for this one to sun.gif and save it in your lab07 folder.

22. Using File Explorer, go to your lab07 file and click on the .gif files. Also notice the change in the file size of both gifs. Remember that the smaller your gif is in terms of pixels, the smaller the file size will be.

LAB #7 - Exercise 3

Objectives:Upon completion of Exercise 3 you should be able to:

Given 5 images, create an animated gif on your own

1. You will be creating something that looks similar to this. Go to File>Open and browse the lab07 files and open the file called happysun.psd.

2. In the Layer Manager Pane, make each layer visible, starting with the Sun layer and moving up to see each of the layers so that you can see what you will be working with.

3. With the steps you have learned above (starting from about step 30 in Exercise 1 above), create an animation that make the sun smile and have it play forever (here). If it is too fast, don’t forget to change the delay (here)for each frame. Also, try to make smile big and then smoothly go back to the original small smile. Do to this you will need to duplicated (see duplicate button here) each of the 5 frames once and then rearrange them on the timeline so that they smile big and then go back to the small smile. You can do with without tweening, just use the 5 images and the delay.

4. When you have it working, do File>Save For Web to save it as an animated .gif

THIS IS THE END OF THE LAB. DO NOT FORGET TO TAKE YOUR MEMORY STICK.