How to Make Pixel Perfect Icons

1. Introduction: Hi, I'm Margarita. I'm a designer that I can say dot com There are many designers who make beautiful victor writings and they do not know why they have to be big, so perfect at the same time. Off course vectors are scalable. They will look great and smooth when they a big. But what if you use an icon, not as administration? If it is an element of user interface in a small 16 to 50 big sales image can become just a florist. Why do we care about the rest of you? Because that's how it will be actually rendered on the screen of the device. All the Aikens made in Victor former will be rest arised when displayed on a laptop or mobile device screen. If you are making Aikens hoping that other people will use it, then they must be not only beautiful in stylish, they must be useful and and you can make them perfect. Bigs help in this lesson, able daily about six suspects to keep in mind while designing. And Aiken, I will be using Adobe Illustrator. But it doesn't really depend on the software. You can make pixel perfect Aikens in sketch for another graphic reductive. You choose 2. Where to Start: we're going to start from setting up and Adobe Illustrator Document for creating a big sell perfect Aiken for these click of new and said big Selves as unions and then a whole number off big cells as well and hide. Then we would go to preferences. For this. You could simply press control K on your keyboard and then go to guides and greed. I'm going to set one pixel for greed line and one for subdivisions. Click OK. Then you can either go to the new view show great, or you can use a shortcut and it turns on a pig's agreed, and each guide shows the edges off one pixel. Then you can go again to many of you. And there are some options. Blag snapped. A pic cell snapped. Boyne snapped. Agreed. I will just snapped a great option. Now the set up is over, and all the forms I create are going to be snapped it to peak cells. Their points are going to be placed right on the intersections off the grid lines in order to check that your I can't speak so perfect and it will be rest arised in the best possible way you can turn known pixel prevue for such things. I usually use shortcuts, and it makes my work much faster. Now I'm going to turn off, snapped the pigs and load and show how forms would look like without it. You can see how images are blurred. If you want to see some more options off snapping to pick cells, you can goto the top right corner off the window, and you can play around with all the check boxes to find the best preferences for your work . So how do actually fix the Victor Aiken That isn't pixel perfect in the first place? There are basically two ways to make the Eiken more sharp. First of all, I'm going to turn on snapped, agree adoption bag on. Then I'm going to truth direct selection toe, and for fixing I can. You can either select the points and simply drag them to the great 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 big silvery, and then you're I can will be crisp and sharp in the restaurants for you 3. Stroke Width: the next thing we're going to talk about is the stroke. With here, you can see stroke examples off 24 and six pixels, and on the other side, at 13 and five pixels, you can see that all the lines are sitting on the big so great. But what happens if we rest arised them? You can see the lines with the stroke with even numbers are rest arised perfectly. But the odd numbers we'd make them blurred, so we're going to make an offset off the line itself. Just path a pixel to one side, so this line is standing right in the middle of the big sell. And as you can see, the stroke feels the whole big. So and this happens to the other lines when they're with 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 big, so great or slightly offered. It will be blurred anyway, so it's better when your stroke with is an even number to give the line on the pixel grid, and when they stroke with is an odd number to keep it right in the middle of the big so 4. Inner Elements: Another thing that you might want to consider is how the inner elements off a Nikon might affect its size. For example, let's see a circle and an exclamation mark in it. The correct versions of it are shoulder on the top, and the incorrect ones are below. When the ICANN has to pixel stroke and an exclamation mark is in with also to pick cells, then the size of the circle must be an even number. So then the exclamation mark can be centered in the circle and at the same time, be sharp. Let's see what happens when the same circle is made one pixel bigger and the exclamation mark is centered in need. Then it is rest. Arised is an awful blue relying, so we didn't want that to happen to your Aiken's. Now let's see the circle with one pixel stroke and an exclamation mark in with also one pixel. Its size and its position must allow the any details to be placed in the centre and to be nicely rest arised at the same time so we can see the element, the stroke. Everything of it is related to the size of the Eiken 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 they hate off. Its arrowhead isn't even number, and it's point is placed right on the greed on on each site off. This very point half of a pixel is transparent, so the Arab looks a little bit rounded. You may prefer to make an arrow, which is in height and at number. Then the point off the arrowhead is going to be in the middle of the big sell, 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. 5. Bezier Curves: Now let's see how you make pixel perfect. I can work English, busier cures, for example. Let's take the dark icon. I'm going to turn on the Greek, the big Soap review, and then zoom into its big. I select the form, so now we see the changes, all the form itself. It goes a bit out of the pixels, so they are a bit transparent. We don't want such a mess. So basically we drug the point to the Greek. And then we adjusted 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 greed. So let's see how dark looks in Victor. In most of the cases, it looks rather the same as a victor. I can, but it looks playing much better as a big soap review 6. Amount of Detail: when you are designing and I can. 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 ICA and let's see how it looks when rest arised and scaled down. Let's say we make it 30 big cells on the biggest side. Now let's see how it will be. Render it even if the bigger I can Isn't pixel perfect? You can still see a lot of details which are not visible in the smaller version of the wagon. So when you're making something detailed and beautiful, you have to predict the size of the Eiken that will be a placed in the interface or on the website. What we've made for one of our sets is that we predicted for different sizes of a Nikon, and we've included different amount of details for each. We have every Aiken sized ING 80 pixels, 40 big sells, 30 pixels and 16 pig cells. The amount of pixels you can afford in each of them is very different, so we include different amount of details in every size 7. Perspective: next thing that depends on the size of the I can you make is the use of perspective. For example, you make a big isometric Aiken than it looks good one. Render it on some screen. It has some small details, some diagonal lines. But when it is a tiny I can you make for a very particular place all the interface, then it will be blurred in all the details just will be lost. So for small sizes of Aiken, it's better to stick to the flat icon style. 8. Scaling: when he riken is ready and you know it's basic size, you're going to face scalability or the icon. For example, you created a Nikon 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 is big. The important thing here is to use a whole number to multiply the size on it. This case, when the scale I can will be rest arised. It will be as sharp as the one you've created, and it will be also big, so perfect. Let's see an example of the scaling done in the incorrect way. Let's make the size off some random number here and you can see that the Eiken becomes blurry because the points of it are reverb. It shifted because the size isn't regarding the basic size of the Eiken. However, as a victor, I can sleep all look the same 9. Final: Now you have all the information for creating Big self perfect Aikens. It's a good time to apply everything that is still Christian mind as soon as you can. All you need to do is to post a screenshot of your icon in the bigs up review mold 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 these class, and if you like the class, I would appreciate your positive reviews and good luck with you I can design.