For one of my final year projects, I decided to work at creating animations and videos for my fathers company 'Cherry Childcare'. My two clients: Nigel Rolfe and Ben Rolfe, wanted video content they can use on their website or on social media.
Project Brief
I created a form for my clients to fill out, giving me an insight into exactly what they want. Below is the form:
Initial Ideas
I brainstormed ideas to start the project and explore various avenues of animation softwares I could use. This also helped me research into the company more to understand them better.
Time Mangement
I used 'monday.com' (link below) to manage my time wisely in this project.
I also created a more visual timeline to put up on my wall to ensure I stayed on track.
Research
In order to continue with my sketch deisgns, I decided to research into various animation designs and software. I also researched competitors.
Please select the buttons below to go to the specific research section or just scroll through:
I firstly researched into the company to have knowledge on what they do to create honest designs that well reflect them.
Below is a link to the 'Cherry Childcare' website. The Company did not provide me with branding guidelines so therefore, I had to create guidelines for future use, which can be found at the bottom of this page
Cherry childcareBelow are logo designs provided to me by the client.
I was also provided the logo below by Steph Catterall, who worked on a website for Cherry Childacre last year. I perfered this logo design as felt it looked more modernised but my client later on in the project decided it was best to keep the blonde hair as that is the version printed on all the T-Shirts, flyers etc. I also found out that the font used is 'Good Dog New' which will come in handy when designing the further promotional content.
There are lots of animation software and types out there to choose from. I needed to find the best version for me to work with and the software I could complete the logo animation on. The types I found from the Bloop website are:
3D computer animation
Traditional animation
2D Vector-based animation
Stop motion
Motion graphics
I found more information about each type of animation below:
After looking further into Stop Motion animation, I looked at Adobe Animate. As I have the Adobe Creative Cloud, I felt this would be a good software for me to use/learn to venture more into animation developing and design. On the website it says "Design interactive animations for games, TV shows, and the web. Bring cartoons and banner ads to life. Create animated doodles and avatars. And add action to eLearning content and infographics. With Animate, you can quickly publish to multiple platforms in just about any format, and reach viewers on any screen" which sounds perfect for what I need to create (logo animation using the Cherry Childcare Child).
I then wanted further information on Animate due to being new to this. I looked at Skeleton animation as I found out from one of my peers I could do this on Adobe After Effects (a software I am familiar with). From the website I got "Skeletal animation is based on building a simple skeleton that can fit the important parts of your animated object." so I thought this could work with moving the child around the screen, moving the childs arm to paint the words "Cherry Childcare".
I liked the idea of frame by frame animation but I was slightly concerned seemings I am not an illustrator. I found images on google about how it works, which are shown below. I spoke to my peer course mate who does a lot of animation, and this is the method they use. I later did further research on this.
Powtoon looked like an easy to use software, but as I was not familiar with this software, I kept looking into options.
I then decided to try rigging/skeleton animation on Adobe After Effects.
Below is the outcome. As you can see it didn't work how I really needed it to (may be because I am new to this) but I did not want to over complicate the logo animation and wanted to ensure I produced the logo for the client on time.
Due to not using the software before I thought I would follow the tutorial to get to grips with the basic tools. I really enjoyed using the software and thought it would be an easy way to create a frame by frame animation.
Using the onion skin tool will hopefully give me a smooth transition. Watch the gif I created to see.
I also looked at character animation but like setting rigs, it gets quite complicated and does not do exactly what I need it to (such as rotating to write the ‘Cherry Childcare’ element.
I was advised by my lecturer to try rotoscoping. After looking into this type of animation, it seemed more complicated, and as this is my final year project, I wanted to remain with what I knew most and felt most comfortable with.
I decided to continue with frame by frame animation on Adobe Animate instead due to the child being quite a simple character (no real joints etc) the rigging did not work as well when moved around.
I will still be using illustrator and photoshop to draw the elements of the child.
After deciding on frame by frame animation, I looked further into the techniques, and what makes a animation smooth and run nicely.
BBC 1 showcased a documentary on Boxing Day about Aardman. Aardman create Wallace and Gromit, Shaun the Sheep and many more. Aardman and Disney mainly stick to 24 frames per second to get the famous animation finish. I also noticed Disney operate in twos, therefore I tried to do the same when I started my animation to get a better finish. Working at 24 frames per second seemed to be the most common throughout my research.
I began looking into tips on promotional content and marketing technqiues.
After noticing that video is popular amoung getting clients to engage in the company, I looked at more video specfic techniques.
I felt keeping the logo under 10 seconds is important to keep the viewer engaged. I will also bare this in mind when creating further short video clips for the company.
Below are the companies main competitors. All these competitors all have video content on their websites. This may convince a client to go for them instead of Cherry Childcare so it is something that needs improving. Adding more video content on their website and social media accounts my allow clients to feel more engaged and welcomed.
Learning how the body moves is important for animation and for illustrations. As I am not an illustrator but trying my best to achieve a good and nice flowing animation, it was important for me to see how certain limbs move to make the child in the logo as realistic as possible. The logo is a cartoon so this made it slightly easier for me.
Seeing these images helped me when drawing the various angles for the child logo animation. I also used the following to help me with this process.
I also thought it would be useful for me to demonstrate how the child would move in the animation. This showed me how the arms may look and what the rest of the body would be doing.
Designs
I sketched many ideas before creating the animation. This enabled me to elaborate on my ideas while I was in the designing stage. I also took ideas found from my research and continued working with Adobe Animate. I also created a few smaller videos before the final animation. I also needed the child in the logo to rotate, therefore I used Adobe Illustrator to created rotated versions of the child.
Sketches of my first ideas for the logo animation. My first idea was to have the child splashing the paint around like a child would to make it playful. The child would then start to paint the word 'Cherry Childcare' while turning around every now and then to give a realstic approach of a child painting on a canvas. The child then finishes as the orginal logo design.
Sketches of the logo/app template designs
I was only given a couple of logo designs by the client, with the child in the same position. In order to achieve the logo animation, I needed to create various angles of the child to ensure the final outcome is smooth and professional. I started by using my research images of different cartoon children, along with my own images to ensure all the childs features were in the right place.
I was able to trace the logo given to me by the client, and then work from that to create the child rotating. I mainly used the visuals I collected from my research, by having them in front of me in the Adobe Illustrator document.
The logo design has the paint brush on the left hand but I was going to try and have the child swap the hands throughout the animation, however I realised it would be a lot better and keep it consistent by having the child keep it in the left hand for the whole time. My first outcome is below, created on Adobe Animate:
After the success of the rotational animation, I decided to experiment more. As I thought the paint splashing idea would be nice, I created an small animation that would later go towards the logo animation full video.
I felt the paint splashes did not look realistic at all. I used a paint splash tool on the ADobe Animate software but as it is more of a cartoon style logo, I looked into further ways to acheive the paint splash.
I liked the paint splash above, however, as the colour of the paint and writing that is in the logo is red, I felt this would not look child friendly as it would look like blood.
I looked into more cartoon style paint splashes and especailly thought the shark video worked well and looked more of a realistic brush stroke, splash etc.
I remebered that the original logo design had paint splatters on, so I decided to trace over these. I felt it looks most like the green paint drop with the bursh above. The continued developments are below:
I added and took away the droplets throughout the animation to give a splashing effect. Created on Adobe Animate.
Below is the outcome, with a camera pan out towards the end of the video so the child is ready to start painting the words.
I decided before going any further, I needed to sketch out my ideas further and gather my thoughts. I decided to do rough storyboards of how I think the animation would go. I did two to start with and then created a digitalised version, found further down this page.
Below is a developed storyboard for the logo animation. I created this on Adobe Photoshop using a storyboard template.
Feedback
I gathered some feedback from my client before creating and developing the logo animation even further.
My client wants more movement on the right side of the child as it looks quite stiff.
He also suggested jumping into the child writing the logo quicker as he wants it no longer than 10 seconds maximum! Less time the better as may loose engagement.
Developed Digital Designs
After more consideration, I decided to create 24 versions of the child rotating. This links back to my research of having 24 frames per second, for a smooth animation video.
I started off by creating further variations of the child on Adobe Illustrator. I found hightlighting the previous child in pink, meant I was able to trace over this to create the varied angles of the child.
I put them all together in Illustrator before exporting them one by one. I used the pink lines to achieve the right sizing of the child.
I then developed the animation with the new child angles in Adobe Animate. I used the onion effect as this is a good guide to the previous frame.
The result is below.
Further Ideas
The client decided he wanted me to base the child of the one below, not the child with the brunette hair. Therefore, I had to go back through the video and make these changes. This was very time consuming but I wanted to ensure my client was happy and was given something they want in the end result.
After taking on baord the feedback, I created the full animated logo. Unfortunately, the colour changed when exported (#f0655d). The colour should be #F60419 which is a brighter red. This red matches the colour used on the companies website and in the branding guidelines I created for the client. The final outcome along with the solution of this issue is found under "Submitted Work".
Final Outcome
I was very pleased with my final outcome, as I have never created an animation before, and it received positive feedback from my client.
As said in the "Further Ideas" section, the colour red was not the correct colour red. The correct colour (#F60419) was fixed efficently using the "Find and Replace" tool on Adobe Animate, and replacing the wrong colour red with the correct colour, that changed across all the frames. This process is shown below.
Below is the final logo animation design. The original video was quite slow, I decided to speed it up on Adobe After Effects, to 5.15 Seconds. This is staying under the 10 second rule found in my research.
I used various software I knew already and have learned from my last 3 years at University. It is important in third year to build on the skills we already know rather than trying to teach ourselves something new. This makes us more advanced in our specific areas of design. I did however learn Adobe Animate, but as I was already familiar with all Adobe programmes, alot of the controls and tools were the same.
My clients target market is working parents looking for extra help with childcare. Also, their audience may encourage staff memebers to join their team.
I would like to thank the following people:
Nigel and Ben Rolfe, my client for the project. Thank you for being co-operative
Steph Catterall, for providing me with the Cherry Childcare logo she worked on
Paul Wilson and the DMD Team, for always giving feedback and providing support throughout projects
