How to Create Pixel Perfect Images in Adobe Illustrator

Original author: Andrei Stefan
  • Transfer
  • Tutorial

From translator


Glad to welcome you,% username%!

I am new to the profession of interface designer, and for a long time, flipping through vacancies, I was interested in the requirements for one of them. Among such things as knowledge of the Adobe package, prototyping tools, and ux / ui skills, I read that it would be nice for a job seeker to be able to keep order in the layers, structure and names of files and folders, as well as know and be able to apply to practice what is called pixel perfect. This interested me, because at my work they did not require this from me or other employees, but I always tried to adhere to it and even tried to convince others of it, but for some reason I did not have enough arguments to explain why necessary.

At that time, I did not know the concept of pixel perfect at all, I only heard somewhere a couple of times, and since this item was at the end of the list of requirements for "accuracy", I realized that this was something like the apogee, the tip of the iceberg in the organization work on layouts.

I began to search, but the programmer did not find anything but an article on Habré from a couple of paragraphs about Pixel perfect. Then I somehow heard about Monument Valley, and even stumbled upon the Pixel Perfect Precision reference book, but there was somehow no time to study so much information in English, and for the first time it did not catch me. Time began to appear and some articles came out, one of which, filled with practical tips on Pixel Perfect, hooked me, and I decided not only to read and understand, but also translate as much as possible literary to give the question wide publicity, and spread the topic on Habré.

A small technical point. The original article with Tuts + is called “How to Create Pixel Perfect Artwork Using Adobe Illustrator”, while I can assure you that most of the settings suggested in the article are also present in Adobe Photoshop CS6, and in Adobe Photoshop CC you can repeat all this completely.

In conclusion of the introduction, I want to ask you not to pay attention to the fact that I am new to design, and this is my first translation in my life. Be critical, the topic is serious. I urge you to share your thoughts and experiences in the comments.

Summary


This part is for those who are too lazy to delve into the aspects, but want to quickly receive instructions.
Or for those who have already read the full article, but now want to quickly apply all the necessary settings at another workplace without extra paragraphs.

Abobe Illustrator Settings


  1. Edit> Preferences> Units> General → Pixels
    Edit> Preferences> Units> Stroke → Pixels
  2. Edit> Preferences> Guides & Grid> Gridline every → 1px
    Edit> Preferences> Guides & Grid> Subdivisions → 1px
  3. Edit> Preferences> General> Keyboard Increment → 1px
  4. View> Snap to Grid
    View> Snap to Point
  5. View> Pixel Preview

Do not give thanks.
All interested please pass under the cat.

How to create pixel perfect images in Adobe Illustrator




Often, novice designers encounter a problem when they have to spend quite a lot of time on some small thing for the web (like an illustration or an icon), and as a result, in the final picture they notice that the image is not sharp enough.

This is something we have to deal with if we are just starting to use Adobe Illustrator, so I decided to write a short article for those who are familiar with this problem and are looking for a solution.

1. Vector and bitmap images


To begin with, I would like to shed light on the differences in these basic concepts that you, I, and all those who have chosen the path of a designer regularly encounter.

All the images that we have to face in our creative craft can be divided into two large types. These are raster and vector images.

A vector image can include one or many objects, which in turn consist of a possible number of anchor points and lines connecting them (paths). Such images can be scaled to infinity, without loss of quality.

A raster image, in turn, consists of many colored dots, each of which occupies its own strictly fixed place in the image pixel grid. This means that as soon as the image is saved, any scaling of the image (enlargement, reduction, and other operations such as rotation) will degrade the image quality. This will happen because we, as it were, will forcibly change the number of pixels in the image at the moment when we will adjust one picture to different resolutions, if the project requires it.

Reducing the file resolution does not hit the image quality so much, but increasing the resolution of an existing image noticeably worsens the picture quality, blurry areas and fuzzy edges appear. There are special programs such as Perfect Resize that use special sophisticated algorithms to optimize the sharpness of the images you enlarge. But for me personally, this fact is only superfluous evidence that raster graphics are inferior to vector graphics in the sense that they do not have a very important property - the ability to scale without loss of quality (quality-agnostic scalability).

In fact, both types of images, both raster and vector, depend on the environment in which you use them. In general, as you know, any image can either be printed live on a printer or shown in digital form on a monitor screen. And while printers depend on the actual print resolution, digital screens (no matter what it is, displays on your PC or your smartphone, tablet, or any other device) also depend on your resolution, and it doesn’t matter if it's a vector or bitmap graphic.

