• Design
  • Shotty
  • Blog
  • Reading
  • Photos
Menu

Jacob Ruiz

Product Designer
  • Design
  • Shotty
  • Blog
  • Reading
  • Photos
blog-experimenting-in-after-effects-hanoi

Experimenting in After Effects: Living Photos

May 28, 2017

Continuing to experiment with toeing the line between photos and videos, I decided to tinker around in After Effects. I used to spend a lot of time in AE when I was at Samsung, but it's been years since I've used it. It's such a great tool for expressing creativity since you have so much control, and motion/video is such a dynamic medium.

This time around, I wanted to make something that felt 99% like a still photo, but when looked at closely, has more facets than a simple photo.

When I arrived in Hanoi, I was struck by the chaos. I knew I wanted to capture imagery that spoke to that chaos. I usually strive for minimalist imagery that feels notably simple, with a singular focus. But I've been getting bored with that aesthetic in photography, and Hanoi was the perfect playground for developing a chaotic style.

I took a lot of photos in Hanoi, but two that stood out to me in terms of going against my typical minimalist aesthetic where these:

 

jacob-ruiz-design-photography-hanoi-plush-toy-salesman

There's obviously a lot happening in these images.

Another unrelated photo that I liked was a photo of the Ho Chi Minh Mausoleum. I liked it for a couple of reasons:

  • It feels iconic
  • I love the streaked images of people in the foreground. They hint at motion and provide more of a scene than a simple photo of the building.

Here's the photo:

jacob-ruiz-design-photography-hanoi-ho-chi-minh

 

So for this experiment, I wanted to create a final image that felt complex and scattered, and captured the hectic nature of Hanoi.

I opened After Effects and just started playing around. Here are some of the things I did:

1. Layered the 2 images on top of each other

after-effects-layered

I loved the complex look I got by layering the image of the plush-toy salesman over the photo of the Ho Chi Minh Mausoleum. It created a great texture all over the image that gave it an almost painted, cubist look.

I especially loved how the plush-toy salesman's face is perfectly positioned in a dark spot between the columns in the building so you can still see his face in the midst of all the chaos.

2. Created a "breathing" effect

As I'll mention in #3, I had recorded video of a 3-man band on the streets of Old Quarter Hanoi. This was some of the most psychedelic music I've ever heard. I have no idea if that's the aesthetic the band was going for, but it was so messy and trippy. 

I wanted to incorporate this aesthetic into the image somehow, to play up the chaos and charm of Hanoi.

To portray this visually, I used After Effects to make the image "breathe".

jacob-ruiz-design-after-effects-blog

Achieving this effect required a few things:

  1. I looked up the cadence of the breathing LED light on the Macbook, it's about 2 seconds.
  2. I set the images to grow and shrink by about 5% scale, on a 2 second interval.

3. Added an audio track

Next, I found the video of the street performers and imported it to my project. I originally dumped it into the composition intending to turn the video off and only use the audio, but decided to play around with the video itself to see if I could make use of it.

Luckily the image as already layered and complex enough that I could add in this video in a relatively subtle way that felt integrated with the rest of the composition.

In the composition with the street performers, I masked off everything except the performers themselves, and added heavy feathering to the mask, so that the video could be seamlessly added into the larger image without any abrupt edges:

jacob-ruiz-design-blog-after-effects-hanoi-mask

Then I could drop it into the overall image and get something like this:

jacob-ruiz-design-blog-screenshot-hanoi

I thought it was cool that I could sit them on top of the building and play with their scale to create a surreal, ghost-like image.

So with the breathing effect, plus the fact that I've now integrated a video into this messy, layered, moving composition, we have an image that is very much alive (and making noise), but at first glance looks like a still.

In retrospect, I learned an interesting tidbit. Motion that is easily perceptible on a desktop screen-size will be less perceptible on a mobile screen. Seems obvious when I type it out, but when you're sucked into a workflow, you're dealing with everything in relative terms. A movement of 5% adds up to several millimeters of motion on the computer, but hardly anything on the phone. 

So when I viewed this on my iPhone, the breathing effect was hardly noticeable, whereas it was somewhat pronounced on my laptop. i should have gone heaver on the scaling effect, but I was really striving for a subtle effect. I guess I got caught too far on that end. 

Here's the finished product:

In Videography, Photography Tags videography, photography, after effects, motion design
← How to prevent passion projects from becoming black holes of timeExperimenting with Video: Cat Ba Island / Chia Pet Infomercial Mashup. Embracing an erratic and unpolished style. →
shotty-skinny2x.jpg

Shotty - Faster Access To Your Screenshots on Mac

Shotty is an award-winning Mac app I created to give you instant access to all your recent screenshots, right from the menu bar. You can even add annotations on-the-fly. Stop wasting time digging through Finder for your screenshots. I promise it’ll change your workflow forever (just read the App Store reviews!).



Most popular

information-architecture

Information Architecture: The Most Important Part of Design You're Probably Overlooking

Follow @JacobRuizDesign