Week 5 Day 2: Bringing the Quote to After Effects

Today in class I worked on bringing all my elements together into After Effects--my quote, the typography, & my background--to begin animating.  I did end up adding a little vignette within After Effects to add a little more depth & dimension.  I only got about 10 of my 49 estimating key frames done, but I'm really excited to buckle down & complete it this weekend.

Week 5 Day 1: Creating the Background

Following the tutorial I previously referred to, I was able to make a Fringe-inspired background that I am quite happy with.

And just for kicks, I did a little practice with my type as well, adding a little opacity to better match the title sequence.

Week 4.5 Outside of Class: Storyboarding in Illustrator

Here is the digital version of my storyboarding.

I am currently also working on a background, based on the title sequence of the show this quote comes from, Fringe.

I was unable to find a texture online I was happy with, but I did find a tutorial on Cute Little Factory to create my own in Photoshop.  It's not perfect, but it's pretty close.

Week 4 Day 2: Beginning Storyboarding

Thursday in class I began my storyboarding sketches for my quote.

I had also done some research on kinetic typography & found some really effective & dynamic examples, one from the movie The Dark Knight & the other from Lock Stock and Two Smoking Barrels.  These served as a huge inspiration to me as I was storyboarding.

Week 4.0 Outside of Class: Quote in Illustrator

I finally decided on the Fringe quote, "Most of us experience life as a linear progression, but this is an illusion, because every day, life presents us with an array of choices; each choice leads to a new path: to go to work, to stay home... And each choice we take creates a new reality." 

Week 4 Day 1: Brainstorming Quotes for Motion

"It is time for us all to decide who we are.  Do we fight for the right to a night at the opera now? Have you asked of yourselves what's the price you might pay? Is it simply a game for a rich young boy to play?  The colors of the world are changing day by day."

Enjolras, "ABC Cafe/Red and Black" Les Miserables

"Most of us experience life as a linear progression, but this is an illusion, because every day, life presents us with an array of choices; each choice leads to a new path: to go to work, to stay home... And each choice we take creates a new reality." 

Walter Bishop,"The Road Not Taken" Fringe

"Tracked you down with this. This is my Timey-Wimey detector. Goes ding when there's stuff."

The Doctor, Doctor Who

"People assume that time is a strict progression of cause to effect. But actually from a non-linear, non-subjective viewpoint it's more like a big ball of wibbly-wobbly timey-wimey ...stuff."

The Doctor, "Blink" Doctor Who

"Thing about me, I'm stupid. I talk to much. Always babbling on. This gob doesn't stop for anything. Wanna know the only reason I'm still alive? I always stay near the door."

The Doctor, "Forest of the Dead" Doctor Who

"I've been a fool and I've been blind. I can never leave the past behind.  I can see no way, I can see no way. I'm always dragging that horse around.  Our love is questioned, such a mournful sound.  Tonight I'm gonna bury that horse in the ground, cuz I like to keep my issues drawn.  It's always darkest before the dawn."

Florence Welch, "Shake It Out"

"I took the stars from my eyes, and then I made a map.  I knew that somehow I could find my way back.  Then I heard your heart beating, you were in the darkness too, so I stayed in the darkness with you."

Florence Welch, "Cosmic Love"

"I took the stars from my eyes, and then I made a map.  I knew that somehow I could find my way back.  Then I heard your heart beating, you were in the darkness too, so I stayed in the darkness with you."

Florence Welch, "Cosmic Love"

Week 3.5 Outside of Class: Flash Rhythm

This iteration (in Flash rather than After Effects) follows a ta ta ti-ti rhythm with its slide slide pulse-pulse.

Week 3 Day 2: Further Rhythm Iterations

While reworking my After Effects project & brainstorming for my Flash project, I decided to look at some official lyric videos with a good typography & rhythm for inspiration.  The first from one of my favorite bands, Muse, off of their new album, & the second I found from a youtube search.


Muse's Madness does a great job during the recurring "M-m-m-m-m-m-m mad-mad-mad" concisely visualizing the rhythm.  I think that's really what makes it effective--the conciseness of that visual rhythm with its aural counterpart.


Calvin Harris' Drinking from the Bottle is a bit more involved than the Muse example.  It works with a more constant beat, but I found the geometric details really exciting.


This is my second iteration of the project.  I was able to give a more concise rhythm by adding small pauses between before & after stressed beats & making the "ti-ti" eighth notes clearer.


I still feel as though there are changes I want to make.  First off, the alignment of the letters; they're a little more raised than I'd like, but that's just a minor detail.  It still feels as though it's missing something.  I may add another measure or two & introduce a subtle background beat underneath this one..

Week 3.0 Outside of Class: Rhythm Iteration 1

Between classes I worked more on my After Effects RHYTHM iteration.  My first completed iteration follows.
It doesn't quite yet have the beat or rhythm I was going for, so I plan on tweaking it: switching around letters, adding pauses, maybe being a little less conservative.

Week 3 Day 1: Rhythm

Monday I began a project in After Effects using the word "RHYTHM" & animating it to convey rhythm.  I'm still in the middle of animating it, but it will be based on the rhythm notation at the bottom right of the top photo.

Week 2 Outside of Class: Dreamscape

Using one of the dreams I mentioned last week, I made a sort of dreamscape using After Effects.  The goal was to recreate the feeling of that dream using singular words, combined with textures & abstract imagery.