This just creates the problem that we are talking about today. Vector graphics must fit into the pixel grid on which the graphics are superimposed. Therefore, we get the difference between pixel-perfect graphics and the blurry image that designers often get.

Fortunately, there is a solution that, in my opinion, should become the standard, and these settings should be applied at the beginning of work on any new project, no matter whether it is graphics for the web or for printing.

2. Let's see how Adobe Illustrator works.


Before you start to fix something, let's figure out how it works. Illustrator is a vector graphics software that uses mathematical algorithms to create and display curves (paths) (whether they are closed or not) and anchor points. Anchor points are those points with which you can control the size and shape of a vector object.



The anchor points themselves are not so important. The important thing is how they are spread out and the curve that they form on your canvas (Artboard) (with or without bindings), so in the next steps I will talk in detail about every little thing that will affect our pixel perfect image.

3. Setting up Adobe Illustrator


By default, Adobe Illustrator is already pre-configured for most tasks, so you can start working immediately after the installation of the program on your computer has been completed. For many people in our profession, the standard settings may be quite suitable, but as soon as you pay more attention to the small details in your layouts, you will come to the point that you will need to change something so that your layouts appear exactly the way you wanted to see them. In the following steps, I will tell you about a few basic things that in my opinion need to be configured after each new installation of Adobe Illustrator.

Before starting, I would like to clarify that all that is described below is my personal experience, and I came to this after a certain time, stepped on certain rakes, so in no case will I call the settings I proposed the ideal or the best - just more suitable in my opinion for creating pixel-perfect images. It is very likely that the proposed solution is far from suitable for all situations that may arise in you, but in most cases, I think you will find a couple of tips for yourself that will help you.

Step 1

Before we start setting up the units, I would like to take a couple of seconds and compare the default points in pixels with pixels to see what changes from choosing the latter as units.

Items

The term came to us from typography and means the smallest unit with which you can measure the font size and other parameters, indentation, line spacing and distance between the lines.

Pixels

If you turn to Wikipedia, it will tell you that a pixel is the smallest element displayed by a digital display. Since all our pictures are displayed on displays, we can say that a pixel is the smallest unit of measure, thanks to which we determine the screen image and the sizes of the elements that are displayed on it.

So, we have a choice between two units, so what is the difference? Many articles say that 1 pixel is equal to 1 point (1 pt = 1 px) but this is only true for displays and OSs with a resolution of 72 ppi since 1 point = 1/72 inch , and this means that on other screens where PPI is different, there is a difference between a point and a pixel, and the larger the PPI, the greater the difference. W3 org, for example, says 0.75 pt = 1 px .

Apple wrote an entire article on this subject - the iOS Developer Library page , trying to explain why items are preferable to use than pixels, since using items is supposedly easier to make images for different screen sizes.

“For example, on high-resolution screens, a 1-point line can turn into a 2-pixel line. In short, if you draw the same thing on different sized screens (one with a higher resolution, the other with a smaller one), your drawing will look approximately the same on both screens. ”


Only they forgot that today we have a huge number of manufacturers of devices with a variety of screens, resolution and pixel density. Therefore, the difference in the display of the picture is becoming more noticeable.

Now you have to ask, so what to use? I myself tend to be more inclined towards pixels. Why? The easiest way to answer is that these are personal preferences based on personal experience. I mainly work as an illustrator, and I have never heard people complain that in the illustration on their iPhone some line looks thicker than on their PC.

In addition, pixels are independent of PPI (i.e., the density of pixels on a device), and you can simply control the image resolution for devices with a larger screen by simply increasing the PPI value when creating a new file. In addition, due to the large difference in resolutions on different devices, I am inclined to the fact that while 1 point may be equal to 2 pixels on one of the Apple devices, 1 point may also be equal to a different number of pixels on another device from another manufacturer, for example, with a higher pixel density.

In fact, the decision to make you. If you decide, like me, to select pixels, then open the Units menu in Adobe Illustrator from the Preference section (Edit> Preferences> Units) and change the General andStroke on Pixels . Since font size is usually point-based, I would advise you to leave this value intact, especially since if you switch this size to pixels too, you will not sharpen your text.



Step 2

We have already configured the units in our layout, now it's time to go to the grid settings (Grid) . I won’t talk much about what a grid is, because I have another article on this topic ( translation in Habré ), from which you can get everything on this topic. The only thing I want to say is that if you really want to create a really high-quality and sharp image, you should pay attention to the grid, make it super accurate, snap to it, and work, periodically including the Pixel Preview mode (we will consider it more in a couple of minutes).

