Illustration process

 

 

I had the motion and animation of the bird finished, as well as the logo reveal. All that was left is to connect them with 60 frames of illustrations.

This was by far the toughest part of the process. It was surprisingly difficult to conceptualize each illustration according to the particles and sphere that I created.

I had to really push myself to find ways to incorporate images out of abstract shapes, which was an incredible exercise as a designer and illustrator. Some of them came out a lot better than others, since I was really pushed for time towards the end.

I took a look at some illustrators who’s work were also based off of simple morphed shapes and how I can use that to push my process further. I ended up also keeping some styles for 3 frames when I liked them. This way I spent less time conceptualizing drawings and the ones that I chose to hold on for more frames would also register more to the viewers mind when looking at the whole composition.

The way I would approach each frame was as following:

1. Plan out what frames allowed for interesting compositions and how long I could hold them for

2. Explore the composition in terms of visual elements and possible ways of reading it

3. Illustrate an image on to of the created shapes to create a final render for that style

4. Hold the style for 2 or 3 frames

Sometimes the frames did not add up as nicely as I had hoped and I had to put in a single frame of a new style in between to fill the gaps. This is one of the things I would have liked to do better. Planning these frames where challenging, but the more time that is spent in the pre-production phase, the less I have to worry about during the production phase.

 

 

 

Tree process

I knew that I wanted this part of the animation to slow down in comparison to the previous 5 seconds of the animation. It feels like a nice change of pace and makes the viewers feel like they have arrived. I decided that a landscape will be the ideal place for the bird to want to be and seems like a good place to place my logo. I started by drawing out the lines and paths in Ps that I wanted to use as shapes.

Screenshot 2019-09-18 at 10.04.37.png

nature-3_4x.png

Screenshot 2019-09-18 at 15.15.02.pngScreenshot 2019-09-20 at 10.58.02.png

Screenshot 2019-10-04 at 15.02.23.png

I admit that I was pulling way too much from my reference when I started this process and after comparing my work with the image that inspired it, I realized that they were much too similar. I decided to change the tree in the centre of the composition to break away from the reference. I also changed the colors a bit more and added a vignette.

The motion of the fields and mountains was a lot of fun to play with. I decided to ease the most of the motion very extremely in order to make it feel like it really melts into position.

After I was happy with the motion of the tree and the mountains I added the text comp that I created for my name (logo) reveal. Then I alpha masked the comp to the shape layers of the morphing circle and added some effects to make it transition better. With some exposure, opacity and ripple effects the transition really started to come together. I also animated the vignette to fade away as the tree explodes to emerge the viewer in the motion of the explosion and the logo reveal.

Logo process

I decided to make my logo my name and surname alone. Most of my work revolves around illustration and animation, so I thought it would make most sense to try and keep my name as the main selling and marketing point, rather than an image logo.

I started by testing out several fonts for my name over a screen grab of where I wanted it to reveal in my animation. With some trial, error and experimentation I found a typeface that felt strong enough to work and read nicely when I increased the kerning to 100. It felt a little to clean cut so I decided to add a roughen edges effect in Ae to in, that way I could manage to animate it aswell to flow and morph a little.

Screenshot 2019-10-04 at 14.24.03.pngScreenshot 2019-10-04 at 14.24.40.pngScreenshot 2019-10-04 at 14.24.58.pngScreenshot 2019-10-04 at 14.25.09.pngScreenshot 2019-10-04 at 14.25.21.png

I recreated the typeface in Ae and added a reveal transition to each word and masked it to flow from the centre line. I then added a blur effect to make it feel like the viewer shifts focus to the words, much like a lens focus shift.

name.gif

Bird process

bird-motion.gifbird-head.gif

bird-body.gifbird-full.gif

I started by creating a motion guide in Ae using the trim paths effect along with the roughen edges effect. This gave me me full control of the length of the birds trail and the speed of its motion.

After I was happy with the motion I imported the render into Ps so that I could start cel animating on to of the path.

I started by drawing the head and the beak. Then I added the body and the wings on separate layers. I wanted the bird to look kind of multi dimensional, so I added the liquid/trail effect to help sell the style and the motion of the bird.

Further inspiration and development

With the the idea in mind to create some kind of an intro to my logo I had to find some way to justify it.

I found a gif of a bird flying across the screen on dribble which really inspired me. I enjoyed how they captured the motion and curve of the bird and the motion style of its trail.

bird_for_fun.gif

This gave me the idea to create a similar bird, but one that travels through space and time dimensions until it arrives at the one which will reveal my logo. This gave me the opportunity to incorporate my idea of multiple styles linking with one motion, whilst giving it some kind of narrative to follow.

I decided to create the motion of the bird first along with the reaction of the dimentions it travels through. To do this I created a planet like sphere that reacts to the curved motion of the bird until they finally collide.

Untitled-1.gif

After I was happy with the way it looked I animated some particles to flow out of the dimensional sphere to help create a visual appeal, inspire the illustrations that will be built on top of each frame and connect the motion between each illustration.

I made a red and green layer to easily distinguish them and select them via their color, if necessary. This allowed for some interesting motion as well.

Comp 1 (12fps)_1.gif

Concept Development

 

 

 

1197ad63863541.5ba9152b14e86.png

Enter a caption

This Project that Buck did for apple has always been a huge inspiration to me. The creativity of the team, how they solve their problems and how they put extreme detail into frames that the viewer only sees for a 24th of a second. This has challenged me in my desire to push myself and to discover new ways of developing my own techniques and work flow.

When I heard about a 10 second animation which will reveal our logo, this was one of the firsts ideas that came to mind. I wanted to create a kind of intro for my logo animation similar to the Artist-eye that they have created. They took the outlines of a basic animation and drew a separate illustration on top of each frame, each different from the previous in style, color and even medium. When played together this creates an effect that is easily neglected for its excruciating detail, but admired with wonder when inspected closely

I know that they have an entire team of at least 16 people who worked on this project for weeks, and I am just on animator with a short deadline, but the challenge was to exciting.

In order to keep the workflow manageable I decided that I would:

1. Animate the motion and path in after effects and cell on top of it (speeds up the timing issues that cell animation is prone to develop).

2. Work in 12 FPS

3. I know that this would only be about 6 seconds and it would then lead up to the logo

4. 5 seconds x 12 = 60 frames

5. I also need to cut down time on conceptualizing each drawing, so I will hold each style for 2 or 3 frames, but continue the motion. I might end up repeating some of the styles.

6. Animate the logo reveal in after effects, and keep it simple in order to not overwhelm the viewer with to much content

Logo Reveal

untitled-1.gifcomp_10.gifbwall-logo-animationo.gif

The brief to create a logo reveal for ourselves got me pretty excited, because it is so open ended.

My biggest challenge when starting a new project is always finding the right style and feel that I find fits the brief/concept. I spend the first 20% of my project looking through other peoples work and seeing what inspires me and how they have captured something that is special.

36daysoftype_a_hd.gifdribbble (1).gif36days.gif