How to Make Pixel Perfect Icons

hi I Margherita I'm a design unit I can save calm there are many designers who make beautiful that for 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 you use an icon not as Administration if it is an element of user interface and a small 16 250 pixels image can become just a blurry spot why do we care about what the view because that's how it will be actually renders on the screen of the device all the icons made in vector form which will be rasterized when displayed on a laptop or mobile device screen if you are making icons hoping that other people who use it then they must be not only beautiful and stylish they must be useful and me and you can make them perfect 6:02 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 picture-perfect icons in sketch or another graphic reduction rituals 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 if 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 video 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 the new view 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 the picture 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 the even 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 bag and then I'm going to choose direct selection tool and for fixing icon you can either select midpoints 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 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 icons will be crisp and sharp in the restaurant view the next thing we are going to talk about is three 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 aright then you can see that line with the stroke width of even numbers are a stressed perfectly but the odd numbers which make them blurred so we are going to make an offset of the line itself just pass a pixels to one side so this line is standing right in the middle of the pixel and as you can see the stroke through the whole pixel and this happens to the other lines when their width is an odd number the worst thing you can do to this 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 need the correct versions of it I show them the top and the incorrect ones are below when they I can have two pixel stroke and an exclamation mark is in which also two pixels then the size of the circle must be an even number so then the exclamation marks 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 it then it is rasterized is 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 its 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 elements a stroke everything away 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 this point is placed right on the grid and on each side of this little 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 harp which 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 new vehicles 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 drop 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 the vector icon but it works play 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 scale 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 on 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 amounts 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 icons 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 its light icon style when your icon is ready and you know is basic size you are going to face scalability of the icon for example you created an icon that is 32 pixels deep 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 we 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 shoe and you can see that the icon becomes blurry because the points of it are a little bit shifted because besides 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 the screenshot of your icon in the pixel preview mode to the project section below if you have any questions you can ask them as the community discussions 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 positivity and good luck with you I can resign [Music]

Channel: Icons8

Views: 62,452

Rating: 4.970696 out of 5

Keywords: icons, icon, pixel perfect, pixel, perfect, tutorial, design, adobe, illustrator, AI, sketch, icons8, icon design, icon design process, design tutorial, design process, icon designers, icon tools

Id: KYpVtDj-xQs

Length: 11min 42sec (702 seconds)

Published: Mon May 15 2017