To change the default settings, go to the menu Edit> Preferences> Guides & Gridwhere you will see two options that we should pay attention to: the Gridline every option and the Subdivisions option . Personally, I use the value 1 in both cases, for myself I decided that these are the most suitable settings for me, regardless of the project I'm working on. Yes, you will have to pay more attention to the location of the elements, but if our goal is to create the most detailed image, then this is our way.



Step 3

I hope you all use hotkeys in your work. Illustrator has settings that allow us to move objects over short distances with great accuracy using the arrow keys on the keyboard. Since we strive to ensure that everything in the layout is tied to the borders of the pixels, we must configure this so that each click on the arrow moves our object exactly 1 pixel.

These settings are in the menu Edit> Preferences> General> Keyboard Increment .

In fact, if you have not used this before, I will tell you - this is a super function that allows us to instantly move objects without error over short distances! Those are the situations when we need to move something a little bit.



4. The process


So, all that we did before this was setting up Illustrator to make it more pixel sensitive, but as a good example, it's better to give something more than just settings. I will tell you about the process, about the scheme by which I myself work when I create something that will be used on the web.

Step 1

It all starts with the settings of our New Document. We should pay a little attention to the settings when creating a new document, this will allow us to prepare the basis for creating pixel-perfect images.

Press Ctrl + N (or go to File> New ) and pay attention to some settings, starting with Profile .



Since we're just obsessed with Pixel perfect, our Profile should be set to Web . What changes from this? Illustrator in this case automatically changes the Units to Pixels , and the Color Mode to RGB (Red Green Blue) .

If you pay attention to the Size of our document, you will see that both Width and Height have round values (960 x 560 px) without a fraction ( for example, 960.5 x 560.38 ). What is so important about this? If you create a Canvas (Artboard) , which will be 960.5 pixels wide, for example , you will have a small area on the right that will not coincide with the pixel grid.



This is terrible, because we want Adobe Illustrator to align all our new objects to the grid (Align New Objects to Pixel Grid). This function is very important, its inclusion gives the program instructions for positioning new objects, and linking them to the Pixel Grid , which makes our image quality and sharp.

So, for example, if we create a rectangle with a size of 960 x 560 pixels , and then try to center (horizontally and vertically) this rectangle in relation to our Canvas (Artboard) , this will be impossible, since the right and lower parts of the canvas do not coincide with pixel grid and canvas borders do not fit exactly on the pixel borders in this area.



Some of you might think that this option is important only if we draw, but it seems to me that when used in print, it will bear fruit, since you will place Anchor points only in the nodes of the pixel grid, not anywhere.

Note: If you have already begun work in a document whose dimensions are fractional, you can always fix this in the Artboard Tool (Shift + O) . But I would still recommend paying attention to this and immediately creating canvases with the correct rounded values, this will save you from a headache in the future.

Step 2

If we have correctly set the document settings, let's also observe this rule for the sizes of all elements - make sure that the width and height of all elements are without fractional parts.

So, when creating objects, the rule of superposition on the pixel grid must also be respected. If we want to create a clear image, let it be a square, we must set a fixed size (for example, 200 x 200 pixels), so it turns out that each pixel of our figure will cover exactly one pixel on the pixel grid, and the border of the pixel of our figure will coincide with the border of exactly the same pixel number on the Canvas (ArtBoard). To make sure of this, let's create a Shape, zoom in as much as possible, and we will make sure that even at maximum magnification, our figure will look crystal clear, without any blurry edges!



If we created a figure with dimensions of 200.4 x 199.9 pixels , Illustrator would apply the antialiasing effect to the right and bottom of the figure, the borders would no longer coincide with the pixel grid, and then our figure would look worse, not so sharp.



Fortunately, smart people from Adobe are not in vain eating their bread because they came up with a solution to this problem and offer it to us by adding the Align to Pixel Grid function , which is located at the very bottom of the Transform palette . If you select a poorly located object and enable the Align to option for it , the object’s dimensions will automatically be rounded to 200 pixels , since this is the closest integer value.



Note: If your Transform palette does not have such an option, then you can enable its display in the Transform palette by selecting Show Options .



Step 3

So, we came almost close to the most important features in Adobe Illustrator, which allow you to create Pixel Perfect images. There are two functions that give a similar effect, but if you look, they have key differences.

Grid snap

As the name implies, this option binds objects to the Grid , to the same Grid, the settings of which you set earlier. This function can be enabled in the menu View> Snap to Grid (Shift + Control + ”) . This feature includes in Adobe Illustrator algorithms by which all your objects on the Canvas (Artboard) are snapped to the nodes and grid lines with their edges.



