Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Design in Motion
320
single,single-post,postid-320,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
Zombie_Mitch_New

Design in Motion

More often then not, videos we create here at Seven2 are for ATT. And more often then not, these videos are meant to showcase one of their websites. Consequently, designers do not have motion in mind when the original designs are created. This can result in a few horrific atrocities:

  • Design resolutions are too low for final video export.
  • Organization is not ideal for Motion Graphics workflow.

In order to come up with solutions to these problems, here are some facts to help you understand the workflow between Photoshop and After Effects. We use an example PSD which is essentially ATT’s website, except all the ATT content is replaced with stuff about Superheroes…Enjoy!

Resolution

ATT asks for a maximum resolution of 1280 x 720 for the majority of their videos. Our example PSD has a resolution of 974 x 1504. Here is what our PSD looks like within the final frame:

If we zoom in %200 we can see that this difference in resolution is very noticeable.

  • Note: After Effects handles Anti-Aliasing the same way Photoshop does.
  • Note: BPC and Color Modes should be matched between Photoshop and After Effects before the design is imported into After Effects.

Here is an example of that same PSD imported into After Effects and separated into 3D Space:

 

A camera is directed toward the MAIN_NAV layer, which is closer to the camera than any other layer. Also, a light is being used to cast shadows. Here is what we see through the camera lens:

You’ll notice that the back-most layers are looking decent as far as resolution. Thus, no layer below the main nav would necessarily need to be rebuilt. However, the MAIN_NAV layer is looking pretty pathetic. The solutions?

 

 

Convert the text to editable text and replace the MAIN_NAV layer (which is a Photoshop Smart Object) with an Illustrator File. If art can be provided as an Illustrator File, EPS, SWF, or sometimes PDF then it can be continuously rasterized (which is a fancy, After-Effects way of saying vectorized).

Here is the Illustrator File that is used in the previous example:

Also, vector points can be copy and pasted from Illustrator to After Effects. Each point can be individually animated.

 

 

Organization:

Here are a few things to know about what happens to Photoshop Files when they are imported into After Effects:

  • Layer Groups (Folders) in Photoshop become Compositions in After Effects.  Compositions are essentially like Smart Objects. That’s not confusing at all!
  • A Smart Object in Photoshop will be a flat layer in After Effects.
  • Layer styles in Photoshop can be edited and animated in After Effects.
  • Layer Adjustments in Photoshop can be edited and animated in After Effects.

Here are some images comparing the folder structures of the same file between the two programs:

 

 

The Bottom Line

Workflow between the designer and the motion graphics designer will vary from project to project, but generally follow these steps:

  • Do not flatten Photoshop text layers.
  • Do not flatten Photoshop Layer styles or adjustment layers.
  • Provide Smart Objects that lead to Illustrator files whenever possible.
  • Review script and find what parts of the Photoshop file are highlighted. Talk with the Motion Graphics Designer and then consider rebuilding these parts in Illustrator.
  • Finally, know that in the end a Motion Graphics Designer will be sifting through each folder of your Photoshop file flattening layers in order to minimize the amount of layers in each file. Try to keep your file as organized as possible.
Here is the example Photoshop file and Illustrator file for your review:
Working Files

Here are a couple scripts to help Motion Graphics Designers when working with Photoshop files in After Effects: