Animated Header

Aug 31

We were tasked with creating an animation as a personalized header or intro screen for our first assignment. I have luckily taken the time to establish branding materials over this past year as I’ve opened my Etsy store, and so I pulled on those as a starting place.

The initial animated GIF is one that I made over the summer, depicting myself laying happily on my phone as it plays my favorite podcast, My Brother My Brother and Me. This seemed like a good starting place because not only did it match my hand illustrated style, but also fit within my color palette that I would be using for the rest of the elements in the animation.

I then played around with different colors for the background of the animation and eventually settled on light pink (#FAA7AF) because I felt that it matched the colors of the gif while also having good contrast.

The next addition to the animation was my logo. I designed this earlier in the summer to use for branding of my business and instagram. It clearly displays my brand name (PastelBoii) while also staying true to my hand drawn and endearing style.

I realized that because of the color and thickness of the lines within my logo I would need to either remove the background animation or decrease it’s opacity in order to make the logo readable. I chose to decrease the opacity to 20% in order to maintain consistency within the whole animation and to keep a sense of continuous motion.

The next and final step was to add the doodles around the logo. I wanted to do this to create more visual interest in the animation and to accent the logo. I used the animate tool in Procreate—where all of the animation assets were drawn—to draw the initial doodles around the logo. Once I liked the elements that were around the logo, I used onion skins to trace over the previous layer with slight variations to make the doodles move slightly. You can see that I started with yellow doodles, but then realized that they didn’t contrast well with the light pink background color, so I used the power of clipping masks to cover over the doodles with the same white color as the logo (which was also initially a different color).

Once I had drawn the doodles, I exported each layer individually and brought them into after effects to put them together and get the timing right.

Timing ended up being the hardest part of this whole project. Figuring out how long to let the initial animation run as to give the full effect without being too repetitive was challenging. On top of that, probably the trickiest single moment was the fading of the animation into the logo overlay. I knew that I wanted it to be fast, almost like the logo had been stuck on like a sticker, but if I made the transition too fast it looked messy and now well thought out. What I ended up with was a fade that allowed enough time for the transition to happen seamlessly without too much delay that would leave the viewer unsatisfied.

The final product is one that I’m proud of and feel like accurately represents my personal cute and quirky brand.