Icon Design with Sketch

 

Icon Design with Sketch

 

Lesson Info

Optimizing Your Design For SVG

So let's dive right in to Sketch, and what I like to do first when I'm optimizing an icon for SVG export, is create a duplicate of that art board. So, just hold down the option key, and there are a number of things that we can do to make this icon a little bit more friendly for SVG. First of all, if we just exported this right now, we kind of see something interesting. So export this to our desktop. And notice how it's not looking quite right. This is a little too blurry, doesn't seem like the roundness of the bottom is really coming through. We're gonna get to that because Sketch and just about any Vector Design tool, isn't going to know exactly how you are going to need that SVG, especially if you want to start animating it. In this case, SVG does not support inside borders. So, we need to actually change this to a centered border again. The problem is that then we don't get a well pixel aligned version. So what we can do is just change the position ever so slightly to a half pixel t...

o compensate for that. So our shape is now kind of in between, and our centered one pixel border is halfway on either side and it's filling up a full pixel. Now, that means that all of this is going to have to move over. We'll actually bring the rotation of these back, and let's just bring the rotation on those other panels back to zero real quick. When we increased the positioning and changed the border to centered, we actually increased the size of it overall. So we need to bring it back down by one pixel in those directions. And our pin is still now centered, that's all correct, that's looking good. Let's copy this panel into the others. There we go. And our rotation hacks are also going to have to change. So, I'm gonna select all of them. Let's delete that, let's duplicate the panel again. And, let's see, yep, six. Great. (keyboard tapping) We'll copy and paste this into, and in this case, and Sketch does this occasionally, it's not pasting in exactly where we want it. So let's bring the opacity up, make sure we're getting it exactly where we want. This needs to be pix-aligned, and that's 10, so bring it down. Great, there we go. This one we can just, use our earlier approach. And you can actually hold down shift and the arrow keys to move it, that's a little bit faster. Otherwise, Sketch, it's trying to help you by repositioning things to be pix-aligned, but in doing so actually makes them un-pix-aligned. All right, so another thing that we need to do is make sure that all of our layers have unique names. This is because, layer names turn in to IDs in the SVG. And as you probably know, with any sort of HTML, you need IDs to be unique. You can't have two elements with the same ID. So, we'll just go through here. Change it to top panel, or let's see, back panel. And you can use shift tab and tab to go between layers here, and make this a little more quick. (keyboard tapping) And this isn't like, critical, the SVG will still render, but it's going to kinda bite you a little bit later. See, 6.5, five there. Let's duplicate this panel. That rotation hack wasn't quite working, there we go. And we'll call this, top panel. (keyboard tapping) All right, now another thing is, that SVG has it's own way of doing transforms, it's a lot like CSS, and Sketch will actually use transforms to position groups, if you have layers in groups. So, I always like to un-group everything, then you have a whole lot of elements there all at once, but we can group them later in the SVG without worrying about weird transforms that are gonna throw off our rotation animation later on. Another thing, we're not using shadows here, but SVG doesn't have a real shadow property. So what Sketch will do, is it will create this custom SVG filter that tries to emulate the shadow. You can also create another separate layer that's black, semi-transparent, and blurred using Sketch's Gaussian Blur, but keep in mind that blurs are very performance intensive, so you want as few of them as possible. The last thing that didn't seem like it was coming through correctly, is the border radius on the bottom of our panels. And that's because SVG supports a consistent radius, but it doesn't support a different radius for individual points. We need to basically flatten this into a normal path. In order to do that, and you see the flatten is grayed out, in order to do that we can just kind of make it think that we're combining something by adding a rectangle, and let's make sure that rectangle is fully inside the panel, we're just gonna select the panel and the rectangle, and combine those with a union operation. Visually, nothing happens except that now we can flatten it. That is changing it in SVG from a rectangle element to a path element. We'll do that for the mid panel as well. And the back panel. You can also use the command shift U shortcut, maybe it isn't that. Option U. There we go. And, flatten those. Great, this is looking fantastic. It's all ready for us to export in SVG. Now, it looks different because we aren't actually rotating them. That's very intentional, that's because we're going to recreate those rotations later in CSS, when we start animating the icon. If you're not animating the icon, it's fine to leave those rotations on there, I still kind of advise not to have a group, but that's up to you. And now, in the export area, just choose SVG, we'll export this. We can overwrite what we had before. Let's open it up, let's see what this looks like. Whoa, it's a whole lotta markup. So, not all of this is really useful markup. Unfortunately almost every vector design tool has all sorts of extraneous attributes, and information like, great, my description is created with Sketch, and all of these elements have a Sketch attribute on them, that's not really necessary. So we need to clean this up. What I suggest doing is copying the code, and opening up a tool like, Peter Collingridge's SVG Editor, this is used for optimizing SVGs. There's also another one out there called SVG OMG, and it'll also allow you to find an icon, and do all sorts of optimizations to it. You can really get the file size down. Both are fantastic tools, I like SVG editor because it's just a little more bare bones. You can just paste in the markup, load it up, and one thing that we have here is the ability to remove those Sketch attributes. So, that's a start. In some things, like in this path, we've got these decimals that just go on for, they're just so much more precise than we really need. What's cool is we can change these decimal places to just like, two, or even one. And we can bring the file size down considerably and make them easier to read when we're working with the SVG directly. It's kinda nice that you see this on the side, so if you weren't sure, zero is gonna start affecting the look of it, I don't think one is affecting the look of it. So you can kind of play around, with these various options here. And then you get an output. You just copy this, copy it back in to your code editor. Now what I like to do when I'm editing SVG live is to open up a new code pen, and make sure that I'm editing it while I'm seeing the live result. That way I can start creating line breaks in here, maybe removing some extra things. Like, let's get rid of this description. Making sure that I'm not affecting the final result. For example, here's something that always bugs me, Sketch adds these extra groups for the art board in the page in your Sketch document. So I like to just get rid of these groups. But some of them have attributes that are going to affect the way things look. So if we just get rid of this one, you'll notice that, actually, it seems like we were able to get away with that. Let's see, stroke width one, fill none. Basically all of these, we are overriding later on when we're using individual elements. You see we're overriding fill here with what that fill color is. So we can get rid of that. And I like to add a few spaces in between here. Now SVG doesn't group elements in divs, it groups them in a G element. And so we can group these together and add a class for this. Call this class, let's see what is this? This is the back panel. And another thing it does that bothers me, is you've got IDs for paths that aren't the first attribute that you see. And so I always like to copy and paste those back into the beginning so that it's a little bit easier to read them. I'm gonna get rid of depths, we'll talk about that later. Comment we don't need. We can kind of just work with this like we would HTML and making it something that we want to read. So in the next section, we're gonna start with a version of these two icons that I've already cleaned up, so it's extra readable in the SVG markup, and we'll start working with animations. We're gonna learn about what's possible with animation and then dive into making our own.

Class Description


Learn the fundamentals of icon design, and how to create icons in the software program Sketch. You'll also learn how animation can enhance your icons, and see how it's done with a little bit of code. Peter will cover the basic principles of icon design and show you his process. He'll guide you step-by-step as he works in Sketch to execute icons. He also explains what SVG files are and when to use them. Peter will show you the benefits of adding animation to icons with CSS code, and tips for adding unexpected movement to your graphics. 


Software Used: Sketch 2016