You Are Reading

OUGD501 - Theory Into Practice: After Effects Animation

CSS3 Animation
If my website was coded, I would want CSS3 animation to animate some of the trends. This is because it is a new trend and emerging on a lot of new websites, so it would relate to my content as it about the current web trends. It would show understanding of it and users would trust the content because it demonstrates new trends being used.

Type Led Design
I wanted the magnifying glass on the B to move around so that you can see where it highlights different areas of the letter.

RWD
I wanted the user to be able to resize the screen so they can see how it adapts for mobile and tablet.

Flat Design
I wanted to rain droplets to move so it appears that the cloud is animated. This is usually seen on weather apps which fits into the concept of it.


After Effects
However, it isn't coded and so I decided to show how I would want it to look by using After Effects to create animation. I have never used it before, so it is a new experience - but how hard can it be?...

Tutorial
I started by looking at a tutorial on Youtube on how to move a basic object.


I started by making a new document and making it 5 seconds long, with the same background colour as my website.


Here is the document!


Then I realised that you need to add a solid colour as a background so I did that.


I followed the tutorial and made a star.


I then transformed it and moved it across the screen in the five seconds.


I played it and here it is! My very first After Effects animation.




Typography Led Design
So, I thought it would be relatively easy to start with the Typography Led Design animation, as I only want to move the magnifying glass up and down the B.

I then encountered my first problem - how do I place Illustrator files into After Effects. So I looked at another tutorial.



Then I made the video using the tutorials. Yes it's basic, but it gets the idea across what I would want it to do.




Comments for this entry

Leave your comment

 

Copyright 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Blogger and uses Modern Clix, a theme by Rodrigo Galindez. Modern Clix blogger template by Introblogger.