Animating in Photoshop, We Start Here
DOWNLOAD SYLLABUS
| gr20790_shanks_sp15.pdf |
| ps-gif-animation-assignment.pptx |
REQUIREMENT FOR BOTH GIF ANIMATIONS (Frame and Timeline): You should create endless looping motion for both of your GIFS.
Consider your start and end. There should be no final ending because a GIF is continuous, it should loop forever. So the end should lead you back to the beginning.
Consider a GIF where you pour milk into cereal, eat the cereal and are left with an empty bowl....how do you create a strong loop back to the beginning?
Better yet consider creating something where the motion is endless. For example someone jumping rope. A couple dancing where their final move leads back to the first move.
FRAME ANIMATION
Frame Animation:
Choose EITHER a flipbook OR a cinemagif to create a frame animation, not both, unless you want to.
See examples below
Tips for Flipbooks:
To hand draw a flipbook for animation you can use tracing paper/vellum instead of plain paper to trace/change your original drawing to make it move. Be sure to trace all drawings to be scanned with thin sharpie.
Since the final output will be to make it an animated GIF it does not matter that the tracing paper/vellum is see through as you won't see that aspect in the final GIF.
Tips for Cinemagifs:
Use photos shot in burst/continuous mode on a tripod or use video shot on a tripod. Tripod required! Shoot during daylight. The KEY here is to shoot a subject where many elements are moving but you will isolate just one. See the examples. Your main focal point subject should be clearly defined by having a single motion highlighted. For example a busy street, where all the motion is still except the reflection of a moving car in a cafe window, or a single newspaper page rustling under someone's foot.
TUTORIALS FRAME ANIMATION:
Animating with Frames PS CS6:
http://help.adobe.com/en_US/photoshop/cs/using/WSB8C58284-9DEB-44f2-9D8F-7F77594A8CC2a.html
_______________________________________________________________________________________________
Cinemagif Tutorials:
http://blog.spoongraphics.co.uk/tutorials/how-to-make-a-cool-cinemagraph-image-in-photoshop
http://content.photojojo.com/tutorials/how-to-make-cinemagraphs-photos-that-move/
_______________________________________________________________________________________________
Flipbook Animation Tutorial:
http://www.instructables.com/id/How-to-Make-an-Animated-Gif-In-Photoshop-and-prin/
http://cargocollective.com/Apt/Hand-Drawn-Flip-Book
http://www.wikihow.com/Make-a-Flipbook
http://www.youtube.com/watch?v=iExiCGV7jzI
http://flipbookisland.com/
_______________________________________________________________________________________________
TIMELINE ANIMATION
Tips for Timeline Animation:
Choose something that needs to have some complex changes like color changes, fade ins or outs, complex motion of multiple parts, etc. Something more complex than flipbook. See examples below.
TUTORIALS TIMELINE ANIMATION:
Animating with Timeline PS CS6:
http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-746fa.html
http://vimeo.com/23707998
http://planetphotoshop.com/motion-graphics-in-photoshop-cs6.html
Using Masks to reveal! http://tv.adobe.com/watch/the-complete-picture-with-julieanne-kost/creating-masks-to-move-over-time-in-photoshop-cs6/
Using Complex Motion! http://www.alexgrigg.com/Photoshop-Animation-Techniques
Drawing a Walk Cycle http://www.angryanimator.com/word/2010/11/26/tutorial-2-walk-cycle/
_______________________________________________________________________________________________
Choose EITHER a flipbook OR a cinemagif to create a frame animation, not both, unless you want to.
See examples below
Tips for Flipbooks:
To hand draw a flipbook for animation you can use tracing paper/vellum instead of plain paper to trace/change your original drawing to make it move. Be sure to trace all drawings to be scanned with thin sharpie.
Since the final output will be to make it an animated GIF it does not matter that the tracing paper/vellum is see through as you won't see that aspect in the final GIF.
Tips for Cinemagifs:
Use photos shot in burst/continuous mode on a tripod or use video shot on a tripod. Tripod required! Shoot during daylight. The KEY here is to shoot a subject where many elements are moving but you will isolate just one. See the examples. Your main focal point subject should be clearly defined by having a single motion highlighted. For example a busy street, where all the motion is still except the reflection of a moving car in a cafe window, or a single newspaper page rustling under someone's foot.
TUTORIALS FRAME ANIMATION:
Animating with Frames PS CS6:
http://help.adobe.com/en_US/photoshop/cs/using/WSB8C58284-9DEB-44f2-9D8F-7F77594A8CC2a.html
_______________________________________________________________________________________________
Cinemagif Tutorials:
http://blog.spoongraphics.co.uk/tutorials/how-to-make-a-cool-cinemagraph-image-in-photoshop
http://content.photojojo.com/tutorials/how-to-make-cinemagraphs-photos-that-move/
_______________________________________________________________________________________________
Flipbook Animation Tutorial:
http://www.instructables.com/id/How-to-Make-an-Animated-Gif-In-Photoshop-and-prin/
http://cargocollective.com/Apt/Hand-Drawn-Flip-Book
http://www.wikihow.com/Make-a-Flipbook
http://www.youtube.com/watch?v=iExiCGV7jzI
http://flipbookisland.com/
_______________________________________________________________________________________________
TIMELINE ANIMATION
Tips for Timeline Animation:
Choose something that needs to have some complex changes like color changes, fade ins or outs, complex motion of multiple parts, etc. Something more complex than flipbook. See examples below.
TUTORIALS TIMELINE ANIMATION:
Animating with Timeline PS CS6:
http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-746fa.html
http://vimeo.com/23707998
http://planetphotoshop.com/motion-graphics-in-photoshop-cs6.html
Using Masks to reveal! http://tv.adobe.com/watch/the-complete-picture-with-julieanne-kost/creating-masks-to-move-over-time-in-photoshop-cs6/
Using Complex Motion! http://www.alexgrigg.com/Photoshop-Animation-Techniques
Drawing a Walk Cycle http://www.angryanimator.com/word/2010/11/26/tutorial-2-walk-cycle/
_______________________________________________________________________________________________
Examples of Timeline Animation
Professor example (hand drawn): Christine Shanks
Student example (vector and hand drawn): Jeremie Wimbrow
Student example (hand Drawn): Stevie Lorena
Student example (vectors): Vina Canete
Frame Animation: Flipbook Examples
Student example Flipbook: Amanda Wadsworth
Student example Flipbook: Adam Schüett
Frame Animation: Cinemagraph Examples
Student example (photographs): Stevie Lorena
Student example (photographs): Amanda Wadsworth
Student example (photographs): Taisia Staal