Wednesday, July 17, 2013

Project 2 : Stop Motion Frame Animation

D U E : 

[July 18, Thursday]

1.) COMMENT on at least two of your peers' Project 1 posts
onto their blogs! You should have an Blogger account to do so now!

[You learn just as much from others, if not more, than yourself.]

2.) The Walter Benjamin reading. We will of course meet
at Bibo's instead of the classroom for Thursday's class.

[July 22, Monday]

3.) Project 2 [Stop Motion Frame Animation].
Ramifications to be explained below!

P R O J E C T  2 .

"Stop Motion Frame Animation"
aka. SMFA aka. Something Mother Frickin' Awesome.


[Above two.]

4:3 ratio examples of the
general aesthetic that you will
feel comfortable for this project.
Food for imagination.

A set of examples for which to think
of doing our animations based on Project 1.
Using a special feature called "frame
animation" in Photoshop CS6.
(All PS beyond CS3 have this.)

(By the way, to embed video vertically like this...
Copy the embed code from Youtube/Vimeo/etc
and punch in place of the normal dimensions
tallscreen dimensions. This (for the blog)
measures to 320(w)x640(h).

For some reason or another, quality may be lost
through embedding in that fashion. Do note.
I will of course understand the difference.

Only ONE animation is required. You have three different panels for the project 1 triptychs, but need to make only one video-animation here appropriating visuals from it. Same dimensions as triptychs! Using the aforementioned 'frame animation' feature on Photoshop CS6. Each iMac in the lab should have CS6 installed. If you wish to add ingredients or alter existing 'layers' in your Photoshop file to even spice up the animation more, go for it!

Ever hear of or adore programs such as Flash or After Effects? Photoshop animation is a very effective vessel towards realizing a workflow in those time-to-time complicated environments. Think of the frame animation feature as the very fundamentals of animation. Like Brad Bird says, 'you are an actor in a moment for a long time'. If you know little of animation, here is a great place to start. If you are more seasoned, there is never a bad time to brush up on basics while inserting the theory you are reading.

-Must be at least 10 seconds. Not to say it can be longer, but do use time wisely. 10 seconds (depending on what you undergo) may be intense enough. A fluid enough animation at 0.2 seconds per frame would need at least 50 different frames to be arranged to fulfill the 10 seconds.
-Export frame animations at 1080(w)x1920(h) resolution from Photoshop.
-Export as "H264" at "animation medium quality". You can go higher, but certain settings at longer lengths make the animation go up to 8GB+ (!!!).
-Must be uploaded to a video aggregate site (Youtube, Vimeo, etc) and embedded to your blog by due date [Monday next week]. Preferably embedded in the format I utilized above, but not necessary. 

See that [COMPOSE] [HTML] duo of buttons at the top left of editing Blogger?

Top left. Below orange [B].

You will copy the embed code from your original video page onto Blogger and paste it via [HTML] to get results. ALONG with a more abridged artist statement from your triptych project. This may not be in as much further detail than your triptych image(s) as the visual content is the same, but strive to think how the meaning changed with video! That will suffice.

We will go over in class, but additional consider THIS artist when developing ideas :

[Below is an abridged version of an in-class demo of the program!]

1. OPEN your Photoshop file in Photoshop!

2. Look towards the bottom left. There should be an option

for TIMELINE. Select it. There may be another option to
decipher between VIDEO and FRAME ANIMATION.
You want FRAME ANIMATION. Select that. You will
get at the bottom a single frame to work with.

3. Think of animating this "literally" like a stop motion

animation in reality. You will tediously place each little
object in its place... Then take a snapshot! (Repped in
the program as a 'frame' or 'one of those boxes'.)
 Arrange one by one your layers throughout the timeline
that you want to be seen in that moment in time.

4. When done with a frame, click "paper" icon to make a

duplicate frame of the one you have before. OR... look for the
"fading circle" icon to TWEEN. Basically, edit a
second frame to be the end spot of your first frame...
Highlight both frames... select TWEEN... And add
however many frames needed to smoothly animate
in between the two! It takes not long to understand.

5. Recognize how long each frame is. Mine is 0.1 seconds a piece.

That means 10 frames per second. And 50 for 5 seconds, the MINIMUM
amount needed for the assignment. The "0.1" can be edited as well.

6. When ready to put online, go to FILE -> EXPORT -> RENDER VIDEO.
Again, preferred quality settings : change "Quicktime Movie" to "h264"
and "Animation High Quality" to "Medium Quality". Below is a cap.

In addition : There is a slightly more advanced way of creating this animation, utilizing FLASH CS6. Please get with me directly if you would like to learn this method. A primary advantage of it : It allows for rotation and resizing between frames, as Photoshop CS6 does not.

Now for the other component of video and animation : audio. However, given the shorter length of the animation, audio should be a more intuitive and creative process! 10 seconds will imaginative to mix for.

You will be making audio (via Garageband as presented solely or any other audio making capability program you can think of/suggest) for your animations! You can insert the audio into your animation via Photoshop! Then export as usual.

This is Garageband. We shall utilize its services
for creating our audio for the assignment.
It has software instruments installed you
can play around with using "Keyboard
Typing" as special filters as well!

Here is a general workflow.

-Open Garageband
-When prompted with a project list/grid, select VOICE (the mic). Save anywhere-any name.
-Note THREE tabs at the bottom right :
**An EYE (for finding loops and special sound FX which are very valuable). The FX tab has tons of sound effects you can use. Or you can be an alchemist and mix together two/three to make ONE unique sound!
**An "i". And somewhere atop, "Browse and Edit" tabs. You will mainly use "Edit" tab to add filters. Browse will be useful if (should you want to) add a software instrument track to use keyboard typing to play your own music!
**Lastly, a MUSIC NOTE. This is a gateway to all the media on your computer that's in the music folder, the movie folder, and iTunes. If you want to edit sound directly TO a video file, you can import video! You can add existing sound files to the bars as well and add filters (via "i".. possibilities).
**You'll often drag files from right to add to the bars. You can adjust the volume with commands on the left tab! To split/cut a bar in the middle on a track, hit Command+T.
**Explore! While there is protocol, you will often find your own flow with a program.
**To export your file when done- Go to share on top tab! Export as an .MP3.
**Then add to your Photoshop animation file!

How to add? RE : Step 24 of this CS6 tutorial! I will demonstrate this in person as well.

This should enable you to be able to insert audio into your existing animation piece (exported from GarageBand or another source) like a cinch. Then export again as usual. Those video bars may look confusing or recognizable. It is the 'other' interface from the Frame Animation option! You can toggle between the two on a tab on the bottom left of Photoshop. Video should be a AV bar icon while frame should be a "[ ] [ ] [ ]" type icon.


1. One sound recorded using a microphone.
** The lab HAS microphones! Ours must be used in the lab. If you have one of your own or can check one out from an alternative source, feel free to use it! You can get as creative as possible with this. It doesn't even need to be your voice or something 'recognizable' in reality.

2. A sound appropriated from the internet. Don't just throw in a song (meaning, I don't encourage just picking a song and using it... if you wanna use a song, work with it and show craft! Additionally, if you want to create your own music for the piece, that would be optimal as well. As long as you have a clear hand in editing it.)

3.  Same as above. Another internet sound.

Creatively mix your segment to effectively work with your animated pieces - use filtering, repetition, Left/Right stereo mixing to assemble the best possible audio mix that works flawlessly to complete your animated sequence!

Most important is to figure out the bare bones of animation using Photoshop for the project. You will want to know how to place your layers in the frames, tweening, durations, movement, etc. Essentially the animation tool allows you to use your layers in an image to animate between them- it is really that simple - the complexity is in figuring out the various tools and using them effectively. Attend office hours and Dillon's hours. Have fun and get started immediately! If you put this off until the last minute *cough* you will regret it thoroughly.

No comments:

Post a Comment