Demon Robot

Adobe Flash  |  Swivel  |  After Effects  |  Photoshop

Designed as a branding icon, the Demon Robot icon utilized the person technique of creating high quality motion graphics.
The vector image can be recreated in any dimension and format necessary.
This project is also used as a demo for the tutorial "How to make a lossless, transparent .Gif".

---

Step 1 - Concept

The beginning of the artistic process, sketching ideas and deciding colors and form come first. The icon went through a variety of designs and changes before a final choice was picked.

It was important that the final image was a vector with a round shape for various branding purposes.

---

Step 2 - Blueprint and Puppet Layering

With the design chosen, next comes building the rig for animation. Each parts is made into separate graphics - or Flash symbols for animation. They're put into labeled layers to create a hierarchy.
Each complex graphic, such as the eyes, consist of multiple parts inside. The eyes have a pupil and the black circle, each with a separate graphic for individual animation.

On the right is an outline view of the pieces inside the Demon Robot icon.
The library below shows most of the Graphics in this project and hierarchy of the layers to simulate depth.

---

Step 3 - Animation and timing

Proceeding with animation, this file was tricky because it contained both graphics and movie clip symbols. This means that rendering a final animation would require a few format changes to get it to become the high quality, lossless transparent .Gif it was meant to be. This personal process uses many programs, such as Swivel, After Effects, Flash, and Photoshop.

To the left is a visual representation of the buildup and parts of the Demon Robot.

---

Step 4 - Final Product

After all the file changes, the animation remains intact and lossless in the final render, ready for viewing on the web.

Since the original file is a vector image, the size can be scaled to any desired dimension.