How am I noticed on Dribbble

How do I create animated GIFs from prototype mockups like the one on Dribbble?

Things you need to know in order to create something like this in After Effects:



How do I create a project and compositions?

When you start AE you can press to create a new project with a composition inside.

If you already have a project open, just pressing creates a new composition.

In this project I used 2 compositions. comp to save the GUI and its animations. comp to get both the background and comp.

The second composition with GUI animations should be the same size as the screen or at least the same aspect ratio. Later, when you place it on the screen, it might stretch to look weird when the aspect ratio is turned off.



Import images into AE

After Effects has a pretty good system for importing .psd files, but I hate to use it because After Effects can't find the .psd file and you have to replace footage for each file if you misplace, move them or rename layer separately.

For example, if you import a folder with pictures into the projects. Rename the picture folder, you just need to replace one picture material and all the missing pictures will be recovered (as long as all the missing pictures are in the same folder). This way, too, there is less clutter.

How to import pictures into a project

Right-click in the project window and select:

... or you can just drag files into this panel

I used Slicy to export my images from Photoshop.



Which objects should you save as separate image files?

Basically, you want to save all moving objects separately. You may also need to save some static objects separately.

In this project, I could possibly have saved the header and footer as one, but the header had a shadow over the first button so I had to save them separately.

Here is a listing of how I saved my image files in Photoshop before importing them into AE.



101 animate

Position animation:

  1. Position animation:
    • Select your object from the list on the left side of the timeline.
    • Press
    • Click the stopwatch icon that is now below the selected layer. This will automatically add the first keyframe where your time display is (red line in the timeline).
    • Move the time display forward on the timeline. Drag it or or
    • In the Composition Viewer, drag your object to where you want to move it (you can also use it, just like in Photoshop, or by dragging the number values).
    • Another keyframe will appear in the timeline and you now have an animation.
    • You can play the animation by pressing

Move the keyframes closer to each other to speed up the animation or further apart to slow it down.

Resume animations after a pause.

A scenario: You have animated something from A to B and want to pause for X milliseconds and then switch from B to C.

When you've animated B, go forward in the timeline and click the keyframe icon on the left, here:

It should look grayed out so don't worry. It just means that there is no keyframe in that position

Since keyframe # 2 and the newly created keyframe # 3 transform have the same values, there is a pause between these two keyframes. You can then continue the animation normally by moving forward in the timeline and changing the values ‚Äč‚Äčagain.

Animate other things like rotation or opacity

I just wanted to take this time for you to tell you that they all work just like positional animations (... minus the drag).

Just use the number dials that appear when you press the hotkeys below.

Hotkeys for different transformation methods:

  • - Position
  • - Opacity
  • - rotation
  • - Libra
  • - anchor point

Just select an object, hit one of these hotkeys and start animating. If you don't select anything, the transformation methods for each object in the composition are displayed.



How to subordinate objects to other objects

In the Comp panel, you'll see a parent drop-down list for each object.

You can use it to define a parent for an object.

Then when you move the parent, you will find that the child is now moved with it. The same applies to animations that you attach to the parent element.

When you animate the parent to rotate, the child follows ...



Add elasticity to your animation

You may have noticed that the button animation doesn't stop on a wall, but stops in a very elastic way.

After Effect Expressions can be used to accomplish this (it can be much more).

To apply an expression script to an animation, press the stopwatch and paste it into the script.

The expression I used in my button animation

The first 3 variables can be edited to get different results.

You can apply the same script to motion-based animation. For example, the opacity animation is not affected.

Can also be found here.



Loosening ....

So this is another thing that makes the animation appear a lot less linear, just like the expression script above.

I used Ease Ease in this Touch Indicator Circle to make it look a bit more human than movement.

You can select one or more keyframes and right-click on one of them.

Then from the list:

I often use Easy Easy because I'm lazy ...

Pictures or not happening ...

Here's a simple positional animation that shows how speeding up and that particular expression script can have a huge impact on animation.



Place animated comp / footage on a screen

After the GUI is animated, it's time to place it on the device's screen.

  1. Place GUI compositions in iPhone compositions just like you would place pictures in a composition.
  2. In the project window, double-click iPhone comp
  3. Choose GUI comp
  4. From the top menu
  5. Then just drag each corner to match the corners of the device screen.



Export to .gif

AE doesn't have a native method of doing this, but don't worry, there are ways.

My favorite thing to do is:

  1. Click a composition in the
  2. Then choose below where the timeline is usually located, what and where to export.
    • I usually export a lossless .mov
    • If you click Render Settings, you can choose a frame rate, otherwise the comp frame rate will be used
  3. Then just press render in the upper right corner or in this area.
  4. Find the exported file and open it in Photoshop.
  5. Save for the web

It's not that bad to be honest ...



Export as a video file

Although the method above shows you how to export a lossless file, this is not how you should export video files.

You do it like this:

  1. Save your project file.
  2. Click on a composition in the (if you have more than one)
  3. Drag a preset from the right column to the left column
  4. Press start.
  5. If you do not select an export folder, it is displayed by default next to the project file.


How to replace footage

So AE can't find your files? Do that:

  • Right-click on one of the missing footage in the project window
  • From the list
  • Find your recordings and things


Other useful hotkeys

  • - Shows all keyframes used in the comp (if you have not selected anything). Very useful when, for example, you need to move multiple keyframes at the same time.
  • ( Double click ) - Displays everything that has been changed.
  • ( Double tap ) - Shows all used expressions.
  • - Goes to the previous keyframe.
  • - Switches to the next keyframe.
  • - Plays comp
  • or button - Moves the current time display to the beginning on the time axis.
  • - Current composition settings.
  • - Import files.
  • - Select keyframes and press the hotkeys to move them.
  • - Select keyframes and press the hotkeys to move them.


The project files can be found.