Weather App 1
Philip Ebiner
Lessons
Class Updates & My Favorite CC 2020 Updates
06:22 2Understand the After Effects Workspace
05:39 3Starting a New Composition
08:15 4CC 2018 Update - Starting a New Composition from Footage
01:55 5Adding Media to Your Project and the Timeline
05:08 6Using the Basic After Effects Tools
10:20Create a Perfect Circle, Alignment, and Shape Colors
03:04 8Working in the Timeline
10:59 9Layer Properties
08:57 10Quiz: After Effects Basics
11Animating in After Effects
07:35 12Position, Scale, and Rotation Animations
05:17 13Tips to Make Your Animations Look More Nautral
04:21 14Using the Graph Editor
05:32 15Challenge - Bouncing Ball
01:01 16Solution - Bouncing Ball
13:00 17Quiz: Animating with Keyframes
18Working with Solid Layers and the Ken Burns Effects
07:07 19Working with Shape Layers, Strokes, and Paths
06:24 20Adding Layer Styles like Drop Shadow, Bevel, and Gradients
03:44 21Shape Effects - Trim Path Animations, Wiggle, and Zig Zag
05:54 22Quiz: Shapes and Solid Layers
23Track Matte Animations - Make Layers Appear and Disappear
08:37 24Using Pre-Compositions to Group Layers
05:34 25Easily Reverse Complicated Animations
02:14 26Playing with Time
05:54 27Blend Modes
06:05 28Stabilize Shaky Footage
04:04 29CC 2018 Update - Previewing and Favoriting Fonts
00:46 30CC 2019 Update - Responsive Design Time
03:36 31CC 2019 Content Aware Fill
03:55 32CC 2019 Create Motion Graphic Templates
08:37 33Quiz: Important After Effects Skills
34Intro to Motion Graphics Projects
00:53 35Clean Lower Third
09:22 36Logo Reveal Animation Bumper
13:25 37Colorful Transition
16:59 38Text with Mask Path Animation
10:05 39Text Bubble Animation
13:39 40Weather App 1
16:41 41Weather App 2
08:21 42Weather App 3
06:59 43Quiz: Motion Graphics Projects
44Flat Animation Challenge
02:47 45Phil Designs his Flat Animation Scene
01:23 46Animating Fireworks with the Repeater Effect
15:02 47Removing Green Screen Background
06:46 48Adding a Background that Matches the Foreground
07:55 49Adding Motion to a Still Image with the Puppet Tool
06:26 50Adding Movement with the Ripple Effect
06:07 51Quiz: Flat Animation Challenge
52Intro to 3D
10:04 53Swinging 3D Text Animation
12:11 54Build Out Your 3D Composition
05:47 55Animating Our 3D Scene
07:38 56Create Stars in After Effects
05:11 57Quiz: Green Screen (Chromakeying)
58Using the Rotoscope Tool
06:55 59Cleaning Up Your Edges
07:21 60Finishing Our Rotobrush Animation
07:33 61Quiz: 3D Animations and the Camera Tool
62Easy Screen Replacement with Masks
09:56 63Replacing a Screen Version 2
13:49 64Screen Replacement with Mocha
07:13 65CC 2019 Update - Native Mocha AE Plugin
05:08 66Quiz: Rotoscoping
67Using the Puppet Pin Tool
04:33 68Animating Your Puppet Pins
03:04 69Animated Blinking Eyes
08:21 70Adding Perspective with Animated Clouds
07:10 71CC 2018 Update - Advanced Puppet Pin Tool
02:08 72Quiz: Screen Replacements
73Applying Text Animation Presets
05:59 74Create a Page Turn Effect with CC Page Turn
10:05 75Radial and Linear Wipes
03:20 76Color Correction in After Effects
03:33 77CC 2019 Update - Selective Color Adjustments
03:25 78Quiz: Puppet Tool Animations
79Motion Tracking Basics
09:51 80Tracking Text and Visual Effects to Video Clip
06:21 81Tracking Rotation and Scale
11:33 82Adding Details to Our Text
04:04 83Quiz: Motion Tracking
84Intro to Character Animations
01:31 85Design Your Character
14:32 86Rigging Your Character
02:50 87Animating Our Character
09:55 88Adding the Animated Background
09:12 89Adding Details to Character Movement
06:46 90Adding the Paper Cut Out Look
05:29 91Quiz: Character Animations
92Exporting an H264 File from After Effects
07:03 93Exporting from After Effects with a Transparent Background
04:03 94Exporting from After Effects through Adobe Media Encoder
04:40 95CC 2018 Update - Exporting an Animated GIF from Adobe Media Encoder
02:14 96Create an Animated GIF from After Effects CC 2017
07:03 97Audio Tips for After Effects
02:19 98Working with Premiere Pro
05:54 99Quiz: After Effects Workflow & Tips
100Expressions Basics
07:24 101Animate a Flickering Light with Expressions
17:35 102Quiz: Expressions
103Conclusion
00:44 104Final Quiz
Lesson Info
Weather App 1
in this project, we're going to design this mobile app with these flat animations, sort of a user design, simple user design animation and there's lots of aspects to this. So I'm going to break this project down into several videos, One where we're building out the app, one where we're animating it and then one where we're adding some more effects like this. Cool little reflection down below. So you can follow along with the weather app animation project or you can build it completely from scratch. So let me just break down what's happening in this. So first within the phone sort of itself, you have this app where this weather app has the morning, day and evening and each of these has a little pull down where you can find more information like the temperature if it's sunny or cloudy, the humidity, you could add any information that you want. And so this runs through a couple of different options pulling down to see the morning and also the evening and then also with the morning you see...
that we have this animation of the sun, it's spinning around and then you have like a cloud here and then the night. Okay, so lots of cool stuff going on. So the first thing we want to do is build out the app. So to do that, let's start a new composition. Now for this one, we're going to make it the size of a typical screen on a phone. And a lot of screens nowadays are the 16 x nine format but vertical. So for our with we would choose something like 10 80 by the height, 1920. And now that's a vertical nine x 16 aspect ratio. So now if you click open, you see what that looks like. I'm going to turn off the title action safe. Just so we have a clean project. So let me set up our background layers. That would be these four tabs basically. Let me rename this to app. So first choosing our rectangle tool and then choosing the colors. So I kind of went with this sort of orange sort of red look with your timeline selected. Double click the rectangle tool and that will create a full rectangle, go up to the view options and click show grid. This creates a grid on your composition that's not in your video itself, but it just helps you align things. And if you go to view and make sure snap to grid is on, that's going to be helpful to so I like naming these background layers to the name of the tab itself, that will help us. So for this one we'll call it morning, then I will duplicate it. Call this one day, I think that's what I called you up day and I will change the color just something a little bit a little darker and maybe a little bit more orange. Now let's move this down and you'll have to count it out. But if you move it down six spots in the grid, 1234566 blocks, then it's going to be evenly spaced. So let's duplicate this call this evening and change the color to maybe something even more red, a little bit darker. Move it down six. I'm holding the shift key down 123456. There it goes. And with the snapping on it, it does help Duplicate this one more time. Call it night, change the color to maybe something like a little bit more purple, something like that. And drag it down six 123456. And there we go. Sure it's lined up. Okay, there we go. So now we have our four tabs which is cool and we can turn off our grid now. Next let's add our text. So for the top one I will just choose our text tool, click here, make sure we have it set to white. I'm going to use regular Helvetica and I'll call this day and then let me just remember what information I have. I have the temperature. So within this text layer I'm just going to press return and add a new line 56 degrees and on a Mac that's option zero. So on a pc it should be like all 20 I believe. Then I'm going to press enter a couple of times sunny and humidity, so sunny humidity ah 25%. And for these two things, I'm going to make them smaller and a little bit closer together. And with these top two, I will add a little bit more space. So why what I want is that the Sunni and the humidity text to be below this line. Let me just bring up the scale just a little bit and make this a little bit bigger. So you can do this with the sizing of the text or you can do this with the sizing of the layer itself. So like that. So now if I put this below the morning and this should actually say morning, what am I doing? That looks pretty good. Okay, so that looks pretty good. So now that's behind all these other tabs except for the morning and the degrees. Let me duplicate this and put it in front of everything at first and drag it down right there. We'll call this day And I can make up everything from scratch so 78° sunny Humidity will put at and then put this behind our evening and night tap duplicate this, bringing in the front, drag it down. Evening. We'll make this 63% or 63°. Cloudy humidity at 34. Put this beneath, duplicate it one more time. Bring on top for now. I'm just gonna leave it here. Change it to night. I'll do 53 or 50. Yeah, 53. Let's do clear Humidity will be at nine and let's just drag this down and then I want to parent the text to the different layers. So I want the humidity text to be parented tonight, the evening text to be parented to evening, the day text to be parented today morning to morning. So now if I bring up the position of morning I can drag this up or down and that works well. Now let's create the different icons. So one is going to be the son, one is the cloud and one is the star and the moon. So starting with the cloud, which is the easiest one because we've created this so many times. Take your lips tool, change the fill to white and let's just create clouds. So let's just create our little cloud. This might be too big, renamed it to cloud. Bring up scale and make it smaller and then put it right there and I'll put this underneath our night tab. Let's just try to align it. That's pretty good. And I'm gonna bring up the evening text that looks good. And then I'm also going to Press T and drop the opacity to like 25%. So you don't really see it until the tab is opened, see how the sun kind of pops on until it's opened. Cool. Alright, next let's add the night. So to create a star we actually have a star tool which is cool. So it's like that and just click and drag and create a couple of stars however many you want and then to create a moon. It's fairly simple. So I zoomed in here, let's take our elipse tool. And what I'll do is just I'll create quick circle like this and then I'll take another circle and move it like this so it's kind of overlapping and with this one, what I'll do is change the color to the background, so now it just looks like it's a moon because the ellipse one is the white one and the lips to is on top. Now this created a new shape. So let me just cut these command X and paste them into our other shape layer and make sure that they're behind our other star layers, which is good and I might need to move this star layer up just a bit. Okay, cool. Now let me rename this to moon and then delete our shape player. So now if we move this here and press T and drop the opacity to 25% I'm gonna parent this two night with the cloud, make sure it's parented to evening. One thing that will also help organize these is by keeping everything the same color for each tab. So if I select Moon Knight text and the night and change the color, I'll just start with red And then for these next three I'll change it to lavender and then for the day, text and day tab. Just make orange morning or let's do science. Okay, so now it's a little bit easier. Next let's create our son. Now this is gonna be a little confusing. So you need to follow along precisely with what I'm doing. So first take your pen tool, we're going to create the sun rays. 1st turn off the fill so make sure the fill is set to none and set the stroke to white and eight pixels. It's fine for now. Now with no layers selected, let's go and turn on our title action safe and zoom in to our composition and just create a sunray. Just clicking once and then twice. So we have this little line coming from the center of our screen. Okay, so I'll rename this to be son. So what we could do is just repeat that and create a bunch of different rays, which might be good. But I want to teach you how to use the repeater function, which is another tool that you can use to do all kinds of cool stuff. And one we're going to be working on in the future project to to to to create fireworks. So underneath your shape layers, you have this add button that we've seen before. And there's this repeater option when I click and turn that on. What happens is we have repeater one added to the contents underneath shape one and you'll see that two other lines were added. And so this is an easy way to copy shapes or repeat shapes. The key is that you have to make sure that your original shape is in the center of your composition or this is not going to work so make sure it's perfectly centered or it's not going to work. I repeat perfectly centered or it's not going to work because let me show you What I can do is change the number of copies. So let's say we want eight sun rays and then we drop down the transform properties of our repeater and notice that we have these settings for things like position rotation. And what I'm gonna do is first set the position to zero And then the rotation to 45. Now that creates a circle of all of our sun rays and why does that work perfectly For our eight little lines. It kind of gets a little confusing but If you divide 360° by eight you get 45. So for example if I wanted nine rays Then I would change this to 40. If I wanted 10 raise I would change this to 36. And you can see if I increase or decrease this. It can fan out. So divide 3 60 by the number of copies and choose that as your rotation. And it will become a perfect circle. Only if it's set up in the middle of your composition at the start though. Now what I can do is under my shape one layer, not under the repeater settings. I can take my transform tool and move the position out. Crazy. You can see how many cool types of effects we can create like this. So let's move it out like so so we create the sun rays. Now I can take my regular ellipse tool, turn off the stroke, change the fill to white and create a perfect circle and put this right in the middle. Cool so now we have our son and let's take this ellipse, Cut it and paste it into our son layer and then delete this shape layer one and now we have our son that we can put on whoops, we can put on our morning and day and let's make it a little bit smaller. And then of course with our opacity, drop it to and then for the day what we're going to do is just duplicate this and put it. And actually for the sun one we're going to put under morning and pairing it to morning, changed the color to sion. And now for sun to I'm going to put this above our day. I'm gonna move it down and I'm going to make this partly cloudy so I'm going to attach this to our day, make it orange and I'm also going to duplicate the cloud, put this down here, tap it up, can you make it a little bit smaller? I think so and make it orange as well and parent this to our day. Cool. And then for our day text I wanna make sure and let me solo this so I can see what it says, make sure it says partly cloudy. Now. Un solo it. So now we have the basic app designed and set up ready to animate. So I encourage you to follow along, get to this point and then in the next few lessons will start to animate and then build out the actual project that looks like this phone right here with the reflection and the animation. Thanks so much for watching and we'll see you in that video.
Class Materials
Ratings and Reviews
Student Work
Related Classes
Adobe After Effects