How to create a Pixel-Perfect image in Adobe Illustrator

translators

Welcome, %excellent%!

I am a newbie in the profession of the designer of interfaces, and how long ago, flipping through jobs, I was interested in the requirements for one of them. Among these, as knowledge of the Adobe package, tools, prototyping and skills in the field of ux/ui, I read that the applicant for this particular position it would be nice to be able to keep order in the layers, the structure and names of files and folders, as well as to know and be able to apply in practice what is called pixel perfect. I was interested, because at my work not from me, nor from other staff not required, but I always tried to stick to it and even tried to convince the other, but somehow not enough arguments to explain why this is necessary.

With the concept of pixel perfect I did at that time did not know, just heard somewhere a couple of times, and this item stood at the end of the list of requirements of "accuracy", I realized that it was something like the climax of the iceberg in the organization of work on layouts.

I was looking for, but nothing but articles on Habre of a couple of paragraphs about Pixel perfect from the programmer is not found. Then I heard about Monument Valley, and even came across a reference Pixel Perfect Precision, but the time to learn so much information in English as it was not, and the first time he didn't get me. Began to appear time and there were some articles, one of which is filled with practical tips for Pixel Perfect caught my eye, and I decided not just to read and understand, but also to translate the literary ability to give the issue wide popularity, and spread the topic on habré.

A small technical point. Original article from Tuts+ called "How to Create Pixel Perfect Artwork Using Adobe Illustrator", I can assure you that most of the proposed article settings present in the Adobe Photoshop CS6 and Adobe Photoshop CC to do, you can repeat it all over.

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

the

summary

This section is for those who are too lazy to delve into the aspects, but I'd like to the user.
Or for those who already read the full article, but now want to quickly without any extra paragraphs, and on other workplace to apply all the necessary settings.

Preferences in the Adobe Illustrator

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

Thank you.
All interested please under cat.

the

How to create a pixel perfect image in Adobe Illustrator

Often, beginners designers are faced with the problem of having to spend a large amount of time on some little thing for the web (like illustrations or icons), and eventually, in the final picture, they notice that the image is sharp enough.

This is what we face if we are just starting to use Adobe Illustrator, so I decided to write a little article for those who are familiar with this problem and seeking a solution.

1. Vector and bitmap images

To start I would like to shed light on the differences in these basic concepts, which regularly encounter you, I and all those who chose the path of designer.

All images encountered in our creative craft can be divided into two types. Is a raster and vector images.

Vector image may include one or a plurality of objects which in turn consist of various number of reference points (anchor points) and lines between them (paths). Such images can be scaled endlessly without loss of quality.
A bitmap, in turn, consists of many colored dots, each of which has its fixed location in the pixel grid of the image. This means that once the image is saved, any scale (zoom in, zoom out, and other operations like turning) will degrade image quality. This will happen because we kind of force will change the number of pixels in the image at the moment when we will customize one image at different resolution, if the project requires it.

Reducing the file resolution is not so much an effort to image quality, but increasing the resolution of an existing image significantly degrades the quality of images that appear fuzzy region, fuzzy region. There are special programs like Perfect Resize, which use complex algorithms to optimize the clarity of the images you increase. But for me personally, this fact is only more proof that raster graphics are inferior to vector in the sense that it is a very important feature — the ability to zoom without loss of parts 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 be printed live on the printer and displayed in digital form on the monitor screen. And while printers depend on a real printing resolution, digital screens (no matter what it is displays PC or your smartphone, tablet or any other device) also depend on your permissions and whether it's vector or raster graphics.

It just creates that problem, we're talking about today. Vector graphics have to fit into the pixel grid to which this schedule is imposed. Thus, we have the difference between pixel-perfect graphics and the Unsharp image, which is often obtained from the designers.

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

2. Let's see how it works Adobe Illustrator

Before you start to fix something, let's see how that something works. Illustrator is for creating vector graphics, which uses mathematical algorithms to create and display curves (paths) (whether closed or not) and reference points (anchor points). Reference points (anchor points) are those points through which you can control the size and shape of a vector object.



