Master Sketch and Design an Amazing App | Christian Krammer | Skillshare

Master Sketch and Design an Amazing App

Christian Krammer, Web-designer and Sketch app pro

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
16 Lessons (1h 48m)
    • 1. Welcome to my Course

      1:52
    • 2. My Process

      1:57
    • 3. The Class Project

      1:00
    • 4. Preparations

      4:18
    • 5. The Status Bar

      8:21
    • 6. Part 1: Create the Background, Logo and some Text

      13:34
    • 7. Part 2: The Sliders

      13:45
    • 8. Part 1: Create the Bottle

      8:57
    • 9. Part 2: The Water Level

      7:28
    • 10. Part 3: The Mini-Statistics

      6:26
    • 11. Part 4: Create two Icons

      8:53
    • 12. The Drink Overlay

      9:49
    • 13. The Reminder Overlay

      6:32
    • 14. Part 1: The Title and Close icon

      7:23
    • 15. Part 2: The Round Progress Bars

      6:40
    • 16. Conclusion

      0:37

About This Class

After I've taught you the basics of Sketch in my first class Getting Started with Sketch: Design a Beautiful Profile Card I'm back with an advanced course, that will enable you to master Sketch from end to end.

cover-image.png?raw=1

For this purpose I've designed a beautiful water consumption app from scratch and I will show you how to build it in easy-to-follow steps. The app consists of five different screens, split into bite-sized videos. You can grab my finished water tracking app here

Who is this class for

This course focuses on an efficient workflow and the usage of shortcuts for maximum productivity. You will also learn about these topics:
- Pages
- Symbols
- Alpha Masks
- Gradients & Shadows
- How to create a logo and some icons from scratch
- The best way to treat text
- And much more that enables you to master Sketch in no time

If you want to learn the basics of Sketch please enroll in my first class Getting Started with Sketch: Design a Beautiful Profile Card.

About me

For the last two years I've shared my knowledge about the Sketch on sketchtips.info. Be sure to check it out and follow me on Twitter @SketchTips for more tips.

If you have any question about the course or the class project please post it into the community and I will help out with pleasure.

What students say about my first class

"Christian is an awesome teacher and makes this course a lot of fun. I learned a lot and highly recommend this course to anyone wanting to learn Sketch in a fun way. Thanks so much Christian!"
- Joanna K.

"I love how easy to follow and how to come up with a final product that I like while learning. This class was awesome!"
- Gabriela Z.

"lots of useful info packed into a short class - learnt lots (including helpful shortcuts)"
- Al P.

Transcripts

