We were recently contracted to create 136 separate animations for a customer. While this may seem a daunting task, we spent some time thinking about how to speed up production and output to get all the animations done on time. Say hello to network rendering. While this is nothing new, if you still have some extra computers lying around your home or office, you can greatly increase your rendering and output speed by putting their collective power to work.

This post is related to After Effects CS5 and 5.5 on a PC. The first thing to note while using multi-system rendering is that each computer can only work on 1 frame at a time. This means you will need to output your videos as image sequences – be it JPEG, PNG, TIFF, TGA or whatever format you desire. Luckily in our case, the client requested image sequences so we did not have to re-create self-contained video files as a post-render action.

What you will need:

• Multiple Desktops with After Effects installed
• All plugins used in your comp must be installed on all computers
• Basic knowledge of outputting files from After Effects
• Basic knowledge of using shared network folders
• A fast network drive accessible by all computers
• Preferably a Gigabit (1000mbps) internal network connection
• Plenty of file storage space
• A breakdown of your file structure on paper and a highlighter
• A pot of coffee and a little patience

Assuming you are outputting a series of separate videos as we did, you will need to pay close attention to your file structure. When outputting 136 separate animations, consisting of 10 second animations at 24 frames per second, we had to manage 32610 individual files that were being output by several computers simultaneously. I can’t stress the importance of good file structure and naming conventions enough.

• TIP:
  We create every file with a date in the file name, and a version number. Try to never use the word “Final” or “ThisIsTheLastOneForSure”. You will clutter yourself with thousands of final files that are nowhere near final. A good example would be “Maverick_LogoAnimation_PngSEQ_Nov03_2011_01.png”. We also try to stay away from spaces in file names as we often upload our files online and a space becomes a “%20″ which is just confusing for everyone. Keep it clear.

A tool we use on a regular bases for our video work is what we call our “basefolder”. This is a small application that creates a file structure that we use for every project. You can download it HERE and use it as you please! This will set you up with a good system to keep all of your assets and project files neat and organized.

Setting up the project:

To get this time saving process going, it is required to create a common drive letter among computers on the network. The easiest way to do this is to map a network drive on each computer using the same drive letter. Choose a computer on the network that you want all the output files to be stored on. Create a folder and name it something cohesive such as “RenderOutput”. Now right click that puppy and share it on the network/workgroup. Now on each computer, open any “My Computer” window and click the menu Tools->Map Network Drive.

When the Map Network Drive box appears, choose a drive letter from the drop-down that is not being used by any computer for example, “U:”. Now click browse and navigate to the folder you shared earlier. Click “Finish”.

Make sure the drive letters used on each computer are the same. You can check by opening “My Computer” and in Windows 7, you should see a new network drive called “U: Render Output”. Create a new folder in here relative to your project for example “Project_01″.

Now we dive back into After Effects. Don’t worry, the coffee is still warm. To keep this tutorial simple, we will assume you are rendering out a single video as a PNG sequence. Start with the main computer you did your After Effects work on. Open your composition and add it to the render que (ctrl+shift+/). Under the comp you just added in the render que, you will have 3 yellow texts. Start by selecting the yellow text beside “Render Settings:”.

Set up your output settings as you usually would here but the main difference is the check box for “Skip existing files (allows multi-machine rendering)”. This will allow each computer to check for the rendered frame, and if it exists, skip it and proceed to render the next one. Click OK.

Under “Output Module:” select any of the formats under the “Format” drop-down described above – in our case “PNG Sequence”. Click OK.

Now we need to select where the render will go. Click the yellow text beside “Output To:” and navigate to U:\RenderOutput\Project_01\. Give your file a clear name but leave the “[#####].png” as this value will be replaced with the numbering sequence. Click Save. Now save your Project.

The final step is critical. Inside After Effects, click “File->Collect Files”. When the Collect Files dialogue appears, click the drop-down and select “All”. Now click “Collect…”. Now in the browser dialogue that just appeared, navigate to your U:\RenderOutput\ directory and click “Save”.

The work is done! All you have to do now is go on each computer, open the project file that the “collect files” process created in your U:\RenderOutput\*projectName*\ directory, and hit “Render” in the render Que. You will now see each computer start to crunch out individual frames of your video or animation.

• TIP:
  For those of you outputting multiple sequences, try to pre-render any segments of your comp that don’t change between videos as proxies. Then in your “Render Settings” in the render que, when the dialogue opens, choose “Use All Proxies” and this will use your pre-rendered elements rather than re-rendering these every time. This is especially useful for multiple videos where only some assets change for example, new text being overlayed on the same background. Pre-Compose the background elements and render a Proxy for that comp.

Your render time will decrease proportionally to the number of computers working on the video. When all the computers are finished working, your U:\RenderOutput\Project_01\ directory will be full of all the PNG’s for each frame of your video. Now you can go back into After Effects for a final output. Import your PNG’s as a PNG Sequence, Ensure your composition frame rate is set correctly. Right click your newly imported sequence and choose “Interpret Footage->Main” and type in your composition’s correct framerate and click ok. Then output that final composition for distribution! It really is a piece of cake and you can reuse this structure you created for all your projects that would benefit from a network render.

When is this not useful?

Network rendering will give you no benefit when rendering a video that already outputs real-time. Since After Effects does not output self-contained or multiplexed videos through a network render, all you can do is create image sequences, then recombine them afterwards as a video file for distribution. If After Effects is already outputting real-time or close to it, you may as well just render your final delivery format from the get go and save the time of re-outputting from an image sequence.

When is this beneficial?

Network rendering is a huge time saver when rendering processor intensive animations. Any time your PC takes longer than 5 seconds per frame to render; it will be worth the time to quickly setup a network render for that composition.

We hope you find this useful and that you will be blazing through previously painstaking render times. Check back soon and we will be working on other tutorials to help share our experiences with our industry.

The Device Conundrum

How many devices do you use on a daily basis? An android phone, an iPad and a 1080p desktop perhaps? The problem with conventional websites is that you’re locked into the layout and design, regardless of your screen size. Initially, this problem was combatted with the good old m.yourdomain method, where the browser would check if you’re on a phone and push you to their “mobile” version. The problem here was that more often than not, these mobile versions sucked. The mobile version would have different content, often require its own content management system, and generally did not utilize the space provided by all of these new screens. This is where Responsive Design comes in…

Same Content, Different View

With a website built around responsive design, administrators can edit their content in one place, and their website will scale, shift and utilize elements best suited for the device their on. Maverick Creative has decided to fully adopt this mantra, and utilizes responsive design techniques where it is best suited. Take a look at our site, if you scale the browser, or visit it on a tablet or smartphone, you’ll find that the layout adapts. Providing the best user experience, and the same content, regardless of the device you are viewing from.