Pixel Snap

Привязка к пикселям (Snap to Pixel) немного отличается от предыдущей функции, так как привязывает объекты именно к Пиксельной сетке (Pixel Grid), которую мы не можем изменить. Эта функция скрыта, пока вы не включите Pixel Preview (Alt + Control + Y), в таком случае вы сменяете Привязку к сетке на Привязку к пиксельной сетке.



Кстати говоря, вы можете сравнять эффект этих двух функций Snap to Grid и Snap to Pixel если вы настраиваете ваше сетку через каждый 1 пиксель, с разделением (Subdivision) на 1, что на самом деле является минимальным значением вашей сетки, т.е. вы настриваете сетку идентично Pixel grid (Pixel Grid) .

Step 4

If you work with the pixel grid , the preview mode will be your main assistant in the process of creating crystal clear and sharp images. This allows you to make an increase at the pixel level, and see which parts of your image require close attention on your part. I use this feature all the time, and it will help me all the time. As I said before, the option can be activated in the menu View> Pixel Preview , or by pressing the Alt + the Ctrl + the Y .

Step 5

When you have drawn everything you need, take a little time, and just in case, make sure that all the anchor points are attached to the Pixel Grid . If you find some point interposed between grid nodes, just take the Direct Selection Tool (A) , select this anchor point, and move it to the nearest grid node.

You will think that using the Align to Pixel Grid function itself takes care of such problems, but in my experience, sometimes errors occur in the program, and when this happens, I pick up the Direct Selection Tool (A) and I fix these problems manually.

Step 6

Bezier curves - an integral tool of any program that works with vector graphics, with the help of guides you can change the shape of objects, change closed and open curves. The problem for all newcomers is that they often pull on Bezier handles, especially without thinking, arbitrarily, and because of this, vector curves may not look very good, not as flat as we would like.



The trick is to ensure that the angle of the handles is possibly a multiple of 45 ° , i.e. so that the guide line is clearly horizontal, vertical, or diagonal, this is done with the Shift key held down . Thus, we can ensure that all the points are snapped to the pixel grid.



By the way, if you have any object with a stitched right angle (like a button), then try to make sure that the handle reaches exactly that line of the object, which is, as it were, its dimension so that the handle does not go beyond the boundaries of the object.



5. Object scaling


When we work with Pixel Perfect images, zooming can be a real headache for you. If you select an object, and pull the handle to resize the bounding frame, the object will increase or decrease, yes, but many of its components can be distorted.

The solution is the Scale option (right click> Transform> Scale> Uniform) , and use values ​​that are multiples of 50%, for example 150%, 200%, 250% to increase and -50% to halve the initial size.

This means that you should always plan what, and in what size to create, you should think in advance about the size requirements of your images.



На заметку: Даже следуя этому совету, к сожалению, вы не избежите проблем, связанных с изменением размера каких-то объектов, которые состоят из множества элементов. Если это случится, то вам нужно будет разгруппировать ваш объект, и изменять размер каждой детальки по-отдельности.

6. Вращение объектов


When you work with rectangles, there are no special problems with rotation, because even if something flies, you can always manually move the anchor point to the nearest pixel grid node. But what if we work with elements with rounded corners, or with curves?

Unfortunately, this is the saddest part of the job, if a thing like Pixel Perfect is important to you, because at the moment there are no universal working algorithms that make it easy to automatically attach curve points to a pixel grid, and even in small things this will still affect general view of the image. Usually, if I have a rectangle with rounded corners, and I need to rotate it, I rotate it and leave everything as it is.

Everything seems to be!


If you follow all these steps, then you will be able to create a high-definition image that will look great on any of the devices.

Useful links


  • Pixel Perfect Precision - A book / guide / guide from the studio UsTwo, which made Monument Valley and introduced the concept of Pixel Perfect. This guide is currently 4 years old.
    cdn.ustwo.com/PPP/PP3.pdf
    If you are interested in my translation (or the original article), be sure to read this manual, but rather print a full-fledged color version and bring it to colleagues! If you, like me, have problems with English, print and bring to the office a full-fledged Russian version, which is located at the following link.
  • Translation of the Pixel Perfect Precision Handbook into Russian. Translated 3rd Edition.
    heartbeat.ua/pp3/PP3_rus.pdf
  • A small article about the translation of Pixel Perfect Precision on Habré.
    habrahabr.ru/post/242373
  • Short article about Pixel Perfect imposition on Habré.
    habrahabr.ru/post/195414
    This is the very first and almost the only article that I managed to find at the time by the request "Pixel Perfect".

Also popular now: