40

I'm sure you've seen Dribbblers upload animated mockups of their designs.

Here's an example:

I can create mockups on Photoshop and even apply simple Tween Animations to them but I can never get my GIFs to look like the example here.

What are Dribbblers using to create these animations?

Notice that the animations also include touch points and perfect motion. I would like to convert my Photoshop mockups to do the same.

How can I create an animated example of my mockups, similar to the ones created by Dribbblers?

7
  • It seems to me that Creative Dash started that trend, or at least made it popular on Dribbble. Most of their shots are Animated Gifs to show off their awesome UI skills.
    – ckpepper02
    May 14, 2014 at 13:35
  • 2
    I wanted to see how hard it would be to do that in AE, and I gotta say it was surprisingly easy. Semi time consuming, but pretty fun. Here's what I did. I did get lazy and leave the phone highlight layer under the gui :/ ..but yea, I'd say anyone could do it, if I'm able to do it with my small knowledge of AE.
    – Joonas
    May 14, 2014 at 19:29
  • @Joonas That's great! Could you please post some quick instructions on how you achieved that?
    – Nag
    May 14, 2014 at 19:31
  • Yea, I was planning on doing that tomorrow since it's already kinda late. The cool part about AE, is that once you learn how to animate object from point A to point B, you pretty much then know how to animate: opacity, rotation, scale and anchor point. Because they all work pretty much the same way.
    – Joonas
    May 14, 2014 at 19:35
  • Please share once you write it! Makes sense, it looks rather simple but I'd still like to see how the experts are doing it.
    – Nag
    May 14, 2014 at 19:37

6 Answers 6

59

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

enter image description here



How to make a Project and Compositions

When you start AE, you can press Cmd+N to create a new Project with one Composition inside it.

If you already have a Project open, pressing Cmd+N only creates a new Composition.

In this project, I used 2 compositions. GUI comp to hold the GUI and its animations. iphone comp to hold both, the background and GUI comp.

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



Importing images to AE

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

If you import a folder of images into the projects and you, for example. rename the image folder, you only have to replace one image footage and all the missing images are restored ( As long as all the missing images exist in the same folder ). Also this way there's less clutter.

How to import images to a project

Right-click inside the Project panel on the left choose: Import > Multiple files

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

I used slicy to export my images out of photoshop.



What objects should you save as separate image files

Essentially you'll want to save all moving objects separately. You may also need to save a few static objects separately.

In this project I could've potentially saved the header and footer as one, but the header had a shadow that goes over the first button, so I had to save them separately.

Here's a breakdown of how I saved my image files in photoshop before importing them to AE.

enter image description here



Animating 101

Position animation:

  1. Position animation:
    • Select your object in the list on the left side of timeline.
    • Press P
    • Click the stopwatch icon that is now below your selected layer. This automatically adds the first keyframe, where ever your time indicator is ( it's red line in the timeline ).
    • enter image description here
    • move the Time indicator forward in the timeline. Drag it or Cmd+{Arrow left or right} or Cmd+Shift+{Arrow left or right}
    • in the composition viewer, drag your object to the position where you want it to move ( You can also use Shift+arrow keys, just like in photoshop Or by dragging the number values. ).
    • Another keyframe appears in the timeline and now you have an animation.
    • enter image description here
    • You can play the animation by pressing space

Move the keyframes closer to eachother to speedup the animation or further away from each other to slow it down.

Continuing animations after a pause.

a scenario: You've animated something from A to B and you want to pause for X amount of milliseconds and then move from B to C.

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

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

Since keyframe #2 and the newly created keyframe #3 transform have the same values, there is now a pause between those two keyframes. Then you can continue animating normally, by moving forward in the timeline, and changing the values again.

Animating other things, like Rotation or Opacity

I just wanted to take this time to tell you that all of them work just like position animations ( ...minus the dragging ).

Just use the number sliders that show up when you press the hotkeys below.

Hotkeys for different transform methods:

  • P - Position
  • T - Opacity
  • R - Rotation
  • S - Scale
  • A - Anchor point

Just select object(s) and press one of these hotkeys and start animating. If you don't select anything, it reveals transform methods for each object in the comp.



How to slave objects to other objects

In the Comp panel you'll notice a Parent dropdown list on every object.

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

enter image description here

If you then move the Parent, you'll notice that the Child element now moves with it. Same goes for animations that you attach to the Parent element.

If you animate Parent object to rotate, the Child will follow...



Adding elasticity to your animation

So maybe you noticed that the button animation doesn't stop to a wall, instead it stops in a very elastic way.

After Effect Expressions can be used to achieve this ( It can do a lot more as well ).

To apply Expression script to an animation, Alt+{mouse click} the stopwatch and paste in the script.

enter image description here

The Expression I used in my button animation

The first 3 variables amp, freq, decay can be edited to get different results out of it.

You can apply this same script to movement based animations. For example, opacity animation is not affected.

Can also be found in here.

amp = .1;
freq = 1.0;
decay = 9.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}


Easing....

So this is another thing that can make the animation seem a lot less linear, just like the Expression script above.

I used Ease Ease in that "touch indicator circle" to make it look at bit more human like movement.

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

Then from the list: Keyframe assistant > Easy Ease enter image description here

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

Pics or didn't happen...

Here's a simple position animation demonstrating how easing and this particular expression script can have a huge impact on the animation.

enter image description here



Placing animated comp/footage into a screen

So after the GUI is animated, it's time to place it on the screen of the device.

  1. Place GUI comp inside iPhone comp, just like you place images inside a composition.
  2. Double click iPhone comp in the Project panel
  3. Select GUI comp enter image description here
  4. From the top menu Effects > Distort > Corner pin
  5. Then just drag each corner to match the device screen corners.

enter image description here



