As we begin to build out the Dashboard tiles, using a workflow that brings text from Adobe Illustrator into After Effects with the correct formatting, Andy Needham, motion graphics artist and animation director also demonstrates how to use Ray Dynamic Color; a productivity script from aescripts.com that helps speed up your workflow when colorising assets.
- [Voiceover] We're going to take a single dashboard tile and turn it into a template which we can use later to create all the other tiles from. So with our dashboard_01 comp, we want to select the Tile-Steps comp and just double-click it. And I'll just zoom out a bit, see what we've got. So, there's a few elements here, and we want to separate them into layers. So I'm going to select the layer, right-click and choose Create Shapes from Vector Layer. And what that's done is taken everything that was a shape, that it could actually translate into a shape layer and it's done that.
So if we twirl it down into the contents, we've got a bar, a Group 1 which is our progress bar, the backing and an arrow, and the white shape that makes up the rest of the tile. All the text is gone though, and this is because it's a limitation. You can't actually have text that's live in Illustrator be translated into After Effects, so I'm going to show you how we're going to get that back in. If we press Command + E we can jump to Illustrator and it'll open up the file that we want to edit.
Now we need to just select the text and I'm going to highlight it and just copy, move back into After Effects. I'll create a text layer and I'll just paste. And I'm going to move it above the shape layer we've got here. And if we created a layer where we clicked and dragged, that's actually going to define the bounding box for the text. So we just need to drag it out so we can see it a bit more. Let's just do the same for the Steps.
If I just click here and paste, the properties of the font such as the font name, font size, the weight, and the color are all translated across from Illustrator into After Effects. And now it's just a case of lining them up. So let's hide the shape layer that we've got here and enable our Illustrator artwork layer. And select these two layers and I'm going to press F4 and that will bring up our blending modes.
And if you just press D, D, that will jump you down to Difference, so we'll press Return to select Difference mode and you can see now, if we zoom in, let's do it one by one, we'll select the Steps and we'll just line that up. That's about right. And we'll do the same with the numbers here.
And now we'll just return the mode to Normal. And we can hide our Illustrator artwork and enable the shape layer once again. This is good because we have text in After Effects, which is live, and we can make edits now when we want to create our other dashboard tiles. I want to separate the other elements, so the progress bar and the arrow from the shape layer, so I'll select that. In fact, we know how many layers we have in here.
There's four, so I'll duplicate it a couple of times. And I'm just going to go through and we've got our background here so we'll just select the other group layers and delete them. And the next one. We don't need the background. This is the arrow. And it's a good idea to name these as we go so we'll just name this one Arrow. Background.
Let's have a look at these two layers. So if we hide the Group 1, and I'm going to just hide this layer too, we've got the progress bar, which represents 100% so I want to keep this because whenever I scale this up when I'm animating, I want the scale to be 100% so I can just make changes from naught to 100, whereas if I were to use the smaller artwork at the moment, I'd have to go beyond 100% to make it reach the full length of the bar. So this will all become clear when we come to animate.
We don't need this shape layer anymore, we're going to remove Group 1 and keep Group 2. And this will be our Bar and then we'll duplicate it and call this one Progress Bar. And we'll reveal the properties of this layer. And this is when we want to change the fill color so we can see what we've got. So I'll just keep it gray for the moment. And now we want to be able to scale this layer so that it goes back to normal.
So we want to change the anchor point. If we were to just scale this now, it's going to scale from the middle. From this point here, you see. So let's undo that and we want to do a non-uniform scale. So I'm going to press this button here so that we can just scale the x-axis. We don't want it scaling from the middle, we want to scale from the left. So, as I said we need to move the anchor point and you can do this by just pressing Y and using the pan behind tool and just dragging this over. Zoom in a bit so you can see.
I'm just going to drag that around, and we probably want to put it somewhere around here. But that isn't accurate enough for me, I want to use a script and it's called RepositionAnchorPoint. And you can get this on aescripts.com. And I'm going to move the anchor point to the left position, and if you watch when I press Reposition, it jumps over to exactly where I need it to be. I'm just going to close this now. And I think we're around...
just kidding, 66%. And that's back to where we were. So now whenever we want to animate this up and down, we can go from naught to wherever we need to be. Now, we have a template for our dashboard tile, which we can duplicate and edit to create the remaining seven tiles.
In this course, Andy Needham shows how to create an app interface from scratch using Adobe Illustrator, and then take the finished design into After Effects for animation. This is a start-to-finish project, going from concept sketches to the final product (an animated GIF). The prototype will showcase the navigation and interactive aspects of the app interface and can be used for marketing or gathering client and user feedback.
- Sketching ideas
- Planning ahead: knowing your target output
- Designing screens in Illustrator
- Preparing artwork for After Effects
- Creating reusable components
- Building and animating screens
- Adding transitions and gesture animations
- Exporting the final sequence as an animated GIF