Why Pixel Perfect is important?
Icons are all about clarity and communication. Blurry icons can’t communicate as good as sharp ones. Simple as that. Imagine if road signs were blurry, what a mess they would make!
When you’re working with bigger icons (>64px), blurry edges usually look unaesthetic, and if you need to use them on a smaller scale (16px – 32px) they might be even unrecognizable. And you will never know how your client will use these icons in the future. So pixel perfect is the way to go!
Every Icon Designer should know how to create pixel perfect icons. At some time in the future these skills might become less important as the resolutions on our devices are becoming higher. However, for now it is an absolute must, or a super power for every icon designer out there!
At the beginning of my career as an iconographer, I was struggling with making my icons pixel perfect. Sometimes it was a fail after a fail, but now, with all the experience behind my back, I can proudly say that my icons are sharp as hell! I learned the importance of pixel perfect design the hard way, but it was totally worth it.
Now I feel the need to share this experience. Let me show you my way of making pixel perfect icons.
Part 1: Setting up the document
So you want to make pixel perfect icons. Great. The first step you have to take is to create a correct Illustrator file.
There are 3 key elements in creating proper pixel perfect Illustrator document: artboard dimensions, units and aligning all new objects to the pixel grid.
Width and height should be even numbers. Make sure you don’t leave either of these features with a comma (e.g. 64,23 px).
Artboard size belongs to the icons you’re creating. It could be of any standard size: 16×16; 28×28; 30×30; 40×40; 48×48; 64×64; 96×96; 128×128, etc.
Please notice that all numbers are even! It’s the way they should be.
Pixels. That’s why it’s called pixel perfect, not millimeters perfect
Align New Objects to Pixel Grid
Ok, this one is very important. Go and check this feature. Once it’s checked, all newly created objects will automatically snap to the nearest pixel.
Wonderful, now when you have a proper document, it’s time to adjust some of the Illustrator’s preferences. First and foremost, go to Illustrator > Preferences > General (or press Cmd + K if you are a Macbook user)
Change Keyboard Increment to 1px. This way when you move your icons they will stay in the pixel grid.
As you have probably understood, we are setting all values to pixels. Go to the Units menu and change General and Stroke values to pixels. Type can remain in points, because you rarely use fonts in icons
You have upgraded your Adobe Illustrator making it a real icon factory. Still, there is a lot more you need to know about pixel perfect icons if you want to nail it. Let’s move to the next part!
Part 2: Tips and Tricks on how to design pixel-perfect icons.
So, now when your pixel perfect illustrator file is well-oiled and smoothly-working, we can move on to creating the first batch of pixel perfect icons. Shall we?
Having a prepared file is not enough to make great icons. There are lots of various tips and techniques to help you create sharp icons. Today I’ll go through a few most important ones. These tricks will bring you closer to becoming the master of pixel perfect icons. Without further ado, let’s begin!
Use whole object measurements.
This is the key to creating pixel perfect icons. Make sure all the dimensions, object sizes, positioning coordinates, stroke width, etc. are whole numbers. Every single measurement. Avoid any free-hand drawing. Instead, choose an object tool (ellipse, rectangle, etc.) and click on the screen. Enter your object dimensions manually. And once again – no commas!
All numbers should be even.
When working on your icons, try to keep your object height and width measurements in even numbers (2, 4, 6, 8, 10, 12, etc..). Icons are meant to be resized, so imagine you are creating them on a 64×64 grid and make one object 15px x 21px. When you’ll resize your icon to 32×32 (half), that object will become 7,5px x 10,5px, which will result in a blurry icon.
And don’t forget about using correct object measurements. Once again: the main pixel perfect design principle – do not use any commas! Never.
Make the transform box your best friend.
The transform box is your main tool when creating pixel perfect icons. It should be always opened, and you should keep an eye on it all the time. (You can open the transform box by checking Window > Transform, if you haven’t done it already.)
Make sure there are no fractions in this box. X and Y show the object position in the document. W and H stand for width and height of your object. There’s no need to mention that all of these four numbers should be even, is there? Check the transform box after creating every object to see if everything on the grid is where it should be. Often when you create a new circle it isn’t placed on the grid. (Circles are most likely to to go off the grid.) So if you see any fractions in the transform box, fix them by typing the nearest whole value. (You can as well use arrow keys when the input is active to increase or decrease values.)
Use Pixel Preview.
Click on View > Pixel Preview. Use this option when you want to check if everything is pixel perfect, and you haven’t made any mistakes along the way. (Some people like to keep it on all the time. I use it only when I want to make sure that everything is all right. After that, I go back to the regular view.)
Illustrator is vector software, and unless you check this feature, it will always show you perfectly smooth lines. When it’s been checked, it shows a raster image, the one you’ll get after saving your file as an .png or any other raster format. You should zoom in and see if you haven’t left any half pixels. (To see the actual size of an icon, go to View > Actual Size.)
Is your icon pixel perfect?
Is it? If you did everything right, your icons should look super sharp.
There are a few other nuances in maintaining your icons pixel perfect when you’re exporting them. Sometimes Illustrator messes them up. Why does it happen? Read along to find out!
Part 3: Exporting icons from Illustrator.
Now that you’ve created an Illustrator file and crafted some pixel perfect icons using the tips I gave you, it’s time for the final and easy part – exporting your icons and showing everyone out there what a wonderful job you’ve done!
There are lots of ways to export icons from Illustrator. Unfortunately, most of the time they tend to get blurry, so you have to be attentive. These tips and tricks will save you time and energy and help avoid the blurriness.
As they say, it’s good to learn from other people’s mistakes. When it comes to exporting the pixel perfect icons, I suggest you listen to me and never ever repeat mine!
I used to copy my icons from Illustrator straight to the Photoshop. Wrong! No matter how precise you were while making the icons in Illustrator, they will get blurry in Photoshop. Always.
So once you’ve finished working on the icons, your screen should look somewhat like this (see, each icon is on its own art-board):
It’s naming time!
This is the part where you name your icons. Click the Menu Item – Art Boards (Shift+O). That is how you gain control over the art boards. Select any of them, and you can edit its preferences on the top. The only thing we are changing here is the name. Go to each art board individually and rename them according to the icon inside.
Saving your icons
Here you go! Now head to File > Save As. Enter a short simple name like “1.svg”. Keep reading to find out why.
The next step is changing the file type to SVG and checking the Use Art Boards option. It is required to save all your art boards separately. Since you keep all of your icons in different art boards (do you?), it will export them all at once. If you want to export just a few, you can check Range and enter the art board numbers you want to export. Choose where you want your icons to be saved and hit the Save button.
Yay, all your icons are exported! There’s one thing left. Each icon has that “1-” in the filename. If you’re a Mac user, you can select the icons, right-click, then choose “rename all” and replace the “1-” with an empty field. For those working with Windows, I guess there should be some kind of a batch renamer. If not, you can fix the icons manually.
How to generate the PNGs of all sizes?
I’m using this web app: https://iconverticons.com/online/
Just drag and drop your SVGs, and the app will convert them to almost every possible PNG resolution. It really saves you a ton of time.
Truth be told, the site certainly has some issues, but it’s the best I could find. By the way, maybe you happen to know a better solution? Send it to me, and I would love to share it with everybody! (All credit will go to you, of course.)
So, if everything went right, now you should have a bunch of pixel perfect icons on your computer. You might want to use these PNGs to make your Dribbble shot! My personal icon size of choice for Dribbble is 96x96px. But you can choose whatever seems good for you. Just go with your gut.
And that’s it with the pixel perfect icons! Hope you guys enjoyed it and mastered your skills along the way. Pixel perfection takes time, but it’s totally worth it, don’t you think so?
Now I say, “Go and experiment!” Try different techniques, use your imagination and experience, but don’t forget to always aim for “cleaner” pixels, and your icons will look sharp as hell before you know it!
Oh, and I’m dying I to see your results! Don’t be shy – rebound this shot with your work, and I’ll be happy to see and comment on what you came up with. Stay in touch!
Good luck space cadets!