ONE LINE BRIEF

ABOUT ME SELF PORTRAIT

Brief

Supervisors often give very short briefs, sharing only the main idea. It’s the designer’s job to figure out the details and build it into a full project. This helps show how well the designer pays attention, adapts, and thinks on their own.

See it in action!

To see this animation being used in practice go to my “About Me” Page or click here

DESIGN CHALLENGE

Out of the many briefs available to me, I chose the one below
An Art Director from Sarofsky told me, “I don’t like the weak "about" pages. Why can’t they design and animate a self portrait and/or personal logo or something that captures their sensibilities as an artist?”

Software

After Effects
Cinema 4D
Procreate Dreams

PREVIOUS ABOUT ME PAGE

CONCEPTS

Animation Overflow

A picture of me is surrounded by small 2D and 3D animations. They rise and swirl around me, revealing a version of me in a mixed 3D and 2D art style. After a while art wraps around me and turns me back into the original picture.

Doing this not only introduces me but also the type of art I specialize in and enjoy making.
Graffiti and Paper

My picture starts off looking normal, but then it gradually becomes more distorted. The colors shift, and the background and textures start to change. Torn pieces of paper appear, altering the colors and patterns within the image.

ORIGINAL

STORYBOARD

TRANSITION

It begins with my original, unaltered headshot, intended to appear as a standard ‘About Me’ page at first.

Animated spirals made up of many vibrant and lively colors will then surround me and then envelop me.

FINAL ANIMATED

When the spirals clear it is revealed that my headshot is not fully animated in a combination of 2D and 3D elements.

BACK TO ORIGINAL

The spirals will then envelop me once more, revealing the original headshot of myself and starting the loop again.

ANIMATION DEVELOPMENT

SECOND PASS

After refining the animation based on the feedback from the last pass, it became more vibrant and engaging.

I also received additional critique to bring it closer to my vision. This included slowing down the animated spiral texture, adding more animation to the face, and animating the bloom background element.

FIRST PASS

For my first pass, I needed to provide an animation of my self-portrait switching styles. This was mainly to see how the transition worked.

I also received critique on this pass, which included adding the missing colors in the spirals so they resemble my concept more, animating the suit I’m wearing to make the second half more engaging, and adding more anticipation to the swirls for a smoother transition.

THIRD PASS

After refining it further, the animation shows more emotion and feels more alive. It’s less repetitive and more engaging.

I also got feedback on this version, to keep the traditional animation style seen in the spirals and to add outlines to the suit to give it more form.

TECHNICAL EXECUTION

My overall technical process involved using Cinema 4D to animate key elements, which I then refined and stylized further in After Effects.

I’d start by blocking out the spiral animation in Procreate Dreams, then add an animated texture to give it more movement and direction.

I’d bring the 3D head into After Effects and layer on textures and other assets to create the final render.

FINAL THOUGHTS

With the addition of 2D and 3D animation along with vibrant colors, I transformed the ‘About Me’ section into a piece of art. This not only makes it stand out visually but also draws in more attention and engagement from people who visit the page.

Above, I used a spline warp to bring the background shapes into the foreground. I also applied a displacement effect to animate the bumpy surface.