1. Welcome to my Course: and Kristen comma dissent from Or and this casts every show. You what? The design. An amazing happened catch. This'll is a water drinking. Yep, have created great for this cause, and it will get used from a process in easy to follow steps. If you are new to catch, I want to learn about the basics of the please have a look at my other cause, which is named in the description for the last two years. If she admin knowledge off sketch, it's catch tipster info and released countless tips and tricks there, so check it out. AB consists of five different creams. Starts cream consumption, screen drink overlay. He remained overlay and finally, statistics overlay for the cast project. We will focus on the consumption scream. I would show you some tips, injury sources or you can adapt to decide you're like every focus on an efficient workflow and show you how to do things. His Boston easiest For super short cuts, you would see some a glance, topics like pages, same birth reformists, efficient usage of radiance and chairs. To keep your contents of steps descended, Logan becomes finally how to read text the red ones in Rome now and join me in my next video to learn more about, Mambro says, and the creation of a drink. 2. My Process: I come back? I'm so excited that you're trying to act as a but kitsch thesis. Media With Daily API Department Creation Process How imaginative All the breaking first, menacing for the new product. Tried to find out as much as possible about the topic and get some inspiration with other safe Already done. So I went over to Tripper and started a search for the record pretty soon ahead. Direction. A man where ever wanted to go with map. I always have downloaded and looked at the wealth off our water trackers on the APP store, which helped to strengthen Impression Already. Head custom. Nice example. Safer. Look at the description before I even ended sketch and made a step back and scraper Tongue Creek papers, catches help, dedicated feeling for different greens and the actual content. No, I was raised to champion just catch and started the egg pretty saying that drives to keep the peace universal. It's possible to have more freedom with designs the course, but if it did show how you can use to treat the virus and entry templates off sketch to copy some specific elements, but it screen the mansions started his lowest ball superbly from five, and its native screen says off Street trained for 56 days. Since everything is rectal pasted kitsch, it's very easy to scale things. Make your way up to other sizes. I will show you in another course, are easy. This its cage, your deputy science to other devices, or so they all have a scree intensity of to exhaust. Three X. It's much easier to descended on X and export the correct size later, which is very easiest. Catch if you're using it, maybe images. You just have to care for their beating after difficult quality later. Great over a few of humanity if inter vice sizes. If local chorus to rise, let me tell you about the cows protecting the next video. 3. The Class Project: after the apartment, Bro Sis in the last video. Let's talk about the project now. Also, be understanding, Really discreet for the I wanted to focus on a single one here. Consumption screen creation off the screen is split up in the floor videos. It's just good fortune leads to get prepared. You can follow me along with a bloated finished screen when you're ready with lessons at the hell in core itude. Bread. Different eight years Trying to create a different kind of bottle, use other Carlos A background image. Take a different approach for the minute statistics if you need inspiration for the bottle making quick search for karaoke. Bartlett Corgan Different Big front images can be found in visual Hunted. Come and if you're looking for some mask radiance. We sent you a great aunts to come. It's up to you, but I love to see some alternative dissents. The Project Gallery. In the next three days, we'll finally get started on the same instead of Cage, so stay tuned 4. Preparations: Hey, and welcome back to Miss Cage cause. And this really will finally get started, Mr Design and champing this cage. The first thing is to create a new document with command end. Safe it anyway, on your hard drive. My case have been courted. Whatever. The first thing of a daily about our pages pages act like many documents with in your main document and taken hold several several screens off your app. They can be real tear take on the down pointing aero and to see that there's already a pre defend page called Page One. This page will hold the start screen first, so rename it with a double click and call it Start screen. Presente will always to create another page, which we will call elements and which holds, or the elements we will use brought to design off the ebb. So click on the blast sane. Call it elements and moved. He's one up you can use the keyboards champ between these pages just told control and Tuesday Rockies up and down to trump dispute between these two. Now we will create the outputs which will actually hold our design to create the output press A and the key, but and sketch mixed very easy to get some greedy fan sizes, since we will be starting with the iPhone five, we can choose I from five fs 50 here, just click on it. And here we have the correct size now, which is 3 25 5 68 to have a clearly defined origin far designed, Let's move it toe the Sierra zero precision. Now to jump into the first field here into the eggs field, you compress art and top and zero pressed up to trump into Divi field or suppress zero and this antenna to send that the output in the canvas again just selected and press country and under Keyport and let her name is out. But I always like to start screen for some referenced Let's load to something Blitz. Now Sketch makes it very easy because it has built in templates for post IOS and android. It just need to go to file new from template and choose Iris you descend, which loads up a whole screen off. I always elements campaign around here, see, but it actually contains for better referenced. Let's a photo. I wish you a designer. Let's go to the dead Lapa and courted. I always I descend or is the Let's load another one for Android? I can goto file you from template material designed, decent holds or day and dread stuff. You may need that there is a safe it this timeto material descent. This one's a keeper tried, cut. Jump between this refills on the chairman. Keep it. It's command with the greatest sign, but this depends widely on your keyboard layout. So if you have another language set on your keyboard on your system, then you may have to press another key patrolled. Cut off in the English Keeper, for example, it's command plus the grave accent, so may have to or dance, since we will be creating universal epidural big elements from both of these templates. But if you would design a recep or an entry dip should have caused, stick to these templates is killed his possible. But for now, let's go back to the start screen is to keep a shortcut. I just told you and started to Status Bar, which is this one here 5. The Status Bar: it consists off a dark background off the reception I can to provide a name the time and the wife I can. So first, let's create a rectangle, miss our and just drag it here. You see that you didn't catch the top left corner so into Sierra at the exposition, and we always it didn't make it 100% right, Which doesn't matter, because we can enter 100% in the Richfield for the height feet. Let's take 23 pixels. Let's fill it with black Now said. Choose defeated Carla off black, and you compress five to get 50% capacity. Here, put 10%. You can press one or for 90% of Campus nine, but let's stick to 50% for the reception. Aiken. Let's jump toe there and treat them good enough and something a little bit was command plus been around Mr Space Key, and here we have this one. So let's select the screen, and we might have to take a little bit into the groups to find it. It's actually in the status bar group, and here it's the reception group, So selected Press Command Z took Opiate trump ache to our screen and press command shift we to insert it into the top left corner off the currently selected layer he would have fit. So being a little bit with command plus again now selected post with the background image. So how old shift and we can use the alignment. Aiken, tear the land post were the curly to be able to land everything that we will set up a great now to go to view great settings. We will take on a big secret for the six clients. We don't need them just and 20 You could always a tweak to Carlos here, but they okay for now. So this misters Well, it is okay. Dog is a great you can press control key on the keyboard. So not it's focused on the provide a name to like the reception. I come and press command too. That's home or the way end. Select a parent group and move it. Eight pixels to the red. You can either press shift and try it to move it. 10 pixels Threat in two picks is left or you cooked. Just ente eight It D X field are you could, of course, move it right, Mr Mouse, And have a look at the position. Filthy. And until you are at it, pixels to enter. Detect for the provider name, prestige and the key But Kikhia and then the catch. But its size that choose 12 pixels and in neutral font face like Helvetica Neue and the idea does it give it even Carla and neutral. Right? Selected powers, Mr. Reception. I can and you can click this Islamic technique in the land post where the curly And now let's out a little bit again Choose to text layer duplicated with command t and move it or never read. Enter in tow editor text layer and a time if you're liking for for example 12. 34 Press command and it just missed it. Ex player. And now let's go to Tae WiFi. I can. In this case, we will go to the is template so used to keep a truck cut again, Dakota, And let's search it here. I think it is on the top left here. So two men with command plus again place press command toe take into their actual I can hear toe the subgroup selected press command Z jumping to the document. Select the layer off to start this bargain. Press command shift beating again Toe institute into the top left corner. And now we can use the lime decades again to land it right. Just like for the reception I come will move it. Eight pixels in can press shift and left to move it. 10 pixels. Move it to a pixel to the right again to get toe pixels. Select post based the time particular line pose and now moved him a little bit up. The same for East Post. Fellas, select the text layer. Hold shift. Select reception. I come today is a little bit up and bring this to closer together on the staircase. This one here, this one here. And since you still have a black eye can But we need the white one selected. And to choose a Carla from anywhere from the screen, you can press control, See, which gives you Carla Picca. So let's take your right from here. And now the reception I can't source of white. This data's buys finished so far, but we will move it into a distinct group. Select the first layer. How shift kicking over delays here impress Comanche, the group it command artery. Name it and let's call its data spot. And to be able to use the status by other screens, will make a so called simple out if it symbols are basically groups which can be used throughout the whole design. And as soon as you change one instance off such a same burr or the other instances are also changed, which keeps everything in sync. So instead, a symbol for the status bar Goto Leia creates Ember. As you can see, the Karla changed from blue two purple to indicate that did it is the same for now, for difference we will incident is simple into our elements page now so that we have everything we will need throughout the design. In one place. Just go to inset same birth status bar, and here we have our newly defend symbol for the status part. And now let's see how it works. If you change December, for example, if you make this text your bigger 24 and we jumping to the other screen, then you can see did text layers always have been changed here, so let's change it back to 12 pixels. And if you could elements page again, we see that Theresa got changed here. But you always have to be careful. December's because if you accidentally change something in one instance than or the audiences are changed and it can happen that you change stuff here and don't remember it there and suddenly everything is different. So just always happy. Look at the Karla off, Delia so that you know what? That you are getting the same bread. Now we have finished the preparations now so we can start with the start screen in next video. See you soon. 6. Part 1: Create the Background, Logo and some Text: after we have finished the status. But now let's focus on the start screen, which consists off the logo to Slate us and the button. The first thing to do Nice to into the background image, which have already cope it from visual hunted come. So let's go back to a document and interdict here, Miss Command free. We just need toe. Move it below the status. Pass it. It stays bias recibir in the layers list and some other little bit was command manners and make the back with image smaller so that they can see more fit. Make it about the head off the Howard output. Now it's took me in again and let's take care of the college overly. Let's first make directing before the college overlay Surprise are on the keeper and cover from the top left to the bottom red. It doesn't matter if you didn't catch the top left corner, because it can always use the inspector and inside zero and zero to go to the top left corner. And also, if the rectangle isn't 100% white, you can enter 100% for the whites and 200% for the head to make it four by its, um for Hyatt. You could also enter 50% for example, about 20% if you need such a value. But let's go for 100% for the cars. I've already prepared them in another document. Let's hope it thes three swat just for the overlay. Here, select Tim and coping Amiss Command. See, And in September here, some were for interference. Let's go back to the Carl overlay, go to the fields and chose Olynyk. Radiant. Okay, The great and Should go from the top. Left the report and read Some moved this one here and the second and Carla. Yeah, and for the car list that's Jews there wants to just cope it. So press controI see to bring the Karlovic again for the first Carla for the end. Carla again, Control. See speaking to say concarneau and you always want to have this Carla in in between the radiant. So let's insert another Carla stop. It doesn't made aware exactly. Just click here. Do not need another one. And to bring it exactly to the center off the radiant breast. Five. On the key part, you can always some movinto 20% off the radiant, 80% or to 50% for our purpose. And for this, Carla again used to Carla Picca and choose discarded. The last thing to do for the overlay is to make it a little bit transparent so that we can see the background image. So prison and the Keeper gave it 90% opacity. That was a lock, this overlay so that we can't move it accidentally with command shift and L, which again shows to look I can hear in the latest list and through named Amelia's List so that we could find him easier later. So called Delia Press commend our instead overlay press stop to go to the pregnant image and TPG presente, and they're finished for their names here now that refused to Carlos here, Let's move or the swatches toe are elements. Page for later reference Select or his fifth press Command X To cut them, go to the Elements Page and into time here to make the background reuse ever or so, let's create a symbol from it. So Select posed in the layers list shift, create The group is command chief and rename it with command. Our to be chief and then make a right kick and select Create timber. No, as you can see the car like and has changed from blue to pepper. That also incident is background toe are elements page for difference. Go to the elements again, select in that same burst, and you can see we have to background symbol here now, so cake on it outside. You can see it moving down, and as you can see the back on, the image is way bigger than the overly. So we should create a mask toe. Cut the background image right to this ice off the overlay so open the group public 80 overlay layer is come on, T. Move it down and with red click select uses mask so everything is cut off and just the area within the mask is shown. Now that's created local fire. Let's go pick to a file for the found have chosen to our son's pro from Kobe funds flat entered a new text layer with tea and try to more tough for this. I font size have chosen 42 pixels for the weights and report. As you can see, the spacing between the letters is pretty big, so let's refuse the correct spacing report minus two. Now let's create the raindrop, which is constructed from a symbol circuit. Fill it interesting, actually, with old make it about 24 pixels. Move it, Tom, to mean a bit that we can pay the back the second. Now ain't that the rate upon mood with Enter so that we can. It it every point off the circuit. Now move the up a point it up and change the regular point type two disconnected. So we that we can change the curve off the point on each side separately. So let's move this point down a little bit out in this point. Always a town. I've waited it out and at the same high it. It's the out a point. Now Everything looks, but he couldn't already like a raindrop. Well, it's put this one little bit, a bit up again, and now breast e again find out a text layer and in the plus, so this bus, a symbol F, chosen a fun test of 30 pizzas and the fund weight of powered. Let's change it outlined so that we can cut the plus from the raindrop. So instead of text, it's just like the points now, as you can see here, when you had a direct into director point mode for Let's move it here and both of to descend off the raindrop with smart gets now select both and make a substrate put in operation, which cuts out the blast from the raindrop. I will make the same Mr Botha text will always to create, outlined to the weekends, that we can quarter the shapes off the individual letters. So let's elect it and Eloisa left out lens because we want to changed it are so that it has to same Kev as the rain drop. Some moved this point a little bit out. It has the same anger. It's the raindrop and the eso changed Carla off the raindrop white. Now let's add the wave background from the logo this morning. Just make and you're right. Thank you. And and the director point mode again at a few points so that we can make the curves and moved him down. Moved. This one found a little bit here. You're not a cuff. All right, so this one I want to make sure that this wave, it's just whisper within the extent off the raindrop. So let's first companion the two shapes. Botha text in the over. Some move these two shapes into the group off devoted text. This one move here muffed this one here, and no change the poorly in operation. Type off this drop so that it gets visible again. This one is to avoid the trap and change to print operation to non. Now let's elect the age again. Moved them on top off there, shapes of to text and for these shapes, select. He was his mask because this make sure that the waves a just shown we've seen the shapes off the text that changed the field. Carla off the waves. One of the car Let's we've really used for the radiant Let's go Picture Elements Page Select is Carla think opiates failure. You hear and change it to 40% we're bracing for said, if it can, always to see the shapes. If there bought the text now, just it a little in the shadow for a little three D effect in the shadows just changed my position to syrup and increase the black a little bit and change your capacity. About 40. This looks very good now. And was the Let's step toe a logo, which is finished now so that we don't need to go to the Elements page whenever we need a color From there, we will define them as document colors now. So go to Elements Page and with one of the cars selected, called it Feels and select Document Carlos here and here you have a plus sign, which led to aet thes Carla to document Carla for later usage. So make it with this one select second card up. It's eighties fun and Mr said Carla to the same. So whenever we need one of these Carlos now we can cook document Carlos intellect it from here before we move on to this latest. Now let's at the separation line and the descriptive text. Let's go back to our file and with the text to select it. Enter, please, said Teoh. That's for the phone size of clothes and 60 pixels for debate. Regular answer that the characters off the text are a little bit further apart have chosen the one for the characters basing my land. The text Mr smart gets to the sent off the output and for our separation land at the rough rectangle with our trump today, Inspector Miss our stop to change its size necessarily two pixels who decides to one two main so that we can better see it changed to feel the why it and capacity 20% is, too. And with the alignment, Americans line the line to this end of the output. Just move it on little bits. That is between logo and the text, and these two elements are finished Now finally, let's bring some water into the layers in the layers list and renaming group them. These two for the logo. Suppress command G to group them in command are to rename them to logo. They're impressed up to coated the separation land and rename it. Now, bring the status bar on top and everything looks much better now. Here in the last list 7. Part 2: The Sliders: a major part of to start screen at this laters, which let you provide information so that they live off. The consumption can be calculated, so let's go to our document now and at them. First thing to do is to add to the labor for the changes later. LoPresti enter gender, but the phone says every Joe's 21 pixels and for the way it poured my little anecdote. Agree it. First, I went to his control key and place it on 32 pixels from the left. Because we have an eight bigly grid. It was a movie tonic. Keep it with the arrow keys. Let's go for the values which are F for female. Duplicate it. Did you read and I m for male Select pose Changed regular enough and the phone test of 30 pixels. Let's go for the circle, which determines that female is selected. So pre cell Joyce circle with the size off for the eight picks Lis Atlanta, The grid. Move it over here. Answer that. You can see things better. We will had to greet again. Now I land posed the Descente and change to Carla, the Karlovy of Defense, earlier which is this blue? But it certainly will go for White. And now a lamb pose of these values To the top. It would be a little bit, Yeah, and should be 60% capacity now A landed his gender and the first slightest ready Now every group and renamed the latest in the players list. So hold on command and select All off them Comanche Group them are to rename them toe agenda and moved him down in the hierarchy of the latest list the heart art, and tracked this one down to make co pay off this letter. Her name it in the layers list toe age? Or is that the labor Valeo beholding command and making it apple cake. I don't need to dissemble anymore, but you want to change this value to the Israelis to 22 for a space and determined three. Do for six and move over here. Said it 24th in the middle and change to Carla these values to it. I teach failures toe, but now the agentur text failures to overlay age other. So we want to achieve a special effect, This one here so that the text layer fades in from Cedar Transparency 200 Close again to Syria. Transparency. We will do this with the sole court are from ask. But first, let's decrease to correct this pacing against it go to minus one. Wolf it here again and for the F A mask that's pretty are make a rectangle jacket from here or over here. Move it below their text layer maker. I take select uses mask and change it to another from ask in the menu bar. Now we will change the solid field to create and feel the corridor mehra. But what mailers is therefore Valeo but first changed the start point to hear, because the greater should start here and and here and for the first point, let's go to syrup percent transparency, or is the foot here and point It's called zero, and in the middle the transparency could be 800%. That said another point with a double click and changed his 8000.0.100 percent. And as you conceive, even ask Radiant, which started zero because 200% and goes to Syria again. It's just a chest, this text layer and move it a little bit to the right with the Circe and the mass collected Did. Nothing is covered. Why service to its funds here and also duplicate this Slatter with art to get through the weight? Slater was the Move it down in the Cherokee and rename it to wait, What is a moved a H Slatter town in between? And for these values, Bill, choose 77 78 with a metal 1 39 And for the last one, do you want has changed to labour or is it a wait? And this one is ready so far. But what you still needed to is to add to the unit with Katie in the middle, which stands for kilograms. Sell it to me, making new clear with Oh, which party size off 70 pictures. We'll get over here, give it a wide field and Hippolyta This case and altered Boehner was to say itself, put three. And for the Karla off this pointer that's used Carla picker with Control Z and take Carla from here. It's just at the text. Richard, these cases k g The changes to Carla we have defined earlier this blue here with the size off 10 the rate is already aboard, which is okay, Move it. Here is to keep up to mouth with command 0 200% into Tony's. Always already. Let's continue with the daily caller setting now, which shows your water needs based on two settings you provided above. So picking our file. Duplicate this weights later, but this time let's breast commodity duplicate it, move it down. We name it in the layers list. This command are to take over or the changed to labour the Daily Gower Santa and delete all the elements. We don't need any more in the layers list, which is to circle the K G A mask and the outer circle. Suppress backspace and changed this one to the calculated amount. 2500 milliliters. Move it to the Red Cherokee's and beholding shift and give it 70% capacity of seven. Now let's go to the plus and minus symbols, which let you increase and decrease if water needs. For example, if you're exercising, I just want to drink more these day. First, let's create a circular is old about the size of sandy picks list so we can use their inspector to make it exactly DSS. If it a light field and create the man December with simple rectangle. The bracing our in the waking one that's about 9.3 pixels. Again, we can use the inspector but jumping into the position field with art up insects into the size field. We stop and inserting nine and three here if it a blow from here with the Karla picker in the land into this circle, holding her mont and shift selecting poles and using the linemen directions to Lenox horizontally and where the curry the group is a come with Comanche and you name it to minus . We will always use it as a base for the blasts. Ember to Trust duplicated with command T Move it over here. Duplicate this man December, Mr Monti, Hold Down Command to go into rotate mode organ shift for 15 degrees steps and comparing these two lines to make a classic um, Mr Putin Operations and union rename it two plus the last list its commander are, and the second is always a radio plus. Let's move. Two seconds into their daily Gore group. Moved on a little bit out. I just wanted to slip it in about 200% nice and move. It will be tried with the other elements. Today. Everything is Celent nicely and too delicate orders or so ready. The last element to it for the start screen is the Patin, which later confirmed the settings and coterie consumption screen. But its purpose. Let's use to create again. So show it with controlled cheap, go to the around the rectangle, tour with you and draw a button, which starts from 32 pixels from the left, which is very easy. This a great because we have eight pixel grid cells, so we have four cells to start from in order to be right Toys R 32 pixels, which is always a four great sales to release it and move it up eight pixels and give you the white field for the text, which is that have chosen in light blue. That was at this Carl into a document Carlos, and for the size that Joe's 26 pixels and was a weight off Black have chosen is basing of two pixels to keep order. Correct is more room to breath tats to be it again so that we can see everything clearly selected extricated with the baton to land everything. Use the land that once again the mandatory Santilli and where the Curly and moved to text a little bit up. And the patent looks good so far, what we will always to do for the partners to create the same person that we can reuse it on other screens. So select both of these elements grouped with command G. Rename it to parking, move it out of this group where it belongs. Far down in the Cherokee, make a right kick and select creates ember. But December we will choose a special setting for the patent text. So, like the patent next and in the inspector, choose excludes textually from chamber, which make sure that it can change the text independently from the simple itself. So, for example, if you're yet another instance off this button and change its text, for example, let's go, then the other instance off the button isn't affected bait, but still the other properties, for example, to feel gets drilled down toward the other instances off the same button. Now let's send it of you off the start screen Command three. In the land of the elements to Tikrit. So show it again. Yes, you can see the upper streets. Letters are already aligned critical as the basement off the text alliance to the create lines into spacing. In between this Reese lattices, even but the daily caller picker. Still, it's him back because here we have a spacing off a partick. Great units off what the eight pixels, which is always the same here but between why it and daily go over, we have much more, which is about 64 pixels or eight. Create units for Let's recreate this pacing here and moved to Delic or pick up until it Majesty's basing, which looks apart, right. While the create is a pretty great way to align elements we could have Forrester used to. Smart gets so without a great Just Elect district, for example, Breast Sergeant Command to drill into the group. And let's see your spacing is 37 pixels, which is always to be the same here. Hey, it's the date baseless, and he of yours have to send same spacing now, which is always a 37 picks is. But in the end, it's your association, which one truth? Because post bring good results. With these adjustments, everything looks fine and the start screen is ready in the next media will continue with the consumption screen, so see you soon. 8. Part 1: Create the Bottle: I m very compact mass catch cause in thesis, creative will take care about the consumption screen, which always exist a class project. So after finished the readers about the screen dried adapted, he was a different kind of portal. Take another background image or use another radiant of background. Carlos, Not let me tell you how I created consumption screen the first Quebec to our fail. The easiest way would be to duplicate the start screen page with a right click intellect, duplicate page and after that, delete or the elements you don't need. But to show how we can use the same Bruce we have already created will take another approach. So let's add another page first by clicking on the blast taken, that's name it consumptions cream and at the new output with A from the Presets Select iPhone five profess and oyster name and his deputy pick to a conception screen. Now let's at our first timber, so go to insert. Same brisk And the first thing is to read the background image. Okay, can it? And here we have our Stember we've created earlier. The next thing to it is the data's buff used element I can't move this one up. And the last timber threat, Mr Barton. Delaying it. Let's use to create again. Move it down and place it. 32 pictures from the bottom, which is fork ready on its renamed to drink with a double click and order symbols. I in place Now. Things we selected excludes textually from same Brill here, the outer Partner. The start screen wasn't affected. Baddest exchange. Let's had agreed again and start with the main element off the screen. The bottle. Instead of recreating it from memory, it will go to Google and search for references image so you could eat up into the carafe and take some inspiration here. Our bottles likes Amber and chose one their own actuals in the end, just this month. So let's Corbett his image and indeed it here. Now let's try to trace it, but starting Mrs in directing suppress our It's Draw one, which is about the size of the bottle for the backroom. Carla This true? Let's choose Red within capacity of 50% so that we can actually see the portal in the background. The first thing that door is to go into director point mode. So press send on the key, but and now it into 10 points for a split into two points here and the 2nd 1 here and the land and pose to the top that they have the same precision already entered the other ones here because the bottle gets in the area first and taken, or is a land them do Jonah and moved these two in Let's use the keeper, said Bacon. Count the peaks lists removed the point in so per shift to go 10 pixels in 20 pixels in it looks good. Do the same for here. 10 pixels, 20 pixels and also moved these ones in with the Keep it that we can always account the pixels that's moved in 10 20 30 which was a took schooled I said it. Same here on 23 and the public's already petticoat just let adept the curves off the points so that they fit the bottle shape. For the first point. Muftis went up so that their calf get a little bit bigger. So the same one same for these months so that we have to say infestation for this vector point handle will cope. It Abi precision and intended here that it has the same well you always are that these caves here, let's make this one of a little bitch water and change it as a metric so that one point isn't affected if you move the other point so we can independently. Most is pointed down and the outer point stays varies. Let's do the same here. Changed to asymmetric. Moved this little bit up. That's the rich coordinates we have here. That's co pay it again. Incident. Here there is a do the same for the upper point. If the bottle has a curved bottom here, that's at another point writing a beetle. So hold on, art. To get the point in the exact middle, make the care if a little bit bigger, but dragging this point out and moved two points down with the Iraqis, there is a move teas to a little bit down. Did we can always go into the care of here to keep it. Instead, a point in the middle helping come on the end, make the kerf a little bit bigger by dragging Director Point handles out and move it up is to keep it again is to concede to recite looks pretty nice or so we started from a simple rectangle and then added a few points and modified them. So most of the time you don't need to draw a complex vector but can start from a simple shape. The last thing we want to take for the bottle is its size. So first select or the right water points with this election and moved him out beholding shift in 10 pixels steps to bring orders points here in line again so that they have the same spacing. Select him or and you statist repute. I can hear the same for the bottom. Make a selection 43 points breast on the distribute Aiken and order points after sames basing. Not if the point boat to escape make that both this morning about height off. To this extent, we moved to different image. Move to bottle up a bit, sent it, and the shape itself is ready. Now let's change to the extra Carless off the partner. So instead of Fred, which was by it with a capacity off 90% and we always had duplicates this shape, it's command T. And instead of a field we choose it brought up. Where is he writes, Pull it up. It's a sickness of three picks list and and in this ate up Mr Blue collar from earlier and the player 40 picks Lis and the size of Sierra and the capacity 60%. So there's the bottle looks as if it was cut, and you see a cross section of it to give the portal even more tips. That's associated report, um, to press often ellipse drag A T f Chrissy s it about Huntington 40 at 20 if give it if black Phil and on a per city off, 20% depressing to move it down a little bit to center to the bottle and give it a player of four pixels. And we have in that strata at the bottom of two bottles. The portal itself is ready enough. So let's declare portable the lever, which actually consists of three levers to imitate moving water. They wanted to front the 2nd 1 in the middle and the largest one in the bag 9. Part 2: The Water Level: after we have finished the portal in the last video that stick a part about the lever. Now for this purpose, let's duplicate the bottle shape began for selected Preska, Manti, Te'o duplicated and two Main so that we can better see what we're working on now into direct the point mode. And since the water levels should be about at 30% we let two points here ready for the left would be at the 1st 1 here at a second on here. Select pose to bring it to the same height with the alignment Aiken's and remove their upper points to get the head off the water. Never Philip List approved from earlier and always saw over late with radiant to give it some streeter Mentioner feeling first leaf direct Appoint moat with escape. Go to the fields again and click on the plus. I come the correctable feel the greatest already selected, So let's change its point for the forest point. We need black or is it for the sake? Um, point Regis aerated left it here. We need 100% opacity and for this that point, I mean it's 0% capacity and the great intra drawn from the top, left the department right. This just means to carnival a Miss Escape and 40 blending true soft light so that the plague plans Mr Blue and gives a nice book. Radiant. Not it's the key after a bottle that retails, so enter the point. Moved again with Enter. Select this point here and since we don't need a care if it or here go to their disconnected type off factor point note and drag. Oracle handles here to get a straight edge for this one will always a select is connected and moved this week to handle or the way down so that we get the step of kerf. The first lever is ready with this, so let's duplicate it to get the second lever first leave depict a point. Motus escape Preska, Monty again the duplicated and move this labor below the other one 42nd layer. We didn't meet and created overlay, so let's drag it hours to remove it. The field. Karloff blue. It's OK, but the opacity should be at 44%. Let's entered Israeli air here and always a change. Direct the point of this labor that we compare a seat, so enter the point mode again is enter and like this point here, move it up a little bit. That second see deliver. It's visible now and in this case will always a modifier. The second, like the point so that could weaken it, took it. Director hands again. Attention is connected again. Moved its on lock down a little bit in this one to the left side, they would lead to just this one that it's a little bit more. And the second, What a lever. Isa looks cold for dessert, for the labour will always make a copy, But first, let's leave to wake up and notice. Escape. Press commodity. Move it down in the layers. Lift for the feeling. I will choose another blue just in this case and let the proofreading cope it from another fell and Internet. And again, let's change the vector points to breath. Escape toe had the car globally present for director point moat. That's drag this one up a little bit. Despont to the left Leave Director point Motives Escape and gave it 100% opacity with zero that we concede that the last thing to do for the what lever is to give the top most one and opacity of about 63% so that the other two levers can shine through and the text Willette now can be seen. So let's add a text layer with tea and 30% he says. It's already okay. It's 54 pictures, but the percentage thing should be raised. Mourner So, and it takes that it moat with a top kick like this one here and Goto 18 pixels for the characters. Basing F chose ministry so that the hepatitis feeling relieved. The X rated movies escape most a text here and place it in between the certain the second layer so that it looks as if it would float into Vota, moved it in, pick the red little pit bottom and so that the percentage saying doesn't stick so much to the zero. Normalized to spacing here and in the zero, and we have an escape here. Please take my let's escape. I don't think the second text layer suppress D again and the 715 of 2500 milliliters, but its size. We really chose 11 pictures the way it should be a trigger enough. And let's reset the spacing to zero to a T forward value. This text layer should sit in between the first and the second. What a lever and should be at the party Santa if they want to move it here and it bit up and post if the text layers look good. If you come out 200% Miss Command zero and have a look at that. Since you didn't care about the latest list of far we named the Layers for easy recognition , the first Elect overlays off the bottle. Best Comanche for group her name. It's the bottle press enter to drill into the group. They thought most layer pretty pretty names, too. Butler Board. Uh, he's on. It's butler shape. Let's group this one's do that. What deliver There is a Santa Open. The latest person. This one is the first. What deliver to rename it was commit arto What, uh, there were one dressed up to kill that the second will deliver. Name it Water Lever to stop again. What the lever three and the last thing really rename it the shadow to rename it to. But shadow. Now it's much easier to find Leah's later 10. Part 3: The Mini-Statistics: Hey, go to see you again In this reader will take the minute statistics, which show story of water consumption off the last days for a quick overview. So, back in our file, let's create directing for the first part, suppress our jump to the inspector with our top. So this ice field and 40 with and 11 pixels and for the height 27 picks is now to a more Dari into this path with command, too. Tell me a little bit out this command minus to get a good overview and change to feel of two par to the lead. PLO refused earlier. Now I will show you a nifty trick to get to the past off the other day's work down art to make a copy off this path and drag it to the right. This is basing off About five picks is now breath command. Steam are cheaper times get copious with the exact same spacing for a little bit of variation. Let's change the head off the different path that used to keep it for this purpose. Suppress command and use the arrow key up to make the path lower. This one step to the next in the layers list with Shift up, he was command again. Make this a little bit more love up to the next. Make this even smarter. Next one. Make this bigger. Next one. Lyft. It's like this. And for the last one, it's always I make. It creates more. Since the last two past represent days in the future, we will change the capacity to 60%. Because, let's imagine, today's Friday and this Saturday and Sunday. I let the land or the pals report, um so select off them. Don't command the shift Used element icons to land in the report for the bottom line of the statistics Make another right, Thank you. Take it. Here was he used inspector again to make it a height off on pixel and replicate its land for another line. Moved this one after to keep up and this'll and represents the 100% land 50 buyers below it . You have drinking less than your consumption. Gore defeat the profit. You have drank more anti state. Put this land. We don't need a solid one, but attached land. Luckily, it's quite easy to make something like that in sketch First change from the field. If it is white, Karloff and go to the key, I can hear. But you can make a dash line for the dish, that center, too. And for the camp three, which means that the dish is two units, right, and the cape in between Israel units compared to the Dutch wife in these over late, or is it possible to make started and a roast for lines? As it can see? Unfortunately, they are pretty limited because the size of their errors can't be changed. Lets you set this click somewhere else. To dismiss this over left and for the border give near capacity 50% and the same for the feel of spot on land or change it to 50%. The pressing five for the day slipped at another text layer, suppressed E, and that mandate used to you friends desisted Friday, Saturday, Sunday, dismissing his command and tough give it a white car. Love and foot is basing. It's just to pick lists, give it assays off 10 pixels and await semi boat. Most majestic. Keep it over here, and at that, the spacing in between the days to match the bus so into some spaces. First, let's change the landing to left. It's not a space here next month. Maybe let's increases basing a little bit, suppress command A to select everything and a tepid spacing so that the days better fit to bus Santa and and again. And this looks very good. The last thing here, a straight asserted for the current day, which is Friday to place often over or contrived to get a circuit drink one and adapted size was to keep what suppress command and use the arrow keys to recess. The circuit 11 picks is I'm roof it below them. Text layer Inter Players list give you the right field, and for this they hear selected with a double click and used to Carla Pickle with control. See, get the Carla from Denia Press Escape to go out of the text layer moved to Circe by selecting it. Stop. It's the era Keys and the Minister districts looks fine. If it's some out again, that's Group Inter name delays in the latest list. First in order, so select all of them. But Comanche coming are to rename them tow minutes. This six drill into the group with Enter moved the upper land that up or is it a bottomland ? The text into selected day. The name was elected there, and I think that would be enough as the rest itself explaining. 11. Part 4: Create two Icons: they are still three elements remaining at the consumption screen to say things economic, political, back to the start screen, the meaning logo and the remainder. Hicham, which led to open the remainder overlay. So taking our file, let's first aimed at the screen with Command three and then start participating Zaken, or so we could use a prima taken here. Let's tread ourselves the base for deciding Zaken, it's the simplest are. So go to insert shape star and insert. One, which decides off about 27 picks, is in The Inspector changed your radius to 58% and the points to eight. And instead of a field that's us, it border off. Why it recent the interpretation and the sickness of three. Now to me do the staff with command to to the drinking better back on the ICANN and always so let's at the Syracuse So press. I want to keep up and draw one Mr Size of seven pixels. Drink it. I would do the star shape in ST eight with the help of this markets. To combine these two shapes and create a quick polling operation, just direct the circle shape to the star shape in the layers list, but instead off a unit collaboration. We trust none here so that both of the Aikens take on the same Porter took it hard edges for the star coterie, stating seconds off the border and change to the list I can hear at the joints Now. Even used a circuit mask toe kept the star point even more so I can press. I want to keep what Troy circling with the size of 25 pixels and drake it over the stuff to retain the toe there. The things that come now moved there 30 up in the latest list and make a right click and select mask. Now we just need to remove to feel of to mask and this conceive used to mask toe cap off the start points even more. Finally, let's complain every single group to select the mask and the Starship Press command chief that's coming out. Rename it and name it. Sit. Thinks that come and justice action. The second is ready Now let's continue. Mr Remained. I can felt amount again. His command zero stand at the screen, Miss Command three and Troy. Simple Circle is old with the size of 16 picks is thesis the pace off a remand. I can come into this circulars command, too. Always a change from my feel the white border, this time with an intact position but always obeys the secrets of three to give it an even look throughout. What different Aiken's now let's ended the Victor Point Moti center so that they can changed in the riddle points of the shape Trust in the two new points one here and one here and moved him down to date. They align with the other door Barnes. You can see that you can use to smart cuts for this one in the red lines twice a year now select post of these points and change the points type that is connected so that we can change the rector Point handles into really, really from each other. Now move this point up a little bit, and then or is it with these fun up and in and Kobe the Y, position off this handler terrific and transfer it to the other point. So select this point here and into the white precision here. Now let's use to keep it again so that we can move the points out by a certain distance so they like this one. Move it out. Better pixels. Mr. Keep What? 12? Or is it just the right every key 12 and moved to this point on a little bit to get a nice care of Why so notch Take care of itself and things look good. Now we just need toe select all of these three points moved in dollars to keep out so that the bell gets higher and the basic shape off the palace radio. Now let's enter to the other two elements off the bell for us to handle at the top so into the Nahda circuit. So draw one Mr Size of five pixels and then it here if we did a little bit to the left of a holding art and using the arrow keys to go toe 0.5 and change to feel right into the not a circuit at the bottom for the caper this time is decides off a big list or is it? Move it down and learning to dissent off the bell and change its field y it. And to get a cutout shape, we will first duplicate the pale shape, suppress command. T moved to ship down a little bit with the Iraqis selected both Mr Clip at the bottom. And now take unsub strict for the poor in operation. Now, as you can see, the pale shape has been cut away from the surgery. Just moved his companionship a little bit up in the layers list. Moved this layup. Select all of to three shapes that belonged to Pale and make a new group with Comanche rename it to remained. I can and this likeness also radio. Now let me tell you a little bit of particle in operation and just made about this one here because when you sub strict one shape from another the water in which the shapes are the latest list mirrors since the bell Econ isn't top off the surgery, The pale I could get cut away from the circuit If there what? I would be different if they say being top, the circuit will be cut away from the pale. So where it's happened, I on the water off the layers and layers list. If things don't look as you might expect them, let's tomorrow with command Sierra attended the art, but and we can take care off the mini logo. A big toe are start screen. Select the logo. Copy it. Go back to the consumption screen incident here, move it up a little bit and delete. Or the elements from the logo we don't need and select or live elements. Check these ones here. Let us and press delete like the logo itself moving to the middle to keep up and with down and used to scale option to scale it down to share the pictures head and the meaning local or is it Looks good. Now I haven't show you a little trick so that he can barely imagine how your airport looking an actual device. There's a huge device get from Facebook, which contains different devices, both their phones and hundreds, which is this one here in this case there from five years in the black Liberation was elected in co pay. It got picked our file instead, it move it out off there. I want to put and down so that it's below this out. But it's about a little bit and used a scale overlay recited to 50% so that benefits our screen now if it to mean you can see how our airport look on an X ray device, in this case, an iPhone. But for the moment, we don't need this device facilitated with command shift in age, the consumption screen is ready now, which always means that you have everything you need to know for your class project. I would love to see your takes in the project gallery. And if you have any question about the screen, a sketch just posted in the community and they would get the ends it in the next video. Let's take care party overlays, which it is to the drink overlay and the remainder overlay. The 1st 1 is shown. If you press on the drink, pardon and the 2nd 1 is shown. If you press on the remainder, I can hear. So see you soon. In the next video 12. The Drink Overlay: Hey, and welcome back to my Advanced Age course for the drink overlay. Before we can start with it, we need to prepare a few things. The first thing is to make a simple, out of to screen itself that we can use to dissipate crown for the overlays. With this, I will always to show you how you can make nested timbers, which isn't possible body forward but can be achieved with a little drink. So first, remove the symbols for now. So select December, make a red click and selected that from chamber or suitors for the pardon and the background. Now select or delays in the output and make a group out. If it for the same birth. So pressed Comanche, you name it to consumption screen and make a right kick. Intellect creates Ember. The name is okay for December present tough. And now let's re apply the same breath using the screen expanse the group for December Select the Status path, and on the right you can reapply the same birth. So select status bar here or as the Tories for the pardon and the background. Now we have December and we've seen it. We have other nested chambers. So if you change something within here now or the other instances off December get changed now, not it's creating new paid for the overlays To expand the pages. Click on the plus second name it overlays and let into the newly created seem before the consumption screen. So kowtow, inset, same birth consumption screen. And here we have our newly created instance off December. Now we just need to enclose it with an output, and there's a hand trick for that. So press a for an output and into inspector truth, the first option, which create an output that is wrapped around the current election. So the leg didn't BF Nur, but which we re name toe overlays. Now we can move on Mr Background off the overlay. But first, let's duplicate the Parton so hard on command to trail into the group breath escape to go to the main group of to Patton, breath commanded, duplicated and move it up for later. Now let's create directing for the background. The press are that unimportant. Left go all the way up until it is a head off. About 134 big clues if the white field and move it out of this group and creating new group with the name off, think overlay or isn't moved. The new pardoning that this layer group and for the background going to direct the point Moti center and beholding command incident you one point in the exact middle. So Kate here move it up to about 50 pixels to first achieved to get them pixels and tending out of five pixels on 2345 Make on top a click to remove the calf and another double click to smooth the calf again. Now lift elected point mode with escape and into the shade for this overlay so that it looks as if it would float over the screen to go to shadows. But it Carla, Let's choose our dark blue but make it weight, aka Press Escape This Mr Carl overly for the values for X. Let's leave it zero for why? Let's take minus eight state. The shadow gets up, but it 15 40 spread three so that the shadow gets even bigger. Now let's cut out the part in shape from the background player so selective Patton and move it down to a new position. Now treating the department beholding command intellect, ing its background, duplicate it and defeat it brother. So you can deport us. The car doesn't made up, but let's just buy it for devastation. That's true outset and for the sickness. Five. Now making your layer out of this border. So go to layer. Convert to our lands for this border. Delete in the shape, moved out the shape right above the background layer. Select balls and make a substrate Berlin operation, which cultivate a pick apart in shape from the bacon layer. The first element relate. Now it's later to choose how much you want to drink. The easiest way is to copy the age Slater from the start screen to cope with this one compacted over this and incident here. Move it down First, I will rename it toe amounts Later and delete the labor. Since we don't need anymore, it's this one here now selected text layer with a command kick and change to Carla to the dock pool. We've already ate it earlier. Now I changed the values to common class sizes, so press command and agitated text layer and let's start this 100 with four spaces in between 150 200 apartment 50 and lastly, 331st comment. Enter to leave to texted it moat and move this whole text later. The center delighted Mrs Markets. Let's make the mask a little bit bigger so that you can see more off the text. Baylor's first moving to the center and press hard to resize to lay from the middle. So it's big enough that resize it to the edges of the output. And now make around break thinking for the currently selected value suppress you make on Mr Size off about 70 before 30. Let's go to the inspector for more process input. Stop this ice field and 64 for the height 38 changed the field. Carla Oyster to the dark blue. Now we need to change the Karla off. This middle text really divides. Then we can see it again. Go here and change the radius off this election layer. Go all the way up for the radios that it has perfectly rounded corners and let's move a little bit so that the text layers sent it. I always add to the unit like on the start screen. So go back to the start screen and select these one here. Order it down to say a quick and text select toes Preska, Monty like opiate kopek, toe overlays, page incident here, move it down that it can be seen again in Mr Carlos. So changed afford to buy it and the field But it I could do their story. Always need to change that They call it a white The text layer itself to him l familiar. Laters. And now we have a nice unit labor for this radio to safety Selected amount from this later . It's a favorite that's at the heart economic as the base you will use an over suppress Oh, drink one change its size 2017 and inspector two more divided into the over his command to so that you can better Where can it presented to Cohen? The direct appointment Change the type of this lower 20.2 straight to get a hard edge change to step off the upper point Do these connected more fitted Help it down and move its handle up He set up And this one up Maybe there's a little bit down now leave the vector point Motus escape changed the car at the red, and if it come out 200% with command zero or I heart symbol is ready. I just move it down. Yes, make the mask off this lattice more enough, So press are to resize it from the center. Make it a little bit smarter. Select a slate educator with the heart. Move them up close. Now let's at the list element of the overlay at deep text to show that create that can breath L for Lion and started 60 pixels from the left Horgan chief to get the straight land and and it was 16 pixels from the right edge at the Great again. Give it a black Carla. It's an opacity of 15%. Moved the land up just a rookie, and it's indexed with Steve. Whichever ready cope. It changed the land into Santa Recess to text layer. To get to land, Text Santis take straight to the output, move it up or is a select lane move post up moved to text a little bit down again and changed capacity to 50 with five. And with this, we finished to drink overlay 13. The Reminder Overlay: for the second overlay. The remainder will A we will use to drink other later pace. So picking our file, select the train cover lay duplicated with commodity renaming toe remind overlay, anti to drink overlay because we don't need it. For now, the press command shift, age and selector meant overly again. Flip it horizontally with the Spartan here leading to the very top still animate I can and moving 23 pixels down. The incident is value here so that it sits just below the stairs part. Now we select, or the element from the former drink over labour don't eat anymore, which is the text lion and the heart chamber and deleted. Or is it this late enough? And the text off the button. But since you don't want to affect the other pardons, we first need to unlinked December so selective Parton make a right kick and to let the dead from chamber. Now we can delete districts for the pardon for the part in shape precise. It toe 48 pixels that it is the same weeds. If the Hyatt and we get a circle Atlantic descent off the output and it's the care about the cattle shape off the background player for selected, expanded layer group to asked to leave the cathode shape duplicate. The shape of department is commodity. Move it or the way down to the second layer scale it size 2 58 pixels so that it pick it in the pattern shape, like the post with the background layer and make a substrate pulling operation. Now, every half in that is scattered shape in the form of departing again for the check mark. Icon of department selected pardon shape again the more the Iranian was command to to about one step is command manners and into the first drink. Thank you, but the size shoes 15 5 pixels and for the Karla district bred blue from earlier, now duplicated shape with commodity rotated intense, picked up in 90 degrees, recited to await off 24 pixels selected together with the other rectangle and they landed toe there, right in the department. No one is elected. Sigh Contract. Thanking You noticed that it has tasted my values, posting the X and Y field so we can go to layer around two pickles and we get four in ditches again. We need to move on and live it up electric. It was the other rectangle. Make a group renaming toe. I come and irritated there, man. It's 35 degrees. Just move it up. Typically, right. So they send it a department and I check Mark Agnes. Ready? Now tum out again this command zero and it's dick gear off the out elements off the remainder overlay first things in your text layer so entered. One based the text f already prepared. Make it drag you enough with a size off a three. Fix this and change its Carla toe. A very dark blue. No resize it. Get two lines of text. Planet of the Create 60 picks is from the left, Hates the critic and and into the radio button to switch this remainder on off. First thing is to make a wreck. Thank you. Recited toe 56 by 28 pixels. If the radius letter would ever read to get rounded corners recesses of the half of the other great thing we can do this fat in the input fit change to Carla, to the Pride Blue entered elective point POTUS and tough intellect. The right most points. We can change the corner. Baylor's Order it down again. The gets great Agencia Leave them equipment markets escape. Tell me a little bit selected, say, contracting again instead of it feeling real. Change a porter. A great border, but a little bit later and at the two text radius suppressed E at the 1st 1 which is on gift divide carnal. Move it a path. Direct banking. The layers list. Make it boat and the size off 11 pixels duplicated. Move it to the right change to Carla. Very tacky Blue again. Give it a new capacity off 15 embracing five and change it to Off, which is the second part of the radio. Pardon. Now move to the left with the arrow keys, sent it to the vet area. Or is the san today on ex Labour and Group or the element of the radio button? Takeda into a group Perfect. All of them in the latest list. Press command chief. Rename it to Radio Button, used to great again to land it to 16 pixels on the right. Selected together with the text land opposed to the medical center, I had to create again and storm out again with comet era so that we can make the overlay itself smaller elected background player going to the vagabond boat again. So select or this free off the slower points moved him up by 12345 60 pixels. I stood the same for the cattle shape. 123456 and departing itself. 123456 Now let's move to text in the radio button up a little bit and the remainder overlay . So is already nice job Well done to see Post A, Willis said. Beside, we could create a second out but now are part of a perfect to make it orations off the sign or show different states that, beside pages on the other side, let you create a different space for every different screen off your paper upset. So to placate this out, But with commodity and this output, let's leave. Two remained over live and then the out out. But they told the drink overlay, So I shall wait with command shift itch height. The remainder will A in the art elements that belonged to it both both here and we can see both of the over listing the four Gloria the last screening our water consumption IP based Yvonne for the statistics between the ACL in the next video, so see you soon. 14. Part 1: The Title and Close icon: Hey and welcome to the last green. A fire statistics thes overly opens when you tape on the minute statistics in the consumption screen, and they chose you a much of drunk in the last days in more detail for the statistics stream. First, let's at the new page. So first show or the pages by clicking on this a come then at the new page for taking on the blasts Ember. Then they aim it. That is, six overly now into December for the consumption screen before ready, created earlier and then, just like before, per se for new output and taken around election to get the new output is exactly the dimensions Off December, the first element will create. Now it's the dark background, so a direct thanking it doesn't make a head start on topic. It is because you really dated now. So jump to the inspector. This arched up the devastation and the zero or suffer y zero, and for the size 100% that was before they had 100%. As you can see, you get to perfectly align Drake Tanking, which starting it up left and has a full head and forwards for a nice effect. We will choose a radio radiant instead of solid feel to click on the second. Here. It's about a little patriotic in Adaptec. Radiant First moved the sent off disc Radiant, which is this one to descend off the output, then make the great in detail smaller about the head off the screen. Then foot is out of point. It used a black recent capacity of 60% and for the English stop well or to use a black. But it's 50% capacity. Now it's Dominican, 200% command zero and go out of the car level. Labor, taking enemy on the canvas for the over there. Tell if you'll create another rectangle. So Drake one changes Carla dry it and show the creatives control G, the laid out in the page from the left edge. It should be 24 between about which means three great units from the right away. So from the top you need 88 pixels. But this time it easier incident Israeli into the right field. And for the high, it will use the mathematically capabilities of Sketch the head. If the whole screen is 5 68 and he wanted to be 88. Pictures on the top fell. That's obstruct idiot pixels and 88 picks is from the bottom. So where's the lists? Obstruct in outer 88 pixels and now before extended, which is aided pictures on the top 24 from the left and the right and 88 from the bottom. From now, it'll be Tikrit anymore, So headed again. But we want tohave apart, the radius of four pitchers funded by its background. The next element is today Love the pasty for another text layer, and, uh, that this six best comment Antah to go out after text did mount for the Karlovy Truth, the bright blue from earlier for the size 36 pixels for the wait. Lie it and let's always reset the characters basing to Ciro to get the biggest basing between the characters off the text, I landed to the scent of the output and the result of the great Let's move it up a little bit for duty. It's on the second line here and converted to textile a text status, basically the same as December, but it just effects the styling off a text layer so it, Inspector. Click on this area here, select creating text cell that leaves the name like it is. And now we have created the new textile. So whenever we need exactly the stakes in another part of the screen, we can select it here and get the same styling that's inserting extra cystic still in the Elements page for later reference. So, for example, name it, overlay that love and for the textile to the one you've just created. Now, whenever we change this tailing off this textile, it always effects the other instances off the stakes cell, for example, changed to Carla to read and go back to our statistics over the screen. You see, they don't always get changed here, so recited to blue. And since this is the page for the elements we used throughout our Eloisa instead are simple for the consumption stream Here, wolf it down. And now the FNS, our fuel for the elements and the simplest refused to find our way up. But narco picked up 36 bitch to closer overlay. We would create a close. I cannot, which consists of two rounded rectangles. So create one with you, make it decides off 21 based Free to Margarines Command to work so that we compared it. Reckon it changed the car that black and replicate this first line, not Draco online into another factory. People in operation in the Layers list rotated this land beholding commander in chief to get 15 degree steps. Name it. Does that come rotated This whole I compare 45 degrees, so again hurt command and shift and change the opacity of this whole group to 50% automatic animals command zero, and the land is I come to a great again. Move it to right until it is is basing 16 pixels from the right edge of death by it overlay . Now crew parties elements into new group in the last list and or is a name it statistics that's ended the output against common three and had to grit. Now let's create the boxes for each day From now. We'll just create our own parks but will duplicated later with special feature of sketch. So let's create around the direct any with you. Make it two sides off 100 entrails by 96 Inspector, if the right field and the porter off black with a capacity of 15% and the lender grid so moving left. And it has 16 pictures from the left Porter and until its upper line, it's on a great line and test the same spacing. Practice City six from Utopia. I had to quit again. I've given this box of that background so that it's easier to selected on the candles because without the background, you would always need to creak exactly on the border. The most interesting part of the screen is the Round Progress Bar, which I first seen in the tutorial Pimento, from which you can see the Eurail now in the screen, join me in my next video to create such a part. 15. Part 2: The Round Progress Bars: Why? So it looks quite complicated. You can create it writing sketch and always what we could say. Things on the fly, The base off the front broke. A spa is the same person. Okay, so make one with decides off 48 48 pictures. That is very live here, that if you feel it's true, sip water. Or is your Blakeman within a pair City of eight and a Santa border with a secret? Six. This is the background off the ring for during a terror to pick a tissue. Okay with Come on, T give it a nice orange Carla. It's in the Bay City of 100% and click on this deacon here to change the border settings. The secret off this brokers bar less in the fish and the gap settings for the game entered the diameter off the circuit, which is 48 pixels and multiplied but mathematically constant by just this one here and now . If increase the dash failure by holding shift to get 10 pickle steps, you can see how the ring grows on the canvas. Finally, that said, the ants around it, which is the middle like, um, and today to the circle horizontally. Maybe. Let's make the ring and little bits. Morelia because minute, 80% for the Progress bar here and the first progress bias Ready Natural Springs on board. In the delays list, Select Post Rings group them their name. Dental Chris Bus. The next one is too big and select. Impose to make another group in your limit box. Now stand at this Progress bar, but it books and move it up a little bit. Or is that the text for the Progress Party, which is 80% with the size of 20 peaks, lists a way to forward and the Carla off a very dark blue based on this card here to trick it to attacker blue and add to the Carla and take a percentage saying of only to be on the next line. So make a land break you or is it should be much smaller with the size of 10 pixels, and it should be much closer to the number. So let's change the land hat off this whole text, decrease it until the percentage saying it's very close to the number. The next text layer is to tell you, which is Friday. Second, the second should be regular, and this text should be here. Just a path. The playground of the box with a tap a little bit. And this one looks nice. Now Move everything to the box group. Or is that a failure for the bro? Crisper And as I told you before, for the other boxes will use a special features kitsch so selected parks and go to arrange . Like great. This feature allows you to lay out an element in a certain amount off rows and columns. In our case, we need three rows. Two columns and it's basing of 16 picks is in between. Each were college horizontally, and now if you can make grit, you see that you affects the activity. Need two columns. She rose and ordered boxes for the other days for some variation. We relate that to the other days now, since the what is reverse Chronologically, this is so stiff family Sunday 28 or is the foot of the sandwiches? This one should be 100% and for this one, So I chose 90% to get 100% if it's just attacked the part options and increased the dish for the Karla. Let's choose a nice screen a little bit darker, but this one that take a Carla, which is in between Orange Queen. So let's take this one here. Do you have any sores at 18 Which is okay, let's make this in red because the consumption should be weighing more than 50% here, and this one is always it. 90%. So used to Carla Pekka to take the Carla from this ring here now increased. This bring the 90% this one 50%. It's fun, Always in 90%. It looks about right. Or is it? Let's bring subordinate delays list, so go up to the output Hold on Art week under these clothes drag. And if you open it again, you see that order layer groups got collapsed. Now moved him into the statistics overlay group. Everything looks way more organized now, the last elemental gone to 80 years, and that's fatal defect to indicate that they are and what they is. Two scores room to create a new rectangle, but you feel it jostling ingredient with the qualified for the first stop and capacity of Sierra just moved his wreck tanking to the top and the heroic if the letters list. So they cover sorted boxes for the second stop or so use that. But isn't it basically found? Percent and nothing moved this point. Philpet up You get a nice faded effect here with this last element. The statistics screen is ready and at the same time, we also finished Am Please join me Molest video for a goodbye and for them finding rare Tea Party course. I hope to see you soon. 16. Conclusion: waiting for the end of my kids course helped enjoyed it and then but based Sandy sexual your city study saying an amazing I would do this. After seeing a passport to the project, Kendari decided any patient but project the cast was catching general This posting into the community opinion from what great it's about. Sketch, restatement, little bit cage gypsum went wanting rocks catch.