Design Practice 2: After Effects

Due to the technicality of my website proposal and the different features it had which were interactive and in motion I decided to attempt to create a demo of the website being used. To do this I needed to learn aftereffects so I looked online and used a trusty colleague of the course to help me with the basics so I could get the hang of it. The main things I learnt to use was the opacity tool and the position tool. These allowed to me transition between the different layers and illustrator files and also create motion with the page scrolling and the mouse moving.

The main issue I had was that I had originally arranged it in illustrator just as proposals pages so when placing them into after effects it meant aligning and getting rid of the backgrounds of pages as the layer was already there from before. For example when the hands are holding the photo I had the background faded out with the hands layered over the top but when I had to use in the animation I didn't need the background as the previous clip was the background. This meant I had to separate each part of my website up into different layers or files so they could overlay without having things repeated on top of each other.

I wanted to improve on my gif of before and make the feature not only flash but appear as if a camera was being used to take the photo. To do this I had the photo flash white and fade in like the snap logo faded from bold to thin. The transition of the photos also needed to be like a camera so I thought of how you turn to take photos and that creates a motion blur. Therefore I had the photos positioned at the side and have then move in in a motion blur under a white clipping mask so you only saw it within the circle. This gave the effect of the camera moving to the right and snapping another photo.

I had to separate the fixed bar to a new layer so that when the page below 'scrolled' up it stayed fixed and layered over the top. I made the page appear as if it was scrolling by positioning at the top and moving it upwards.

I also had the demo show features such as rollover colour changes. I positioned the mouse to move to the image and when it was there the page transform from one file to another though the opacity. This appeared as if the mouse had rolled over the same image.

Although it took quite a long time and was difficult to work out I was pleased with the result it  gave in demoing the features of the website. It's not a perfect file as i'm sure the layers could be better and reduced but as I worked from creating layouts for single jpegs to an animation I feel it went well. In the future I want to create the files in the hindsight of it being an animation therefore it will be a lot more simple and planned through as a motion image.