Lessons

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.