The premise of my dream was that I was in a dark, empty house looking for something. I go up the stairs, there is a light, & then an open room.  While sifting around, I discover some old portraits, one with a face, & suddenly I have an epiphany (of what I'm not too sure).  Somehow I realize I've been detected & that whoever is looking for me is hot on my trail.  I take off & hide in another small room upstairs.

Here is the final product...

Right now it feels not unlike a Powerpoint presentation.  I hope as I learn more about the program, I'll be able to make a more dynamic video.   I may do some tweaks, doing more with typography & using jerks & movement, really just emoting more through actual motion rather than just through words & images.

Weekend of Design

This past weekend I attended 3 local design events--two here at the MU Design lab & one at Penn State Harrisburg.

Thursday I went to Stefan Sagmeister's lecture at Penn State Harrisburg.  He talked a lot less about his designs then I had expected, discussing mostly the psychology of happiness, leading up to a little plug about his film The Happy Film, which was largely filmed during his one year hiatus from his firm's work.  (His firm famously takes a yearlong hiatus once every seven years to avoid exhaustion.)  The film itself did include some nifty experimental typography for the titles.  You can check them out here.

Sagmeister did talk later a little into his designs, mostly his exhibit The Happy Show, which was exhibited in the area last year at the Institute of Contemporary Art in Philadelphia.

But the main takeaway for me was his advice on remaining happy & unbored in design.  His eight key points included...

Thinking about ideas & content freely--with deadlines far away

Traveling to new places

Using a wide variety of tools & techniques

Working on projects that matter to you

Having things come back from the printer well done

Getting feedback from people who have seen your work

Designing a project that feels partly brand new & partly familiar

Working without interruption on a single project--losing yourself in it 

Friday our local Central PA AIGA president Joshua Buckwalter stopped by the MU design lab to give a talk on user experience design.  Buckwalter previously worked for Harrisburg design firm andCulture & now works as creative director for Elizabethtown's Inovāt.  I found his case studies to be very informative & telling of how much research goes into a good user experience.  I was surprised how much research & interviewing was actually done within the company--from description cards to a scale of formality--to ensure they got a website that accurately portrayed the company, followed by the usual wireframes, moodboards, & mock-ups.  Overall, Buckwalter's presentation was an interesting & practical extension of a course I took last year, Introduction to Experience & Interactive Design.


Saturday some of MU Design's recent alumni returned to the lab to talk about their post grad experiences & to give some advice to us still in school.  The alumni had lots of helpful tips on interviews, internships, networking, & finding the company that fits you.

Week 2 Day 2: Dreams

Before starting our next project, we were asked to remember back to dreams we remember clearly.  Here is my list of ones I recall...

Prom in my house & on patio

Zombie blood drive

Crystal skyscrapers in Canada

Metropolitan Museum of Art with tall spiral staircase

Teleportation during lightning storm--looking for friend

Ship ride to England

Yellow brick building/skyscraper--running across ledge of roof 

Cow/serpent hybrid hiding behind bushes in the park 

Finding portraits in second floor room/attic of mysterious house--being chased

Hotel turned shopping plaza turned subway

Old mysterious death house with clothing shop inside 

Water park/Ren Faire

Friend lives in neighborhood of luxurious tree houses 

Science museum--being chased by Aztecs 

Week 2 Day 1: Introduction to After Effects

Tuesday I got an extensive introduction to After Effects watching Lynda tutorials.  Watching the tutorials before exploring the program makes me feel I will be significantly less overwhelmed diving into After Effects.

Week 1.5 Outside of Class: Representative Line Flash Animation

Over the weekend I brought my storyboarding ideas to Flash & completed my animation.  It took a little while to get the hang of Flash, but once I did, I found doing the animation to be pretty simple & even fun.  Shortly after beginning in Flash, I decided to make my line pink instead of the default black to allude to the sneakiness (& humor) of the Pink Panther. 

Here are a few screenshots referencing my storyboard from before...

And the final product... 

Week 1 Day 2: Motion to Create Meaning & Intro to Flash

We opened class by exploring motion as a means of creating meaning or narrative with some modified 18th century toys. We were told to pick a social issue (I chose gender issues) & create two designs using the toys.

For the first, we used a thaumatrope, which has an image on both sides of a card, which is attached to two pieces of string.  The card is twirled & combines the two images into one.  For my thaumatrope, I wrote the word "EQUAL" on one side, removed the Q, instead making it a composite of the popular male & female symbols derived from the Classical symbols for Mars & Venus.  If I could make one change, I would have kept the full word "EQUAL" on both sides of the card, one using the male symbol as the Q & the other using the female symbol.  I realized after the fact that the conglomerate symbol was already associated with intersex & transgender.

The second was a praxinscope, which uses a series of pictures, a round-based contraption, & a mirror to create what appears to be a moving animation. For mine, I decided to symbolize the struggle for power between the genders, in the end providing a solution.

After completing our projects, we learned about the animating program Adobe Flash & began a short project using a short continuous line to represent some character or personality.  I decided to evoke sneaky.

Storyboarding for sneaky representative line animation

Week 1 Day 1: Introduction to Motion Design

Tuesday served as an introduction to motion design, the art of bringing graphic design to life.  We watched a couple videos that introduced us to some really great examples of the power of motion design.  

The first was Motion Plus Design Center's What is Motion Design?, which is full of stunning imagery & past--& some timeless--gems from the surprisingly long history of motion design.

The second video was a contemporary example of effective motion design.  Office & home furniture manufacturer Herman Miller's This is You uses abstracted illustrations, typography, animation, & audio to support their message.

Lastly, we looked at motion design's role on the web, one of which being hover effects.  We checked Tympanus.net for some pretty modern hover effect samples (some more effective than others).