1 00:00:00,640 --> 00:00:02,500 Welcome back to the second part of icons. 2 00:00:03,340 --> 00:00:05,770 There are a bunch of icon sites out there. 3 00:00:05,770 --> 00:00:07,990 I mean, I couldn't even name them all if I tried. 4 00:00:07,990 --> 00:00:12,600 But another option that we do have is that we can actually design our very own icon. 5 00:00:13,390 --> 00:00:19,090 I know that sounds pretty scary, but I promise is it I mean, it is time consuming, but if you do 6 00:00:19,090 --> 00:00:20,850 have the time, go for it. 7 00:00:21,160 --> 00:00:23,630 So icons are pretty crucial to a design system. 8 00:00:23,650 --> 00:00:27,310 And before we even build, we need to really take into account a couple of things. 9 00:00:28,000 --> 00:00:29,200 First is size. 10 00:00:29,620 --> 00:00:35,470 So if we think about base units, that has to come into play again and your icons should be designed 11 00:00:35,470 --> 00:00:36,220 based off of it. 12 00:00:36,640 --> 00:00:41,530 Our base unit is eight pixels, so let's create a grid. 13 00:00:42,040 --> 00:00:43,300 So we're going to create a frame. 14 00:00:44,610 --> 00:00:50,010 And it's going to be a small frame, it's going to be only twenty four by twenty four pixels. 15 00:00:52,290 --> 00:00:53,790 Let's zoom right in. 16 00:00:56,510 --> 00:00:56,990 There you go. 17 00:00:57,020 --> 00:01:02,180 Let's rename that to Icon so we have a little grit right here. 18 00:01:02,600 --> 00:01:08,870 And what we can do is we can create a layout grid or not a little group, but we're going to create 19 00:01:08,870 --> 00:01:09,400 an actual grid. 20 00:01:09,650 --> 00:01:13,130 So you'll notice that this is a defaulted 10 pixel grid. 21 00:01:13,130 --> 00:01:14,920 So it'll have 10 pixels by pixels. 22 00:01:15,200 --> 00:01:16,970 We want actual just a one pixel grid. 23 00:01:17,480 --> 00:01:18,960 So that's going to work for us. 24 00:01:19,520 --> 00:01:20,060 Perfect. 25 00:01:20,510 --> 00:01:25,100 So another thing is when we're creating an icon, we want to only use one color. 26 00:01:25,130 --> 00:01:26,390 Anything more than that. 27 00:01:26,510 --> 00:01:28,760 That's just a bit too much for product use. 28 00:01:29,210 --> 00:01:34,430 So I would just stick with one color all times, unless it's something like a marketing website where 29 00:01:34,430 --> 00:01:40,020 icons are a little more blown up, a little bit more larger, like 40 pixels or something like that. 30 00:01:40,070 --> 00:01:45,140 That's fine if you want to really use more colors to reinforce your brand. 31 00:01:45,380 --> 00:01:50,480 But for typical like product interface use and stuff like that, stick to one color. 32 00:01:51,260 --> 00:01:52,520 Now that we have our pixel grid. 33 00:01:53,300 --> 00:01:56,920 This makes it much easier so we can stick to it. 34 00:01:56,960 --> 00:02:02,290 Our icons will render much more nicely if we stick onto these pixel lines here and onto our grid. 35 00:02:03,740 --> 00:02:07,610 So the first icon we're going to make is just a simple checkmark. 36 00:02:08,660 --> 00:02:14,030 And what we can do is we can just press P for our pencil and we could just stick to our grid like this 37 00:02:14,450 --> 00:02:15,020 cricket. 38 00:02:15,880 --> 00:02:18,210 If we hold shift, we can stick to a certain angle. 39 00:02:18,980 --> 00:02:22,070 So if you're on a 45 degree angle, we could just see that. 40 00:02:23,810 --> 00:02:28,730 And do something like that, and there you go, I mean, like it doesn't have to be hard, this looks 41 00:02:28,730 --> 00:02:36,440 a little too rigid, but if I select these points, so if I lose this and I click it again, if I double 42 00:02:36,440 --> 00:02:38,060 click it, I can select this point. 43 00:02:38,060 --> 00:02:40,010 If I hold shift, I can select that point. 44 00:02:40,340 --> 00:02:42,470 Then I can go over here to a vector. 45 00:02:43,470 --> 00:02:47,240 Little toolbar, and I can just change. 46 00:02:48,460 --> 00:02:54,880 That will change it if it's an actual outlay, if it's an actual stroke, you can go here and I'll show 47 00:02:54,880 --> 00:02:57,820 you both scenarios so you can round those corners. 48 00:02:58,840 --> 00:03:01,720 But if I didn't do that and I did something like this. 49 00:03:03,390 --> 00:03:09,810 Increase the stroke, and then I did something like this where we're going to click out of that and 50 00:03:09,810 --> 00:03:14,520 I can outline a stroke, then you can go over here and you can outline the edges. 51 00:03:16,410 --> 00:03:22,080 So what we can do here is we can start moving it any which way we want. 52 00:03:24,610 --> 00:03:29,140 That looks fine, we can also just leave it, we can bring this in a bit more, which is much better, 53 00:03:30,400 --> 00:03:32,260 and we're going to center that. 54 00:03:32,590 --> 00:03:35,830 So this is one icon that we just easily made. 55 00:03:37,030 --> 00:03:42,460 I'm going to just pump up the Jaroch on that, because it's going to be harder to see. 56 00:03:45,090 --> 00:03:50,460 And I'm going to like I said before, I'm going to go and adjust the caps to meet them around. 57 00:03:54,820 --> 00:03:56,560 And you can also. 58 00:03:59,040 --> 00:03:59,940 Adjust their. 59 00:04:02,110 --> 00:04:08,890 To make it a little more rounder Nago, we have an actual Czech icon and you can duplicate that and 60 00:04:08,890 --> 00:04:10,730 you can actually make a variation of it. 61 00:04:10,780 --> 00:04:13,870 You can make this a little bit smaller if you want. 62 00:04:15,550 --> 00:04:22,840 Let's copy that and then put that there and you can actually go ahead and make a circle and make another 63 00:04:22,840 --> 00:04:23,710 variation of it. 64 00:04:26,040 --> 00:04:31,800 So it's sitting on those lines that to the back and this is what I'm going to do here, I'm going to 65 00:04:31,800 --> 00:04:33,090 make this black. 66 00:04:34,590 --> 00:04:37,230 And I'm going to make this white. 67 00:04:41,880 --> 00:04:46,770 And this is great if you want to kind of create another variation of an icon that we just created, 68 00:04:47,040 --> 00:04:53,730 some people like to create like circle based icon sets or just having a circle variation of like a checkmark 69 00:04:53,730 --> 00:04:55,230 for other applications. 70 00:04:56,340 --> 00:04:58,110 Another easy icon that we can make. 71 00:05:00,270 --> 00:05:07,080 There's something like a cloud, so if I select our lips tool to appear or if I select oh for the. 72 00:05:09,980 --> 00:05:13,520 I can just create a quick cloud like this. 73 00:05:16,050 --> 00:05:19,410 I'm going to bring down the middle and this one's going to be much bigger. 74 00:05:20,380 --> 00:05:25,330 They will go, and if I double click this, I can take this point and bring it down here. 75 00:05:27,920 --> 00:05:33,950 That doesn't really look like much of a cloud, but if I select that and I delete it, there we go, 76 00:05:33,950 --> 00:05:34,850 we have our cloud. 77 00:05:35,580 --> 00:05:40,190 I'm going to select all these shapes and combine them. 78 00:05:41,150 --> 00:05:46,760 And then to press E to flatten that layer, you can also take our. 79 00:05:47,940 --> 00:05:53,250 Able to and we can draw an arrow like it's an actual. 80 00:05:55,120 --> 00:06:00,160 Download icon, let's adjust that cap again, it's around. 81 00:06:01,710 --> 00:06:05,790 And we were using two pixels, so let's try and see consistent. 82 00:06:08,930 --> 00:06:15,350 That's not going to work there, so we're going to stick to one pixel on this one and we should probably 83 00:06:15,350 --> 00:06:20,330 stick to one pixel on this one, too, if we're going to create like an actual set. 84 00:06:20,810 --> 00:06:21,760 It's going to be a little hard to see. 85 00:06:21,770 --> 00:06:22,760 That's the only issue. 86 00:06:23,330 --> 00:06:24,830 But there are different ways you can get around that. 87 00:06:25,250 --> 00:06:26,880 So there we go. 88 00:06:26,900 --> 00:06:32,480 And if I wanted to create like an actual See-Through icon, so like right now this is not See-Through 89 00:06:32,480 --> 00:06:33,780 if you take it off the canvas. 90 00:06:33,830 --> 00:06:38,120 It's still light and it's not one actual shape. 91 00:06:38,520 --> 00:06:40,010 So I'm going to create outlines. 92 00:06:40,220 --> 00:06:40,760 So I'm going to. 93 00:06:40,760 --> 00:06:40,990 Right. 94 00:06:41,000 --> 00:06:41,660 Click on that. 95 00:06:42,440 --> 00:06:43,810 Create a line. 96 00:06:43,820 --> 00:06:44,390 That's Rokke. 97 00:06:45,670 --> 00:06:51,670 Perfect, and I'm going to select them and I'm going to go back up here and I'm going to click, subtract, 98 00:06:52,090 --> 00:06:56,920 and what that's going to do is it's going to subtract this shape from the shape. 99 00:06:57,250 --> 00:06:58,600 And now it's one shape. 100 00:06:58,900 --> 00:06:59,740 All we need to do. 101 00:07:00,340 --> 00:07:04,360 You'll notice that you'll still be able to see them here and you'll still be able to move them around. 102 00:07:04,990 --> 00:07:07,240 Now, if we don't want that ever to happen, we could just. 103 00:07:08,300 --> 00:07:09,680 Flat that right here. 104 00:07:09,920 --> 00:07:14,920 So all we need to do is click that and Phosphine or Kamandi and there you go. 105 00:07:15,800 --> 00:07:17,330 You have a cloud icon. 106 00:07:21,260 --> 00:07:22,520 Let's create a couple more. 107 00:07:24,050 --> 00:07:30,620 This is probably like you can create a location service icon the really much more easier than you think. 108 00:07:30,650 --> 00:07:34,850 So if I'm just going to do that, I'm going to double click and I'm going to hold shift. 109 00:07:36,220 --> 00:07:41,890 So before I click this and a double click in here, I'm going to click that hold shift and pull upward. 110 00:07:43,820 --> 00:07:44,900 And just like that. 111 00:07:47,910 --> 00:07:50,910 We have our very own location, Eikon. 112 00:07:52,510 --> 00:07:58,320 And it's pretty easy to make we can do that even for a Mappin, we can do some pretty cool tricks. 113 00:07:59,230 --> 00:08:01,630 Not everything is as complicated as it looks. 114 00:08:02,500 --> 00:08:06,980 So let's just create a little circle here will create another larger circle. 115 00:08:08,200 --> 00:08:09,880 So this is going to be our inside. 116 00:08:10,710 --> 00:08:11,980 Let's bring that to the front. 117 00:08:13,690 --> 00:08:15,460 Select on both and bring that here. 118 00:08:17,170 --> 00:08:21,760 Great, we're in a double click into that back there and we're going to grab this point and bring it 119 00:08:21,760 --> 00:08:22,020 down. 120 00:08:23,270 --> 00:08:31,610 They're going to bring this down so that we can use our grid control, gee, let's zoom in and use our 121 00:08:31,610 --> 00:08:36,110 grid to say that I want to on this point so I know that when I do this. 122 00:08:37,530 --> 00:08:39,140 And it on that point, too. 123 00:08:40,850 --> 00:08:43,260 Now, that's not really nice at the bottom. 124 00:08:43,280 --> 00:08:44,600 It kind of curves down. 125 00:08:45,020 --> 00:08:46,280 What we can do is command. 126 00:08:48,720 --> 00:08:52,140 It'll bring both of those points in and from their. 127 00:08:53,550 --> 00:08:56,940 You can round it by clicking up there, see? 128 00:08:57,920 --> 00:08:59,150 Just click that point. 129 00:09:01,050 --> 00:09:06,480 Go up here, press one or whatever number you desire, and there you go, you have your Mappin. 130 00:09:06,840 --> 00:09:09,360 Like I said before, what you can do is you can subtract that. 131 00:09:10,960 --> 00:09:17,740 And then pressing Kamandi to flatten it and you have your very own Nopporn icon. 132 00:09:19,130 --> 00:09:20,780 OK, last one. 133 00:09:21,140 --> 00:09:22,400 Let's create a heart. 134 00:09:24,170 --> 00:09:28,710 This one's really fun, so I'm going to actually suck my life into hearts are really hard to make. 135 00:09:28,730 --> 00:09:33,920 I mean, I even have a hard time drawing hearts to this day for some sort of reason. 136 00:09:33,920 --> 00:09:36,050 I have a hard time even making them in here. 137 00:09:36,170 --> 00:09:38,120 But this is a little Chieko that I often use. 138 00:09:38,330 --> 00:09:39,920 I mean, actually, I press my pencil. 139 00:09:40,280 --> 00:09:41,150 Let's go like this. 140 00:09:41,750 --> 00:09:43,580 Boom, hold shift. 141 00:09:44,710 --> 00:09:48,040 Hold shift, so we have two lines that forty five degree angles. 142 00:09:49,140 --> 00:09:53,760 And that's it, and what we're going do is we're going to select each and. 143 00:09:55,360 --> 00:09:58,980 We're going to go into our stroke settings and our advance stroke settings. 144 00:09:59,500 --> 00:10:03,330 I'm going to press round and we're going to bump that right up. 145 00:10:04,180 --> 00:10:04,710 And there you go. 146 00:10:04,720 --> 00:10:05,770 You kind of have your own heart. 147 00:10:05,770 --> 00:10:06,870 You can't really see it right now. 148 00:10:08,450 --> 00:10:14,410 We bring this in a little bit more, we can start playing with it, that looks really good. 149 00:10:17,320 --> 00:10:22,080 I hold command and click on this. 150 00:10:24,230 --> 00:10:27,830 We can start creating a really nice round heart. 151 00:10:29,170 --> 00:10:36,580 And that is great, we can also just kind of manipulate that just a bit if we want to. 152 00:10:37,240 --> 00:10:40,180 Now, what I'd like to do here is just kind of outline that stroke. 153 00:10:40,420 --> 00:10:44,020 You see, there's a weird outline in sometimes that will happen with icons. 154 00:10:44,020 --> 00:10:45,330 That's totally fine. 155 00:10:45,340 --> 00:10:46,570 I'll show you how to fix that. 156 00:10:48,370 --> 00:10:49,240 There you go. 157 00:10:50,920 --> 00:10:55,720 We're going to do is we're going to double click into here so we have these weird things happening and 158 00:10:56,110 --> 00:10:57,430 that's even much more weirder. 159 00:10:57,430 --> 00:10:58,240 But we're going to fix that. 160 00:10:58,660 --> 00:11:01,130 So we're just going to drag this right to the bottom. 161 00:11:01,600 --> 00:11:03,250 We're going to click on this and you can delete this. 162 00:11:03,250 --> 00:11:04,150 So be careful. 163 00:11:04,160 --> 00:11:07,740 Sometimes we'll actually delete the whole film. 164 00:11:08,530 --> 00:11:11,890 But if you just Kamandi out of that, they'll be totally fine. 165 00:11:14,240 --> 00:11:19,400 And if I press one, like I said before, there you go, you have your nice heart. 166 00:11:20,870 --> 00:11:22,220 Just make sure. 167 00:11:24,490 --> 00:11:29,440 That you don't do that to kind of these little Knux because it doesn't really look that a. 168 00:11:31,110 --> 00:11:37,320 So that's it, I mean, you can easily make quick icons for whatever application you want, I mean, 169 00:11:37,470 --> 00:11:41,850 you can create them for your own navigation, for individual, whatever navigation you choose and whatever 170 00:11:41,860 --> 00:11:43,190 navigation you think is right. 171 00:11:43,770 --> 00:11:48,330 Maybe try actually making icons for that because it's not that hard. 172 00:11:48,330 --> 00:11:55,470 And sometimes you don't necessarily need a whole icon set for a product, but you will be using probably 173 00:11:55,470 --> 00:12:00,740 a good steady like 10 consistently, whether those are chevrons, which are really easy to make. 174 00:12:00,750 --> 00:12:02,010 I mean, we can even make one right now. 175 00:12:02,430 --> 00:12:06,870 Chevrons are those little arrows that are pointing left, right and. 176 00:12:08,240 --> 00:12:11,990 Up and down, so, I mean, we can easily create our own chevrons. 177 00:12:17,790 --> 00:12:20,760 Just like that, it's totally easy. 178 00:12:25,220 --> 00:12:32,450 So take some time, try to find that consistency within the grid, if you're using, like lined with 179 00:12:32,450 --> 00:12:41,060 of like two pixels, stick with two pixels, don't have something that is, like, really thick and 180 00:12:41,060 --> 00:12:41,970 then something really thin. 181 00:12:41,990 --> 00:12:47,540 So if you're using something like three pixel lengths, stick with that being very consistent within 182 00:12:47,540 --> 00:12:48,430 your iconography. 183 00:12:49,010 --> 00:12:52,100 But take some time, have some fun. 184 00:12:52,100 --> 00:12:55,340 I mean, you can create your own little style here if you really have that time to do it. 185 00:12:56,090 --> 00:12:56,600 There you go. 186 00:12:56,630 --> 00:13:02,240 You have your very own custom icons and there are so many other things we can do when we're drawing 187 00:13:02,240 --> 00:13:03,020 within Sigma. 188 00:13:03,410 --> 00:13:07,780 But that's a deep rabbit hole that we're not going to really go down right now, remember. 189 00:13:07,940 --> 00:13:08,630 Have fun. 190 00:13:08,960 --> 00:13:10,490 Don't take it too seriously. 191 00:13:10,880 --> 00:13:13,190 Choose some icons that you want to do for our app. 192 00:13:13,610 --> 00:13:14,870 Jump right in there and just do it.