By themselves the reference point is not important. What matters is how they rasstavleny and the curve which they form on your canvas (Artboard) (with or without bindings), so in later steps I'll go into detail about every little thing, which will affect our pixel perfect image.

3. Configuring Adobe Illustrator

By default, Adobe Illustrator is already pridnestrovem for most tasks, so you can start working immediately after it was completed the software installation on your computer. For many people in our profession, standard setting may well be suitable, but as soon as you begin to pay more attention to small details in your layouts, you will find that you will need to change something to your layout came out exactly as you would like them to be. In posleduyuschih steps I will tell you about several basic things, which in my opinion should be set after each new installation of Adobe Illustrator.

Before I begin, 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 some rakes, so I in any case do not call my proposed settings are perfect or best — just more appropriate in my opinion to create pixel-perfect images. It is very likely that the proposed solution does not suit all situations that you may have, but in most cases, I think you'll find a couple of tips that will help you.

Step 1

Before we proceed to the units settings, I'd like to take a couple of seconds and to compare the default in Adobe Illustrator to the points () with pixels (pixels) to see what changed from the choice of the latter as units of measurement.

The term comes to us from the typography and denominates the smallest unit that can measure the font size and other settings, indents, line space intervals and distances between obzats.

Pixels

If we turn to Wikipedia, it will tell you what pixel is the minimum, element displayed digital display. As all our images are displayed on the monitors, we can say that the pixel is the minimum unit of measurement by which we determine the image of the screen and the size of the items that are displayed.

So, we have a choice between the two units, so what's the difference? Many articles say that 1 pixel equals 1 point (1 pt = 1 px) but this is only true for display devices, and operating system with the permission 72 dpi as 1 point = 1/72 inch, and this means that other screens where the PPI value is different, the difference between point and pixel is, and the more PPI, the difference is noticeable. W3 Org, for example, says that 0.75 pt = 1 px.

Apple wrote a whole article on this topic — iOS Developer Library page, trying to explain why items are preferable to use than pixels, as with the allegedly easier to make images for different screen sizes.

“For example, on screens with higher resolution, the line thickness of 1 point can become a line thickness of 2 pixels. In short, if you draw the same thing on different size screens (one with higher resolution, the other with less), your picture will look about the same on both screens”

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

Now you must be asking so what to use? I myself, as a rule, more inclined to the pixels. Why? The easiest way to answer that is a personal preference, based on personal experience. I mainly work with Illustrator, and I have never heard that people complained that the illustrations on their iPhone something line looks thicker than on their PC.

In addition, the pixels independent of the PPI (i.e. the density of pixels on the device), and you can just control the resolution thumbnails for devices with a larger screen, just increase the value of the PPI when creating a new file. Besides, due to the large difference in resolutions on different devices, I'm inclined to think that while 1 point may be equal to 2 pixels on one of the Apple devices, 1 point may be equal to the other number of pixels on a different device from another manufacturer, for example, with a higher pixel density.

In fact, the decision to accept you. If you decide, like me, choose pixels, then open in Adobe Illustrator Units in Preference (Edit > Preferences > Units) and adjust the General and Stroke to Pixels. As the size of fonts is usually based on points (point-based), I would advise you to leave this value untouched, especially because if you switch this size is also in pixels, you will not improve the sharpness of your text.

Step 2

We've already set up the units in our layout, now it's time to go to settings mesh (Grid). I'm not much rasskazyval about what a mesh is, because I have another article on this topic (the translation on habré), from which you can learn everything on this subject. The only thing I want to say is that if you really want to create really high-quality and sharp image, you should pay attention to the mesh to make it ultra-precise, attached to it, and to work periodically including the Pixel Preview mode (we will discuss it more in a couple of minutes).
To change the default settings, open the menu Edit > Preferences > Guides & Grid where you will see two options, on which we should pay attention: the option Gridline every and Subdivisions. I personally use a value of 1 in both cases, for myself, I decided that this is the most appropriate to me, regardless of the project I'm working on. Yes, you will have to pay more attention to the arrangement of elements, but if our goal is to create the most-detailed image, this is the way.

