Published on | Prototyping: From UX to Front End — Medium Halo Lab

This article is not about graphic designers (GD) vs. motion designers (MD), still sometimes their collaboration ends with utter misunderstanding. To prevent fatal design accidents Vlad Kursakov, an experienced Halo Lab MD, wrote a guide for GD on how to share files for animation.

Perhaps, this manual will turn out to be commonplace for advanced designers, yet for others it could be a good reminder. Whether you’re a staff designer or you prefer freelance work, sooner or later you’ll transfer files. During this process, any problems you do encounter may very well deal with hierarchy. So, in this read I’ll tell you about an efficient organization of layers, subfolders and other stuff in diverse graphics editors.

Why is it better to think about it while starting the project? Because time is money.

All graphics editors, such as Sketch, Adobe Illustrator (AI) or Photoshop (PS), have familiar principles, however, most MD’s use Adobe software. So, I’d like to focus on some basic rules of how to prepare graphic files created in AI and PS for the purpose of sharing.

Shapes and Layers in Adobe

As you know, shapes are vector elements of the software and the way you create them in different Adobe progs is almost the same. It’s not a coincidence. The purpose is solely for exchanging information between the packages while allowing for the opportunity to save an original file.

For example, John the GD gave Mike the MD a PSD file. Mike animated it and after the work was completed, John asked to change the font. No problem for Mike, because he can just replace the PSD file with the same title.

However, be prepared to have enough RAM for such tricks. Also, pre-comp effects errors can happen and it’s not always clear where anchor points are. Usually, the problems occur because of a huge amount of raster images and subfolders made in PS, for instance, a web page.

Less Stress More Success

The process of matching and cleaning up of a file can take about 60% of the working time of a project, and definitely, it has a strong effect on the mental state of the MD as well as on the final result.

In other words, it’s a nasty piece of work.

It doesn’t mean that a MD has got more chromosomes than a GD. In fact, they’re one and the same. First a GD creates a draft layout or an image, after that a MD transforms it into dozens or even hundreds of shots. The question is whether these two buddies have reached an agreement on the result that both expect to get in the end. In a perfect world, if a project should be animated, start by consulting with an animator.

Let’s start with Illustrator to consider why it is so important.

Rule No.1: Each element, which can potentially move, might be in a separate layer.

Rule No.2: Don’t close contours or don’t convert them into curves.

Take it into consideration, if your animation should contain a contour motion or an element which moves along a contour.

Applying the “animation tool” with unclosed contoursApplying the “animation tool” with closed contours. This story also pretends to a be an animation, but you see the difference.

The same principle works for all applied effects of transformation and so on in AI, so keep in mind that and in any unclear situation coordinate your ideas with your motion designer.

Now let’s talk about Photoshop.

Rule No.1: While sharing a Photoshop file pay attention to clipping masks.

If a designer expects to get something like that, for instance, hovering over a circle…

…then don’t think you can solve the problem with a raster image. Use layer masks announced above. Right, After Effects works with masks pulled out of Photoshop files.

Rule No.2: Keep your layers in order as it also affects the time spent on animation process.

Each project has a unique structure and arrangement of layers whether it’s a website layout or a banner. As a result, there is no single solution how to organize PSD. Every time you decide to share your file for animation, you choose the most efficient structure for the current project. That’s why it’s critically important to discuss decisions and plans with your motion designer.

That’s how an ordinary layout looks like, if you are not going to animate it.

In this case, animation can be a perspective projection with 3D layers and it’s impossible to check it out in Photoshop.

Wonder about sizes and ratio of sides for sharing?

Well, it always depends on many things, in particular, on client’s prefers. Yet if you’re as сurious as I am and think ahead, then appreciate a set of standards, used for video files.

What if your layout is already made and approved?

Then it’s not your problem anymore. Simply share it as a normal image. Keep in mind, that some things can’t be animated in the way you believe they can, or it’s impossible to make them in Photoshop. So, relax and let your motion designer do his best.

***

That’s all you need to know for better collaboration with motion designers. There is a bunch of other small tricks, yet following these simple rules is enough to save time and resources for everyone. Besides, trust in communication. If you doubt anything, just discuss it with your MD before you start the project. It really works.

What Do Motion Designers Dream About? was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

What Do Motion Designers Dream About?

Cool stuff, every week

More Articles