VSST 108 - Design for Media

Line Animation Project

Create an animated video - 10 seconds duration and made up entirely of hand-drawn lines.

(But first you'll make a one-second test version - see immediately below.)

Animated films were originally hand drawn - frame by frame (or "cel by cel" - from the celluloid they were drawn on). This project recreates, to some extent, that process. You'll draw with a marker on plain, letter-size copy paper. By tracing from one sheet to the next, you'll modify the image just enough to create the illusion of movement.

This animation is about LINE. It is meant to bring a line (or multiple lines) to life. The line(s) can move, morph, appear or disappear, create shapes. Shapes (with no shading or value in them) can move, grow or shrink, or morph.

The animation should not be representational beyond recognizable geometric or simple organic forms. If there is a "story" it should be very basic - about movement or development or interaction. No scenery, people, houses, trees, flowers, animals, vehicles, etc.

Each frame will be drawn with the fine or broad point of your marker on plain paper. These frames will be brought into Photoshop by scanning. Each frame will become a layer in the Photoshop document. Layer order is crucial. Sequencing, timing, and optional "tweening," are done in Photoshop's animation window, in "frame animation" mode. The final result should be saved in .psd form with all of the layers, but will also be exported (rendered) as video to create a .mov or .mp4 file.

The animation part will be exactly 100 frames each running for 0.1 sec, for a total time of ten seconds. There will also be a leading title (that can run for 1-2 seconds) and an ending credit (also for 1-2 seconds). The style of the title and credit is open - hand drawn, done in Photoshop, or even animated itself.

Since the final product will be in a video file format, you may optionally add an audio track.

Do first: One-second Test Version: Do a ten-frame animation that will last just one second - using the techniques described below. The purpose is to get a sense of the proper amount of change from frame to frame. Follow all of the steps listed below - but just for ten frames (and no title or credit).

This is due in AW Express for individual review on Tuesday 4/17.

Drawing, Scanning, Animating and Video Rendering

(1) Drawing

Your drawings should be on 8.5x11 copy paper, in landscape orientation. Use your marker: fine-point and/or broad point. You can vary the line width but don't go wider than the broad tip of the marker. Don't do any filling-in of shapes or shading.

Number each sheet in small numbers near the bottom edge of the frame using a fine-point pen (not the marker); keep the numbers in the same location from frame to frame.

The amount of change or movement from frame to frame is something you need to work out. Great change or movement makes very fast action - maybe too fast. Remember that ten frames will create one second of screen time. One of the purposes of the one-second test is to work this out.

Draw your animation first in pencil. This will let you erase and make changes if necessary, and will avoid bleed-through of ink to the next sheet of paper. When you're happy with the pencil version, go over it with marker.

(2) Scanning

When you have finished your drawings, scan them on any scanner in room 510 or 502 (or on your own). It would be good to scan them all at one sitting, so that settings will remain consistent. If you scan in these labs, you'll be using the Image Capture app.

Scan the drawings in 8-bit (256 values) grayscale ("black & white") at 72 ppi. Scan the entire sheet (but not the entire scanner cover - the sheet is somewhat smaller - be sure to draw your scan boundaries.) Save each scan as a .tiff file. Check your first scan with an overview and set the scan area. Then, continue to scan without closing the scan window or doing another overview, or changing settings. Be sure to place each sheet into exactly the same position (registration) on the scanner platen and put the top down for good contact and contrast.

** Be SURE that you scan at 72 ppi - or your file will be too large to animate. **

Create a folder on the desktop into which to save your scans. Save each scan as a sequentially numbered .tif file, <001.tif> <002.tif> etc., up to <100.tif>.

Add your title frame(s) and credit frame(s) to this folder. You can create your title and credit frames using Photoshop or Illustrator or any other graphic tool. Or, you can hand draw them in the same style as your animation (but don't be sloppy). If you want, you can animate the title and/or the closing, either digitally or by hand. Your title and credit frames should be the same size as your action frames, grayscale, and 72 ppi. Have your titles or credit run for 1-2 seconds each.

(3) Create a single Photoshop file with all of your layers

Open your folder of images in Adobe Bridge. Look through them to be sure they are in the right order.

In Bridge: SELECT ALL of your frames. Use Tools/Photoshop/Load Files Into Photoshop Layers. This will create a new Photoshop file with all of your images on layers and in numerical sequence. SAVE this file but note:

When you SAVE after creating the Photoshop document with the 100+ layers, you will get a dialog box asking if you want to maximize compatibility. Uncheck that box. This will make a much smaller file.

(4) Prepare for the frame by frame animation

In the Photoshop file, make sure that your first animation frame is the top layer and your last animation frame the bottom layer.

Move your title frame(s) to the top of the layers stack and credit frame(s) to the bottom.

Turn on the visibility (eye icon) of all layers. Only the top layer will show. Save As a Photoshop document <lastname-line-animation.psd> to the desktop. Don't try to work with a file that is based in the remote server.

Because all of your scans will bein portrait orientation, use Image/Rotate - either 90° clockwise or counterclockwise depending on what is the correct bottom of your frame. This will rotate all of the layers simultaneously to landscape orientation.

If necessary to modify the brightness or contrast of your scans, create a new Layer/Adjustment Layer: Levels and make sure that it's at the top of the layers. It will have the same effect on all of your layers. Try to get the background pure white while keeping strong black lines.

Go to Image/Size and confirm that your images are 72 pixels per inch at roughly 8.5x11 inches. If you accidentally scanned too large you can now use Image/Size (with resampling turned on) to downsize the entire set of scans simultaneously.

If necessary to get rid of extra white space or sloppy edges, crop the frame slightly.

(5) Create the animation

Go to Window/Timeline. The timeline window will appear at the bottom of the screen. In the center will be a button and a pop-up menu arrow: choose "create frame animation" and click on the button. A frame-by-frame animation window will apear (not a video timeline). One frame will be present, it is based on whatever is currently visible in the main window.

Be sure that it is your first layer that is visible in the first frame. Set the frame timing to 0.1 second.

Now, create a new animation frame by clicking for a duplicate frame (dog-eared page icon). Initially it will show the same layer as the first frame. Turn off the visibility of your top layer. Now the frame will show the next layer. It should automatically be set for 0.1 second.

Do this again for your next frame. When you first make a duplicate frame, it will still show the image in the second layer. Turn off the visibility of the second layer, and now it will show the third.

Keep doing this until you have as many frames as layers. Save frequently!!

Note: Don't go back to look at earlier frames, or they will change to the currently visble layer! Also, don't rearrange the order of frames after you've begun animating! The animation frames will all change.

If your frames are not already timed at 0.1 sec: SELECT ALL of your frames (by using the menu accessible from the top right of the timeline panel). Set the duration time for the first frame to 0.1 sec. and the same duration will be set for all frames. 100 frames at 0.1 second each will result in a 10-second piece.

If you have just one title frame and you want it to run for one second - don't change its frame rate to 1.0 sec. - this will screw up the video conversion. Instead, duplicate it nine times so there are ten copies. In total, it will run for one second. Do the same for the credit frame. (If you have multiple title frames or credit frames, then proceed accordingly.)

SAVE. Keep this .psd file in reserve in case you need to make changes.

(6) Export to Video

Use Export/Render Video to create an MPG video <sec-lastname-line-animation.mp4>.

In the render video parameters: name your file, direct your file to the desktop, and make sure that the frame rate is 30 fps and your size is "document size" and this is roughly 700-800 pixels on the longer dimension (and not any larger). Your document size will vary slightly depending on how you scanned. The 30 fps setting will render the video as smoother, even though the actual frame rate is 10 fps.

If you want to add an audio track, add it in post production to the .mp4 version. You can convert to .mov if necessary.

Note: if "Render to Video" crashes or hangs up, it might be because your file is too large - possibly because you scanned at 300 ppi.

The final product - roughly 12-14-seconds - <lastname-line-animation.mp4 or .mov) is due in AW Express at the beginning of class 4b on Thursday 4/26.

- .mp4 or .mov file.
- ten seconds of action preceded by 1-2 sec. of title and followed by 1-2 sec. of credit
- title/credits may also be animated (optional)
- audio is optional
- abstract lines only, no figures, representations, numbers or letters, etc.

The first 10 sheets of paper will be distributed at class on Thursday 4/12.

The remaining 100 sheets will be distributed at the individual meeting on Tuesday 4/17.

Final animation due on Thursday 4/26.

Course Index Page