Step 3

I hope all of you use the hotkeys to work. Have Illustrator'and there are settings that allow us to move objects for short distances with great accuracy by means of keys-arrows on the keyboard. As we strive to ensure that all the layout was tied to pixel borders, then we need to configure it so that each click on the arrow moved our object by exactly 1 pixel.

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

In fact, if you do not use it, I can tell you is superfunky that allows us to instantly move objects without error for short distances! Those situations when we need something ctui-just move.

4. Process

So, all we have done before is set up Illustrator to make it more sensitive pixels, but as a good example, the best result in more than just the setting. I'll tell you about the process, about the manner in which I work when creating something that will be used on the web.

Step 1

It all starts with the settings of our New document. We must devote some attention to settings when creating a new document, it will allow us to prepare the basis for the creation of pixel-perfect image.

Press Ctrl+N (or open the menu File > New) and pay attention to some of the settings starting with Profile.



Since we are still obsessed with Pixel perfect, our Profile must be set to Web. What from it changes? Illustrator in this case, it automatically changes the units (Units) to pixels (Pixels) and color mode (Color Mode) to RGB (Red Green Blue).

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



It's awful, because we want to Adobe Illustrator have aligned all our new facilities to the grid (Align New Objects to Pixel Grid). This feature is very important, its inclusion gives the program instructions for the positioning of new objects and linking them to Pixel grid (Pixel Grid), making our image quality and sharp.

So, for example, if we create a rectangle the size of the 960 x 560 pixels, and then try to align (horizontal and vertical) of the rectangle in relation to our Canvas (Artboard), it will be impossible, since the right and bottom part of the canvas does not coincide with the pixel grid and the canvas boundaries do not fall exactly on pixel boundaries in this area.



Some of you may think that this option is only important if we draw, but it seems to me that when used in printing it will bear fruit as you place Reference points (Anchor points) only at the nodes of the pixel grid, not anywhere.

note: If you have already started the document, which have a fractional part, you can always fix it in the window Artboard Tool (Shift + O). But I would still recommend to pay attention to it and just create a canvas with the correct rounded value, this will save you headaches in the future.

Step 2

If we correctly set the document settings, let us observe this rule for the dimensions of all elements, ensure that the width and height of all elements was without fractional parts.

So, when creating objects the law of superposition on the pixel grid too, should be respected. If we want to create a clear image, let it be square, we need to specify a fixed size (for example 200 x 200 pixels), thus we get that each pixel of our figure will cover exactly one pixel on the pixel grid and the pixel boundary of our shape will match the border exactly the same number of pixel on the Canvas (ArtBoard). To verify this, let's create a figure (Shape), zoom (Zoom) as possible, and we make sure that even at maximum zoom our figure will look crystal clear, without any blurry edges!



If we set the figure size 200.4 199.9 x pixels, Illustrator would apply smoothing algorithms (antialiasing effect) for the right and bottom of the shape, boundaries cease to coincide with the pixel grid, and then our figure will look worse, not so sharp.



Fortunately, the smart people of Adobe do not knowingly eat their own bread, so came up with a solution to this problem and offer it to us, adding the function Bind objects to the pixel grid (Align to Pixel Grid), which is located at the bottom of the palette Transform. If you select poorly located object, and enable the option Align to, the size of the object is automatically rounded to 200 pixels, as it is the closest integer value.



note: If your palette Transform there is no such option, you can enable it in the palette Transform, selecting Show Options.

Step 3

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

snap to grid

As the name implies, this option snaps objects to the Mesh (Grid) to the grid, the settings of which you exhibited earlier. This feature can be enabled in menu View > Snap to Grid (Shift + Control + ”). This function includes in Adobe Illustrator algorithms, which all the objects onto Canvas (Artboard) with their edges attached to nodes and grid lines.

snap to pixels

snap to pixels (Snap to Pixel) slightly differs from the previous functions, as it binds the objects to the Pixel grid (Pixel Grid), which we can't change. This feature is hidden until you turn on the Pixel Preview (Alt + Control + Y), in this case, you smenyaet snap to grid on snap to pixel grid.



