Okay, now we have a bunch of tweens… but, you’ll notice that the layers palette looks a bit strange…
There is only one layer and maybe layer(s) labeled frame 1 and frame 2…

The Next Step:
In the animation palette, select ALL the frames
In the Layer Palette Delete Frame 1 and Frame 2 (In the layers palette ONLY)
and
turn off the eyeball for the background layer (click it) This will decouple the background from the animation…

Your canvas, animation palette and layers palette should look like this

Step 2

Flatten Frames into Layers
It’s in the Animation Palette Menu:
Flatten Frames into Layers

Now your layers palette should have a layer that corresponds to a frame…

Step 3
Now we can make changes in each Frame Layer to make our animated object do something different…

In this example the changes  I make to the tennis ball will make the ball rotate and change rotation direction when it bounces

This is  what I did…

1. Select Frame one and select Layer 1
2. Menu: Edit > Transform > Rotate
3. In the Option Bar changed the rotation from 0 to 10 degrees

4. Click the Check Mark in the option bar

Step 4
1. Select Frame two and select Layer 2
2. Menu: Edit > Transform > Rotate
3. In the Option Bar changed the rotation from 10 to 20 degrees
4. Click the Check Mark in the option bar

Step 5
Repeat but make the 10 degree change…

” “

—

Step 30 (depends on how many frames you have)
Repeat make the change

This is fun, eh!

Because I decoupled the background, I can now easily change the background to anything I want…

Step 31
Turn on the background and
Save your animation

Play it

Now you can animate anything!…

Let’s see your results!

The question was asked in class…

How to you make an animation…

Tween, ease out, ease in… Animation in Photoshop

Those are all animation terms…

1. Understanding Tweening in Photoshop

Tweening is a process that makes a series of frames in a video or animation. It is derived from the animation term “betweening”, mathematically it’s known as interpolation. In each frame the object being tweened is either being moved slightly or some effect has been applied to it.
Easement (ease in and ease out) refers to the kinematics or motion of the object being tweened… speeding up (ease out), or slowing down (ease in). The more frames “between” a beginning and ending of something moving, the smoother the motion! In Television there are 29.5 frames in every second and in the movies there are 24 frames per second. The Saturday TV cartoons, get away with as little as 5 “tweens” per second!

2. MAKING TWEENS

Parts…
1 tennis ball, search the internet for “sports balls, clip art” or draw your own character! You can download this image…

Make a blank page…

If you are making a video for your widescreen TV or monitor, choose a “size” that fits the aspect ratio… An HD TV has a resolution of 1920 x 1080 Pixels, an old TV’s resolution is 720 x 480 pixels. Monitors vary, Scale accordingly…

Exporting for video is actually more problematic than just choosing the right “resolution”. In video/TV the pixels are NOT square. So if you are exporting for play back on a TV you need to make some conversions…

You can choose the correct aspect ratio using the following menu and choosing the pixel aspect ratio D1/ DV NTSC Widescreen (1.21)

I’m using 412 x 262 SQUARE pixels, one quarter the size of my Monitor. The layers panel is toggled on and off with the F7 function key. The animation palette is turned on with the Menu: Window > Animation.

The Tweens
Select the ball in the layers palette. (Layer 1)
Go to your canvas screen, use the move tool Keyboard “v” and move the ball to the edge of the canvas screen.
Now change the frame rate by clicking on the time under the first frame — change it to .1 or .2

Duplicate frame 1 with the frame duplicate button at the bottom of the animation palette making sure the ball layer (Layer 1) is still selected in the layers pallet.

Select Frame 2 in the Animation Palette. Use the move tool to move the ball to the bottom center of the canvas screen.

The First Tween
Now select frame 1 and press the tween button at the bottom of the animation palette.

Choose the # of frames to add (I’m using 5) and we are tweening with the “Next Frame”. Click okay.

You should see this in the animation palette.

The Second Tween
Now select Frame #7 
Duplicate frame #7 and select frame #8 (Click on the new frame #8 to select it) Make sure layer 1 is selected in the Layers palette and go to the screen canvas and move the ball to the edge of the screen on the right.

