I knew from the go that I wanted to impose the screen onto a Macbook to make the video almost like a mock up as I would usually make for clients when presenting designs. I knew the width of my design was 1366, and that the screen ratio for Macbook is 16:10. So I calculated that the height should be 853.
I saved the PSD out into it's different states so I could just overlay the content for ease of editing.
You can see how I stacked the content in the After Effects timeline, pushing back their appearance time so you can see the content beneath before it appears. So I've put the inactive image first, then the first rollover appears, and so on.
I wanted the big image to appear as a quick fade rather than a jump cut, so I added opacity time codes to the layer to alter how it appears and disappears into the video.
I then animated the cursor onto the video after deciding how the content will appear and when. I did this using the position time code. Syncing the motion as best as I could to the video, so it looks realistic.
I then rendered the video, which I will place onto the mock up template.
Unlike Adobe Photoshop, the transform too in Adobe After Effects does not have a distort option on the right click. I had to google this - but the distort tool I was after is under effect > distort > corner pin.
Doing this allows me to manipulate the corners of the image to it fits on to the screen correctly. I've noticed that on all Macs there is a small black edge around the screen itself.
Final mock up.
Video demo, which will be presented to the client.
Leave your comment