By the way, you can equalize the effect of the two functions Snap to Grid and Snap to Pixel if you configure your grid, using each 1 px, division (Subdivision) 1 that actually is the minimum value of your grid, i.e. you activate grid is identical to Pixel grid (Pixel Grid).

Step 4

If you work with reference to the Pixel grid, the preview mode will be your main helper in the process of creating crystal clear and sharp images. This allows you to zoom in at the pixel level and see which parts of your image requires careful attention from your side. I always use this feature, and it is all the time I burden the joints while helping. As I said before, the option can be activated in menu View > Pixel Preview or by pressing Alt+Ctrl+Y.

When you have drawn everything you need, take a little time, and just in case make sure all pivot points are tied to Pixel grid (Pixel Grid). If you found some point stood between the nodes of the grid, just positite intrument Direct Selection Tool (A), select the anchor point, and move it to the nearest grid node.

You think that the use of the Align to Pixel Grid itself takes care of this kind of problems, but in my experience, sometimes the program mistakes happen, and when that happens I pick up the tool Direct Selection Tool (A), and fix these problems manually.

Step 6

Bezier curves — an essential tool of any program working with vektornoe graphics, using the guides you can change the shape of objects to change open and closed curves. The problem of all beginners is that they often pull the Bezier handle, especially without thinking, randomly, and because of this, vector curves may not look so good, not so smooth as we would like.



The trick is to ensure that the angle of the handles on the possibility of a multiple 45°, i.e. that the line guide was clearly horizontal, vertical, or diagonal, this is done using the mouse button pressed Shift. Thus we can ensure that all points will be snapped to the pixel grid.



By the way, if you have some object with strahlendem a right angle (like buttons), then try to make sure that the handle has reached exactly the line object, which is its envelope, so that the handle does not protrude beyond the border of the object.

5. Scaling objects

When we work with Pixel Perfect image, zoom images can become for you a real headache. If you select an object, and drags the resize handle of the bounding dimensions of the frame, the object is enlarged or reduced, Yes, but many of its constituent parts can distort.

Solution use the option Scale (right click > Transform > Scale > Uniform), and use values that are multiples of 50%, e.g. 150%, 200%, 250% to increase and -50% to reduce half of the initial size.

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



note: Even following this advice, unfortunately you will not escape the problems associated with changing the size of some objects, which consist of many elements. If this happens, you will need to Ungroup your object and change the size of each parts separately.

6. Rotating objects

When you work with rectangles, are special problems when rotation does not occur, because even if something crashes, you can always manually move the reference point to the nearest node of the pixel grid. And what if we work with elements with rounded corners, or curves?

Unfortunately, this is the saddest part of the job, if you care about such a thing as Pixel Perfect, because at the moment there is no universal working of the algorithms that make it easy to automatically bind point on the curves to the pixel grid, and even in the little things it will still affect the appearance of the image. Usually if I have a rectangle with krupnymi angles, and I need it rotating, I rotate it and leave everything as it is.

It all!

If you follow all these steps, you will be able to create the HD image that will look great on any of the devices.

the

Useful referring

the

the
• Pixel Perfect Precision — Book/guide/guide from UsTwo, which made Monument Valley and introduced the concept of Pixel Perfect. This directory currently 4 years.
  If you are interested in my translation (or the original article), be sure to read this guide, and it is better to print full color option and bring to the office colleagues! If you, like me, problems with English, please print and bring to the office a full Russian version, which is located at the following link.
the
• Translation of Pixel Perfect Precision Handbook to Russian. Translated 3 edition.
  heartbeat.ua/pp3/PP3_rus.pdf
the
• a Small article about the translation of the Pixel Perfect Precision on habré.
  habrahabr.ru/post/242373
the
• Short article about Pixel Perfect layout on habré.
  habrahabr.ru/post/195414
  This is the first and almost the only article that I managed at the time to find results for "Pixel Perfect".

Article based on information from habrahabr.ru