Exporting to .gif

AE doesn't have native method for doing this, but do not worry, there are ways.

I prefer to do this:

  1. Click a composition in the Projects panel
  2. Composition > Add to render queue Cmd+Ctrl+M
  3. Then at the bottom where timeline normally sits, you choose what to export and where.
    • I usually export a lossless .mov
    • If you click the "Render settings", you can choose a framerate, otherwise it'll use the Comp framerate
  4. Then just press render on the upper right corner or that panel.
  5. Find the exported file and open it up in photoshop.
  6. Save for web Cmd+Shift+Alt+S
    • Save as .gif

It's honestly not that bad...



Exporting as a video file

So even though the above method shows you how to export a lossless file, it's not the way you should export video files.

You do that like this:

  1. Save your project file.
  2. Click a composition in the Projects panel ( if you have more than one )
  3. Composition > Add to adobe media encoder queue Cmd+Alt+M
  4. Drag a preset from the right column to the left column
  5. Press play.
  6. If you don't choose export folder, by default it goes right next to the project file.


How to replace footage

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

  • Right click one of the missing footage in the Project panel
  • From the list Replace footage > File...
  • Locate your footage and stuff


Other useful hotkeys

  • U - Reveals all used keyframes in the comp (if you have nothing selected). Really useful when you need to move multiple keyframes at once, for example.
  • U (Double tap) - Reveals everything that was changed.
  • E (Double tap) - Reveals all used Expressions.
  • J - Moves to the previous keyframe.
  • K - Moves to the next keyframe.
  • space - Plays comp
  • I or home key - Moves current time indicator to the beginning on the timeline.
  • Cmd+K - Current composition settings.
  • Cmd+I - Import files.
  • Alt+{Arrow keys left and right} - Select keyframe(s) and press the hotkeys to move them around.
  • Alt+Shift+{Arrow keys left and right} - Select keyframe(s) and press the hotkeys to move them around.


The project files can be found here.

4
  • @Nagarjun If you find something that isn't covered in here, just let me know.
    – Joonas
    May 15, 2014 at 19:39
  • Sure! Thanks once again! Do you have a Twitter account that I can mention you on along with this answer? I'm sure a lot of people would love to read this.
    – Nag
    May 15, 2014 at 19:40
  • @Nagarjun Well no, but you can link straight to this asnwer, if you want to.
    – Joonas
    May 15, 2014 at 19:43
  • @Joonas This answer should have many more scores ... extremely professional ...
    – LCarvalho
    Sep 5, 2017 at 15:15
6

THIS IS A FREE ANIMATED MOCKUP .PSD FILE of a website scroll dow and a menu animation completely edit and animated in photoshop ridiculous easy to edit and play around, you can download the file for free here, i also have a tutorial video of how is easy to edit this freebie. enter image description here

4

If you look in the comments on that particular post, the guy says he used Adobe After Effects http://www.adobe.com/uk/products/aftereffects.html

2
  • 1
    How are they able to mimic mobile design gestures perfectly? I understand that After Effects isn't specifically made for such needs but that it is a generic motion graphics tool.
    – Nag
    May 14, 2014 at 12:49
  • 3
    If you do some googling there are plenty of resources out there about animating UI in Aftereffects. Here's some resources to get you started: news.layervault.com/stories/…
    – Sci
    May 14, 2014 at 13:04
3

There are two ways to do this.

  1. Recreate/Mockup the desired animations in an animation program (of which After Effects is one) and then export that as an animated gif. Obviously (as you've realised) this will involve also creating "fake" touches and other interactions to demonstrate what's going on.

  2. Create a functional prototype and then record the output from your device via AppleTV or similar through the HDMI output as it's being passed to your television.

Both are incredibly time consuming and journey's in their own right.

But option 2 has ENORMOUS advantages over option 1. Not least of which is that you'll learn some basic programming.

Far greater than that, though, is that with some very basic interactive programming ability you'll be able to iterate through variations and alternative approaches far faster than someone using Animation software.

And you'll have something that's truly interactive to demonstrate your design. Plus the artwork has actually been tested in an interactive environment on the device, so is already sure to be pixel and colour perfect.

But wait, I know. You're scared. It's going to be hard, right?

Not if you've got an iPad.

Codea is the cheapest, fastest way to make trivial (and VERY complex) animations and interactivity in the simplest, cleanest scripting language on earth... Lau.

http://codea.io

If you don't have an iPad, get one.

Until then, get on with learning processing.org as you'll be able to make similarly interesting mockups within that:

http://processing.org/

Processing uses another script language called Javascript. It's similarly simple, but not nearly as elegant as Lua.

0
3

You could also create the animation of the UI using Keynote. Its fairly simple and perfect for creating UI animations. I then used after effects to just place the video it into the Phone.

Step 1 : I first created the UI animation on keynote and made this: http://vimeo.com/108991829

Step 2 : I then placed the video into an iPhone after effects mockup that I found online and saved the .mov file. Following the instructions on this video: http://youtu.be/VeZGwjVwDrc

Step 3 : With the help of photoshop and following the instructions i made this.

enter image description here

-1

if you want to stick to Keynote and export it as a Quicktime format, I think it might not hurt to try:

GIF Brewery enter image description here

GIF Brewery lets you convert brief clips from your video files into GIFs. Whether you want to create the newest cat GIF or provide a preview of a longer video, GIF Brewery is for you.

No longer must you extract frames from your movies and fiddle with layers in Adobe® Photoshop®. Instead, let GIF Brewery do all the tedious work for you.

In addition, GIF Brewery contains plenty of other features to express your creativity. You can add captions to recreate dialogue or add multiple image filters.

I really love all the instructions given from @Joonas though.

Not the answer you're looking for? Browse other questions tagged or ask your own question.