Now click Frame 7
This time we’ll Tween frame 7 and frame 8, and add 5 new frames between them…
your animation palette should now look like this…

Now select frames 7 through 13 (hold down the shift key and click on #7, then #13)
Use the pop out menu, (click on the tiny parallel lines at the top right of the animation palette) and choose Menu: > Copy Frames.

Click the last frame #13 and choose the Menu: > Paste.

In the requester choose “Paste After Selection”.

Now Select frames 14 to 20 and then select the Menu: > Reverse Frames…

Now you got it…

The next step is to select frames 1 to 7.

Copy.

Then Paste After Selection {the last frame in this case frame #20}

Select the frames you just pasted and choose the Menu: > Reverse Frames…

To save your work, save the files as a .psd photoshop file to preserve the layers and frames.
And now you’ll have an endlessly bouncing ball — all it needs is sound effects… and more…

To Export the animation
Menu: File > Export > Render to Video

For the web or TV choose the codec h.264 if you can, other wise use MPEG 4 or a movie file format

For this blog article I saved it via

Menu:
File > Save for Web & Devices… and saved the file as a .gif file

.gif files can be an animation, but you’ll only see the animation in a web browser or a mail client or a program that allows gif animation.

There is more to come, we’ll need to convert the animation to layers and a timeline… A static bouncing ball is boring, it ought to rotate or explode or something! Maybe that’s your homework or a project you’d like to take on!

The Next Step

Here’s how to make the above “video”

Step 1

Duplicate Layer 1, (the Garry Layer) and Activate the bottom Garry layer by clicking on it to turn it blue, and turn “on” the eye ball…

Step 2

Reload the garry selection that you saved earlier

Now choose the Menu Item

Edit > Puppet Warp and set the pins where you want the joints to move and add pins at  the hands and feet so you can change their positions

Just hold down the mouse button with the pointer over the hands and feet pins and drag the mouse to change their positions

When you are done with the moves click the check mark to accept the changes.

To save all your layers save the file as a .psd (PhotoShop Document) file. If you save the file as a .jpg or .png file you’ll loose all your layers. Saving the file with a .tif extension also saves layer information.

To make the Animation, I used the Animation palette but that’s a whole other story for a later class…

Have fun warping and have a great July the 4th Or Canada Day on July 1

Got a question ‘holler

in the mean time

Practice, practice practice

This is a NEW feature in Photoshop CS5 called Content Aware Fill and this is how you can take that feature one step further…

Step 1. Load the photograph in your class CD that is in the folder “AwareFill”. (or use your own)

Step 2. When we edit anything in Photoshop we should practice “Non-Destructive Editing.” (I didn’t do that in class) To do that Find the Layers palette

Menu: Windows > Layers or the keyboard shortcut F7 (function key 7)

Step 3. Dulpicate the background layer by (PC) right clicking in the blue layer if you have a (Mac) Control Click.

Step 4. The layer palette should now look like this

You’ll notice that the padlock is missing… and the duplicate layer is unlocked… (You can also unlock a layer by double clicking on the padlock.)

Step 5, Make sure that Background copy is highlighted in blue (The blue color tells you that the layer is “active”)
In the Tool Bar select the  Quick Selection Tool

Key board shortcut W

Step 6 Using the mouse draw inside Garry to make the selection. If the marching ants, the marquee effect goes outside garry in the tools options bar select the subtraction brush…

You should be able to hold down the alt key (PC) or the Option Key (Mac) to switch between adding and subtracting the selection. The key here is to hold down the alt/option key to switch between adding and subtracting.

One you have made the selection we want to save the selection as we are going to do more than just make Garry disappear… Note, when you save the file the save selection will go a way, it is not saved permanently.

Step 7

Choose the Menu: Select  >  Save Selection

and name the selection (garry) in the dialogue box

Step 7

Copy the selection to a new layer

Press the key board shortcut Control J (PC) or Command J (Mac)

The layers palette should now look like this

Step 8

Activate just the Background Copy

You’ll note that by clicking the “eye ball”  the layer turns off and becomes invisible on the canvas. For now we just want the Background copy active, as indicated by the color blue.

Step 9

We need to reload the saved selection…

Menu: Selection > Load Selection

Step 10

We want to “grow” or expand the selection by at least 10 pixels so the computer can figure out what to draw behind the image…

Choose the Menu:  Select  >  Modify  >  Expand…  and enter 10 pixels

Step 11

Choose the Menu: Edit > Fill and choose Contents: Use Content-Aware from the drop down menu…

Click okay and “Poof”

To clear the outline of the selection choose the

Menu: Select > Deselect

Up Next… make Garry a Puppet…

Have fun, and Practice, Practice, Practice

Those are all animation terms…

1. Understanding Tweening in Photoshop

Tweening is a process that makes a series of frames in a video or animation. It is derived from the animation term “betweening”, mathematically it’s known as interpolation. In each frame the object being tweened is either being moved slightly or some effect has been applied to it.
Easement (ease in and ease out) refers to the kinematics or motion of the object being tweened… speeding up (ease out), or slowing down (ease in). The more frames “between” a beginning and ending of something moving, the smoother the motion! In Television there are 29.5 frames in every second and in the movies there are 24 frames per second. The Saturday TV cartoons, get away with as little as 5 “tweens” per second!

2. MAKING TWEENS

Parts…
1 tennis ball, search the internet for “sports balls, clip art” or draw your own character! You can download this image…

Make a blank page…

If you are making a video for your widescreen TV or monitor, choose a “size” that fits the aspect ratio… An HD TV has a resolution of 1920 x 1080 Pixels, an old TV’s resolution is 720 x 480 pixels. Monitors vary, Scale accordingly… I’m using 412 x 262 pixels, one quarter the size of my Monitor. The layers panel is toggled on and off with the F7 function key. The animation palette is turned on with the Menu: Window > Animation.

The Tweens
Select the ball in the layers palette. (Layer 1)
Go to your canvas screen, use the move tool Keyboard “v” and move the ball to the edge of the canvas screen.
Now change the frame rate by clicking on the time under the first frame — change it to .1 or .2

Duplicate frame 1 with the frame duplicate button at the bottom of the animation palette making sure the ball layer (Layer 1) is still selected in the layers pallet.

Select Frame 2 in the Animation Palette. Use the move tool to move the ball to the bottom center of the canvas screen.

The First Tween
Now select frame 1 and press the tween button at the bottom of the animation palette.

Choose the # of frames to add (I’m using 5) and we are tweening with the “Next Frame”. Click okay.

You should see this in the animation palette.

The Second Tween
Now select Frame #7 
Duplicate frame #7 and select frame #8 (Click on the new frame #8 to select it) Make sure layer 1 is selected in the Layers palette and go to the screen canvas and move the ball to the edge of the screen on the right.

Now click Frame 7
This time we’ll Tween frame 7 and frame 8, and add 5 new frames between them…
your animation palette should now look like this…

Now select frames 7 through 13 (hold down the shift key and click on #7, then #13)
Use the pop out menu, (click on the tiny parallel lines at the top right of the animation palette) and choose Menu: > Copy Frames.

Click the last frame #13 and choose the Menu: > Paste.

In the requester choose “Paste After Selection”.

Now Select frames 14 to 20 and then select the Menu: > Reverse Frames…

Now you got it…

The next step is to select frames 1 to 7.

Copy.

Then Paste After Selection {the last frame in this case frame #20}

Select the frames you just pasted and choose the Menu: > Reverse Frames…

To save your work, save the files as a .psd photoshop file to preserve the layers and frames.
And now you’ll have an endlessly bouncing ball — all it needs is sound effects… and more…

To Export the animation
Menu: File > Export > Render to Video

For the web or TV choose the codec h.264 if you can, other wise use MPEG 4 or a movie file format

For this blog article I saved it via

Menu:
File > Save for Web & Devices… and saved the file as a .gif file

.gif files can be an animation, but you’ll only see the animation in a web browser or a mail client or a program that allows gif animation.

There is more to come, we’ll need to convert the animation to layers and a timeline… A static bouncing ball is boring, it ought to rotate or explode or something! Maybe that’s your homework or a project you’d like to take on!