Mise en Scène

April 22, 2014

For our final Typography project, we will be completing a 75 +/- frame animation of a type quote of our choosing. The animation will be set to music, and may have graphics or some other video layered with it.

The quote I have chosen is from a childhood favorite story, “The Velveteen Rabbit.”:

“Real isn’t how you are made,” said the Skin Horse. “It’s a thing that happens to you. When a child loves you for a long, long, time, not just to play with, but REALLY loves you, then you become Real.” — Margery Williams, “The Velveteen Rabbit.”

I believe I have a song picked out from the freemusicarchives.org website, and am still deciding on what graphics to add. The quote is pretty long depending on how I slice it up, 46 words total. So far I’ve scanned the pages of press-type that I would need and am also using the press type from the collage project:

: White Presstype

: when You pray move your feet – African Proverb

Then I isolated the letters needed for the quote and imported those letters into a Photoshop document. In the case of the African proverb collage, those letters were already on individual layers. The remaining letters I have had to isolate one at a time and put each one on an individual layer to “plug in” to the quote as needed. Here’s what it looks like…my quote is taking shape on the top half, and my “Alphabet Soup” is below with letters waiting to be plucked into the making of the quote:

Photoshop Quote with ALL LAYERS ON

Then the trick was how to get this onto individual cards into the order I wanted. So I created an InDesign document with 75 pages to represent the 75 frames of the animation. In truth, my animation will likely end up being longer than 75 frames, unless I can choreograph a way to make the quote appear more quickly.

Here are the first 34 frames I’ve created so far…representing only ten words of the 46 word quote…so I can see that I may have to rethink how the letters and words appear in order to stay within some sort of time limit:

By the way…please excuse the blue color…the jpeg compression has turned it completely garish from what I can tell on my monitor! The quote is in WordPress slideshow format, so it moves quite slowly. Click the arrows to get a better idea of how the quote will play out more quickly. Also, here’s the PDF version: Mise en Scene DRAFT

This slideshow requires JavaScript.

The tedious came challenge in saving these individual frames, first in Photoshop, then in InDesign. The way to do it was to “place” the individual letter layers from Photoshop into my InDesign pages, turning on the layers I wanted to place and turning off the layers I didn’t want on the page. However, this couldn’t be done with one Photoshop document (at least not with my limited knowledge of Photoshop) if I wanted to keep the placed images as linked files, since changing the visibility of the layers on one InDesign page forced the same change onto the other pages. So I had to save each frame you see above as an individual Photoshop document, THEN place that document onto the InDesign page. To save drive space, I actually started saving the Photoshop files as PDFs rather than PSD files. Finally, since I didn’t have the quote laid out in Photoshop in the same way I decided I wanted to see it in InDesign, I had to reposition and resize each frame using the X and Y values and the W and H values to make sure both frame and content aligned correctly page to page (I worked backwards from the end of each phrase to do this).

THAT was a lot of work…and I’m only one fifth done with the quote! But hopefully now that I’ve figured out some of the logistics of it, the rest will go a bit faster. The clock is ticking!!

April 23, 2014

Okay, so I’ve started to develop a system for placing the quote on my pages, or “frames” in InDesign and although there’s no way around the fact that it’s a time consuming process, the details are getting dialed in a bit more quickly.

The biggest coup, however, came when I decided to experiment with making the animation as a movie in Photoshop. Turns out with a little hunting around, Photoshop’s Motion settings handle just this sort of animation quite nicely, with the ability to edit the length and various attributes of each jpeg “frame”, add fade-ins, fade-outs and crossfades, and even add an audio track. This makes previewing the animation and dialing in pauses and beats infinitely easier than I anticipated….and it’s nice to keep the whole project “in house” using an Adobe application.

Here’s a preview of what I’ve gotten so far, uploaded to YouTube so it can be viewed here…and I’m still adding the remaining letters and words to make the quote (I’m at 17 of 45 total words). By the way, don’t bother watching past the 20 second mark, it’s only goes to 4 minutes and change because I didn’t crop the song:

Next, I’ll be thinking about adding some of the original illustrations from the 1922 book, and try to figure out how to best incorporate them, perhaps as the actual pages of the book. I have to search around and see if I still have my original copy!

April 27, 2014

Okay, so all the text is in…and I’ve exported the video from Photoshop to H.264 format at 15 fps instead of 30 fps (how it was built) to end up with a manageable file size, especially considering I still have to add illustration or some sort of graphics.

The nice thing about having this in Photoshop I realized is that each frame is still pretty editable; I can move text, change colors, add elements to the frames…a good amount of flexibility for someone just starting out with this stuff.

Here’s the rough cut of the full text with song edited to proper length and some basic fades blocked in. I’ll still be dialing in timing as I add graphics, but it’s a good start:

ON VIMEO: Velveteen Rabbit Type Animation

The next step will be to somehow incorporate the iconic image of the Velveteen Rabbit in the frame. One idea is to start with the fade in of a black and white outline of the drawing and let it slowly develop into the full color version. The other is to animate the “drawing” of the rabbit in black outline and then let the color come in in paint-like strokes. Even just writing about it however, I do want to be careful to end up with a subtle effect that won’t detract from reading the text.

Below are images of the Velveteen Rabbit cover illustration; the full color and the outline in black and white which I separated in Photoshop:

: Velveteen Rabbit Cover Illustration by William Nicholson

: Velveteen Rabbit B & W Extrusion

UPDATE:

Well you can tell when somebody finishes something at 4 in the morning, as I completely forgot to credit the author of my music! I found this beautiful track on the Free Music Archive and I really like everything about it; it works perfectly for the animation, and even the title has the same kind of childhood nostalgia I associate with The Velveteen Rabbit. The author of the music is Chris Zabriskie and the song is called “That Kid in the Fourth Grade Who Really Liked The Denver Broncos” from his album “Undercover Vampire Policman.” Thanks Chris, wherever you are…your work really added to my piece.

April 30, 2014

I’m adding a few more images to the pool to see if there’s something I can burn in to the frame to underscore the words. It’ll be a fine line to keep from distracting…I think one answer might be to use an enlarged version cropped into the negative space in the frame.