I always liked animations (like these below) and wondered how to make them but I never had an opportunity to create my own one:

So I decided to face the challenge and find out what’s the magic behind it.

I started searching what tool designers use for making animations. And the result was quite clear:

Not so Difficult Research

Then I went to Adobe website to find out what the hell Adobe After Effects is:

And then I realized it will be more ambitious challenge than I thought…

Adobe Tutorials

So I visited After Effects Tutorials page and tried to gain the most knowledge in the shortest time.

The Result: all you need to do to create an easy animation is…

  1. Orient yourself.

2. Learn to work with TIMELINE.

3. Learn to convert animation into appropriate format — RENDER IT.

Let’s Create My First Animation

When I wondered what I could animate I discovered the following YouTube videos:

And the target was clear — let’s animate the UI of the recent projects I worked on:

Let the Dashboard Move

It was very easy to create the first animation — just three steps:

  1. Move all three widgets outside the visible area — that’s where I wanted them to be when the animation starts.
  2. Then place the widgets where I wanted them to be at the end.
  3. Customize animation for more natural feeling.

And this is the result:

Let the Users Move

Making the second animation was also very easy:

  1. Place the user images where I wanted them to be at the beginning of the animation.
  2. Move users where I wanted them to be at the end.
  3. Customize animation for more natural feeling.
  4. Add a blue dot for swiping feeling.

And that’s it:)

Yet Some Tips

Adobe XD -> After Effects -> Photoshop Workflow

Adobe XD and After Effects workflow is currently not so smooth. You have to export images from XD and then import them into After Effects. Unfortunately drag and drop from one application to another is not supported yet.

After Effects doesn’t support rendering GIF so you have to either buy the third party application or you have to render the animation into .mov format and then export GIF from Photoshop:

Two Ways of Exporting a GIF

Relinking Missing Files

For you who are accustomed to start reorganizing the folder structure right after the project is finished, then open it, and are surprised why all the links are missing.

When you’re relinking don’t forget to uncheck the PNG Sequence checkbox — it will save you many troubles:)

And that’s all for this . Looking forward making some more difficult animations maybe in the next weeks…

And finally … I already have my first shot on Dribbble:)

Source link https://blog..io/week-4-animations-20876031d437?source=rss—-eb297ea1161a—4


Please enter your comment!
Please enter your name here