TEAM FIVES PRESENTATION ON:

1
TEAM FIVES PRESENTATION ON

• ANIMATION

2
INTRODUCTION TO ANIMATION

• Animations are used to help draw special
  attention to particular icons, graphics, or
  logos. They can be used to deliver compact little
  movies either from video images or single still
  photos.
• The following slides will show you three
  different types of animations rotation, text and
  cut/slice. You will see how each one has a
  different way of making animation a great tool to
  work with.

3
Each slide will go through the steps it takes to
create the animation. Enjoy the slides!
4
This is animation created using Adobe Photoshop
Elements 3. In order to create a frame animation
you must create many layers. Each layer contains
subtle changes in the original image. In this
example there are nine layers. Each layer is
rotated by 1/8 of a turn counter clockwise. When
the Image is set into motion it gives the
appearance that the image is rolling. This is an
example of rotational animation.
Source www.sportslogo.net, 2006
Layer 1
Layer 2
Layer 3
Layer 4
Layer 5
Layer 6
Layer 7
Layer 8
Layer 9
5
This is another example of an animation created
in Photoshop Elements 3. In this example the
picture taken at PNC Park was shifted it to its
far right edge. Then it was slowly moved to the
left until the whole image was visible again.
This is an example of a panning animation which
takes a single still image and gives it the
appearance of motion.
Source My Digital Camera, 2005
Layer 1
Layer 5
Layer 4
Layer 3
Layer 2
Layer 9
Layer 8
Layer 7
Layer 6
6
Cut Slice Animation

• This image was selected from a free image website
  called http//www.freeimages.co.uk/.
• First a cut and slice to the left ear was used
  and manipulated by the free transform to move it,
  filling the areas with the paint brush.

7
Cut Slice Animation

• Next the right ear was sliced and moved, filling
  behind the empty space with a paintbrush.
• Last, the left arm was lassoed, cut and
  vertically flipped to give the appearance of
  waving.

8
Text Animation using Photoshop Elements Prepare
Files

• Open .jpg file, this will be your Background
• Add a Text layer
• Copy your background layer, name background 2
• Copy your Text Layer, name Text Layer 2
• Move the text box to a different location in Text
  Layer 2
• Copy Background 2 and Text Layer 2 as Background
  3 and Text Layer 3
• Repeat process until you have at least 5 sets of
  2 with the text in a different position in each
  Text Layer
• Remove visibility on all layers then make visible
  one set of 2 layers
• Go to Layer, Merge Visible to merge the paired
  background and text layer
• Repeat until all 5 sets of 2 are merged

11) Follow instructions on next page to create
animation
9
Using Save for Web to create Animation GIF in
Photoshop Elements

• Once layers are complete, click Save for Web
• Select GIF
• Click Animate box
• Modify Size if needed to reduce file size, click
  Apply
• Uncheck Loop if you do not want GIF to repeat
• Set frame delay (seconds)
• Preview in Web
• Adjust as needed
• Click OK to Finish

10) The GIF file can be inserted into
PowerPoint, Word, or your Web page and the
animation will run when the document or page is
opened
Source Image Modified in Photoshop, original
source is Microsoft Clip Art Gallery
10
REFERENCES

• Hoeschen, Craig (2005). Visual quickstart guide
  Photoshop elements for windows macintosh.
  Berkeley, CA Peachpit Press.