I wanted to create an animated feature for my website, this is because I found lots of animated logos that I like and I wanted to try some out for myself. I envisioned that my animated logo would be on my home screen and her quite prominent, the first thing that people would see and or click on.
What did I want my logo to do?
I had a few initial ideas,
- Spin around or rotate 90 degrees
- Zoom in and out
- Include a ball and have it follow the curve of the ‘g’
- A ball bouncing on my wordmark
Why include a ball?
I wanted to try adding a ball to the animation because I used lots of circles to create all of my elements within my brand. For example my Icon set is made with circles and my monogram. So I thought this would be a nice foreshadowing affect for clients to see this as soon as they go onto my website.
The Process
- I saved my Adobe Illustrator file of my monogram and wordmark and making sure both elements were in layers
- Then taking it over to After Effects
- Work with the composition and play around with Positioning/ Scaling/Rotation etc. For animating the ball I had to create a path for it to follow. This meant there were lots of frames but this is something I am working on how to fix.
- Render to Media Encoder
- Then save as a mp4 file
What were the challenges?
I faced a few challenges with animating my ideas. First of all I wasn’t familiar with either softwares so it take me some time to figure my way around them. I found positioning very challenging, because this all depended on the frames. I found it hard to create one line for the ball to follow, so I just created lots of frames. I plan on trying to figure out how to do this soon and learn new and easier ways to do things on adobe effects. I also found a challenge in exporting, but I then realised I had to use media encoder. This software was new to me aswell but it was easy once I knew how.
Trying out some ideas
Scale and rotation
I firstly tried adjusting the scale so my logo gets bigger and then turns around at 90 degrees. This was my first colour scheme with the red and yellow. I do like the quick speed of this animation but it’s. not the look I am going for.
Why doesn’t this work?
- The colour is wrong
- The logo disappears at the start – this is a problem because I want my logo to be front and centre in my portfolio, hard for people to see and know to click it
- Its pretty basic – not that fun
Ball
I then tried my idea of a ball, it reminds me of a game or gumball machine, this highlights that fun factor I am looking for. This sample was made with the old colour scheme also, so it does not really relate to my current brand moving forward.
Why doesn’t this work?
- The ball is an odd shape – too oval
- Wrong colour scheme
- The speed is off – some areas are faster than others and it looks too jumpy because of this
Final Outcome
The video above is my final animation. I am really happy with how it turned out, it was my first time designing and making an animation, so I found it tricky at first. I like the speed of the ball as it flows down the ‘g’, I also like the effect of how the ball bounces across my name. I think think this is a fun addition.
Why does this work?
- This version has the correct colour scheme – which makes it look even better
- The motion is fun and creative
- Nice speed in most areas – not too fast or too slow
- logo is big and clear to see on portfolio home screen
What could be worked on:
- The quality of the bounces – they could be more impactful and really jump up for more effect.
- The ending – The ball just kind of stops mid air, maybe I could have it flying off the page completely.
Overall I think this project turned out well and I am glad I kept going with it, I think I wanted to keep going and trying different versions because I knew it could look really fun in the end. I thought it was great to experience and try out Adobe Effects and Adobe Media Encoder. These were new softwares for me and its nice to now have some awareness on how to use them and I hope to keep practising these skills and learning more about animating.