Hey, I’m Axel, and here, at long last is our tutorial on how we created the animated
iPad interface in Westworld To Yuma.
Let’s check it out.
As is common with user interfaces, this UI is basically just a combination of several
images and graphics, which can be animated individually to create the movement.
When it is all happening at once, it might seem a little bit intimidating, but as we
break it down into its separate components, you will find that it isn’t actually all
that difficult.
So, we started by designing the final interface in Photoshop, which looks basically like this.
And even though the viewers don’t really have time to read all of this stuff, if the
design was bad, it could be distracting, and pull them out of the scene, so taking a little
time to create a convincing UI is important.
The interaction with the UI is dictated by the scene itself, and needs to harmonize with
what the character is saying and trying to accomplish.
Josh is trying to shut down the other character, so the warning message that appears over the
interface needs to convey that.
And he touches the screen here, about a third of the way down, and a bit right of center,
so we need to make sure our buttons are there.
Once you have a rough layout of our interface put together, we will want to drop it in over
the footage as a test, just to make sure those buttons are in the right place.
That way you can get the layout perfect before you proceed with breaking the UI into component
images.
Let’s move on to the actual animation.
Everything is built over the top of this background image, which is specifically sized to match
the resolution of the iPad screen that was used in the shot.
So, let’s right-click that image and Make Composite Shot, so our comp will use that
same resolution.
Name it iPad Interface, set its duration to 6:08, and click OK.
Now, the Header remains visible throughout the shot, there is no animation needed there,
so let’s drag that in over the background.
Then, add the Attributes image, and the two Matrix images, with Matrix-Blank at the top.
Then, parent Matrix- Blank to Matrix.
Parenting this layer means that it will follow Matrix wherever we move it, so we only need
to animate the position of one layer, and the other will stay perfectly aligned with
it.
As you will notice, the key here is that each panel is designed to be complete, even if
other panels will overlap it.
That allows us to now animate them however we like.
Now, if you are wondering, “how would I like to animate these?”, then listen up,
and I will tell you, right now.
Move the playhead to frame 20, and enable keyframing for the Position property of the
Attributes layer.
This is the frame where we want the movement to stop, where it is properly aligned on the
screen.
Then, move the playhead back to frame 10, and drag the image out of frame using the
red arrow.
That creates a new keyframe, and that creates the motion.
If you want it to slide in faster, move the keyframes closer together.
If you want to to go slower, move the keyframes farther apart.
Now we’ll do the same thing for the Matrix layer.
But this time, create the first keyframe on frame 23, then move back to frame 18 for the
second.
Notice how the Matrix-Blank image remains perfectly aligned over the main atrix image,
which is just what we want.
Now we need to fade the blank version out, to reveal the filled in graphs, by animating
the Opacity.
Just a few frames after the animation is done, let’s say at frame 1:01, enable keyframing
for the Opacity of the Matrix-Blank image.
Then advance 5 frames, to 1:06, and set Opacity to 0.
And that takes care of the bulk of the screen.
Now, to build the Profile up at the top.
On the left is the dialog tree, which is comprised of a background image, and then the script
for the short film.
So, add Dialog Tree.png, then Dialog.png, and then parent Dialog to Dialog Tree.
Select the Rectangular Mask tool, then select the Dialog layer, and draw a mask the size
of the Dialog Tree panel.
Then add the Profile image as well, and we will animate these all at the same time.
We want this Profile to come into frame before the lower interface, so move to frame 14,
and enable keyframing for the Position of the Profile and Dialog Tree layers.
Right-click each of those keyframes, and set the Temporal Interpolation to Smooth In.
This will smooth the movement as the layer comes into the position stored in that keyframe,
so it comes more gently to a stop.
Then step back to frame 05, and move each layer until it is offscreen.
Now we need three text layers for the readouts on his Profile.
So let’s select New Layer > Text, and then enter our text.
In this case, 60.
Set it to 64 point Arial, or another sans serif font, and use the eyedropper to sample
the color from the dialog tree label.
Then, align the text with the HR, or heart rate label.
Shift the layer forward so it starts on frame 10.
The little readout on the timeline will indicate when you have moved 10 frames forward.
Then, press CTRL+D, or CMD+D if you are on Mac, to duplicate the layer, and then move
the copy to the right, on the Viewer, to the next readout.
Then duplicate again, and move this copy to the third readout.
Then we will edit them.
Change the text in the middle layer to 92, and sample the color from the label for that
readout.
On the third one, change the value to 40, and sample the color from one of the three
dots at the top.
Let’s rename those layers as well, so we can keep track of them.
Select any layer and press F2 on windows, or Enter on Mac, to edit its name.
Then let’s just name them based on their contents; 60, 92, and 40.
To add a bit of variation into the numbers, let’s use the Slice tool, and cut the 60
layer in half, on whatever frame you want, then change the text in the second half to
61.
Then rename it as well.
Finally, select all four of those text layers, and parent them to the Profile layer.
Awesome, now we just need to animate the interaction, as Josh clicks the button and a Warning comes
up.
So first, the activation of the button he clicks, which is this one that says Core.
Create a new Grade layer for this, and trim it so it starts on frame 2:12, and lasts for
10 frames.
Then, use the Rectangular mask to create a mask on this layer the same size as the button.
Increase the Feather on the mask to 60, so its nice and soft, and then we will just brighten
up the layer, by adding the Curves effect, then grabbing the center of the curve and
cranking it way up.
Rename that layer to Button glow.
Then advance one frame, to 2:13, and add the Warning image starting at that frame.
To make the warning stand out, we want to fade out the rest of the screen, so drag in
a new copy of the Background image, below the Warning and starting at the same frame.
These blue lines will show you exactly where the layer will drop.
Then, on the first frame of the layer, enable keyframing for Opacity and set it to 0.
Then advance 4 frames, and set Opacity to 66.
Then, on that same frame, which should be frame 2:17, find the Scale property for the
Warning layer, and enable keyframing for it.
Then move back to the first frame of the layer and set Scale to 0.
Bump that layer upward - you’ll probably want to scoot forward in time so you can see
it again, then bump that layer upward until the Warning header lines up with the top of
the Attributes Matrix.
Ok, the last thing is when he clicks the Continue button.
We will just duplicate the Button glow layer, then move the copy to the top of our stack,
and shift it to start at 3:01.
This button is a bit wider, though, so let’s edit the mask position and shape so it fits
the Continue button.
Play that back, and the movement is all looking good, but one other last thing is motion blur.
To make the movement in this interface feel like it was captured by the same camera that
is recording the video, we need some motion blur on it.
This is super easy, though, just click the Motion Blur button, here, for all of the layers
that are moving.
In fact, we can just select everything from Attributes on up, and enable motion blur.
The few layers that aren’t moving won’t be affected by it.
And there you have it.
That is how you animate a user interface.
Thanks very much for watching, and I hope you have enjoyed this tutorial.
If you want more, please do subscribe, and I’ll see you next time.
We hope you enjoyed that Express tutorial.
Now do you fancy going Pro and getting 3D import, particle simulators and all the other
top stuff?
Our 4th of July sale is running now!
We're giving everyone 15% off everything storewide. from HitFilm Pro to our bundles to awesome
stock packs.
That's right, for a few days, you can get Pro for $296.65 and some other exclusive email
offers.
But hurry, the sale runs from 30th June to the 4th July 2017 and you can get there by
clicking on 'this' card that takes you straight to the store.