3D Kinetic Typography Design Process for “Until I See You”

My masterpiece to date. A visual rendering of a poem by Ammar Alshukry about the Prophet Muhammad, may peace and blessings be upon him.

I’ve worked on it for countless hours over the span of about a year.

YouTube Preview Image

If for any reason you don’t have access to YouTube, you can watch it on Vimeo: “Until I See You – A Poem by Ammar – 3D Kinetic Typography

My Inspiration

Aside from the eloquence of Ammar’s poetry, the inspiration for the visual approach to this video came from Jacob Gilbreath who did the 3D Kinetic Typography of Conan O’Brian’s NBC farewell speech.

The thing is, I didn’t know how to use Cinema 4D, which is what Gilbreath used in the Conan video. So, I worked with what I knew and approached the 3D aspect of this the same way I approached AlMaghrib’s trailers in the past.

YouTube Preview Image

The approach was simply to take a 2D layer and duplicate several times and place it a few pixels behind the main layer within a 3D space, giving the illusion of 3D.

Software I Used to Make 3D Kinetic Typography

I’ve gotten a lot of questions asking about what software I used and how to make a video like this. The short answer, the process I used with “Until I See You” was:

  • Narrative was recorded using a mic connected to a Zoom H4
  • Poem was then transcribed and sketched using paper and pencil, like a story board
  • Typography was designed in Adobe Illustrator
  • Composited, layered for 3D effect, added visual effects, keyframed for animation, and rendered in HD using Adobe After Effects
  • Background ambiance was produced by a sound designer, rendered, I believe with Avid ProTools, which I later edited in Sony Sound Forge
  • Finally all the elements were compiled, synced and rendered for the web with Adobe Premiere

If I were to do this video again from scratch, instead of doing the layers method, I’d take the time to learn Cinema 4D to render the typography in 3D from the get-go to save time.

Layering in AE took forever!

My Process Evolves With Each Project

Each project is a learning experience, the lessons of which I apply in the next venture.

Take for example my first ktype video.

YouTube Preview Image
  • Audio was recorded on the Zoom H4, but never cleaned up or enhanced
  • Design, composite, keyframe animation, and HD render were all done in After Effects
  • Edited, synced, and rendered for the web in Premiere

My next ktype video got a little bit more sophisticated.

YouTube Preview Image
  • Audio was recorded on the Zoom H4, then cleaned up and enhanced in Sony Sound Forge
  • Design was first done in Adobe Illustrator
  • The Ai files were then layered, composited, keyframed, and rendered in HD with After Effects
  • In the end, edited, synced, and rendered for the web in Premiere

Software is Just a Tool. Master the Principles.

Knowing how to use a particular software is like knowing how to use a hammer, but that knowledge alone wont allow you to build a structurally sound house. You need to master the basics first.

As a kid when I was preparing for my black belt test, my sensei kept reminding me that an individual just needs to master only two or three of the following basic moves to be a strong fighter; jab, back hand punch, hook, front kick, and low kick

Video combines various disciplines:

  • graphic design – includes typography
  • cinematography – includes photography, composition, and cameras
  • story telling

My advice is to pick the discipline you’re most inclined toward and master the very basic two or three moves.

If you’re inclined toward graphic design:

Start with “The Non-Designer’s Design Book.” For typography see “The Non-Designer’s Type Book” My recommended design tool of choice is Adobe Illustrator.

The next step (intermediate level) from there is understanding Adobe After Effects, which allows you to implement your graphic design knowledge and add movement and visual effects to it.

After Effects is a very robust program that can do so much, thus also be overwhelming. It’s easier to approach learning After Effects, and other tools, by learning how to do something very specific.

If you’re inclined toward cinema:

Aim to get a strong grasp of photography. NYIP (New York Institute of Photography) – has a great home study course that will really bump up your game. Like any course, there’s a fee, but the investment is well worth it.

My recommended design tool of choice is Adobe Photoshop.

The next step (intermediate level) is to progress to motion-photography, also known as video. Adobe Premiere is my tool of choice for editing video.

A step beyond that (advanced level) will bring you to Adobe After effects, where you can apply visual effects to the video you’re editing. Again, approaching Ae for the first time is best when you you’re aiming to accomplish something specific.

If you’re inclined toward story telling:

Learn to present, either in the form of selling, speaking, or writing, all of which can be applied or combined with multimedia – as I’ve addressed above.

To be a good story telling, study one of various disciplines of marketing; branding, sales, advertising, public relations, or new media.

Most of it revolves around the idea of moving people toward an action.

Love from the Blogosphere

This is probably one of the better Islamic typographic videos on the web.  The poem is very beautiful and will hit the heart for many.

- Ibn Percy, IbnPercy.com

-

They’ve done it once again. I would like to call them from here on out the dynamic duo. What happens when the two come together? You get an amazing video created by two dear friends Belal Khan, and Ammar.

- Arthur Richards, TheKingArthur.com

-

This video is made on a poem written by Ammar AlShukry, a very imaginative writer, SubhanAllah. His words complete the thoughts and filled tears in my eyes.

- Amna Afzaal, ASoulinJeddah.blogspot.com

 

Leave a Reply