How To Create App Icons in Affinity Designer

1. Introduction: welcome to how to create a flat design app. Icons in affinity. Designer. If you are here, then you probably would like to learn if in its designer, and have something to show for it at the end off the process. Because this course is all about practicality. Inside, you will find more than 15 many projects, and most of them are icons. But you will also learn how to design this smartphone markup and also this widget and some icons here at the top. As I said the bread and bought it off. The scores are these icons, so each section will be a different an icon, and you will learn how toe designed telephone messages, context, probe camera icons and also some system Vikings like Gmail, Google play gallery maps, themes, all those things. And then we will move on to creating, like custom application icons and going to be a TV application icon, a travel application, Aiken Food podcast and alarm clock, and each and every one off these many projects is supposed to teach you a bit of a different a skill set. Just so your knowledge about a faint to designer is full. And if you don't know how to use a fit into designer, I would advise you to take a look at my fundamentals. Indefinite designer, of course, because in this course we are not going to explaining everything. But we will move on straight to design. Of course, I'll try to keep everything a simple asses possible just so you can learn a zoo march as possible. Without further ado, let's move on to our first lesson, which she'll will be creating a the new document. So first we are going to create the document that is going to host our smartphone, and then we're going to design the smartphone itself, so let's get to it. 2. 1Create a new document: our first project will be the smartphone. And of course, in order to create it, we need to have some room to create it on. So for that, I'm just gonna go ahead to the file menu and choose in you in order to create a new document. And as far as the time goes, I'm going to stay with the Web type. But I'm gonna change the page preset to something like 1024 by 768. That's just because I like the four by three aspect ratio, which is going to make it easier for me to work with and easier for you to see what's going on here in the view port. If you want to create the art board, just don't forget to check this option right here for him. For instance, if you would like to add the color to to the art aboard to fill in and then the background with a color in, you just have to create the our board right here. I don't think I'll be needing the order board in this particular projects. I'm going to leave it off. I am going. However, I'm gonna press the portrait option right here because I want to create a vertical object. The smartphone. So I need this cannabis and to be oriented and well as a portrait. So I'm just gonna hit, okay. And before we start creating the smartphone, I would strongly advise you to keep this snapping on this is this option right here. So if you want to create, like, pixel perfect elements, pixel perfect designs and two will take advantage of the intelligent guides while you're creating your design elements, just keep this snapping on. I am also going to move, press the move by whole picks list option right here and also for speaks alignment that all these options are going to make the creation process much easier and that they will actually allow me to create the pixel perfect elements. So, as I said before, first we need to create the smartphone itself. So let's start doing that 3. 2Create the main shape and add the wallpaper: created this smartphone using the rounded rectangle told around, going to grab from the tools panel, and I'm just going to create a rounded rectangle. For now, I don't really care about the size of this rounded rectangle. However. The size is important, but most of all that proportions well, the proportions arm or important, because the most contemporary smartphones have a bit of a different aspect ratio than the previous ones. It used to be 16 by nine. Now it's a much more often, ah, 18 by nine or even 19 by nine. And that's because the producers, the manufacturers of the smartphones, want to fit as much as possible screen on the front face. So let's actually follow that, well, that concept. And in the transform panel, let's enter 94 do with and let's enter 18 for the height. And, of course, it's making our smartphone shape extremely small, too small to be usable. But let's just lock the aspect racial right here. By clicking on this link, I come and now if we just enter, say, like 600 for the height and then press tab designer is going to count late, and the values for us, and we can be sure that the aspect ratio is set to 18 by nine or 2 to 1. And if you will, of course, we could always just grab it, grab the smartphone by this lower edge. But in order to maintain the proportions who need to press the shift key and make this guy significantly big girl to somewhere here. Now, I don't want to have the strokes. I'm just going to press X on my keyboard to make it active and in the slash key. And of course, I would also like to make at the corner rounded corners. I want to make them less rounded. So in the context toolbar, I'm going to move this lighter to the left to something like maybe 8%. I guess 8% should be fine. I also would like to make my smartphone darker, so I'm going to fill it with the will. Maybe an almost black collar. This you build right. And the last thing to do here would be to add the screen. So for that, I'm just going to grab this shape. I'm going to copy and paste it in front, and I'm just gonna grab the corner world Grab on this This shape this copied shaped by one of its corners. But I'm also going to hold on the control key to will initialize on this whole transformation of from the center point to somewhere here and then I'm just going to criminal by one of the side points president. Hold the control key and make the beds old. Something like this. Maybe fighters change this guy's color. You will see it a bit better. So, as you can see, we got a well, quite of a symmetrical design. Right now we get, uh, well, this top part right here, the bottom chin right here and quite small Basil's. Now, if you want, you could also change the roundness of these corners. Or you could simply make them sharp like this. That's going to be totally up to you. I think that I'm going to make them around it. But not by much. Maybe like 3%. This should be all right. And I would also like to fill this a screen. Well, I mean, you could fill it with a color or with a Grady int, but I would like to create a like you wallpaper. So what I'm gonna do is I'm gonna go to the place image tool, and I'm going to navigate where I keep my where I keep my will images and ah, I guess we could maybe go with this image. So I'm just going to hit, selected and hit open, going to paste it in, And it's quite big, as you can see. And of course, what I would like to do is I would like to fit inside this guy right here. So I'm just going to press control axe to cut it out. And what I want to do is they would like to turn this shape in something like a clipping mask and to Well, the quickest way to do that will be to just initialize the draw inside mode. This is this third option right here. So once it's on, I can now paste that image back in. And as you can see, it's being basted in inside this This shape sold. We can now move it around. And as you can see, we are not going to go out of bounds right here because this shape is now working as a clipping mask so we can maybe moved is going to somewhere here. I guess this rebuild right? And ah, there we go. We basically got our screen and the main shape created. But before we call it a day, we can just maybe grab the rant rounded rectangle tool again and create just a couple of rounded rectangles to create something like them the volume rockers and maybe like the power button. So I'm just going to quickly create two rounded rectangles like these guys. I'm going to press the I key on my keyboard, and I was going to sample the color off this of this Basil, and I'm going to move them all the way to the back and maybe a bit to decide by prison the arrow keys, maybe to somewhere here, let me just see what it looks like. Maybe these guys are a bit too, too far out. So let me just try to grant both of them moved on, but to the side. And maybe Allah Gist decreased the roundness around this value. Something like 10%. And we basically got these buttons created. I don't want to spend too much time tweaking these guys I mean, of course, you could spend as much time as you want making, and these guys are right. But the most important thing is that we get the smart from created. We got the main shape, the screen at the bottom so we can actually and move on to adding, well, some screen elements. So first we got at the system, I considered the bottom. We could then add the the application and backgrounds than the APP drawer. And we could also add some system. Well, some icons, like a notification icons here at the top, so let's start to know that next. 4. 3Add the navigation icons: no start adding the screen elements. And let's start with this simple system icons here at the bottom, which are going to allow the user to go back one step to enter the home screen or to enter the recent Abscess Creek. So for that, I'm just going to use the shapes from this group right here. So 1st 1 is going to be the triangle tool, and I'm just going to create a triangle that I will rotate that I will erode it to the side , holding down the shift key to make it look like this. Next, I'm going to grab the Ellipse tal and create the Ellipse and notice how we are seeing all these intelligent guides. And that's because we have this snapping on. So designer is helping us a lot with the creating these in these elements. And lastly, I'm just gonna grab the rectangle tool to create of the square that is going to look something like this. And of course, I would like these guys to have justice stroke, not the filled so one's desire. These guys are selected. And by the way, the filled that I'm using here is just a simple off white color off a F eight f a to fight as the hex code. So now we can just press shift X and maybe let's go to the stroke panel and make the structures to be bigger. And from the Align panel, we could make sure that the distances between these icons are equal. So let's choose space horizontally and then press OK, And then we can just make them smaller, some holding down the control and the shift keys at the same time. Two small men made them a smaller proportionately. I'm going to pushed him down and going down here. Now I'm just going to maybe space them out a bit a little bit more to somewhere here, going to shift Lee condom to add all these guys to the selection. And again, I'm just gonna space them horizontally. And of course, at this point we could play around with the stroke value, make it maybe something like two points. I guess two points should be all right. Maybe make these guys even a smaller. Let me just zoom back out to seeing I guess this bill right? Maybe just a bit smaller and maybe just a bit to the bottom. Once you're happy with the these icons you can just to make sure that they are as a group, nicely aligned in relation to the smartphone. So I'm just gonna press control g to turn them into a group and then shift click on this Well, on this world paper and I'm from the from the align panel, I'm just going to choose a line of center and then press. OK, so now I can be sure that these icons are nicely aligned in relation to my to my well hold smartphone. Actually, in this case, of course, since these guys are still well, they haven't been turned into, like, simple pass. You could still manipulate them. But remember that in order to do that, you would have to just twirl open this group right here and select these objects individual If, for instance, you would like to change the stroke value to our north would like to make it bigger. That's going to be totally up to you. But I would advise you to keep it simple and maybe even 11 point in this case would be what would suffice. The smaller the icons that will the narrower. And then this truck is going to be. Once we got to these system Michaels created, I guess we could now move on to creating our like will app drawer. But we're going to just create them so well, one row off them of, well, app backgrounds, which is going to allow us to, well, first, see some kind of like a like a wife frame for our applications. So let's says, start doing that next. 5. 4Create the applications wireframe: contemporary rapper Aiken designs well. The backgrounds for the apse can be well, can vary. They can be completely rounded, they can be square and they can be well, they usually are around it. Rounded, square, surrounded two rectangles. Sometimes the whole background is well, is an icon, and we are going to create. The icons are like that. But first, let's they create something like a very, very schematic wire frame, four hour APS. So I'm just gonna grab the round attract angle tool and created a rounded square. There is going to look more or less like this. I would like this guy to have a filled not just a stroke. So since that the last stroke used was that off white color that we use for these guys right here, these guys at the bottom. So I'm just going to press shift X to fill my well background with the with the same off white color. I think that I'm going to make the corner values just a bit smaller, something like 12%. This should be all right, and what I would like to create is I would like to create a row off AMP backgrounds consisting off five backgrounds in total. So for that, I'm just think that I'm gonna have to make this guy significantly smaller. So here in the transform panel, I'm just going to make sure that this Link icon is selected and I'm going to drop on the width and the height values. Let's see to something like maybe 60. Let me just move this game but to the side. And I'm just going to hold on the control key to move this guy to this side. I mean, to clone this guy to the side. And then I'm just going to press control J once twice and then tries to create 12345 an app icons in total. And I guess we could maybe make them just a bit bigger. They don't have to be this small, so I'm going to select all of them by shift clicking on them. And right now I'm just going to turn the turn up the hide value to maybe something like 64 . I guess this should be alright. And of course, the last thing to do would be to maybe moved this guy, but to the side and this as well and then just select all of these elements and make sure that the distances between them are equal. So from the align panel, I'm going to choose space horizontally, which spaces and these ah, icons nicely. And I'm just going to press, OK, and And in the case of these system icons are would like this whole group to be nicely centered in relation to our background. So first, I'm just going to maybe pulled them down to somewhere here. This should be all right. I'm going to turn them into a group. I present control G, and then I'm gonna shift click on the background to add it to the selection and from the Align panel. I'm just going to choose a line center to make sure Then press OK to make sure that these guys are nicely aligned to the center. So we basically got our first, like every schematic row off APs right here and that the last thing to do before we actually start creating our first app icon would be had like the the notification I Agnes de in the hour indicated WiFi indicator. All these icons that you can go well, practically always see here at the top off of a smartphone. So let's says, start doing all that next 6. 5Add the hour and notification icons: Now, before we start creating another notification icons, let me just tell you that I did some basic housekeeping. I save my progress as a smartphone project. I give it a name like that smartphone project, and I just created too simple groups for one for that. Well, I renamed the group of these guys to system, and I just added on this whole smart from ship into a group, and I called it BG for background. So now we can start creating these top Aikens right here. And I think that it will, that we will start with creating the our notification. So I'm just gonna grab of the artistic textile click and drag to create this point text from space right here. And I'm just going to tape and maybe like, 10 uh, 45. Why not? And I'm going to use as the filled the same color as with all the other element that we just created. So I'm just going to double click on this color chooser and again, I'm just going to type in a fate a fate f eight and then press closed. Its this, of course, going to will turn this piece of text into this off white color. There we go. No, As far as the front for this piece of text, right here goes. I guess we could go with a simple roboto fund. And this is a front and quite after news on Google phones on. And I'm just going to maybe twirl open at this whole group and I'm gonna go with the well with regular. And the Roboto is a free fund you can download from Google of fun. So if you don't well, if you don't have it on your system, just go to Google Fonts said, search for Roboto and you'll be able to download it for free and then install it on your on your machine. Of course I'm going to make it significantly smaller. Let me just maybe zoom and really close and put it here at the top to somewhere here. I guess that should be all right. And now I guess we could maybe just play around with the font a bit. But I guess 12 maybe 11. Let's leave it a 12 less than spent too much time on just getting then that this particular phone size right? I think that this 12th on the 12 points would be totally, totally fine. So the next thing to do here would be to just add some, like, very, very, very, very schematic notification, um, icons right here. And for that I cast the quickest way would be to just grab simple shapes here from the from the tools, pal and create, like in the lips. Ah, maybe then just a simple triangle like this. Then we could maybe grab the diamond. Still, why not? And I'm holding down the shift key, of course, to create all these notifications. Maybe let's grab the polygon tool and create a simple polygon looking like that on May be a start tool to create a star looking like that. And I really I really want these guys to be so really, really schematic. I don't need them to be like, you know, anything fancy. We're going to create fantasy icons later on off. Right now, I just want these guys to look something like this. Maybe that even, maybe just a bit too much, but it leave it. Let's leave it till like, like that. Lastly, let's just make sure that the distances between these guys are equal. So again, I'm just going to from the align panel, choose space horizontally from the transform panel. We could maybe make them bigger, or maybe make them smaller. That's going to be totally, totally up to you. I guess this should be all right. Let me just align them nicely, maybe to the center, like so, and aligned them to our ah, lower to the our indicator. And this should be fine. Let's leave it. Let's leave it like that. So now he could move on to creating. Then they're notifications here on the side. So we're going to create the signal reception icon on the wife high icon and the battery indicator. I come, so let's move on to that next. 7. 6Create the signal, wi fi and battery icons: So to create the signal reception, I can I'm just gonna need this simple rectangle tool and creating a rectangle that is going to look more or less like this. Then I'm just going to clone it to the left by holding down the control key, Of course, clicking on it, holding down the control key and just moving it to the side. And then if you just press control, Jay, we are going to duplicate the last transformation, which was, of course, copying and moving. So now we can just make this guy significantly smaller and this guy as well to somewhere here. And of course there is not. In fact, there's nothing fantasy about it. However, we could maybe make them just a bit smaller to somewhere here. And let's move them more than to see how they fit with our notification. I can. Inside us, this looks all right again. I don't want to spend too much time getting exactly these elements right, and that they are just three rectangles. So I hope you I hope you will understand what I'm trying to achieve right here. Now the bigger challenge is to create the WiFi like icon But, ah, well, it's a camera, Lee Simple once you know what you're doing and you know how to use the designers tools properly Because, I mean, I've seen people online trying to get this ah, shape in Avery. Clunky way, like with maybe at the Penta trying to create the paths. And that's really not the way to go. So to create the WiFi, I can I'm just gonna grab one of the customer shapes, which is the pie tool. And I'm just going to click and drag to create a pipe. And as you can see, it's basically in their lips with 1/4 being cut out. And this quarter is actually what we want, because the WiFi Aiken is basically 1/4 of a circle. So we could in ah, in designer just grant one of these, well, one of these control points and move it all the way down to somewhere here to create this. Well, this piece right here and this will be it would be actually our well, our WiFi I can. But there's even a faster way. We could simply just choose this invert angles option and boom. There we go. We got the WiFi, I can create it. Of course. All we need to do is to just hold on the shift, get to know, Rotated to create this kind of a shape. But we could spice things up just a little bit. And I think that we could, like, maybe move this guy first to decide to keep it, you know, as a backup. But I'm just going to clone and to the side, and I'm just going to convert it to curves. I don't I don't need this guy to be alive shape anymore. I just wanted to be this WiFi shape like this. So what I would like to create right now is I would like to create, like, an illusion of the WiFi. Be not so great. Let's assume that the WiFi reception is quite poor, so we would like to indicate it with the icon. So what I'm gonna do is I'm simply going to press control J to duplicate this icon and that I'm just going to move it down to maybe somewhere here that should be all right. Shift click on this underlying shape and from this panel, this Pathfinder panel I'm is going to choose divide. And now we can just grap this element and remove it. And we have the stop part and this and this bottom part. And now I'm just going to grab this top part and drop its opacity to something like, uh, maybe 60 points, 60% this year, Bill. Right. So that's Ah, no, that's another way of creating on the WiFi I can with indicating that the reception is not too too good. But what if you would like to create, like, the standard WiFi Aiken with? No, with all the rings, like the three or four rings, I believe Ah, well, you could maybe try to grab the ellipse, um, tool and try to maybe, like, expand the stroke. But in designer, you might get some unexpected results. Why doing that? I think that it would be better to grab the donut toe to create this of particular effect. So I'm going to grab it from the custom shapes tool. This is this guy right here, and I'm just going to create a doughnut looking like that. Now, the most important thing about this shape is the whole radius, which you will basically make this. Ah, this path. This kind of like a stroke here, Bigger, all or smaller. So once we start playing around with the whole radius week, you can see that we are making the hole bigger or smaller. But we are also making this path, which is going to be our WiFi indicator, bigger or smaller. So let me maybe go up to something like maybe 80 percent. I guess this revealed right. So what we have to do right now is we have to just cloven by President Control J. And then just make it smaller till it snaps with our first. Let me just zoom in with our first well, doughnut. But as you can see, sometimes we might not get it exactly right. And that's because we have the all these options turned on once we turn them off, will be able to move it freely. But another thing here will to take a note of is that since we are making it smaller, the whole and will this path right here is also getting smaller, even though the whole radius is the same. This path is well, is not as wide as this outer ring right here. So we could maybe make this whole radius just a bit smaller to try to match this thes paths or with each with each other. But ultimately, we're not going to be using this guy. We just wanted to mark the whole on the space between the WiFi indicators. So if I'm not just press control J and then to duplicate this guy and make it smaller to somewhere here, I can now just delete this this element and make this whole radius smaller. So when we like to something like 70% distributed, right and now we can just duplicate the process. So First Control J make this guy smaller and make the whole radius smaller to something like 60 arrive. Well, that's just type that in 65 and then I get a press control J to duplicate this guy, make it smaller to somewhere here, remove this ring and make this whole radius gets something like 60 would be all right. So warns All these guys are created. We can now just a grab there rectangle tool. Maybe let's now just turn to snapping back on to find the right angles. I'm just going to press and hold on the shift key. This should be all right. Maybe that. Just check the distances. Maybe let's make this guy just a bit smaller to somewhere here and then I'm just going to grab all these elements. And I guess you can already see what we are going to be well achieving here. What we could do is we could maybe paste these elements inside this rectangle, so I'm just going to cut them out. Maybe I'm just going to get rid of their fill and get rid of the stroke and that I'm just going toe initialize the draw inside mode and just press control V to paste those guys back in. And of course, we need Teoh. Rotate them so they look something like so of course, we could always play around with them with the gaps between these elements, we could make them bigger or or smaller, but the the rule off here, the method is basically the same. All you need to do is to just make you pay more attention to the distances between these elements. So what I'm gonna do is I think that I'm going to just grab the simple WiFi I can this guy right here, make it significantly smaller and put it beside my reception. I can't maybe make it just a bit bigger to something like this. Maybe move it a bit to the side and I'm just going to delete all these elements. I won't be needing them. So the last I can that we're going to create is going to be the battery indicator. And it's going to be a simple is just grabbing the rectangle tool, creating a rectangle that is going to look moralists like this, Of course. Let's just make the stroke significantly. Dinner, maybe to something like two points this should be and it should be fine. Then what I'm gonna do is I'm going to just press control J to duplicate this rectangle, and I'm going to make it smaller to something like that. This should be all right. I'm just going to press shift X to exchange the filled with the stroke. Let's just zoom in. And lastly, I'm just going to move this guy to this side, make it smaller and smaller like that to just create my I can like this. This would be all right now, since they were going to make this the stroke and we'll really small. I think it would be better to not to leave it as stroke, but to expand it into a fill. So I'm going to go to the layer panel and I'm gonna choose expand stroke and that I'm just going to select all of these elements, group them, and then we can make them smaller and move them to the side to somewhere here. I mean, just zoom in maybe just a bit to the bottom, to somewhere here. So we basically got our most important icons are created. We got the our indicator created some simple notifications. So we got the WiFi battery and signal strength. We got to the app drawer, this guy right here and we got to these system I consider here at the bottom. So I guess we could now start to create in our first icon, which would be the telephone or the calls application I can hear on the left. So let's move on to that next 8. 1How To Create a Telephone App icon: our first proper icon is going to be the telephone application I can, which is basically going to represent a calling application. So the first thing that I will do is I will just grab the file menu and create a new document. I want to keep the type as a Web. I would like to create the art port, but I would also like to keep another proportions with size as square. I think that's something like 500 pixels by 500 pixels is going to be fine. And I think that since we're going to be creating them well, a square background basically and the square proportions air going toe work just fine for us. So I'm just going to press, OK, and we're going to create the telephone shape using really the simplest tools and transformations. So first, I'm just gonna grab the Ellipse store and create an ellipse that is going to look more or less like this. I don't need a perfect circle. I just need in l lips like this one. I will maybe exchange to fill with the structure so you can see the Ellipse a bit better, and I don't need the strokes. I'm just going to press the slash key to get rid of it. And what I would like to create right now is I would like to create and the whole inside so we could use the doughnut to for that. But I just would like you to understand that you can create him this whole telephone shape using just one tool, which in this case, is that the Ellipse tal. So in order to duplicate this shape, I'm just going to press control J on my keyboard. And then I'm gonna hold down the control key to make then the ellipsis significantly smaller. If I added the shift, get to it. I'm going to make her this transformation proportionate. So I guess this should be all right now, at this stage, we could maybe add the white filled to our ellipse some just so just make sure that the film is active, that press the I key on the keyboard to initialize the color picker and just press on the on this art aboard to fill this ellipse with this art boards color. So right now we could make the city's ellipse bigger. We could make it smaller and noticed that them and these are just slight transformations are going to well, determine not then the overall shape of our telephone. So really just them. The slightest alteration is in terms of with the or height are going to have a significant meaning, Um on on the the ultimate effect. So I think that this should be all right. And what I would like to do right now is I would like to add on the underlying ellipse to my selection because now I would like to just cut the whole inside of this underlying ellipse. So from the toolbar, I'm just going to choose subtract operation. And right now, as you can see in the layers panel, I only have this curves the shape right here. So again, with the ellipse tal, I'm going to create in the lips. But this time I want a perfect circle. Soldiers hold down the shift key and creating ellipse looking more or less like this. I wanted to be nicely aligned to the left edge off my ellipse, but I will also like it to be aligned to its center. So with both of these, a little these these guys selected from the toolbar alignment options. I'm just going to choose align middle and press, OK? And lastly, I'm just going to copy this guy to the side. So I'm just pressing under control and the shift gets at the same time, and I'm going to find this right edge and you can see we get this a green line popping up the intelligent guide, and we can be sure that right now we are snapping this. Copy the lips to the underlines. Ellipse right edge. I guess we could maybe at the same collar to these ellipsis. I'm just going to sample this black color. And I guess you could already see this kind of like a sketch off our telephone. Ultimately, we won't be needing this bottom part right here on Lee. These center and the top part. So I'm just gonna go ahead to the toolbar and choose divide, which is basically dividing all of these shapes into individual elements. And I won't be needing this bottom part right here, and we are already laughed with this nicely looking. Ah, well, telephone shape. But I think that we could do so more things about it. Just to make it look more interesting. So the first thing that I will do is I would grab these guys right here, and I'm gonna hold on the shift key and, ah, the control key to make them just a bit smaller. I think that this should be all right. So as you can see with the justice well, simple transformation, we are adding some NYSE definition to our shape. But we are not done yet again. Worth the ellipse tal I'm going to create and the lips and I'm going to put it somewhere down here, and I'm going to going to fill it with this the same color as the art board. So with white color. And now I'm going to make sure that it's, um, over these guys right here, but that it's beneath this main shape and these guys right here, so actually we can select them and we can unite them. So I'm just going to add them and that Then I guess we could just to make sure that they are on top. So from the toolbar, I'm going to make sure that I'm gonna press the move to front option. And now, if we just start to manipulate this guy right here so we can make it bigger. We can make it smaller. You can see that we are changing on the way. These well, these parts of the telephone are are looking so we could make them smaller. We could make you can make this guy bigger. I'm maybe too somewhere here This you be all right. And of course, it's a good idea to keep these guys nicely allied to the center. So I will group these elements so I'll just select them and press control G. And then I'll just add this ellipse to this election and I will simply make sure that they are nicely aligned horizontally to the center and press. OK, of course, the last thing to do here would be to subtract dis ellipse from this underlying shape. So I'm just going to first on group these elements. I'm going to select them and press control shift geo my keyboard, then add this ellipse to my selection and choose divide. And of course, I won't be needing thes elements. I can just get rid of them and we are basically laughed with with this shape that we can slightly rotate to somewhere here and make it significantly smaller until it looks more or less like this. And now we could simply borrow one of these background, so I'll just copy them and paste them over here. I am going to make it significantly smaller. This revealed right and knowledge is double click on this fill option right here and try to find a nicely looking green color. I wanted to be flat design green eyed. I wanted to be too saturated. I guess this should be all right. I'm just gonna press clothes now. Of course, it needs to be put right here to the bottom. And I'm just going Teoh. Maybe I'll just sell them a select and remove these cars. I won't be needing them. And these elements? Well, I guess we could add em. Well, we could fill them with the same color as we filled our Bagram's before. So it's going to be on the off white F eight F eight F eight collar, which is going to press clothes. And with these elements, we could add them. We could unite them into one shape soldiers, press ad and the we could now just select the underlying background and a line everything nicely to the center. And of course, at this point you could make this guy bigger. We could make it smaller, but I think that once we put it over our main design, it's just going to give us a better perspective as to the size of this particular elements . I'm just going to copy, then maybe let's first group them and then copy them and pays them inside right here. Let me just zoom in real close and make this guy significantly smaller. And let's just check the dimensions off this background. I believe it was 64 by 64. So these are the values that I'm going to type in right here. And since I got the locked I lock aspect ratio option checked, I can just type in Wana value and designers going to calculate the other for me, and I don't need to worry about it, but I need to move it over this first background right here, match it with the others, and since I won't be needing this guy Aiken, just cut my telephone out, select this background, get rid of it and just and then just paste controlled the to paste. My first application I can in. So there we go. We got our first application. I can create it. And remember that with that, this particular shape, any no change in the size of the ellipsis or their positioning is going toe change the look and feel off your telephone. So basically, you can just just been moving a few picks list to the left or to the right, create a differently looking a telephone application. Aiken. So this is done. So let's now move on to create in our second I come. 9. 1Create the ocument and color palette: know that we have the telephone application, I could create it. Let's create the second icon. And in this time, it's going to be a like s a Massery messages application. I and I'm going to start in the same way as before. So from the file menu, I'm gonna choose the new option to create a new document. And again, I want to keep the type is Web. I want to create the art aboard and I would like to keep that page with and hide. Add something like 500 pixels. I could go for other values, like maybe six or 700 pixels. But I do want to keep my art board does square. So I'm just gonna press OK. And before I start creating the icon itself, I think that first I'm going to add some colors. I'm going to create an application of palate. So first I'm going to need it. The color for the for the SMS icon Ah, darker color for the text color for the shading and also a grading for the bankrolled. I'm going to create a simple rectangle, this shoe to do and ah, I don't need a stroke and I wouldn't to add a nice, nice light. Great color. Maybe I'm going to go for the standard F eight F eight F eight and I'm gonna hit close. And now from the swatches panel, I'm just going to choose add document palette and I'm going to rename. And so, from the same menu, I'm gonna choose Rename palette. Unfortunately, there is no option to while creating the palate, get this rename powered a dialog box, maybe in a future version of designer, and I'm going to call it messages. I'm gonna press. OK, so once this application is created, I mean this thing, this palette is created. I can now just press this I converters at field to palette to add this swatch. So now maybe I'm just going to They said before try to find some darker color that is going to be our text. I'm gonna hit close, and I'm going to add it to I am application what to my to my palette. And then I'm going to find some darker color. Maybe even let's let's go with simple black, and I'm going to add it to my to my palette. And lastly, I would like to add a Grady int swatch to my palette so from the Phil Tool right here and offend them from the context toolbar. I'm gonna choose a linear fill which basically will turn this solid field into a Grady int Phil, I'm going to click on this swatch, and as you can see here, we got the Grady in Slider and I think that well, first, let's click on this first color stop and then on this color box and I think that I'm going to just something, maybe something purple, maybe like this. This should be all right. And I'm going to try to find him a similar color but a lighter version off this color and added to the second to color stop. And to do that, I guess it would be the easiest if we just, uh from this tab chose RGB hacks, sliders. So we can then just copied this hacks value. Make sure that I am on the on the second color stop right here again and click on this color box. And in this color and this hex value, just press control V and we basically have the same values for our for our ingredient. So now, for instance, we could just choose hue saturation, lightness. And now we could maybe make this guy lighter, just of it, or darker if you want. That's going to be totally up to you. I don't want to touch the saturation of Valium. I just want to make the color. Maybe just a bit lighter. I guess this should be all right. So once this one is this, will this watch is created? We can Then again, just click on this ad, Phil two pallet option. And we basically have all of these colors created. So now let's move on to creating Ah, the icon itself. 10. 2Create the sms icon: the icon says shape is going to be really simple, but we are going to use one interest in a designer feature that is going to allow us to create a kind of like an illusion off shading that is within a clipping mask. So what I'm gonna do is I'm gonna grab the rounded rectangle tool and creating around, attract and go looking more or less like this. I'm going to fill it with the lightest color. Let me just maybe move it just a bit up. And since this is a still a live shape, I can alter the values of them off the rounded quarters. And you could do it either from the context toolbar right here using this slider. Or you could but remember to turn other rounded rectangle tool on. You could just Gramp this red dot and move it up and down to change the values off the roundness of the corner. So let's maybe go to somewhere here. Guess this should Beal, right? And my next step would be to create something like a like a triangle down here, which, which, well, basically would be on the speech bubble that that the speech pointer. So for this, I'm just going to choose the pen tal and I'm going to collect somewhere here. Hold down the shift key. Click down here, then Maybe you somewhere here and then just finished the shape by clicking on the front first anchor point. There we go. And now I guess we could just, uh, and the same color to it and make sure that these guys are nicely aligned to the left edge . And I will move this piece right here to the bottom in my layers. My layers panel. So not what I would like to do is I would like to mark that there's some kind of a three dimensionality going on right here. I would like to add, like, a slight shadow right here. So how can we do that? So what I'm gonna do is I'm gonna grab the first this major part right here. I'm going to copy it into my clipboard. Then I'm just going to select this piece right here. And then I'm going to initialize the insert inside the selection mode and I'm gonna press control V two pasted inside. Now this curve I know that you can seem cannot see it right now, but I'm going to turn into black and then I'm just going to move it to the side, maybe to somewhere here, maybe just a bit more. So, As you can see, this shape is totally restricted into the shape that it was pasted. In a way we cannot move it outside this shape, which is actually really handy, because we can now create this kind of an illusion of shading right here. Maybe just a bit up to somewhere here. And of course, we could always maybe play around with the opacity. So in the Layers panel weekend, with this slider dropped capacity down, maybe to somewhere here something like around 25% should do it. We can always move this more this guy around. So the last step here, we could just grab the rectangle tool and create just a few lines off text which would have this color as the fill color. Maybe let's move it a bit to the side and maybe just a bit smaller, then we can just clone it down and then just press control J to duplicate the land. The last transformation. So now we can just make this guy just a bit bigger and grab all of these elements and move them down to somewhere. Here. This should be this reveal. Right? So the very last step, let me just group all these elements on the very last step would be to enter the Grady and background. So I'm going to go back to my main a document. I'm going to copy this background right here, and I'm going to pace it inside, and I'm going to add this Grady and feel to it. Then it's a grab the fill tool. And since it's said set the linear, you can see that we have this Grady int bar right here. So now we can just click and drag to create our Grady in so we can move it from bottom right to bottom left to create this kind of a Grady int background filled. Of course, this guy needs to be significantly bigger, so I'm gonna make it bigger, and I'm going to push it down somewhere here and now. We could have maybe make this guy just a bit smaller and try to find try to put it him in the center spot. So There we go. We basically got to this icon created. We can now just maybe, let's just select all of these elements on. Actually put this guy in the center. We can no group these elements, copy them to our clipboard and paste them back in right here and again. We have to make it smaller. So I'm going to type in the value that we're using for these application icons, which is 64 pixels. And let me just zoom in really close. So now we can just grab this guy boated somewhere here and there we go. We basically got to this. I can create it. So now we can move on to creating our next I consult. Stay tuned. 11. 1First trace the image to crate the main shape: in this project, we're going to create a contacts application, Aiken. And this time, instead of just creating a simple lips and then maybe just having some torso shape, we are going to trace a real portrait to creating more realistic well, shaper of a human torso on the human had, of course, later we're going to clip it nicely with the simple Ellipse. But I think that this project and is going to allow you to learn the pen tal in a very practical way because we are going to be using the pen tal quite a lot and some pen tal transformation as well. We are also gonna be using and the same art board as before. So this hardboard has 500 by for 500 pixel dimensions. I have already created a contacts color palette right here, which comprises, as you can see, only of two colors, so kind like a orange yellow one and a light gray one. This guy right here, I also have an a portrait image downloaded from the Internet. It's ah, no, I just I just google imaged portrait. And this is one of the results I got and I'm using it only for for tracing this face for basically for nothing else. So let's actually do that toe. Let me just grab the pencil and I'm gonna make sure that the stroke is not too thick. I guess one point should be all right. And after as far as the stroke goes, I guess we could just use our orange color. I think that is going to be quite visible against this black and white portrait. What I'm gonna do is I'm simply gonna click somewhere here. I don't want to trace the this hair do too closely. I just want to have a rough a sketch of it. So what I'm gonna do is I'm going to click and drag, click and drag like that, some clicking and dragging to create. Let me just maybe zoom in real close to create these notes. These ankle points and ah, really, if you can just roughly outlined in it, that's that's totally fine. Now, in situations like this, if we just click and drag, we are going to create a curve that we want. But as you can see, one of the handles ism pointing towards the top right, and that's not what we want. Because if we now just let go and try it Oh, for instance, click somewhere here we are going to get this curve. So first of all, this path is trying to follow in the direction of this handle, and that's not what we want. So let me just go ahead and step back a few times. So what we really want is just to click somewhere here and drag. But then let's just hold down the old key or option if you're on a Mac and you can see that we are now detach in this direction handle and we can actually directed the words the bottom to somewhere here. And now if we just click and drag, we are going to create this. Ah, well, this shape exactly where we wanted to go. And by the way, I don't know if you notice, but right now I am able to manipulate this note or anchor point, if you will. As I go. I mean, this guy is, ah indeed put down on my image, but I can still manipulate it because I didn't let go on the left mouse button and I'm holding and well, the space aboard, and then I'm dragging my mouse around. So if you wanted to, if you want to manipulate your note, you can just click the left most button, But don't release it. Then press and hold the space bar. And then you can move your mouse around to drag around this anchor points. I'm going to put it somewhere here. I think that should be all right. Then I'm going to click somewhere here and drag and maybe again press the space bar to move this guy to somewhere here. Then we can maybe click somewhere here. Now I'm trying to trace this T shirt. Energy concedes put against is white is white T shirt and has put against a relatively light background, so we might have some some problems, but ultimately, I think will be will be fine. So lastly, I'm just going to click down here. I don't need to trace the whole shape I just wanted. And I just want to finish this path down here because right now what I'm gonna dio just zoom back out. What I'm gonna do is I'm gonna just grab this path. I'm going to press control. J to duplicate this curve. And as you can see, I got two of them here in the layers panel. And of course I got it right here. And what I want to do right now is I'm simply going to flip it to the right. So I'm just gonna use the flip horizontal option, and then I'm going to try to match it with the face. Of course, it's not going to be perfectly symmetrical because this hard, as you can see is, was a bit different. And this shape is not death symmetrical. But I think that if we just go to somewhere here, maybe this should be all right. And right now we can just grab both of these curves and we could try to close them. So, in a fit into designer, in order to do that first day, you needs to have either the note still active or the panto active, because in the in the context toolbar, you're going to see this action panel and what it allowed you to do is ah well, it allows you to manipulate that paths in I any specific weight forces, you can break the curve, you can close the curve. You can smooth it out. You conjoined them or you can reverse the curve. In this case, what I want is I want to close this whole shape. But before we can do that, I need to first join cars which will actually close them here at the top. And then if we just press close curve, you can see the designer is closing this gap right here by basically joining these two anchor points. So even now, just press shift X on your keyboard, you can see that we actually created this will. This will face and torso shape. If I just can. Maybe we'll turn on the visibility of the underlying image off. You can now see ya better. If you don't like this kind of symmetry, you can still just grab the note still and maybe play around with some of these notes. But that's going to be totally up to you. I think that this looks all right and we don't have to spend a whole day trying to be fixed like some hair issues or something like that, because now ultimately this shape is going to be extremely small. We're looking for a simple representation, so I think that we can leave it as is. But we are not done yet to. The next thing that we need to do is we need to like Cali, Calypso here at the bottom and create an ellipse. So let's start doing that next. 12. 2Create the clpping mask and finish the icon: So what I'm gonna do is I'm gonna grab the Ellipse toe and create an ellipse that is going to look more or less like this. I think that I'm going to maybe removed the filled. So while the Phillies active, I'm just gonna press the slash kill my keyboards to remove the film and then I'm going to stroke it. Ah, maybe with this gray color. So now we got this ellipse this guy right here. And of course, we got our underlying image. I'm going to select both of them and from the align panel. I'm just going to choose a line center to make sure that well, they are nicely aligned to the center. And what I want to do is I want to clip this part right here. I wanted to sit inside the Ellipse and we could use the insert inside of drawing San Mo here in affinity Designer. But I would also like to show you another way of creating this kind of an effect which would actually be, I think, the fastest way off Taliban thin so here in designer. So what we need to do is we need to basically tell designer that we needed this. That we want this curve to sit inside this lives and we can do it all here, inside the layers panel. If I just grab what this curve and try to kind of, like put it inside the Ellipse. There we go. You can see that we are basically clipping this well, this shape with this ellipse. And of course, we consume MSM back out. So maybe that Just do it one more time just so you can see toe a bit better. There we go. I'm gonna grab again this curve and I need to put it over the ellipse. And as you can see, you will You can see this this effect being applied instantly. So I'm moving it over this ellipse shape and I'm clip in this shape uh, well, in an instant, basically so we can make him make it smaller just a bit. And maybe we could still just grab the ellipse and maybe make the stroke just a bit bigger , but not too big. Maybe something like eight pixels. I guess when we grab the well, our background and then make it will call arise it. We will see a bit better, so let's do that. So I even opened our smartphone project and I'm quickly just going toe borrow this shape right here, and I'm going to copy it, and I'm going to baste it inside inside this document, and I'm going to colorize it with this with this orange color and I guess we could maybe change this got done. Well, this face and torso with color as well let's make it white or really, really dark will light gray. And I'm going to make this guy significantly bigger. This will be fine. And I'm going to press this back one an option to just to put it behind this shape and let me just make it significantly bigger to somewhere here. And I guess we could maybe select both of these elements and align them to the center just like this. And we are basically dumb with with this shape. But before we move on well copied over to our smartphone project, let's make sure that our stroke remains as is, and that it remains proportionate in relation to this shape right here, this shape inside. So I'm just going to grab the ellipse, move over to the stroke panel, and I'm going to make sure that the scale with object option is selected. So once all these precaution precautions are taken, I'm just going to maybe group both these elements, copy them into my clipboard, move over to the smartphone project and just based this guy in. So as far as I remember, this bedroom was 64. Yes, exactly 64 pixels by 64 pixels. So that's what I'm going to enter right here. 64 by 64. Now we can President over here. Let's just zoom in real close. We can move it down years somewhere here. There we go. I'm just going to press control axe to cut this guy out so I can remove. Select this background, remove it and paste it based my I come back in. So there we go. We created the contacts and application icon, and I hope that well, you'll learn a few interesting tricks about Well, first of all, working with the pencil. So remember to just click and drag to create nice curves and that you can also click and then hold on the old key to taint change the direction and off the direction handle and that you can also present hold on the space work too. Well, kind of like a change on the position in off the node or the anchor point on the go. So we got three Aikens done right here, so let's move on to the next. 13. 1Create the main shape for the icon: in this project, we are going to create a crow blow Go, which is gonna be our next application icon. And before we start, let me just point your attention to the fact that we have an art board right here whose dimensions are set to 500 to 500 pixels. And I already created a collar scheme right here. So I just got five simple colors that really will make this a logo What it is. So we're going to start with creating these simple ellipse. So I'm gonna grab the ellipse Tal, hold on the shift key and creating ellipse that is going to look more or less like this. What I would like to create right now is I would like to create a hole inside this ellipse , but there's so one thing we need to buried mine for this whole effect toe work. We do need to have a hole cut out inside right here. But we also need to cover it with an ellipse that is going to be, well, basically white. Because in order for this whole shape to work, we need to divide the outer ring into three. But we also need to make sure that it's going to look nice against the different backgrounds. So we can't just leave this whole open. We just need to cover it with white. So the logo looks looks proper. But before we move to all that in just the cologne this guy So I'm just going to press control Jr. My keyboard to cologne. This and lips. As you can see, this is this guy right here, and I guess we could turn it white. So now we can have, like, you know, we can create an illusion off cut in this hole inside. Maybe I'm going to make it this big. I'm going to press control seat to copy it into my clipboard. And then I'm just going to press control J to clone it again. And we're gonna make it smaller till it to look something like this. And it needs to be blue. So I'm going to fill it with blue. Let me just pause for a second. We capped the underlying ellipse, the red one. We got this ellipse right here. And remember that we call paid it into our clipboard and we got this ellipse. So in total, we got three ellipses. But right now, what I'm gonna do is I'm gonna grab the white, her lips. Then I'm going to shift click on this underlying red lips and I'm just gonna press, subtract. So what we have right now is this cut out form and this l lives. But as I said before since this, let me just maybe show you what I am trying to tell you. So if we just have, like, a different color background, let's say it's gonna be yellow and I'm going to move all the way to the back. You can see that right now. This whole right here is swell is showing this yellow color and the original logo is white in this spot, so we cannot leave it like this. But we need this ring for the final effect to happen. What we need to do is we need to paste that copied ellipse back in. So I'm just gonna press control V. This is this white and lips and I'm going to put it beneath the blue elipse like that. So we got the white our lives. We got blue lips again and we got this cut out form right here. So the next step would be to divide this outer ring in 23 separate parts, as so we can actually create him this. Well, the main effect for this logo. 14. 2Divide the logo and add the shading: start by grabbing the pen Tal and I don't need to fill. I need the stroke. So I'm just gonna press shift X on my keyboard and we can leave it at something like four points or we can go down to one point or two points. That's really not not that important right here. But what is important is that let me just zoom in is to create a, well, something like he triangle up here that is going to be stretched out from this anchor point or this note all the way out here and then is going to go back down here and finish the shape. So with the pen tal, I'm just going to click on this ankle point or note. Then I'm gonna go back to somewhere here and finished the shape like that. So if I just press shift X, you can see that we have this. Let me just maybe put it all the way to the front. You can see that we have this shape created on that. We just snap it with this part right here. So we get this yellow guy this yellow triangle, but we are ultimately going to be needing just this part inside this outer ring. But we're going to take care of that of that in just a second. Because what we need to create right now is we need to create two copies off this triangle right here. So we need one here at the bottom, angry and one here at the left. So what's essential for this technique to work properly is we need to set the transformation origin point. So here inside, the context will bar. You can see this This option right here it says show rotation center. Once it's off, you cannot seat the rotation center. And once it's on, you can see this. Well, this bottom, the center appearing right here. So what you want is we want to rotate this triangle in relation to the center spot of this ellipse. So if we just move it down here, you can see the designer is actually showing us the center spot off this white and actually also the blue lips. If we leave it right here, then press control J to duplicate this. Ah, well, this a triangle and then move our and our cursor over this handle right here. you can see this double cursor appearing, which means that we are now going to be rotating in this guy in relation to that center point. And what we want, as I said before, is actually three copies in total. So if I just hold down the shift key, I'm going to be able to move this guy in 15 degree increments. And ultimately what we want is we want to move it to somewhere here. And if you can take a look at the transform panel right now, we are rotating this guy by minus 120 degrees, which is actually what we want. This. As I said before, we need three copies. And if we divide 3 60 by three, there's gonna be 1 20 So if we now let go, we're going to copy and move. This guy wrote it, This guy right here and then if we just press control J, you're going to duplicate the last transformation which was rotating in relation to this center point. And of course we cloned it. So you're rotating and cloning it at the same time. So once all these elements are created, we can select them then select the underlying ring. So right now on this red ring is selected and these three curves and from the toolbar I'm gonna choose Divide. This is this path finding options and we Onley want these outer this inner ring shape so we don't need these outer once. I'm just going to start selecting them and removing them. And of course, we don't need these guys either, so I'm just going to select and remove them and we are left with these pieces right here. So now we're gonna start toe given the these guys proper colors and some shading. So what I'm gonna do first is I'm going to select this path right here, copied into my clipboard shift Click on this first part, this guy right here, unite them and then I'm just going to make them yellow. And now, if I just press control V on my keyboard, I'm going to paste this a copied shape back into my clipboard. Adam's gonna choose plain black color and here inside the layers panel, I'm just going to drop the opacity down to something like 25%. If you want to drop it down even a further that's going to be totally up to you. I think that 25 should be all right. So now what we have to do is we simply need to repeat this whole process. So again, I'm just gonna grab this guy right here, cope it into my clipboard, add this red part to this election and then unite them, make them green, and then just I'm gonna And then I'm gonna press control V to paste this guy back in, make it black drug dealer passage down to 25 then again and grab this yellow piece right here, copied into my clipboard shift click on the red part, Unite them based that guy again by present control d make it black and then just drop the opacity down to 25%. And there we go. We basically got our a chrome logo created. So last name just going to press control G to group everything. So I'm just going to cope eat over to my smartphone document. I'm just going to know based that guy in, and I'm just gonna make it 64 pixels by 64 because I I just want to put it down here, we could leave the background. I mean, we could make this case significantly smaller if you want, so you could create an icon like this. But you could also just grab this underlying background and remove it to just leave this Aiken looking like this. So we basically got will almost each and every Aiken down here created, but And now we can move on to creating. And the last I can from this row, which will be their camera. I can. So let's move on to that next. 15. How To Create a Camera App Icon: you know this project, we're going to create a the camera application. I come and as you can see again, I got exactly the same mortarboard, which has the with off 500 pixels and the height of 500 pixels. And I also have a color palette and you can see it has quite a lot of color swatches in it . So let's start the process first by grabbing this last background right here that I might even cologne up just so I keep this basic shaper like summering them on the side so I can always go back to it if I need it. So I'm just going to copy this guy and I'm going to pay sitting right here. But as you can see it well, it's pretty light. It's It's like, great, and you might not be able to see it too well against this white background, and I've decided that we could, maybe at a color to my art boards. I'm going to use this blue color just so you can see everything a bit better because the main body of our camera is going to be light in the some elements of the camera. goes, we're gonna be light. So I guess it will be easier for you to see them against a different backward. And I guess this blues background looks nice. So I borrowed to this this background, this guy right here because I would like to turn this whole background into a camera shape . I don't want to create a camera that I would put inside this background. I want this whole shape to become a camera, So I'm going to start first by creating a something like a distinctive grip color inside this element. So I'm going to grab the rectangle tool and notice one thing. If I would like to create a rectangle right here, it's some. It's going to be pretty difficult because the designer is going to be assuming that I would like to manipulated this shape, and that's not what I want. I want to create a shape, direct angle that is going to be exactly as wide as this background. So I guess the easiest white to do that would be to create a rectangle that is going to be deliberately too big to somewhere here that I'm just going Teoh, give it a brown color. I'm going to select both of these elements because I would like to align them to the center both horizontally and vertically. And now maybe let's make it just a bit smaller. And now I can just cut it out, select this rounded rectangle, and we can switch to the insert inside the selection mode and just press control of you to paste that piece in to create this main shape with the grip. Now, the next step would be to create the Lancer itself. And for that, I'm just gonna grab the the Ellipse tal, and I'm going to try to find the center spot off our shape. And of course, if you cannot see these these intelligent guys, just make sure that you have this snap in on this guy right here. So I got I'm just going to try to find the centers. But of course we could always just them. Well, it's just it later if we need to. So I'm just going to create a shape that is going to be maybe this big. This should be fine. And indeed, maybe I'll just select everything and again try to make sure that everything is nicely set in the centre. So what I want to create right now is, as I said, I would like to create a lands right here. And I would like this main piece to be the same color as the body color. So for that, I'm just going to press the I kill my keyboard to initialize at the this color picker tool . And of course, that Phil is selected. And if you just click on there on this background, we're going to add the same color to my to this Talibs. But of course, since these colors are the same, we cannot actually see and distinction between these parts. So to create that distinction, I'm just going to cologne this ellipse twice seventies, gonna press control J twice. And as you can see, I got three identical ellipsis right here in their layers panel. So this top ellipse this guy right here, this one is gonna have the same color as the body. But these two ellipsis are going to have different shades of great. So this one will be white and this one will be darker. Great. Of course you cannot see them right now, but once we just start to put in this guy up. So I'm just gonna press that the up arrow key ones twice tries maybe four or five times. And then I'm just gonna grab this bottom ellipse and I'm going to press down arrow key again five times. You can now see this distinction happening right here and this ellipses getting some kind of like a three freedom mention ality effect happening right here. So next I'm just going to grab all these ellipses. I'm going to group them and press control J two duplicated. Now you're going to create a different part of the lens. Just er just to make this thing whole. And I could look a bit more interesting and I'm going to make these guys significantly smaller to somewhere here. This should be fine. And I'm going to start adding, ah, different colors to them. This time I would like to make them darker. So from the color palette, I'm just going to choose. Maybe this guy this lighter ellipse will have this lighter shade off blue. And this bottom one is gonna get this darkest shade off blue. It's almost black. And lastly, I'm just going to Cologne, This group by President Control J. And I'm gonna make it smaller to somewhere here. But this time I'm just going to be needing one ellipse. So I'm going to get rid of thes two underlying ellipsis als legged, um, and press delete. And I guess we could unknown group this group since it's just one elemental can just press control shift G. And I'm gonna add a nice bluish color to this piece right here. So the last thing here would be to add some reflections. So I'm going to grab the rectangle tool creating rectangle that is going to look more or less like this. And I guess we could simply sample this colored this body color and then we can just rotate it to somewhere. Here. That's you, Bill. Right, that I'm just going to hold on the control key and move this guy to the bottom, right? Signed and extended just a bit. So once these guys are created, we could maybe drop they rapacity down here from the layers panel to something like 3%. Something between 25 3% should be should be all right. So once these guys are created we have to put them inside this main glass piece right here . Soldiers cut the mount, Select this bluish part again. Initialized the insert inside selection mode and express control V to create this kind of a flare effect, I guess make a reflection effect. And I'm just gonna grab the ellipse tal and create something like a lance release bottom right here. I'm going to make it this. I guess it's more of an origin. It's a red color. And with the rounded rectangle tool, I'm going to create something like a flash. Maybe up here. This should be fine. And I'm gonna give it this light brown, brown color, maybe looking. Just make sure that he's a rounded corners are nicely around it. Maybe all the way. All the way to the right. This should be This should be fine. So once all these elements are actually created, I'm going to select everything and just group it. So now you can simply press control, see, to copy everything, go back to our main project and I'm just going to base this guy in and again, I'm just going to type in 64 by 64. Of course, I'm President Tab after each value insertion. And then we can just match this guy with this background. I'm just going to cut that guy out. Select this background deleted press control, the do paste, this guy back in and there we go. We got the camera application Aiken created, so I guess we are done with this bottom row. We created the telephone icon messages contacts, browser and the camera application. I can, and I hope that you learned a thing or two creating this camera icon. I hope that you will. We'll be using the insert inside mode quite a lot because it's a It's a really handy method of just mimicking the clip in a mask, A effects. So once we are done with this road, we can now move on to create in the remaining applications that we can. We're going to put right here against the background of this, this wallpaper. So let's move on to the next 16. 1Create the main envelope shape: in this project. We're going to create the Gmail application, Aiken. And as you can see, I've added an extra row off APS right here. These are thes 55 elements, and I've also added some circles, some ellipsis to indicate their current a screen, the user rezone. So to create the Gmail application, I can I am going to borrow one off the background, so I'm just going to copy and paste it inside. And what I'm gonna do is I'm going to make it significantly bigger just so you can see what's happening here just a bit better and what I would do What I would like to create her right now is I would like to create in rectangle will a square that has just the bottom left and the bottom right edge is rounded. I don't want the top edges to be rounded at all. So, in the context toolbar, I'm going toe off click the single radius value that I'm going to bring these guys topper left and top right, guys, all the way to zero. From this shape, I'm going to create an envelope. And for that I'm just going to need a simple rectangle that is going to visually a divine this shape into two parts. So what I'm gonna do is I'm gonna create a rectangle that is going to look more or less like this. Of course, I would like it to have the same with as the original one. I'm going to move it up. This should be fine. Maybe just a bit bigger. So right now I'm just going to select this rectangle. I'm going to copy it into my clipboard. I'm going to be needing it in just a second. I'm going to end this guy this underlying shape to the selection and I'm just gonna choose , subtract going. I'm gonna press control V to paste this shape back in a. So right now I want to create this top part off the of the envelope. And the easiest way to do that would be to just transform what we already have right here. And in order to do that, I first need to convert this rectangle into simple curves. So I'm just gonna press convert to curves bottom in the context toolbar. And now I can grab the notes to and I can simply grab the left note. Hold on the shift key to constrain the movement and wait till I snap with center piece and do the same with this right now, it's holding down the shift key and push it all the way to the center. So we got this top triangle, this guy right here and we got this bottom part which share which is going to be the main shape off the envelope. So not to create the will. Actually, like this creases right here in the center. That would, well, really indicated the seasonal that this an envelope. I'm going to grab the mental and let me just maybe zoom in real close and I'm gonna try to find this corner right here. So click ones and clicked. Why? Somewhere down somewhere down here. So I'm just going to make sure that the stroke is selected and I want to make it darker, maybe even darker than this. And we can maybe just the size Let's to see something like three points, maybe four, I think for should be enough. And now he's going to zoom in to see if I am from spot on a dish. A build right. I would like this line to go through this top left edge. So once this part is selected, this shape is well, it's created. I'm going to duplicated by Person Control Jr my keyboard, and then I'm just gonna choose flip horizontally to we'll have to flip it horizontally. So now we have this shape going through this stop right corner, and we got this shape going through the left corner. And of course, they're going through these rounded corners here at the bottom. All these shapes, all these paths are going to allow me to create different shapes right here in the center. But before I can do that, I got to go to the layer panel and choose expand stroke. Now, if we just select this underlying path to the selection and choose divide, we are going to ultimately get separate pieces or right here. But of course, we need to just remove the parts that we don't need. These are all these guys. Let me just assume real close in and let me just remove this part right here. And these, um this back part, this top part and this part and they should have the same color and It should be the same gray color. And of course it needs to be filled, not the stroke. There we go. We could maybe even make them just a bit just a bit darker. So from this tab, I'm going to choose Grace. And maybe we could make it this dark. This should be all right. I'm going to go back to my Gmail palette. So we basically got this envelope created, but we still need some paper and toe all the Gmail logo itself. So let's do all those things next. 17. 2Add the paper and Gmail logo: But before we start at in the paper and the gym a logo, Let's do some basic housekeeper. I first I would like to select all these curves. These guys right here and I would like to unite them. So now they are a single single shape, and if you want, you could make it a bit darker. So again we could go to the Grace panel and we could maybe find some gray gray filled. But that's totally optional. If you don't want, you don't have to do it tell like that. So now we can grab the rectangle tool, and we can create a sheet of paper that is going to look more or less like this. I'm just gonna press shift X to exchange to fill that with the stroke. And maybe I will fill this guy with one of my colors fried. Huge, actually, is the light color. And of course, what I would like to do is, I would like to put this piece of paper inside the envelope, so I'm just going to press back ones just a few times. So this well, this is a piece of paper vanishes behind this bottom part off my of my envelope. Maybe you once more. And if we just grab these two elements and then move them all the way to the back, we can see that we now have that piece of paper sitting inside this envelope. And don't don't worry that this ah piece of paper always blending in with the background Well, that's just because they have the same color. But once we put it over our design, it's gonna look much, much better. So once all these elements are created, we can now just create the Gmail local. And that's going to be as easy as just grabbing at the rectangle tool and creating the first rectangle that is going to look something like this. And I'm going to make it Gmail a red. And then I'm going to just clone it over to the right and rotated by 19 degrees. No, I'm just going to put it right here. So it snaps with this vertical line, and of course, we need to make it significantly smaller. Something like this should do, And what I would like to do right now is of course, I would like to create the left part of the letter M And for that I'm gonna need the this like a diagonal rectangle. So to do that again, I'm gonna just press convert to curves, grab the no total and then just select these two nodes and I'm just going to hold on the shift key and press the down arrow key to push these guys to somewhere here. So once this party's created, I can select both of these elements, and I guess we could group them. Then I can impress control J to clone them, flipped them horizontally, move them to the side, and then select both of them and group them again. And we could maybe make these guys just a bit bigger to somewhere here. And of course, this logo also needs to be sitting inside on the envelope. So I'm just going to try to push it, push it to the back till it actually is on the piece of paper, but also inside the envelope. So now we could just try to align everything nicely to the center. But before we do that, we need to make sure that everything is nicely grouped. But as you can see, once we group these elements. This letter M is now I will over this envelope. So let's just move it one step to the back. Now I know we can select everything and just a line everything nicely to the center. And then we can again group all these elements. Copy them into her clipboard by present control. See? And now we can move over to our main design based this guy in and make it smaller again. 64 by 64 is our size, and now we can just put it over our main design. I'm going to cut it out, remove this background, paced that back in, and now you can see that our piece of paper. Since it's not being put against the white background, it's nicely visible. And we created the Gmail application. I can just like that. So now it's time to move on to then next application. I can 18. 1Create the rounded triangle first: in a this project, we're going to create the Google play application icon. And in the process, you will learn how to use the simple ingredients and some transformations. And this project will give us an occasion to take a look at some, I guess. Drawbacks Off offend into designer some problems that you might encounter and how to cope with them. So, as you can see, I have the standard 500 by 500 art board right here. And I also have a Google play color palette right here. So I'm going to start with creating a simple triangle. So I'm just going to grab it from the tools panel. I'm gonna grab the triangle tool, and I'm gonna hold down the shift key in order to create a triangle looking looking like this. Of course, it needs to be rotated to the side. So I'm just gonna click on this handle and holding down the shift. Kim going to rotated by 90 degrees. I don't want to have any strokes. I'm going to select it and get rid of it by pressing the slash on my keyboard. And if you're not too familiar with the icon, let me just quickly tell you what we are about to create. Well, what we definitely need is we need to have the corners rounded, so that's going to be our first step. And then we need to divide this whole shape into four separate parts. Let's start with the rounding the corners, and as you can see here at the top, we don't have any options to do it. Even if we turn of the triangle tool on, we can just manipulate the top point. But that's definitely not what we want. We want to keep it at 50%. So let me just maybe type that. And just to be sure, so in order to round the corners, it's best to in this case used the quarter tool. And this is this guy right here is a handy short cut, A default short cut off the letter C and the weight works is it allows you to round a specific quarter or around old the quarters. So in order to round just one corner, we need to select it and we could click and drag to round it. Or we could change the radios value here. Inside the context a toolbar. We could also select each and every quarter by simply dragging around them like this and again we could change the radios value. And let's keep it simple. I guess something like 16 points should be all right. And once you are happy with them, well, with this Ah, this kind of an effect. You know, you can just convert everything to curves that's going to make these rounded corners like soul it they're not going to be adjustable anymore. And if you still would like to change him the round of the roundness value, you could again go to the corner till select all the corners. And you can still manipulate the roundness value right here. So let's say that we are happy with the with this roundness. So I'm just going to convert all these guys to curves. And now what we have to do is we have to divide this element into separate parts, so let's a start doing that next 19. 2Divide the shape and add colors: So in order to divide this element, this logo we need to use the divide function off course. So in order to ultimately get four separate parts, we need to first create some elements that will allow us to divide this whole shape. So I'm just gonna grab the pencil and just maybe zoom in and what I would like to do, They would like to create a path that is going to go through this top left corner down here . And of course, we could still grab there the no total and maybe changed this guy to move it somewhere here . And let me just again move this guy to summer here. So it basically separates this corner into two equal parts. Then I'm just gonna grind the pencil again, click down here and then click on float just off. Click that. So click down here and click somewhere Somewhere here again. Let me just move it to somewhere here. We could, of course, again, just maybe move this guy to somewhere here. This should be the Sabeel, right? So we get these two curves and as you can see, they have no filled. They have no stroke. So I'm just going to make sure that the stroke is selected and in the stroke power. I'm just going to boosted up to something like this For now. I just want you to see that these separate elements that we are about to create now let me just share with you one. I think it is a problem here inside the designer. I mean, well, right now, let's say that I would like to have these four separate elements, but I would like them to to touch each other's seamlessly. I don't wanna have, like, any gap between them. So what I should be able to do is I should be able to just bring this stroke with just one point, then select all of these elements and then just choose divide. But as you can see, all we are left with is just one curve, this original curve and we are not dividing anything. And that's because this functional works only with the like. Simple fills that this stroke right now is kind of unlike like a live effect, and designer doesn't understand what we are trying to do here. So there is a bit of a work around in order to achieve this effect. But, yeah, it is a work around. It's not exactly what we would like to achieve ultimately. So let me show you what I mean. We can just grab on both of these curves and bring the value off the stroke, too. 0.1. And that's the lowest stroke value that's available here to us. So, as you can see, we can barely we can barely see on these thes lines right here. And still, we need to go to the layer panel and just the choose expand stroke. So these guys are no longer stroked paths. They are filled paths. And now if we select everything and then actually choose the divide option, you can see that we are now. Now we have separate elements, and of course, we have quite a lot off elements that we don't need weaken. Just select all of them and remove them. And if we just zoom in, you can see there is a still a slide sly 0.10 point one gap. But unfortunately, there's well, there's there's no other other way, way around it. So unless say, we would like to create a an effect, looking a bit differently. This is what we have to do here inside designer. However, if you would like to, you know, show that this design was created well, with purpose. We could instead of just, you know, choosing and this work around. We could let me just step back a few times. We could just grab these curves. We could, for instance, bring them up to something like three points and maybe let me change the color off the stroke up to something like Why just so weaken as C on the final effect. So, ultimately, what it would create is we would create, like, these gaps right here that would make the local look well, a bit different. And it well, we could argue that this was our design choice. So if you were just to grab both of these curves and then just again go to the layer panel and choose expand stroke again, select everything and choose divide, we can then grab all of these elements that we don't need and remove them. And now we have just these separate separate elements. So now what we have to do is we have to just add colors to our to our logo. So from the swatches Powell, I'm gonna choose this red color. This guy's gonna be blow. This guy's gonna be green. And of course, this guy is going to be yellow. So I guess we could call it a day and leave it like this. This would be our extremely flat design and Google play icon. It looks nice. I think this looks It looks all right. However, in designer you can take advantage of for one. Ah, pretty nice trick that this programme offers. I mean, if you don't want to leave the colors so looking flat like this, you can just select one piece right here, go to the filter and here in the context told, But we got the type of the field. So instead of solid, we can choose linear and designer is going Teoh create a nicely, nicely looking Grady in so we don't have to create Grady INTs ourselves. We can just let the program do some work for us. Of course, we can still change the color stops, but if you just want a quick Grady INTs, you can just change the filled type from a solid to linear, and you can let designer create the grading for you. And of course, still, with the filter, we can change the orientation of the great, and we can change its look and feel. So maybe I'm gonna do something like this. And again, I'm gonna grab at this green filled go to the filter and change the type from solid to linear and the girl what the Phil told may be push it. Ah, slum. I think I'm going to make it look and look like this that I'm gonna do the same with the yellow Phil. So I'm just going to change the type from solid to linear and again just play around with those Grady int. Maybe it's gonna look something like this. There we go. This should be all right. And then again, I'm just gonna grab the green of the Redfield and changed the filled from solar two linear and play around with this, uh, with this Grady int and I'm gonna make it look in Ah, more or less like this. This would be this revealed, right? Once this icon is created, I'm going to group everything co p it and go to our smartphone project, and I'm going to paste this guy in and let me just zoom in really close. And if you want to put this guy over the background, of course, make it smaller and put it over the background. But that's gonna be totally up to you. We could, however, just make sure that this particular I can has the same dimensions as our background. So 64 by 64 and we can just try to match it with the background. Then, of course, cut it out, then select this background deleted and paste this guy back in, and then we can just zoom back out. And this would be our A Google Google play Aiken. But as I said, if you would like to keep it, keep the background to just remember to make this I can just a bit smaller and well, you'll be good to go. So now I guess we can move on to creating our next icon 20. 9How to create a gallery app icon: in this project, we're going to create a gallery application icon. And as you can see, I have the same ward ward 500 pixels by 500 pixels. And I got a gallery color scheme right here. So I'm going to start first with borrowing one of these backgrounds. I'm just going to copy it and based it inside this document that, of course, you are going to have and you'll be able to check it out and use it. So I'm going to make this guy significantly bigger And what I would like to create teas, I would like to create, in effect of a like a Polaroid picture. So what, I'm gonna grab the rectangle tool and created a rectangle that is gonna look more or less like this distributed right. And what I want to do is I want to make sure that this this rectangle right year is, of course, in the center in relation to the underlying image but Onley for tickly. So I'm just going to align this guy horizontally to the center. And as you can see that this Ah, this guy right here is ah well, the distance between the left and the right edge are the same. But the distances between the top and the bottom edge are different. So, Horace vertically, this guy is, um, well is aligned to center. So what I'm gonna do right now is I'm gonna Gramp the Ellipse still, and I'm gonna create huge, huge, flat ellipsis that are going to be looking like they are way, way too big. I'm going to stretch them significantly out, maybe to somewhere here. This should be fine. And I'm going to fill this guy with this darker green color. Then I'm going to click it and hold control Key to clone it to the side and put it maybe somewhere here, and I'm going to fill it with a lighter green collar. Maybe I'm just going to stretch. It's just a bit more that I'm going to select both of these ellipses, cut them out, select the underlying square that I'm just going to choose the insert inside selection option, and I'm just gonna pay. So those guys back in to create it's kind of like a like a molded terrain, like some hills maybe down here. So, of course, once they are created, weaken still access them first by twirling this erect angle layer open. And we got both of these ellipses right here. So if you want to still just inhibit, you can do so you can change the color. You can change other size. They are still accessible from the layers panel. So once said, these guys are created. What I would like to create right now is the sun and some clouds. And for that I'm just gonna grab that the ellipse tal and creating the lips looking like this. This is being this good. This is gonna be our son. So I'm going to fill it with the yellow color and I'm going to create the clouds. And this time these guys are just going to be simple ellipses. One is going to be no quite big. The other one is going to be quite small. And what I would like to create right now is I would like to create something like an illusion that one cloud is behind the other one. And to do that, I'm just going to fill these guys with different shades off. Great. So maybe let's fill this guy with this. So basically white color and let's fill this guy with this darker, a great color. So now I'm just going to duplicate this affect a few times. So I'm just going to clone these guys maybe to somewhere here. And we could always just flip them horizontally. And we could, of course, just changed the these guys colors so we can show that this guy is like but closer to the user to the spectator so he can turn it white. And we can turn this guy great, and then just move it one step back. So it falls behind this, uh, this ellipse right here. And then we just grab these guys again, Put them somewhere here, make them smaller. Just Teoh show that these clouds are but two further away and maybe flip them to somewhere here. And, of course, if you want to create more of these clouds, just be my guest. You can create more variations of these clouds. What I would like to achieve right here is this kind of a nice of Ah, nice. Effective? No. These clouds being behind each other. The last thing that I would like to do right now is I would like to create, like, an illusion off, Actually, the sun shining of it. I don't want it to be this flat. And I'm not going to add race. I'm gonna do something about that background. So first, I'm going to select that background. So this, um well, this rectangle right here and this fill is actually a Grady int. If we go to the filter, you can see that right now it's a linear, Grady int. This swatch is a Grady int. So I don't want this guy to be a linear Grady int I would like it to be I'd like it to be a like Isam on an elliptical ingredient. So that's what I'm going to choose from this list right here. Gonna choose elliptical. And I'm just going to click somewhere here and start dragging to something like that. And as you can see, right now, I am. Well, this grating is going from darker to lighter shade of blue. And we could leave it like that if you want to. But equally, we could also just from the radiant panel, choose the reverse option. And right now we can see that this lighter kind of like a halo effect is going on right here around the sun. And we are moving. We are making this great and look like it's going from the light of a aversion off a blood to a bit darker version off blue. So there we go. This would be our simple, simple gallery icon. So what I'm gonna do is I'm going to group all of these elements, copy them, move over to our smartphone document and, of course, paste them that these guys in. And I'm gonna make sure that they have the right side. So it's gonna be 64 by 64 that just zoom back out. I'm going to put this guy over our background. Of course, we need to find the right spot for it. I'm just going to cut it out again, remove the background and based our gallery back in so that we get our I think it's 12345 in the our eighth Eigen. So I guess it's high time we moved on to creating the ninth. I come 21. 1Create the maps background: Roger, we are going to create the Google Maps application. I come and as you can see, I again have to say marred Ward 500 by 500. And I got the Google maps or just a maps application, a color palette right here with quite a lot of different colors. And I'm going to start again with borrowing that background because this on this application is going to be filling the entire background, this icon. So I'm just going to paste this guy back in and I'm gonna make kids significantly bigger. Of course I'm holding down the shift key. This should be all right and what we would like to achieve right years would like to create something like a mosaic off different shapes and colors because we would like to create something like a bird's eye view over the over the city. What I'm gonna do is I'm gonna grab the mental, and I'm going to just create a nice straight path that is going to roughly divide this shape into two equal halves. And now, of course, if I would like to divide this the shape into two halves, as we already know, we have to make this at this path. You know, like a simple, filled and quite thick in this case of path. Ultimately, it's just going to be a simple rectangle. So with it to select it, I'm gonna make sure that the stroke is selected and I'm going to colorize it with Well, with this visible color and from the stroke panel, I'm going to choose quite a thick stroke value, maybe something like 60 points. This should Beal, right? And once this guy's done, I'm gonna grab the pencil again and create a path that is going to look more or less like this. But this one needs to be a bit thinner. So I guess something like 50 points should do. And it needs to be. Then they're just because of my design choice. It's not like it has to be thinner in order to achieve this whole effect. Of course, if you want to make it thicker, that's going to be totally up to you. But in this case, I want to make it look a bit different. They want to make it look dinner. So what is both these guys Air created. I'm going to select them and the from the layers panel. I'm gonna choose expand stroke. So right now they are just ah filled paths. They're not stroked paths. And now I can select everything in my layers panel and again choose that divide option, and I'm going to delete the parts. I don't need these air, these outer parts, these guys right here. And I'm going to unite these center elements, so I'm going to select both of them and choose ad from the toolbar. So now we couldn't start adding colors to our pieces. So I'm gonna make sure that the film is selected and, ah, this guy's gonna be green. Uh, this guy's going to yellow this bottom guys gonna be blue at This guy's gonna be like this light gray, and this guy is gonna be the darkest. So once all these elements are created, let me just maybe make them just a bit smaller. We could now start creating them marker. So let's start doing that next 22. 2Create the marker: creating the marker is going to be extremely, extremely simple. But before we start creating and let me just select all these elements and quickly group them so to create the marker, we are going to be needing one custom shape too. So from the tools panel, I'm going to choose their tear told, this is almost the last tool right here. And I'm just going to create a tear that is going to look more or less like this Course I would like to rotate it, so I'm just going to hold on the shift to rotate it by 180 degrees. Still, it looks something like this, and I don't want it to have any stroke, So I'm just going to get rid of it by selecting it, impressing the slash key on my keyboard. And then I'm going to end this nice red filled to it. And the last thing to do here would be to create an ellipse that would look more or less like this. I guess this should be all right. And I'm gonna fill it with darker on a red. So I guess we could call it a day and just add this application liken to our smartphone. But I would like to show you one little a trick that you gonna, you know, use here in designer. And that has to do something with the tear toe. And that would make them this a marker signed look a bit modern and a bit more like the actual marker for the latest Google Maps application. I can let me just toe make them just a bit smaller and put them to the side. So I'm gonna graham. But this tear shape and let me just suman. And if we have the Tier two option tear toe selected here in the context toolbar, we got some options that we could adjust, and I don't need to adjust like the tail position I wanted to be exactly in the middle. I don't need to. It's just a curve. That's totally that's totally fine when it's set to around 30%. But I would like to, however, make these curves these lines, like here band slightly inwards. So with the tear tools options, we can actually change the band, but we can change it on Lee on one side, so I guess we could maybe go to something like, let's try 40%. I guess 40% should be all right. And if we would like to create the same band right here, we cannot do it from this context to bar. However, we can't just grab this shape, press control J to clone it. Then we could reflect it. Flip it horizontally. So now we have basically these two shapes, and when we select both of them and then choose divide, we can now just remove the pieces that we don't need. And as you can see, this whole marker is now nicely bending inwards. And let me just remove the parts that I don't need. And we could maybe just grab the ellipse tal, create and ellipse that would look more or less like this. We could also make sure that it's a nicely set in the in the middle, and we could just group it, maybe get rid off this guy and then just put this marker somewhere here. I guess he could get it could even be going a bit out of bounds. I mean, this would make the whole I can look at bit, maybe more dynamic. So we Still, we have some room between our icons in our smartphone project. So I guess this should be this would be fine. So I'm just going to group both of the these elements, copy them and paste them right here. And let me just make it. Let me just first, maybe make the with by 64 pixels and that we can just move it somewhere. Here, let me just zoom in. Just going to cut it out, remove the background and paste that guy back in and we got at the maps application, I can create it. So I guess we can move on to creating our next Aiken. 23. How to create the themes app icon: in this project, we are going to create a themes. The application I come and in the process we're going to use some nice and transformations that I bet you are going to use in your other affinity designer projects. So, as usual, I got an Our boat right here is square 500 by 500 pixels Art board. And I got the collar palette right here. So what I'm gonna do is first, I'm going to start with the grabbing the triangle tool and then I'm just going to create a triangle that is going to look more or less like this. I would like to rotated by 180 decrease. That's why I'm going to hold on the shift key, and this should look all right. Now, what I would like to create right now is I would like to create some kind of a like a band right here at that top, and I kissed. The quickest way to do that would be by grabbing their notes toe converting this shape to curves. Because, as you concede still a live shape, we could do some some specific transformations and customization here in the context will bar once they converted to curves. All these options disappear. And now, with no toe, I can just grab to stop point and bring this guy just a bit down. Ah doh, Somewhere here, Not by much. So what I would like to do right now is I would like to rotate and cloner than this guy around the center spot. And I would like to have eight copies in total. So in affinity designer, this process is a bit complicated, so let me just try to explain it step by step. So the first thing that I'll do is I'll Gramp this ah rotation center. And if you can't seat, you have to turn it on from the toolbar. This is this option right here. Show rotation center, and I'm going to put it down on here. This should be all right then. With this guy selected, I'm gonna press control J in order to cologne. This element next in the transform panel. I'm going to type in 3 60 because that's ah, the number of degrees that you will find any circle and we want to rotate this guy like in a circular movement. And I'm going to divided by the total number of copies I would like to have, which is eight. So I'm just gonna press slash eight and then and that's a pretty important step. You cannot just press tamp. You have to press enter in order for designer to know that she would like this transformation toe happen. Some gonna press enter. And then I'm just going to press control J just a few times to create this kind of a just like a wind mill effect kind of something like that. So now I would like to create something like a card out inside. So for that, I'm just gonna grab the ellipse stole. And maybe first, let me just group all these elements. Now I'm gonna grab the ellipse tal. I'm going to create an ellipse that is going to be more or less Ah, this big, this should be fine. And of course, what I would like to do is I would like to select all of them and just aligned them to the center. And once I turned this ellipse into wide. So I'm gonna make sure that the Phil is selected. Press the eye on my keyboard to select a color picker and then I'm just going to pick the color of the Arctic port. I can now see if actually the size off this ellipsis is all right. And I think it is all right. And what I would like to do right now is I would like to ultimately have, of course, separate pieces. But I want them to be cut out like this. So I'm going to grab the underlying group and I'm going to under group them. They present control shift, G. Then I'm going to select all of these elements and simply divide them in the control toolbar. I'm not going to be needing these white elements. I'm going to try to select them all in the layers panel. Let me just see if I have something left. And sometimes the result of this transformation might be some small, um, you know, like, curves that we are not going to be needing. So we just have to make sure that these guys are selected and actually on Lee. The pieces that we want to say delete well, are ultimately deleted, ended Were left Onley with the guys that we want. So we only want just these elements. So right now I can start adding colors. And as you can see, my color panel, I got eight colors that to comprise Will that make them like the basic color spectrum? So we can, just to start adding vet colors, Let me just 10. Now that the film tool on and let me just quickly add the blue colors than the green colors And lastly, thes orange red colors like this. Now, I think that we might to rotate this guy just a bit. So this this edge, this gap right here is actually in the center, so I'm just going to rotate it ever so slightly by so like us. I guess this should be all right. Maybe we can just type in 20 as our rotation and this should This should look fine. So now the last element. Now last this is the last step here will be to duplicate all of these elements, make them smaller. So let's just grouped them, duplicate them by President Control J. And then I'm just going to make them significantly smaller till they look something like this and what I would like to create right now, is I would like to treat something like a mirror reflection because I would like these elements right here to be green because I want something like a something like the juxtaposition of these colors. So if I just going to start rotating them, There we go. I'm holding them the shift key. You can see that we are juxtaposition ing these colors right here. And this is basically our themes application. I can, of course, we still have to group them. Copy them, move over to our main document, and I can. Now I can just paste those guys in. And I think that this time I'm going to leave the background. So let me just position on these guys somewhere here in the center, and I'm just going to make it significantly taller, select the underlined background and just make sure that everything is nicely ah, aligned to the center. So this would be our themes application. I can, and I think that it looks nice. So we got to the second row off application icons created, and most of them were more like system and the system application. Aiken. So we got the camera, the browser contacts Google play email. Thes thes applications are more like system applications. So now I guess we can start the next roll off apse, which would be like mawr. Like original APS. They won't be system abs. We're going to create like a TV application. I can maybe travel application. I can. As so I guess, said that I guess we can move on to create in actually those icon, so stay tuned. 24. 1Create the main body and the screen: in this project, we're going to start creating that icons that are going to be icons for some custom applications. So far, we've created mostly, like system, my comms. But now they're going to be creating some custom icons. And the first application I can we are going to create is going to be a TV application. I can. I'm just going to quickly Gramp this background right here because I'm going to be using it on this art board and a zoo. Always, as you concedes, 500 pixels by 500 pixels. And I already set up a a color palette right here. So I'm just going to paste that background in by President Control V. And I'm just going to make it significantly bigger. This should be all right. And, ah, this application icon is going to be using that this background as the main TV shape. So basically, we're not going to be creating a Nikon inside and then putting it against them against a background. But to this whole background, we're going to use this hole in the room right here to create a the the icon. What we have to do is we have to create the shape off the TV than the screen, and then some dials, speaker and a button. So first, I'm going to start with the fill in this main shape with this light for every light yellow , I guess, or yellowy white, the color now, which is going to clone this shape of just a few times. So first, I'm just going to press control J on my keyboard to duplicate this shape, and I'm going to fill it with this darkest color. And then I'm just going to hold on control and shift and make this guy significantly smaller till it looks more or less like this and that I'm going to a Gramp this smaller shape and press control J once more and make this guy also similar. This will be all right, and I'm going to fill it with this a bit lighter color. So this is going to be my main shape off the TV and once thes shapes are created, this is like the body of the TV. Now we can create a the screen. So again, I'm just gonna press control J on my keyboard and the thinner to note about this particular shape is that, well, it's going to be arm in shape for the screw. And since we are creating something like a retro TV, or maybe like a retro tourist TV, we need to make this screen this special for by three aspect ratio. So I'm just going to go to the Transform panel. I'm going toe off click that Locke Aspect Ratio icon, and I'm just going to type in four for the with and then three for the height. Now it's extremely, extremely small. It's well, too difficult to work with. But once we put the lock aspect racial back on and then just type and maybe something like 250 designer is going to count everything for us, and it's going to maintain this aspect ratio. I'm going to move it, maybe to somewhere here and then I'm just going to hold on the shift key and make it may be this big. This should be all right, and ah, maybe I'm just going to fill it with this darker color just for now, because now I'm just going to select everything, and I'm gonna make sure that these guys are nicely aligned to the center and now we can actually create the main screen, the screen itself. So with this guy selected, I'm again going toe press control, jail my keyboard and make this guy significantly smaller. And I'm just going to fill it with a light gray color just like just like this. So we are almost done with this creep. But I would like to create something like a something like a like a circular elliptical reflection right here. So to do that, I'm just going to grab the Ellipse stole, and I'm just going to create on the lips that is going to look more or less like this. This would be alright. We could fill it with a maybe like, this light color. Or we could grab this great color or a darker gray color. Or we could just grab a simple white color. There we go. And I'm just going to cut this guy out because I want to base it inside this screen right here. So I'm just going to they select this insert insights the selection option, And I'm just going to pace that guy back in. Of course, this is way too white. It doesn't look all that good does. It s o still, we can go to the layers panel and you can see this rounded rectangle right here when l lips . That's a kind, like sitting inside. So we can not just target this ellipse by simply clicking on it. And we can play around with the opacity. I can maybe drop it down to something like maybe around 40%. I guess this should be this revealed, right? 25. 2Add the dials and buttons: So now that we have these guys created, I guess we could move on to creating of the knobs, the dials. So for that, I'm just gonna grab the ellipse tal and I'm going to create an ellipse. Maybe somewhere here that is going to look more or less like this. This would be all right, and I'm going to fill it with a gray color. Let me just know zoom in really close. And what I would like to create right now is I would like to create something some kind of a handle. It would make turning this dial a bit easier. Some just gonna Gramp the rounded rectangle tool for that from the tools panel. And I'm going to create around the direct and go looking more or less like this. Of course, it can be more rounded or less rounded. That's going to be totally up to you. I'm going to grab it by this red spot right here and make it just a bit were rounded. Now I'm going to select both of these shapes, and I'd like to aligned them horizontally and vertically to the center. But as you can see, it's not too visible. This shape right here is not too distinct. What I would like to create right now is something like a shading beneath this rounded rectangle. Let me show you what I mean. I'm just going to select it and I'm going to press control J twice to have three exactly the same rounded rectangles. I'm just going to grab this one. This let's say the male rounded rectangle and I'm going to fill it with a dark color. And then I'm just going to press on the last left arrow key once. And then I'm gonna grab this bottom one, fill it with a lighter color and that I'm just going to press the right arrow key ones so we can easily create this kind of a kind of a three d look. I guess so. Now this piece that this knob is a bit more distinct, but there is a bit of a problem with this effect. I mean, as you can see, it goes out right here at the top. It goes outside of this underlying ellipse and here the bottom it does the same. So we can fix that simply by grabbing both of these rounded rectangles, cutting them out, targeting this ellipse and again making sure that the insert inside selection is selected and then just paste in those guys back in. And as you can see right now, we have got this a shading affect being restricted on Lee to the underlying ellipse. And I guess it's a good thing to right now. Just grab all of these guys and all of these guys and just group them because anomie would like to maybe rotated a bit. Just don't forget to set the transformation origin point to the center. So now we can just rotate it, maybe to somewhere here, that's just, you know, that there's no right or wrong here. You can turn it as much as you want. And then I'm just going to maybe cloned this guy to the side by holding both the control shift keys and then clicking and dragging it to the side to somewhere here and again. We can maybe turned this guy, but to decide to somewhere here. Then I'm just gonna grab the the Ellipse tool, creating the lips somewhere here because I would like to create a power bottom. So I'm just going to fill it with this red color. And lastly, I'm just going to create some speakers by just creating just a few just a few simple rectangles that are going to be filled with this black color. And I'm just going to clone them down first by just pressing to control, then shift and then dragging this guy down. And then I'm just going to duplicate the last transformation by President Control J once and then twice. So now we can just make sure that everything is nicely aligned. So I'm just going to grab all of these elements, group them and then add all of these elements to the selection cause remember these guys, these notes are groups. So I'm just going to make sure that these guys are nicely align toe Burghley, do the middle. And I'm just gonna press OK, and then I can just group all of these elements. So now this is one big group, these guys right here and I could add this underlying shape this background to my selection and now make sure that these guys are nicely aligned to the center as a group. So if you want, you could maybe create just simple legs right here. So we could just grab the rounded rectangle tool and maybe create, like, one leg somewhere here. Then just copy it over to the side, grab them both, maybe group them by President Control G and putting them all the way to the back. But that's totally up to you. This kind of disrupts this. Um, well, this whole background, I can think. I mean, right now we are slow. Well, this whole Aiken is a bit bigger than the other items, you know, where in our smartphone group. But you know you can do that, That that's not a problem. Now we can just simply grab all of these elements and group them. So I'm just going to copy them, move over to the smartphone, a project, and I'm just going to paste this guy back in, and I'm just going to make sure that the disguise and which is set to 64 pixels because right now, because of the legs, the height will not be set to 64. But I guess this looks on the right. We can just put it Maybe somewhere here, this should be This would be all right. So we got the TV application. I come and I think it looks really nice. It you can see we are now starting to add some custom icons right here. So our smartphone doesn't look all that schematic. So the bus we got this icon created, we could maybe now create something like a travel application I can which is going to allow us to practice the Pantelis a little bit, So let's move on to that now. 26. 1Create te main continents shape: in this project, we are going to create a travel application. I come and as you can see at the beginning, things will start a bit differently. I mean, I got a surgeon life for a like a globe earth, an image, and this is what I found. So I just call pitted and pasted into into affinity designer. I also have a travel document color palette right here. And we are going to start first by tracing these two continents. So what do I mean by that? What I would like to create is I would like to create a very rough, flat designing outline over these continents. And for that, I'm just gonna grab their mental. I'm gonna make sure that I have the stroke active, and I'm just going to maybe make it something like very distant something that you can see easily. And I guess one point should be enough. And what I'm gonna do is I'm simply going to just click and again. Let me just make it one point. I'm just going to click like that without dragging just to trace the rough. I'll climb off this image. So maybe down here somewhere here so I'm not clicking. And dragon, I'm just clicking just to get a rough sketch right here. And then I'm gonna down here to South America. And I guess here we can just go maybe to somewhere here too. Should be. Oh, right now let's go back to hear on that. Let's go, AARP. There we go. Maybe here. Now, we basically are just clicking and dragging to get the rough outline. But of course, once we have, once we create all these elements, we still can at the just them. But let me just show you how to do it in just a 2nd 1st we need to go north to Canada and just to trace these parts. Now, if you want to trace all these islands very meticulously, you can do that. But as they said, I'm just gonna create a rough outline off these elements right here. Maybe down here, so something like this, and then just go up and then I'm just going to find the first anchor point. Click on it to finish this shape, and this is what it looks like right now. We still have to trace the Greenland and these islands, right here. So I'm just going to click again. Somewhere here. I want Teoh. You know, I want to create a second shape for for Greenland because, as you can see, it's of a different color. So I think we should follow this on. Let me just finish. Mm. It Ah, I think this should be all right. There we go. And lastly, let's go down here and again with the pen Tal. Let's trace these guys down here and then these guys down here like that, and I think this should be all right. So we got disc, Irv, and let me just maybe sample sample this color. There we go. And we also have this curve. So let me again. Just sample this color. And I guess I just This should do it, I think. I mean, if you want to trace all these smaller islands, all these elements that's going to be totally up to you. What I would like to just share with you Is that the technique off? Just in all these anchor points? All these notes. So with the Noto, we can still select Ah, any shape. And if we just zoom in a little bit closer. We can move them around, maybe to somewhere here and this guy, maybe somewhere here. So I'm simply just clicking and dragon grabbing an individual ankle point. Maybe we can go down here to just It's just all these all these shapes. So we don't really have to be, like, spot on the first time because we can always just grab the Noto and then just move some some of these notes, some of these anchor points around. Maybe this guy just a bit more. Maybe this guy, these guys should be all right. We could Maybe it's just them a little bit right here. And maybe right here. You know this some will, once we finish this icon Ah, these continents, these shapes are going to be pretty small, so you don't have to be overly precise. But I guess is a good idea just to make them a little bit more precise. Not just so they look a bit more natural. Also, if you're feeling that you could use some more notes on a given path segment like, for instance, right here, who would the note told you can just click on a path segment to add a note, and then we can just simply a grab it. So click on a path segment, grab it and move it. Click on the past segment, grab it and move it. So once all these guys are created, we can, for instance, fill this part with the Greenland, where they nice colored this white color. We can fill these pink continents with this green color. And of course, what we still have to do is we have to, like, fit these continents inside on the lips. So I'm just going to grab the Ellipse tal and create an ellipse that is going to look more or less like this. Let me just exchange to fill with stroke. And maybe I'm just going to make their filled the stroke yellow just so he can see a bit better. I guess we could maybe make the the world just a bit smaller. There we go. So now we can just grab all these elements. All the continents maybe will be easier to do from from the layers panel, and I'm just going to cut all them out, grab the Ellipse and again just used the insert inside the selection mode and just pressed control view to fit those continents inside my lips. So now one such as turn them on the underlying image off, you can see that we got this well, this whole shape created. Of course, we are not done yet. We still have toe still have to add the proper colors, and we have to turn all these elements into, like the main part of a magnifying, a magnifying glass. So let's just start doing that next. 27. 2Add the magnifying glass and the background: So the first thing that I will do is I'm going to add the proper color to my earth. So I'm just gonna grab this ellipse this guy right here and I don't want it to have a yellow strokes. I'm just going to get rid of it by pressing the a slash kill my keyboard. And I'm going to initialize the Phil told by President X and then I'm just going to fill it with this blue collar. But I don't want this ah shaped Look that flat. I would like to add some some definition to it. So what I mean by that is I'm just gonna grab the filter and I'm going to change the Karuna there for the filled from solid to a grating but not the lady are but the elliptical Grady int. And as soon as I do, that designer is ah given me some default value. So if my initial blue is this blue, this left blue right here. It's given me a lighter blue here at the end at the other end. But if I if you can see right now, it's, um it's not looking all that nice. I would like this Grady int to be reversed. I would like it to go from the darker to lighter in the center. So what we have to do is we simply have to press reverse. And now you can see the weaker actually create something like an illusion of any of a sphere that's going to look more or less like this. I think that I think that it looks all right. So now we can just grab our lips. And as you can see, all these elements are inside my ellipse. So if I just check the dimensions as you can see, it's 23 by 2 30 I can now just grab the ellipse tal and create an ellipse that is going to be just a bit bigger, something like maybe 2 40 by 2 40 And I want to turn this ellipse into a magnifying glass. So what I'm gonna do is I'm going to fill it with this darker color, this dark blue collar, and I'm going to put it all the way to the back by pressing this move to beg option. Well, this bottom here in the toolbar, I'm just going to move it somewhere here And of course, we could grab both off them and make sure that they are nicely aligned to the center. This reveal right? And now, maybe we could You know what? Let's clone it. So we now have two identical ellipses, and this guy on top is gonna be white or this really, really light gray color. And this underlines Ellipse is simply going to be slightly bigger till it looks more or less like this. Of course, we could grab this underlying lighter ellipse and make it just a bit bigger, but that's just going to be totally up to you. I think that it looks I think it looks fine. So once all these guys are created, I'm going to make them just stay but smaller to somewhere here. And I'm going to create a handle for my magnifying glass. So I'm just gonna grab at the pencil again, click somewhere here, hold on the shift key and click. Maybe somewhere here and off course, this handle needs to have the same color as our with this main shape of our magnifying glass. So we're gonna make sure that the stroke is selected at a proper stroke color to it. Then go to the stroke panel and just increase the width of my stroke. Maybe maybe to somewhere here. I guess this should be all right. So now we got the the handle. We got the magnifying glass, and we got the world inside. And at this stage, if you would like to maybe change some things about it, of course you still can. For instance, you could grab this world shape right here and you can twirl open this ellipse and you can have access to all the individual pieces. And if you want, you can of course, still maybe make this. Ah, Well, this handled just a bit thicker. Well, if you want to. But remember that once you do, this guy taker wants to turn it taker. You would have to turn this shape, this outside shape, just a But they are just so just so I know everything looks nice and proportionate. Let me just move it a bit to the side. So there we go. We got this guy created, so we can now just put it again against a nicely looking background. But before we do that, let me just grab this uh, this shape right here. Go to the layer panel and just choose expand stroke. I don't want this guy to be a stroke anymore. I wanted to be nicely filled shape. So now we'll just borrow this background. This guy right here, Copia over to my travel document, and I will fill it with this yellow color. And, of course, it needs to be filled with yellow, not stroke a stroke with a low yellow color. And let me just to maybe grab my main shape, all these guys right here, and we can just group them, and I'm just going to make them significantly smaller, put them over here and put them all the way up. So I'm just going to use this move to front option and there we go. We basically got our A shape created. Of course, all we need is to align everything nicely. We can now just group them, and I'm just going to copy them over our smartphone and just paste this guy in and move it down Here, let me just zoom in to see everything is properly aligned. This should be fine. So there we go. We got the travel application Aiken created so used the Pento. We used some elliptical Grady INTs, and I think that this that this application I can looks nice. We can now move on to creating our next icon, which would be a food application icon. And we are going to create a hamburger in the shape in our next project, so stay tuned. 28. 1Create the bun and the lettuce: you know this project, we are going to create a hamburger flat to design the artwork, and it's going to be our main shape for the food application, Aiken. And as usual, I got the 500 by 500 pixels are board that. I got the color palette right here in my swatches panel, and I'm going to start first by grabbing of that one of the custom tools that is called the Crescent Tool. And the way it works is when you click and drag, we're going to create a crescent looking like this. Now I'm going to hold on the shift key for now, just to create a shape that is going to look a like this. And now we can start turning it into the top part off the hamburger. So first I'm going to rotate it by 90 degrees till it looks like this. Let me just move it a bit to the center. And since it's still a life shape, we can grab the crescent still right here, and we can no move this guy this bottom part down or up, depending on our design and needs. And I think I'm going to leave it as something like that. And of course, it needs to be march wider. Then it is taller. I guess that should be fine. Just going to maybe make it just a bit a smaller. So once this guy is created, maybe I'm just going to fill it with this proper orange color. So now I'm going to create the bottom part off the hour hamburger. So for that, I'm just gonna grab the rounded rectangle tool, and I'm going to create a round attract and gold that is going to look something like this . This this should look fine. Doesn't we have to be perfect? I am, however, going to move it down. And what I would like to create right now is I would like to just add rounded corners to the bottom corners, and I would like to add roundness to them. And I don't wanna have any roundness attached to my top left and top right corners. So from the context toolbar, I'm going toe off click single radius and is going to allow me to change this top left radius value all the way to zero and top ride value all the way to zero as well. So now I would like to create, like, the main contents that would go right here inside our hamburger. So for that, I'm just gonna first grabbed around the track tingle tool and creating around the track tangle that is going to look more or less like this. This is going to be our meat part. Let me just maybe make it this big. And I would like to round these corners all the way to the max. So from the context, toolbar is going to move this slider all the way to the right to round it like this, and I'm just going to make it Brown. Let me just zoom in a little bit closer. So now we can simply just maybe make this guy just a bit bigger. We can move it up, we can move it down. That's going to be up to you. What? I want to make sure that is, I want to make sure that these guys are nicely aligned to the centers. I'll just select them all, click align horizontally to the center. And we created this piece off Mita right here. So now what I want to create is I would like to add something like a lattice leaf right here. And unfortunately, in a designer you don't have, like, the wave tool. Nor do you have, like, a wave effects that she could apply to simple paths. We have to find a work around for it. So the work around is, um you mainly have to use simple, simple tools that you can then transform a little bit. So the simplest was that I'm going to be using is the triangle tool. And I'm just going to create a triangle that is going to look something like this. Maybe I'm just going to make it a bit smaller to something like something like this. I'm going to fill it with this flat design lettuce color, and I'm just going to rotate it, holding down the shift key by 180 degrees. Maybe I'm just going to make it just a bit narrower and I'm going to put it Ah, maybe somewhere somewhere here. So now what we have to do is we have to repeat this shape all the way to the right, so I'm just going to clone the first guy a bit to the right to somewhere here. Of course I'm holding down the control key. And then I'm just going to repeat this transformation by President Control J Quite a lot off times. I think this should be all right. And I guess at this point, this doesn't look too interesting, does it? I mean, it looks like some kind of a zigzag, so we can fix that first by grabbing all these triangles, and it's a bass to just use the layers panel for that. So once the stop triangle is selected just going to go down to this last triangle and just shift click on it, which select all these elements of shift clicking. And then I'm going to go to the toolbar and choose ad, which will turn these Ah, these single triangles into one. Well, kind of like a zigzag, I guess, a shape. So the next step would be to round these corners so they look a bit nicer. And for that, I'm just gonna grab the corner tool. And I'm just going to Marquis around all these corners, and I'm just going to play around with the radius value a bit. Maybe till it looks something like this. I guess this would be all right. Now, at this stage, we could maybe just make these guys just a bit bigger. We can make them smaller. We can move them, adjust a bit around. That's going to be up to you. Unfortunately, we cannot change the number of these A Rijs. Right here. We have what we have, but we can just cut this guy out, make sure that this meat part is selected. I'm going to then turned the insert inside selection mode on engines paste that these guys and so my letters looks a bit nicer. Now we can just add something, like some catch up, maybe here on top and then just a bit off cheese. So let's just start doing that next. 29. 2Add the cheese and the background: so adding the ketchup is going to be super simple. All we really need is just a simple around the track Tingle told that it's going to allow us to create a around the track tangle looking something like this. And I would also like to round it all the way to the max and I'm gonna turn it red. Now I'm just going to select all these elements and again make sure that they are nicely aligned to the center. Then I'm gonna grab the pen tal to create the cheese right here, and it's going to be a very simple shape. I'm just going to click somewhere here. Then maybe somewhere here, click and drag to create a nice curve that I'm going to press the bulky to detached this direction, handling pointed up like somewhere here. And then I'm just going to click wellness and then click on this first and note to finish the shape that we can now fill with blue. And of course, we could make it bigger. We can make it smaller. That's going Teoh. No, depend on your taste. How much cheese you want here And what I'm gonna do is I'm going, Teoh, Right now Grab the stop bun right here and make sure that this is put all the way to the front. So I'm gonna choose move the front and then I'm going to slightly move it down. Do somewhere here. So of course, this guy is right now just a bit too big. I'm going to make it smaller till it looks something like this. And the last bit would be to just maybe add some sesame seeds. So I'm just gonna grab the ellipse tal. And I'm just going to start creating random ellipses here and there. Just like that. You don't have to create too many of them. Just a few will suffice, but it would be good if they don't have equal size. We would like to create some some randomness, maybe one. We're here just like this. Of course, once they are created, you can maybe move them around. There we go. And we basically got our I got our shape created. And of course, we still need to add well, the bag ground to our shape. Also, don't forget that these two made hamburger shapes like this top guy and this bottom guy are still live shapes. So if you would like to change some things about it like for instance, you would like to change something about this crescent, you have to select it from the and the tools panel right here and now you can move this guy to the top, or you can move it to the bottom. You could also, for instance, grab this bottom Onda rounded rectangle, and you could play around with these with the roundness values off these of the bottom corners to make your hamburger look a bit a bit differently. As I said, once this guy says, select girl created, we gotta select it. And then we can just group it and let me just go back to my to my main project. And again, I'm just going to borrow this background and I'm going to paste this guy in, and I'm gonna choose this Swatch and this is a very slight Grady int swatch. And I think I'm gonna grab the filter and change the direction off the Grady int something like this. And now we can just grip over hamburger, make it significantly smaller, put it somewhere here, make sure that it's on top. Let me just is amazing. There we go. We could, of course, some grab the filter again and play around with the Grady. And still it looks, maybe something like this island. If you want, you can just give it a plane blow field that's going to be totally, totally up to you. I think that it looks. It looks fine. Now. We can just select both of these elements and again make sure that they are nicely aligned to the center weekend. Then just group them, copy them and paste them inside our main project and align it nicely with the rest of the gang. So we're slowly building. Ah, the portfolio off our icons. We got all these system icons, and we already have three additional custom application icons, so let's move on to create in the next one. 30. 1Create the top capsule: in this project that we are going to create the voice recording application icon and the process is going to be just a bit longer and maybe just a bit more complicated. But it will allow us to introduce one and your technique to our design process. And I hope you will be using in in your own future projects. So, as always, I have an are about ready and waiting for me. It's the dimensions are 500 by 500 pixels, and I already have a this voice recording color palette right here. So I'm going to start again with grabbing on this simple round attract angle to and it's ah , quarters are going to be around it all the way to the max. I want to this guy to look a moralist like like this next with the same tool. I'm just going to create another round attract angle that is going to be more or less this big and it's corners. We're going to be rounded to the maxim as well. Let me just move it somewhere here, and I'm just gonna grab both of these elements. And from the toolbar from the alignment panel, I'm just going to choose a line center. What I would like to achieve right now is I would like to have three separate parts right here, and I have to divide all these elements. Meanwhile, using that technique we already are familiar with. However, since I don't want to first divide all these elements and then unite these shapes right here because that's what we would ultimately have to dio. Because if we just grab both of them than just divide and all of these elements were going to be left with these three elements that then we would have to just select and then just unite them. I mean, we can do that, that there is an option, but we could also mean we'll do it in a bit of a different way. So I'm just going toe copy it, this guy into my clipboard, this element indeed selected then the underlying shape and divide everything. But now I'm just going to delete on these curves that I don't need, and we can do it either from the layers panel are simply by selecting and deleting. Now one right here on our art board and I'm just going to press control of the and I basically have the same effect right here. So first, let's take care of this top part. So what I would like to create right now is I would like to add some Indians here to the stop part, on the left and on the right side, and then some shading effects inside. But as you can see, I don't have Teoh will any grace watches right here? And that's because designer has this whole grace palette with all the shades of grey and from this pilot, I'm going to choose this black 5% which is actually very, very light, great color. And I'm gonna grab this capsule and I'm just going to Kelowna twan us by pressing control. Jake, What I wanted would like to do with it right now is I would like to fill it with a simple black color, which is not really, you know, creating a shade in a fact. But in well, it will in just a second, I'm just going to make it smaller. I'm gonna hold down the shift key and make it look more or less like, maybe like this, that I am going to keep it as black, but I would like to change its blending mode. But where Before I do that, I'm going to cut it out and paste it inside this capsule. So I'm going to select the capsule, and I'm just going to press in a certain side selection and then just press control V to paste it back inside. And, of course, it's not soon making that the effective, like, different at all. But once we change them, that the blandy mode from normal to soft light and of course you can do it right here from this blending mode, unless that sits next to the opacity on option and I'm going to choose soft light, which is basically looking like it's just dropping the opacity down. But that's not all. So I'm just going to press. Well, I'm just going to choose soft light, and since this guy is them inside, this curve was based it inside this curve, we can move it around and constrained. Of course, this effect to the to this apparent apparent shape. And now we can just press control J again, and when we do it, you can see that this whole effect is getting strengthened. But if we start moving this guy around, you can see that this planet motives interacting with the all the underlying shapes. And we can make this whole this whole effect look different. Theon. Of course, we can play around with all the other shapes. We can make them smaller. We can make them bigger weaken, do all crazy things with it to make this whole effect look, look a bit different so it could maybe move them around. We can move this guy around, you know, just to have a different, differently looking effect. So once these guys are created again with the rounded rectangle till I'm going to create the Indians. So first, I'm just going to create toe one round the director and gold that is going to be again around to the max. And I'm gonna fill it with a bit of a darker gray color first that I'm gonna press control J. And as you can see here in the layers panel, I got two identical around it rectangles and the underline one is going to be filled with white, and I'm just going to lodge down just a bit by pressing the down arrow key like three times . And this should be this would be fine. So once these guys are created, I'm just going to group them. So I'll select them and press control G. Then hold down the control key and the shift key to cologne, These guys down and then press control J to repeat the last transformations. So they said before I would have these Indians on both left and the right site. So first I'm going is just shift Click on these elements on these groups press control g again to group thes three sub groups. And then I'm just gonna press control and then shift and then click to move these guys to the right side. Do I guess, somewhere here. But I guess I would like to be precise, So I'm gonna select both of these groups and group them. So now a designer sees them as one element because now, when we select all of these elements, so all the microphone parts and choose a line horizontally to the center from the Align panel, we can be sure that everything is nicely, nicely aligned. But of course, we don't want thes intends to fall out of our microphone shape. You want them to be constraint to this capsule so we could again just pays them inside the capsule using the insert inside mode. But we could also use the layers panel for that in designer. If you just Gramp one element and then just move it so it fits inside another element, you can simply pasted inside that element which, as you can see, is a given us this nice. Well, effect off based in off Taliban right here. So he basically got to this top part to create it. Now we have to move on to creating the remaining parts off our microphone, So let's move on to that next. 31. 2Create the stand and add the background: So now let's take care of this stand of our microphone. And first I'm going to change this. Ah, this guy's color. So let me just go back to my to my color palette and I'm going to fill it with this This, like, very, very dark off Grey Blue, something like that color. And I would also like to add some shading to this piece. So I'm just going to clone it by pressing control J. I'm going to filled with a darker color and ah, I'm just going to cut it out and then just used the insert inside mode to paste this guy bake in, and then we can just move down to somewhere here. And of course, if you want, you could maybe make this guy bigger. You can make it to smaller, but I wouldn't advise you to make it to smaller. And then this bottom part of the capsule we can go to maybe somewhere here. So we got, like, a double effect. We have some separation, some definition at its to this part and also to the underlying part. There's a part of the bottom that we are going to turn red. So it looks like this. Let me just grab all of these elements and make them significantly smaller. And what I would like to create right now is I would like to add this kind of a like a basket, like a suspension for our for our microphone. So for that, I'm just going to clone this underline part, and I'm going to think I'm going to exchange to fill with the stroke and start to make in this guy bigger, some holding both shift and controlled to make it bigger. And maybe I'll just notch it down, maybe to somewhere here. I want this space right here to be somewhat even. So maybe just one more notch and towards them towards the top. And of course, I don't need this bar right here. I don't need it, so I have to get rid of it. So in designer, in order to just cut a piece like a well, in this case, a path out. We have to grab the notes tool. Let me just zoom in. And as you can see, we got some nodes right here that we don't need. So this guy and this guy some shift clicking on them and from the actions pale. I'm just going to choose break curve. And now, if we select them again, we can just click, delete and then just click delete one more time. And now in the layers panel, you can see we have this curve this guy right here and another curve that we don't need. And we can just simply press delete. And we just have this Ah, the skin, like 1/2 the lips like us half the lips halfway around rectangle toe shape. But I don't want it to be that short. I would like to just select this node and then this notes I'm shift clicking on them. And then if you just press the right wealthy up arrow key, we can just praying the map, maybe to somewhere here, let's zoom back out to see what it looks like. I guess it looks all the right and we could also just go to the stroke panel and maybe increase the stroke ever so slightly to maybe something like this. Maybe just a bit more. Let's go with 10. So what is? This guy is created. We could add something like a movie like a screw going on right here and some bolts on the left and right. So I'm just gonna grab a simple rectangle tool and creating rectangle that is going to have just to fill, not the stroke. And I will choose the move to back option just to make sure that this guy's send to back and from the swatch spinal I'll choose of this yellow color. Let me just make IDs significantly smaller on white on one side. Now just grab the around it. Well, the ellipse stole. Of course, you could grip the rounded rectangle to lift. Want I'll just hold on the shift key to make quite a significant in size perfect circle. I guess this should be This will be fine. And I'll just move it. Do somewhere. Here, let me just zoom in just to see if I'm spot on, this will be fine. Let me just zoom back out and then I'm just going to hold on shift and control to clone this guy to the side. I guess the remaining part right here would be to just Gramp the rectangle tool and create a simple, simple rectangle that is going to look something like this. Of course I will turn it red. Maybe I'll just make it unjust, a bit smaller. And I guess we are basically done. We still could turn this guy into a simple path. I don't want it to be a stroke because I just want to avoid any nasty surprises once I am making this guy a smaller. So I'm just going to go to the layer panel and choose expand stroke. And now you can basically group all these elements and maybe make them just a bit smaller. Because now I would like to Gramp this at the background. I want a copied based it in right here. Handle. Turn it blue and I'll move it all the way to the back because now I'll be able to put the microphone over it. Let me just zoom in, make it smaller till it looks something like this. We can, of course, make sure that they're nicely aligned by aligning them from the Align panel. And I would like the microphone to go inside my rounded rectangle so we can just try to put it inside. And there we go. We basically based it. This microphone in and our icon is ready. But sure, if you want to make some know some changes to your that your microphone, you can still do it that these air still just groups inside groups. You can just target specific elements like maybe the ellipses make them smaller or any of your blending modes that you could apply to your shading. That's gonna be totally up to you. What I'm gonna do is I'm just going to select my group, My icon. I'm going to copy it and I'm going to paste it inside my main document, and I'm just going to put it where it to where it needs to go. So we get the the voice recording application, I can create it. And I guess we are ready to create another icon, which would be the alarm clock application. Aiken. So let's move on to that 32. 1Create the main shape of the clock: in a this project, we're going to create an alarm clock application icon. And in this project, we are going to be using quite a lot of transformations that I don't think we used before. And we are going to be using some design will way off thinking that we didn't to use before . So, as always, we have this art board right here. It has 500 pixels and with and 500 pixels in height, and we also have a alarm clock color palette right here. Since the creating a clock requires quite a lot of precision, we also need to be precise. So in order to be really precise here in designer, we could be using some guides and rulers. So I'm just going to go to the View menu and choose show rulers. But it's always a good thing to just remember this control plus our shortcut, and I'm just going to click on this left ruler and drag out a guy to somewhere here. I mean, I would like this guy to be well, roughly in the center. I don't need it to be exactly in the center, and I will also print out a horizontal guide and put it roughly in the centre as well. I just want to guys that are no intersecting. I just need a center reference point for my clock. And I really don't need these guys to, you know, across the Thames. Well, each other exactly at the centre of the art aboard. Because what I want to do right now is they want to create the first remain in the peace of our clock. And once I grab Theologian Stal and move it over the intersection of my guides, you can see that I get these intelligent guides appearance. And I can now just hold control and then shift to create a perfect circle, looking more or less like this another well, design thinking. I guess a part would be to use simple gray color. Simple shades them off of black because I don't want to bother myself with colors at this point, because we are going to be creating quite a lot off the different elements. So I don't want to distract myself with the colors, So I'm just gonna grab the Grace Conwell palette, and for now, I'm just going to fill this guy with this light gray. So the next step would be to create the bells here at the top because this is an alarm clock. So we need some Mels. Let me just is a man. And for that I'm just going to need will, too. Well, three in total shapes. And first I'm going to grab the rectangle tool. And since I would like this guy to be exactly in the center, I can not just use the guide so I can just click on it, hold down the control key to create my shape from the center point and create a shape that is going to look more or less like this. That I'm just going to parade is down to somewhere here. I'm going to put it all the way in the back. And maybe I'll just fill it with a different shade of gray just so you can see it a bit better. So to create. So to create the bell, this main bell part I'm going to need this segment toe, so I'm just going to create a selected from the toolbar. This is some this guy right here and again I can just find in the lab Ah, well, this guide, Kulic, hold down the control key. The shift gears well and create a shape looking something like this. And I'm gonna use this bottom red handle to just move it up to here. Of course, we could move it up. We could move it down in relation to this to this stick, I guess right here at this stud. So now I would like to maybe failed this guy. You with a better way lighter, Great. Like this one. And I would also like to create some shading in side are Before I do that, I'm just going to convert this guy into curve self selected and click convert to curves in the context toolbar gonna press control J to duplicate it. And I'm going to fill it with maybe with just the black color course we can just cut it out by present control X, select this underline shape and choose insert inside selection. Insert inside this Will this shade in effect and move it just a bit to the side. And we basically got this shading created. Of course, it doesn't have to be all that black. We could make it just a but Ah, well, lighter. Once we have this first bell created, I'm just going to turn it into a group. We can all make it smaller. We can make it bigger. And if we just hold on the control key, we can be sure that we are actually transforming it in relation to this guide. So everyone will be nice and symmetrical. So maybe I'm just going to make it. Ah, just a bit. Just a bit bigger. Um, maybe to something like like this, because this should be this would be all right. And what we would like to have right now is what you would like to have in Well, first moved to the side. Like to the stop left port and have an exact copy of it on the way. All the other side on the top, right side and on. The goal here is to have unequal distance between these two bells and the bells and the center off my clock. So in order to do that first, I'm going to clone the stop. Help us. Of course, I won't have two copies of it. And now I'm going to move this rotation center to this intersection right here. And if you don't see it, if you don't see the rotation center, just make sure that this button right here is selected. So show rotation center. So once we drag it down, we confined the intersection. You can see that designers snapping our rotation center to this intersection. And now we can just rotated by holding down on the left mouse button and just clicking on the stop handle and move it. Maybe do somewhere here. Of course, we can do the same womb here inside the transform panel so we can just manipulated this slider. Maybe let's go with something like 25. This should be fine, and we can do the same with this remaining guy so we can grab the rotation center again, find the intersection, and this time we have to rotate it by Well, the same will number by 25 degrees with a minus in front of it, because we rotated this guy by 25 degrees. And if we want to rotate this element in the opposite direction, we need to just enter miners and then the same number, which was 25 then just press enter and as you can see. Now we have and these elements symmetrically put to just the way we want them. And the last element right here would be to just a creator moral, this kind of a I don't know, it's technical name, that element that it's actually beating on the bell. So when will you know when it's time? So I'm just gonna grab the rectangle tool and find it this guide, create a wrecked and go looking more or less like this. I'm also going to put it all the way to the back. And maybe Allah just change. There's great into something like like this. Maybe I'll make them just a bit better. Grab the Ellipse Tal again. Find the guide present. Hold on the control and the shift geese on. Make it look more or less like this and I'll make them just a bit just in a darker so it looks more or less like this. So we got to basically are topper elements I created so we could move on to creating a that dial. So let's let's actually move on to that now. 33. 2Add the dial and the legs: so start creating the dial first by Kelowna this elements will press control, Jake, and then I'm going to make it significantly smaller till it looks more or less like this. Of course, I'm holding both of the controlling the shift keys, and I will felt this guy with a simple white color so know what I would like to do is they would like to create the markers for my dial, and I'm going to grab the rectangle to for it. Let me just zoom in. And again, I'm gonna find my, uh, this vertical guide and just click and drag to create a marker looking like this, and I'll make it somewhat darker. Maybe like this. And of course, what we won't have right now is wanna have, like, you know, ideally, 12 copies off this guy rotated in relation to this centers. But And if you don't wanna have all those 12 markers, well, you don't have to create them, but I'm going to create him just for the sake of learning. So I'm just gonna grab this rectangle, this guy right here and again, Let me just maybe zoom in the real close. I'm gonna grab the center, the rotation of center and boot, it's and this intersection gonna press control J to duplicate this element along with the rotation center. And here in the transform panel, I'm just going to type in 360 because that's well, the number of degrees you will find any perfect circle. And I will divided by the number of copies I want to totally have, which in my case, will be 12. And here, Well, in designer, you have to press enter at this stage because if you just press tab like you might know press and illustrator, this technique won't work for you. If you just press enter, we are going to move this guy by exactly 30 degrees because designer is counting in the calculating on this distance for us automatically. So if I now just zoom back out. If we now just press control Jay, we are going to repeat the last transformation, and we are gonna have perfectly it distributed markers like this. So what's the markers are ready. We can now just grab the ellipse tal and start creating of the pointers. So again, I'm gonna find the center spot and creating the lips looking more or less like this. Then I'm gonna grab and maybe the triangle tool. This time, let me just zoom in. And again, I'm going to find us. Find the center spot too, right here or this vertical, this vertical guide. And I'm just going to create a triangle that is gonna look more or less like this. I guess this would be fine. And I will move it all the way up till it snaps with this well, horizontal guide right here. And what I wanted to right now is I would like to create to my first pointer that is pointing and at the 10 will out 10 hour, 10 AM I guess in order to make this point or two point at the hour that we want, we have to rotate it. So again, I'm going to grab the rotation centre and I'm gonna move it down here till it snaps with this horizontal guide. And I'm just going to press control J. So I have a clone of it because we want to have two pointers and I'm going to move this guy to somewhere here. Then I'm going to grab this pointer and I'm going to move it somewhere here. Of course, this guy has to be slightly larger, so I'm going to enlarge it till it looks more or less like this. And of course, if you want, you could maybe make this. This piece is just a bit smaller, just a bit bigger that's going to depend totally up to you. So the last bit that we have to create here is the legs. So let me just zoom in. And for that I'm going to use the segmental just like before going to find this vertical guide. Hold on the control key and the shift key and create a segment looking something like this . I will put it all the way to the back and fill it with a great color. So what I would like to achieve, right? Here's I would like to have exactly matching copies on both the left and the right side. And I would also like to have some kind of a shading going on that would separate these two elements. So first, let me just maybe moved is very but up. And now we can just clone it. So we have to exactly the same elements. And we could maybe now start moving this guy to the right and we can do it in the transform panel. So let's say that I would like to move it by, I don't know, 35 pixels. So I'm just going to in this X position. I'm going to type and plus 35 lets you would want it produces and that I'm just gonna press enter. You can see it moved my element exactly by 35 pixels, but I don't think it's enough. So let's try to move it by maybe 60 pixels. 60 might be a bit better. So now let's see. How can we move this guy and by exactly the same number of pixels, but in the opposite direction. So I'm just going to grab it, and here in the X position, I'm just going Teoh type in minus 60 to move it exactly by the same number of pixels to the other side. Of course, we could still may be moved them just a bit up, maybe to somewhere here. But basically we can now be sure that these elements are exactly a same distance. No. And we can now take care off the shading 34. 3How to add shading to complex shapes: No, I would like to add some shading to these elements, and I would like to speed the process up, like, really, really speed the process up. So I would like to add just one element that would cast a shadow on to both of these legs. So in order to do that, I have to select both of them and I have to make them one shape. So first I'm gonna make sure that I don't have the insert inside selection mode turned on. So once these guys are selected, I am going to simply unite them. So I'm just going to use the add function. And I think I just borrow this main shape right here. Psychologist, press Control J. And then I'm just going to turn it black. I'm just going to cut it out, grab these. Both elements will, Actually, now it's one element. You can see it here inside the layers panel, and then I'm just going to initialize the insert in site selection and then press control V and start to make in this guy bigger. You can see that we are actually casting this shadow onto these two elements and Onley within their boundaries. We are not cast in any shadow outside adult. So here, inside designer, you can mimic this a clipping functionality using like compound past, like in this case. But you always have to remember to unite them using the add functionality you will find in the toolbar. So once our clock is basically ready, we won't be needing the rulers nor the guides. So in order to hide the rulers weaken, just press control, are or again go to the view menu and press show rulers. And to clear the guides, we could go to the view menu, then choose guides manager. And in here we can choose remove all guides and then we can just press close. So once our main shape is created, we can now finally move on to making well to make any colorful. You're gonna start adding colors. So let's start doing that next 35. 4Add the colors: So you start adding colors from the top and then I'll move my way down. So I'm just going to grab the alarm clock color panel. So start adding colors from the top and I'll grab this guy right here and I'll make this curve the darkest there we go. Then I'll grab this rectangle and make it a bit lighter. And then I'll try to find this curve on the left and try to make it lighter. There we go. So next let's grab this element and ah, I guess we can make it the darkest. Then let me just find this on this rectangle right here and I will make it lighter yellow, and then I'll start adding colors to this, right? Belle, something just opened this group. This guy will be this color that's opened this curve on this guy will be the darkest and this element will be the lightest. So now we can start adding colors also to this background cell. Make it blue. This main and dial right here. I guess we can leave it like that. I think it will be fine now. These pointers I think I'm gonna make them purple and I think I'm going to add the same color to these markers and this ellipse right here. So first, I'll just shift click on all these elements, and I guess if I created with less of them, I wouldn't have so much work right now. And as you can see, you have to be Ah, really careful to select on Lee the ones that you want. I guess we could maybe try toe speed the process up using the layers panel. But you cannot be always sure that you are targeting the right elements. But I guess we are right now. I will also target this ellipse, and I will make all these guys dark and I'll just group them. There we go. And also, I think I'm going to make these guys somewhat great. So I'll just grab the grace, a color palette, and I'll just make them a bit darker. Maybe like this gets this you Bill right. And we are basically done. We can know, just select everything, make it significantly smaller, and let me just borrow the background again. I guess we have to add a colored to this Bagram as well. And let me just show you one little trick here inside. Ah, designer. And basically, I guess in any kind off a graphic design software. So I would like to add a background color that is like matching like the intensity of my colors right here. So first, I'm just going to press the I kill my keyboard to choose the color picker tool, and I'm just going to sample this blue color. And then I'm just gonna double click on this Phil to enter this color chooser, and here at the top, I got this liner that will allow me to change basically the hue off of the selected toe color and notice that this spot right here remains in its position. So we could, for instance, maybe choose something that would look nice that would match our our clock. Well, I think they're just a matter of seconds. So maybe I'm just going to choose something like this. Let's see what it looks like. So let me just make this guy is significantly smaller. Pour it somewhere. Here. Enologist printed two of the front. Let me just zoom in. I guess this is gonna look look nice. Let me just make it significantly bigger. And of course, all we need to dio used to aligned them to the center. So we got these guys created. I'm just going to group them and to copy them, and I'll paste them here inside my main document. Oh, this guy where it needs to go. And we basically got another row of icons created, but we are not completely done yet. We still need to create, like a widget here at the top, which would be the our widget and the weather widget, so stay tuned. 36. 1Adding the weather widget: before you can call it a day with still needs to create one more thing. And that's the weather and our widget. We got thes application icons, but we still need the widget here, the top part off our smartphone Moke up. So I'm just gonna grab the artistic textile. I'm gonna click and drag, and then I'm gonna type in the hour. Let's say it's 12. 45 and the front that I'm using is called Roboto condensed. And it's a completely free fund that you can download from Google fonts, and I'm using its light version. It has some more versions, but I'm using its light virgin. I think it looks all right and I sleep left the colorists something like white or very vory off white collar like this very, very light gray color. So we got the hour. Now let's type in the date. So I'm just going to hold control and shift to clone these guys down, and I'm just going Teoh, double click on it and type in something like maybe used a there. We go on maybe title. It's type in the date. Let's say that it's Ah, May 30th and of course this whole Texas way too big. So from this context, toolbar up, just gonna make it smaller. Let's say let's go with maybe 14 points or maybe 16. So let's say that it's Tuesday, May 30th and that we are in Paris friends because right now I'm just going to type in the city with that. Let's say that we are currently in. So I'm just going to type in Paris, comma friends and let me just move it to the side. Still snaps with these guys, uh, here at the top. So now let's say, create their weather widget, and it's going to be an extremely simple one. I'm going to create a cloud and some rain because, let's say that to date there's some light breeze in Paris. So I'm just gonna grab with the lips, toe, create wanna lips and then here the bottom, create another one. Let me maybe moving a bit to the side to somewhere here. So once these guys I created, I'm going to select them both and use the add function in our toolbar. And here at the bottom there's this side, this spike that I don't really need so he can just grab the no total select this note that's really making this corner. I'm just gonna hit delete to get rid of it and to create this cloud. Ah, very, very simple cloud I come and since there's some rain in Paris, I'm just going to grab the pen tal and I'm going to create some very, very schematic light rains of just a few simple lines like one. Maybe let's make these guys just a thicker Let's make them two points someone. Then maybe 23 and four, not too much. Then we can just group them had this cloud to the selection and a line everything to the center. There we go. So I would like to expand that these these guys, I don't want them to be strokes anymore. So first on the group, these elements are just so like them and press control shift and G now select everything, go to the layer panel and choose expense stroke. So then we can just group them one more time that you just zoom back out and I'm going to put the put these guys somewhere somewhere here and maybe Then I'll just borrow this text and put it may be here. Let me just make this guy just a bit smaller, and maybe I'll just type in the temperature, which should let's say it's 26 degrees. So I'm just going to type in 2026 and then I'm going to type in the symbol which of the degrees of degrees which will be the O on my keyboard. But as you can see, well, it doesn't toe look too nice. It doesn't look like it's a symbol of degrees, but that's what we are going to change in just a second. First, I'm just going to maybe make it just a bit bigger. So it looks something like something like this. Maybe just a bit smaller Mike as this should be. All right, so now just grab the type tool, Select this. Oh, ladder Right here. I'm going to open the character panel and in here we got something is called baseline, and we can change the baseline simply by choosing one of the values here from this list. And notice that this oh letter is actually moving right now. But once we make it smaller, let's say that we were gonna make it something like 18. Its position is going to change. So we and then have to changed a baseline as well. Make it. I guess 10 points, 10 points should be all right. And maybe if you want, you could maybe add, like, the lowest and highest temperatures. So we could cologne, this guy to decide, and then just maybe type in something like, I don't know, Let's say, Ah, 20 a degrees and then maybe, like 16 uh, degrees. So these guys, of course, have to be a bit smaller. So let's say that they are going to be, I don't know, something like, maybe 14 14 should be fine. Same for this guy, man. Then that the grease values these guys maybe will be like, uh, like eight points. Same for this guy. Eight points. And now let's changed the baseline to something like six. And same for this guy. Let's change it on. Let's change the baselines shift. 26 Okay, maybe we could per in these guys, but to the side. And maybe, let's meet me. Just move this a bit to the side as well. And I guess lastly, we could just separate peace, too, with the simple line. So I'm just going to grab the pen tal and click somewhere here. Maybe, let's drop it. The with value to just one. And we would basically have this a widget created so we can not just select everything and group them. Try to find the center spot and the widget would be basically basically done. There we go. We got the icons created, We got the smartphone created and we got the widget created. So our project is complete. 37. 2Summary: thank you for joining me in this course and thank you for getting to the until the end of the course. And I really hope that you learned a lot. And I hope that she had some fun because I really wanted to make this course, Um, no. As practical as possible And this fungus possible because I really want you to have something to show for once you finish this course. So if you want to, you know, like show what you learned to your friends or colleagues or boss or whoever you can build your own portfolio a custom graphics that you created inside a new piece of software that you alert. So I really hope that you'll like the course. And if you did, please say Leven, honest review and rating that always helps. And until next time, have a nice design.