Introduction
3 years ago, I realized a video presentation for the new version of Fubiz . This was my first experience in animation mock website, and it begat many others.
Whether it's animation websites , or of iPhone applications , the basic principle remains the same: to give life to a Photoshop mock.
Today, it's time to share with you tips and techniques that I learned to develop and evolve, to carry out a site animation on After Effects, a relatively simple manner, and procedural.
This tutorial is the longest ever recorded for my website, ie more than one thirty-sharing workflow, and advice!
A big thank you to Thomas AMKASHOP , for allowing me to use his site as an example in the tutorial.
Prerequisites
To best follow this tutorial, you will have to provide in advance the scripts listed in the sidebar to the right of this description.
Examples
I hope this tutorial you will, and that you will assimilate different techniques and tricks used to animate your turn your websites!
This video is dead? i couldn't wacht this video
Hi, the video works fine for us, maybe try to reload the page ? Did you get an error message ?
thank for your answered .maybe i can wacth it later
Are you able to play the other tutorials ? If you can provide me more information about the error you receive, I could investigate more.
Thanks.you are very nice
Great tutorial! When importing my PSD to AE the composition is looking squashed and lower quality. Resolution is 1280x720 and on full at 100% in the viewer. Is there an English forum I should post a question like this? Thank you!!
also the width of the psd is 1280. When double clicking on the imported composition in the timeline it looks crystal clear, but in the composition I set up distorted a bit.
Thank you!
hi you said you provide the scene files but i didn't find any,are they still available for the project?
Hello, the source files have never been available for this project, as precised on this page, under the video. The aim of this tutorial is to create the effect on your own websites, and they all have different structures.
Matt,
Great tutorial. I watched it through once and now I am implementing your workflow on my own project while watching it again. I have an issue though.
I have carefully prepared my Photoshop file as you described. I chose to flatten all the layer styles and rasterize all the type as I would not need to change those when animating. After I imported the .psd into AE the program almost froze! I can't work at all with the file as everything is way too slow.
I am on a MacBook Pro running Mac OS 10.7.5 with a 2.2 GHz Intel Core i7 and 8GB of ram. My video card is an AMD Radeon HD 6750 M with 512MB so it could be better but I have never had anything else run this slowly before.
Could there be some AE settings I could change or maybe I did something wrong while preparing my psd? Your insights would be appreciated.
Thanks in advance for any help you can offer.
Nevermind on the above inquiry. I think the problem was that I imported the .psd file directly from my Dropbox. I copied the .psd to my harddrive and now AE moves like lightning!
Good news ! Yes, dropbox can slow down a lot sometimes while working with AfterEffects :/
Mattrunks ~?~?Have a favor to ask you. Animation of a website template tutorial in the member when I free. But in My purchase where I wrong and spent $6 to buy a return? Waste $6 is there any way to solve!!
Looking forward to your reply.
Thank you Mattrunks thank you very much! There is a problem to want to consult you. Premium membership intersection we still like before free all the tutorials? (French English) or in accordance with the price to buy? If the monthly dues within 1 months, no new tutorials introduce how to do? Please reply mail [email protected]. Feel shy to take up your valuable time
i have problems to watch the turorial,
I'm having trouble watching this tutorial too. Says Detail: Error #2048
Won't Play this tutorial. Quite disappointing.
Hello Katyasher, does it work now ?
Hi Matt
Sweet - it's working now, thanks a lot for fixing the issue :)
Hi Matt,
I'm about to purchase this tutorial but I'm just wondering if I should build different assets from what you have? I do want to create a mosaic style effect like what is in this video at 00:18
http://www.mattiasperesini.com/filter/web/Fubiz-Redesign
Thanks
My first tutorial and now I have a new "man crush!"
Your teaching is outstanding because you explain every aspect and reasoning for your work flow. Also, the shortcuts and resources you use are invaluable. You're also very funny! I'll be buying more.
Thanks
Hi mattias! Trank you for this great tutorial. I do have one additional question: is there any chance of masking out this 3D comp to fit in a screen of a device and scroll the content for example? I'm trying to get this solved for days already. Tanks in advance. Keepern up the Great work!!
Hello Mattias, first thank you for awesome tutorial. I learned much more than this superb motion web design. But I have one problem with final result. When I turn on the light I have wired lines all over my web elements. I tried to set higher shadows comp resolution like you sad but it is even worse. I also tried to move the elements on Z axis and this helps a little but than whole design breaks due the high amount of elements. Please can you help me with this? I sending pictures of the problem. Thank you.
https://dl.dropboxusercontent.com/u/33503671/AE-Shadow.jpg
Hello, do you have the motion blur turned on in your composition ? This could cause this kind of issues :/ Maybe try to turn off the motion blur, and If you need it, I suggest you to use a plugin like RSMB to create the blur in post, over your rendered animation. Not the best, but it worked for me..
Hello, no I havent motionblur enabled. I tried the RSMB it is little bit better but everything is than blurry :( And objects out of focus is blurry too much. I played with the Z position of objects and this helps. It seems that the problem occurs whne the layers are near each other (in same position in Z axis). When I moved the layers in Z axis to postitions where is 1 point between each other the lines disappeared. But this is lot of work to do it for each layer :(
p.s.: I have After Effects CC 2014 version 13.1.1.3