Quote Codes Diaries 5: Animation of the Primitive Font

Hey Folks,

Wishing you all a very happy and prosperous New Year! Let’s kick off Quote Codes Diaries 5 with the Animation of the Primitive Font!

Quote Codes Diaries 5: Animation of the Primitive Font
It’s time to see these animated!

In the previous blogs, I explained the concept of Animography and how it inspired us to animate our Primitive Font. Then next we saw the basic practices one must always follow in an animation project to keep the project scalable and customizable and avoid silly errors.

Today, we will see the results of all that planning and hard work. Here is our dearest Primitive Font in all its glory!

Quote Codes Diaries 5: Animation of the Primitive Font

Each character in our font is unique and has a custom animation. The whole project lasted just over 2 months for us.

Quote Codes Diaries 5: Animation of the Primitive Font

Remember we said that we wanted to restrict the animation of each character within its grid.

Quote Codes Diaries 5: Animation of the Primitive Font

Here are the remaining characters!

Quote Codes Diaries 5: Animation of the Primitive Font

 

 

Quote Codes Diaries 5: Animation of the Primitive Font

 

This one’s our favorite!

Quote Codes Diaries 5: Animation of the Primitive Font

 

 

Quote Codes Diaries 5: Animation of the Primitive Font

 

 

Quote Codes Diaries 5: Animation of the Primitive Font

 

 

Quote Codes Diaries 5: Animation of the Primitive Font

And then finally the symbols.

Quote Codes Diaries 5: Animation of the Primitive Font

 

Converting your animations into Sprite Sheets.

So you spent all this time animating in After Effects and now want to use them in your app. Traditionally sprite sheets are made by painfully drawing each frame one-by-one. But now there is a way to export your animations into sprite sheets directly from After Effects itself!

Thanks to Matthias Guntrum and his AE script Sheetah, you can now export any animation into a sprite sheet in no time. Just head to the Sheetah page and download the package –> unzip and  Merge sheetah’s After Effects/ScriptUI Panels folder with your following After Effects Installation folder: [path]/Adobe After Effects [version_number]/Support Files/Scripts/ScriptUI Panels

Now just restart After Effects, open your animation file and go to Window –> Sheetah.jsx.

Quote Codes Diaries 5: Animation of the Primitive Font
Sheetah will be available under the Window panel

A Sheetah popup will display on your AE project. Select the output type from the 3 available options (png, tga or tif) and hit Save Spritesheet. Export in your desired destination folder and thats it!

Quote Codes Diaries 5: Animation of the Primitive Font
Export your animations into sprite sheets in a matter of seconds

Your sprite sheet is now ready for use in your app!

Quote Codes Diaries 5: Animation of the Primitive Font
Here is our character sprite sheet

I hope you enjoyed reading about our thoughts and process behind the making and animation of the Primitive Font. Stay tuned for the next Quote Codes Diary where Joseph will explain how we started thinking about using the font in an app which ultimately resulted in Quote Codes!

Quote Codes Diaries 5: Animation of the Primitive Font

Till then don’t forget to Pre-order Quote Codes on the Appstore here, it comes out on Jan 18, 2018. Pre ordering ensures that the app automatically downloads onto your device on Jan 18

From The Archives: Illustrating Steve Jobs

I can honestly say it’s the cliché of clichés when I say we see the late Steve Jobs as a source of inspiration in our lives. He truly lived what one might call a ‘full’ life.
So I was particularly struck by a photo of his during one of his last keynotes. It was him holding his hands in a ‘namaste’ thanking the audience in his traditional black turtle neck tee. And I don’t know what got into me but I decided to make a Steve Jobs illustration.

Steve Jobs - Pixel Drop Studios
The immortal Steve Jobs

Illustrating Steve Jobs

What followed that was a gruesome 18 straight hours in front of the computer. Blood shot eyes and multiple coffee cups later this is what we had to show.

This essentially had me drawing individual patches of colours on illustrator up close.

Steve Jobs illustration - Pixel Drop Studios
Each patch is drawn individually

The subtle variations of the colour patches together formed the final picture. Sorta of how pixels work to form a picture, only this time, it has more of an oil painting feel to it.

Steve Jobs Illustration - Pixel Drop Studios
The color on each patch is manually added

It involved a lot of overlapping of the patches . You can see the individual patches in the working drawings of it. Those are really a lot of patches.

Steve Jobs Illustration - Pixel Drop Studios
Those are a lot of patches

And of course his immortal words are a part of it. You can check out the project on our Behance HERE.

As Jobs said “Here’s to the crazy ones”.

Steve Jobs Illustration - Pixel Drop Studios
The final version of our Steve Jobs illustration

Well, the Jobs illustration turned out to be a really fun and eye straining venture. So I decided to make it into a series of Tech Legends. I’ve set out on a course to make illustrations of all the top tech titans of this era. After Jobs, we’ve got Bill Gates, Sergey Brin, Larry Page and Zuckerberg in the works.

Here are some of the works in progress.

Bill Gates Illustration Pixel Drop Studios
Bill Gates Illustration
Sergey Brin and Larry Page illustration - Pixel Drop Studios
The Google Boys – Sergey Brin and Larry Page

I’ll have to be honest. This has been in limbo for quite some years. I’m hoping that writing blog on it will kind of force me into going ahead with this and work on completing the series

oh and if you would like a print copy of the Steve Jobs illustration, feel free to drop a mail