Designing 16px Icons in Sketch

I've been working for a client making a music app called Cinesampler and I'm almost done. But there's one last thing I need to do. I need to make some 16 by 16 pixel icons of those kind of illustrations. Here we go. I've got these in place that are kind of the overarching categories for all the different sections. And I want to turn each one of these into a 16 by 16 pixel icon to use for each one of those tracks, just so it gives a little bit more visual significance for what's being used. So what I'm doing right there is toggling pixel preview mode. With non pixel preview mode, you can do that by hitting Ctrl P. So when you're working at such a small size 16 by 16 and you're doing like outlines, you want to make sure that the one pixel stroke is occupying like a full pixel. So you zoom way in. And if you're using the center stroke align, then your coordinates in your properties panel needs to be on a half pixel. So like 0.5 or 2.5, whatever. That way half of the line bleeds off onto one half of the pixel's edge and the other half bleeds off onto the other pixel's edge. Then you have a nice full occupied pixel row or column, whatever you're doing. Otherwise it's going to be like a blurry 2 pixel kind of blur. And you can see that really easily if you go into preview mode. Alright, all right. Right there you see that bottom line of the music stand? It's like a book. It's open the music stand, that bottom line, that line is sitting on a whole pixel and it's, it's right in between two pixels edges. So like it's sitting right there. Here's a pixel, here's a pixel, the line sitting there. And half of the pixel is bleeding off on each side, which is causing it to be like a blurry 2 pixel line. In order to fix that, you just need to move that line to a 0.5. Basically what I'm trying to do with all these icons is simplify it down as much as humanly possible to a few lines we can still recognize it. And then I'm going to put them inside of the instrument tracks, try to make it look like it's more readable. So if you have a bunch of instrument tracks, it's more than just a number and a name. I was skeptical about this at first, but it's something I wanted to experiment with. So now I'm going to try to put all of these inside of the interface and see what it feels like. Alright, so what I'm doing right here is I'm putting the icon inside of that one symbol so I can nest all of the other ones inside of that symbol just by changing out the overrides. And I'm working with like a background property because I felt like the icons weren't working on their own. They just kind of felt like they were floating. So I'm experimenting with like a background and even when I put it in there, I was kind of struggling to get this to work. So, you know, I'm playing around with some different opacities to kind of frame out the icon, but the icons don't have enough negative space around them to make that container work. And there's some of them are kind of butting up against the edges and other ones, it just felt crammed. You can see even from this shot, it just. All of that kind of feels like too much going on. And while I like the icons on their own, I think the tiny icons by themselves, they work as little icons. But in the context of this interface, it just wasn't working and it just kind of threw off the balance. So even though I spent about an hour designing all these, I ultimately decided to scrap this. I left them inside the design file just in case. I wanted to bring them back later. But it ended up being a road that I went down that just didn't work out. And that's kind of how the creative process goes. A lot of times you just, you need to try something out. You go down and then it's like, oh, you know what? This just doesn't feel right. You have to get over the fact that you spent time on something. Sometimes you just have to throw it away. So if you're new to icons, you've never done this before and you want to learn more about it, go to intro to icons.com and I've created a free course that you can totally check out. And in the meantime, feel free to subscribe. I'm going to be posting more videos like this to try to show some more design process. So thanks for watching and I'll catch you in the next video.