Pixel Perfect Illustrator | How To Make Pixel Perfect Icons For Web & Mobile

UX Design Master

Subscribe Here





How To Make Pixel Perfect Icons For Web & Mobile


I knows who make beautiful vector icons, and they do not know why they have to be pixel perfect. At the same time, of course, vectors are scalable, they will look great and smooth when they are big, but what if we use an icon? Not as Administration? If it is an element of user interface, then a small 16 250 pixels image can become just a blurry spot. Why do we care about writer view? Because that’s how it will be actually rendered on the screen of the device. All the icons made in vector format will be rasterized when displayed on a laptop or mobile device screen. If you are making icons hoping that other people will use it, then they must be not only beautiful and stylish. They must be useful and neat, and you can make them perfect pixel in this lesson. I will tell you about six aspects to keep in mind while designing an icon, I will be using Adobe Illustrator, But it doesn’t really depend on the software. You can make pixel perfect icons in sketch or another graphic redactor you choose. We are going to start from setting up an Adobe Illustrator document for creating a pixel perfect icon for this click on new and set pixels as units and then a whole number of pixels as width and height. Then we would go to preferences for this. You could simply press ctrl key on your keyboard and then go to guides and grid. I’m going to set one pixel for grid line and one for subdivisions click. OK, then you can either go to menu view show grid or you can use a shortcut and it turns on a pixel grid and each guide shows the edges of one pixel. Then you can go again to many of you. And there are some options like snap to pixel snap to point snap to grid. I will choose snap to grid option now. The setup is over and all the forms I create are going to be snapped to pixels. Their points are going to be placed right on the intersections of the grid lines in order to check that your icon is pixel perfect and it will be rasterized in the best possible way you can turn on pixel preview for such things. I usually use shortcuts and it makes my work much faster now. I’m going to turn off, snap to pixel mode and show how forms would look like without it. You can see how edges are blurred. If you want to see some more options of snapping to pixels, you can go to the top right corner of the window, and you can play around with all the checkboxes to find the best preferences for your work. So how do you actually fix the vector icon that isn’t pixel perfect in the first place? There are basically two ways to make the icon more sharp first of all. I’m going to turn on snap to grid option back, and then I’m going to choose direct selection tool and for fixing icon you can either select the points and simply drag them to the grid intersection or you can select the point and fix its position at the top of the window. Usually it’s best to keep their the whole numbers, so the fundamentals are as simple as that. You just want to keep the points on the pixel grid and then your icon will be crisp and sharp in the rasterized view. The next thing we are going to talk about is the stroke width here. You can see stroke the samples of two four and six pixels and on the other side and one three and five pixels. You can see that all. The lines are sitting on the pixel grid, but what happens if we rest arise them you can see that lines with the stroke. Width of even numbers are s traced perfectly, but the odd numbers with make them blurred, so we are going to make an offset of the line itself. Just have a pixel to one side, so this line is standing right in the middle of the pixel, and as you can see, the stroke fills the whole pixel and this happens to the other lines when their width is an odd number. The worst thing you can do to the stroke is to say not the whole number. Then it doesn’t matter whether it’s on the pixel grid or slightly off it, it will be blurred anyway, so it’s better when your stroke width is an even number to keep the line on the pixel grid and when they stroke width is an odd number to keep it right in the middle of the pixel. Another thing that you might want to consider is how the inner elements of an icon might affect its size, for example. Let’s see a circle and an exclamation mark in it. The correct versions of it are showed on the top and the incorrect ones are below when the icon has two pixel stroke and an exclamation mark is in with also two pixels. Then the size of the circle must be an even number, so then the exclamation mark can be centered in this circle and at the same time, Be sharp, lets. See what happens when the same circle is made, one pixel bigger and the exclamation mark is centered in it. Then it is rasterized as an awful, blurry line, so we don’t want that to happen to your icons. Now, let’s see the circle with one pixel stroke and an exclamation mark in with also one pixel each size and its position must allow the inner details to be placed in the center and to be nicely rasterized at the same time so we can see the element. The stroke, everything of it is related to the size of the icon itself. There is something else that you have to keep in mind. When designing arrows or other sharp objects, for example, you make an arrow. When the height of its arrowhead is an even number, then its point is placed right in the grid and on each side of this very point. Half of a pixel is transparent, so the arrow looks a little bit rounded. You may prefer to make an arrow, which is in height and odd number. Then the point of the arrowhead is going to be in the middle of the pixel, so the arrowhead is going to be more sharp. Each arrow is better for its own context, so it’s definitely up to you which option to choose. Now, let’s see how you make pixel perfect icon working with Bezier curves, For example, let’s take the dark icon. I’m going to turn on the grid, the pixel preview and then zoom into its beak. I select the form so now we see the edges of the form itself, it goes. I get out of the pixels. So they are a bit transparent. We don’t want such a mess so basically, we drag the point to the grid, and then we adjust it in the way that the handle of the point doesn’t go out of the grid line that shows the edge of the form itself. Sometimes you can add a little bit more. All you want to do is to respect the grid, so let’s see how that looks in vector. In most of the cases, it looks rather the same as a vector icon, but it looks very much better as a pixel preview. When you are designing an icon, everything depends on its size. Even the amount of details you can include in it. I found this example of beautiful illustrations on the web. It was distributed as an icon set and let’s choose one icon and let’s see how it looks when rasterized and scaled down. Let’s say we make it 30 pixels on the biggest side. Now, let’s see how it will be rendered, even if the bigger icon isn’t pixel perfect, you can still see a lot of details, which are not visible in the smaller version of the icon. So when you are making something detailed and beautiful, you have to predict the size of the icon that will be placed in the interface or on the website what we’ve made for one of our sets is that we predicted four different sizes of an icon, and we’ve included different amount of details for each. We have every icon sized in 80 pixels, 40 pixels, 30 pixels and 16 pixels. The amount of pixels you can afford in each of them is very different, so we include different amount of details in every size next thing that depends on the size of the icon you make is the use of perspective, For example, you make a big isometric icon. Then it looks good when you render it on some screen. It has some small details, some diagonal lines, but when it is a tiny icon you make for a very particular place on the interface. Then it will be blurred in all the details just will be lost so for small sizes of icon, it’s better to stick to the flat icon style when your icon is ready and you know, its basic size you are going to face scalability of the icon, For example, you created an icon that is 32 pixels big then. If you want to make it bigger, the best way to do, it is to make it twice or thrice as big. The important thing here is to use a whole number to multiply the size on it. In this case, when they scaled icon will be rasterized, it will be as sharp as the one you’ve created and it will be also pixel perfect. Let’s see an example of the scaling done in the incorrect way. Let’s make the size of some random number here, and you can see that the icon becomes blurry because the points of it are a little bit shifted because the size isn’t regarding the basic size of the icon, however, as a vector icons, they all look the same. Now you have all the information for creating pixel perfect icons. It’s a good time to apply everything that is still fresh in mind as soon as you can. All you need to do is to post a screenshot of your icon in the pixel preview mode to the project section below. If you have any questions, you can ask them at the community discussion. I’ll answer them as soon as I can. I want to thank you for taking this class. And if you liked the class, I would appreciate your positive idiom and good luck with your icon design.