Deal with mesh in Adobe Illustrator

translators

Hi, %excellent%!

This translation as it complements my previous publication about Pixel Perfect, without which it would be incomplete, especially because the original article about Pixel Perfect refers to the original article for this translation.

The material is designed for beginners, and talks a little about two things:

the
1. How to avoid the problem which you have in layouts the spacing between the elements or guides beginning to include fractional parts of pixels;
the
2. How to use mesh for prototyping in Adobe Photoshop and Adobe Illustrator.

I this material is interesting from the point of view that I would be very grateful if in the beginning of my work as a UI designer I someone told me about the pixel grid. So I hope that will ease someone's life by posting this translation.

Like last time, one of the goals why I'm writing this article on Habr (but are not limited to, for example, transfer on Tuts+) — this compilation after translation useful links on the subject. Call of Gabriela to share their thoughts and tools you use when creating grids, maybe some other editors. One of my friends friend commented on a previous article in such a way that, of course, the material is funny, but he enjoys Sketch'eat, and there it's all out of the box. Tell me, what do you use?

By the way, although the article we are talking about Adobe Illustrator, in Adobe Photoshop you can also use a pixel grid, and snap to pixels, and your own custom grid.

summary

the

the
• to turn on/off a grid in Adobe Illustrator/Photoshop, press Ctrl + '
the
• to turn on/off the guides in Adobe Illustrator/Photoshop, hit Ctrl + ;

Well, let's go.

the

Deal with mesh in Adobe Illustrator

Adobe Illustrator is today one of the most popular vector editors. It's such a tremendous program, and if you are a beginner, it may take a lot of time, if you understand what the buttons and options do.

So it turns out that some features are overlooked by beginners, and I would like to share with you one of them. Personally, I would be very happy if me someone told about this topic at that time, when I was a newbie.

Yeah, I'm going to tell you about the Grid.

What is the Grid?

As in learning any other question let us first give the definition of the studied term.
If we turn to the online Merriam-Webster dictionary, a grid is a network of uniformly spaced horizontal and perpendicular lines(as for locating points on the map).

More complete definition can be found in Wikipedia, because there it just did this from the point of view of graphic design: "the Grid is a space (usually two-dimensional), which consists of a series of intersecting straight (vertical, horizontal or angled) or curved guide rails, which are used to organize content. The mesh serves as a basis from which the designer can place on the layout of various graphic elements (images, symbols, text) in the correct order so that they are nicely looked on the layout, easy to read. Mesh is also used in order to build relationships between the various graphical elements, for example to determine the ratio of the size or location of different elements relative to each other or relative to the canvas.

By the way, Adobe Illustrator mesh consists only of straight vertical and horizontal lines. If you need curves or even some more complex grids, you can create them using the guidelines, it's actually pretty easy.

Why is the Grid important?

We gave a General idea of what a Grid is. But why can't use? If to reiterate briefly, the Grid is what helps us to position elements relative to each other and to exhibit the relationship between the sizes and locations of objects. The grid as it offers us the rules by which we can position objects in the layout, and most importantly, to structure the content.

In addition, as a tool helps designers to create Pixel Perfect images, which is very important (in my opinion so generally required) when creating images for different devices with different screens.

Before I delve into the story of how a Grid helps create a truly high-quality sharp images, I would like to outline some of the key points that distinguishes two types of images — digital images on the screen and printed image.

digital vs. Print

For anybody not a secret that digital images are a lot different from printed images on paper. Each image type has its own color scheme (RGB digital images and print CMYK images), and each type has a specific output resolution (screen resolution and print resolution). All of this creates a difference in how to create these two types of images, particularly the way in which work is bent, curved lines.

Digital screens have their own resolution and its pixel grid (on any screen in square pixels arranged one after the other in series). This means that in order to create some sort of curved line, we're just doing some pixel translucent (alpha channel) in these areas of distortion, called dithering, which artificially helps us to recreate on the screen a curve.



The printer in turn depends on the size of the paper and its resolution when printed, which means that if you are exposed to a print resolution, the printer will print you a perfectly curved line. This is because the printer can output dots on the paper in several layers, ie at the printer no need to cheat with semi-transparent pixels, in contrast to the electronic device screen.

bindings

One of the most interesting questions that can be raised in this thread. If you are using binding, how would you say Illustrator'to align objects on the canvas to the grid the pixel grid.

Remember that I recently mentioned to a Pixel-Perfect image? Now that you know what the difference between printed pictures from a digital displayed on the screen, it's time to tell the truth about what is in my opinion the main role of the Grid.

I'm sure you've seen some illustrations on Dribbble or Behance with super-sharp image. Personally, I always wondered how the author managed to get such clean lines? As it turned out, there is nothing unusual! He or she just tied all objects to the pixel grid and create each element with the integer values of the dimensions are in pixels!

Just in case clarify that under the integer values I mean the numeric values without fractional parts, i.e. for example, if we are going to draw a rectangle, we will draw it with a width of 200 pixels and height 100 pixels and not 200.84 pixel to 99.8 pixels.

the grid Extended

A picture is worth a thousand words. Let me try to show you by example how to configure the grid. Let's do a step-by-step algorithm that you will do each time you create a new project in Illustrator. I'm sure you'll like it.

Step 1

When starting any new project in Illustrator, we always start with the settings of the new document. Let's open Illustrator and create a new document with the following settings:

printed: 1

Width: 800 pixels

Height: 800 pixels

Units: pixels
On the advanced tab settings:
the

Color mode: RGB

Resolution when rasterization: 300 dpi

align new objects to pixel grid: marked

note: you may have noticed that we set the raster effects to 300 PPI rasterization, although we intend to use our design on the screen. Let's just say, if we use larger values of offer true, it will not be very noticeable on the screen, but if it suddenly happens that you want to print painting (don't pay attention to the fact that we have created a document in RGB), all your effects like shadows will be released in bad quality, if the value of PPI was selected less than 300.

In fact, you can change the PPI value if you enter Effect > Document Raster Effects Settings.

Step 2

Once you have the document set up, create a black square the size of 100x100 pixels, and position it in the upper left corner of the Canvas, using palette Align.

Step 3

To understand how the grid works, let's look at this. Open the menu View > Show Grid (control -"), and immediately appears on the screen of a standard mesh 1000х4.

Step 4

Now that we see it, but how does it work? Let's try to move the little square with the arrow keys on the keyboard and see what happens.

Our small square will move a few pixels with each tap, nothing special. Nothing happens because we have not included the option snap to Grid.

Let's cancel our last steps, return the box to its place, and go to menu View → Snap to Grid (Shift + Ctrl + Y), and then again oprobuem operatewith to our object.



Now we can see the difference. Try to operatewith the object is to understand what is happening. Each square of movement takes place with reference to the horizontal or vertical Grid lines.

Let's look at why Illustrator behaves this way, try to understand the structure of the Grid. As I said earlier, the default Grid settings, here they are:
the

the
• grid Step every: 1000px
the
• dividing the inside of the grid step: 4

What really mean these settings?

It's quite simple. Every 1000 pixels Illustrator is to draw a cage, divided into 4 parts (thus inside the cell will appear 2x2 grid), ie get the cells each the size of 1000 x 1000 pixels, and, in turn, is divided into 4 cells of size 250 x 250 pixels (1000/4 = 250).



Because our canvas has a size of only 800x800 pixels (i.e., fits three grid cells in the 250 pixels and still 50 pixels), the binding will fire for the upper and left part of this space, which fits in a 1000 x 1000 pixels. And the lower and right part of the space line-thickness 200 pixels, highlighted in red, remains untapped.

Now if we return to our little black square, we see that it sticks only to the grid lines, which are located in 250 pixels from each other, despite the fact that the square 100x100 pixels. If the black square was the size 250х250 pixels, he would have occupied the entire square of the grid, and would have jumped exactly one of the 16 smaller cells.

grid Settings

I hope that in the previous step, you become clear about the mesh, but you have to understand that in different projects, you will have to set different grids for different needs, depending on the size of your canvas, and how and by what law you want to place your elements on the canvas.
Personally for myself, I decided that using the minimum of possible values is the most convenient, and if you combine the full power capabilities of the Mesh tool, and PathFinder, then I get super fast to place all the items the way I like.

My mesh settings are:
the

the
• gridline every: 1 pixel
the
• dividing the inside of the grid spacing: 1

If you want to experiment and customize the Grid by itself, you just need to go to the menu Edit > Preferences > Guides & Grid and set up everything the way you want.

Rapid prototyping using a grid

Let's do a little exercise and try to do a quick prototype of the website using the grid every 800 pixels split into 4 steps on canvas size 800 x 800 px.

Yes, I know that the default minimum size for a website is the size of 960 pixels, but I just want to show you a small example of how we can use the grid for rapid prototyping.

Step 1

Create a rectangle the size of the 800х200 pixels and have it on top of our canvas, paint it the color #191919. Now take the Text tool and sign this item as the Header of our web site.



note: If you have smaller elements that are not required to be tied to the grid, in our example, this text is the caption to the rectangle, just select them, go to menu View and untick the option Snap to Grid.

Step 2

Create a small rectangle the size of the 600x400 pixels and color #191919 and try to post it using the buttons on the keyboard, the left side of our canvas, just under the cap. This element also should sign, it will be Content.

Step 3

Let's create an object smaller 200х400 pixels color #B24747 and then place it in the right part, the right of the content, and then writing his Sidebar.

Step 4

Complete our prototyping adding the last element 800х200 pixels and color #191919. Place this rectangle at the bottom of the canvas and call it Footer.



Roughly just a few seconds we managed to create a rudimentary website. Great to spend on these things so little time, isn't it?

Dual binding

Before you rush to experiment with mesh, I would like to tell you about the difference between Binding customizable grid and snap to pixel grid.

By default, if you create a new document, the Preview mode is usually set on Default. This means that what you create is what you see. (Ie, you see the vector the way it is, not rasstreljany). In this case, the option Snap to refers to Grid that you are setting up, and the Mesh depends on the values you set in the parameters.

If you enable the Pixel Preview (View > Pixel Preview) and zoom in on the artboard, Illustrator will show you the pixels that make up your vector image. When snapping is set to pixels, each click on the keyboard arrows will move your object into a fixed number of pixels, which is set to Keyboard Increment.

Note: Yes, you can enable the Keyboard Increment to any number of pixels, which is convenient to you. This option is located in menu Edit > Preferences > General > Keyboard Increment.



The key difference between the two methods of attachment is that if you somehow created an object with non-integer size values, such as 200.9х60.40 pixels, snap to pixels will change it, and she will automatically round your values.
I recommend you, if you create an object in the snap to grid, always switch the mode to Pixel Preview and check if your objects are embedded in the Pixel grid. In this case, by the time you finish working on your design, you will have a sharp quality image, and you don't have to solve any problems.

the

Useful resources

the

Choi Wines. How to design a modern website. Professional web design grid-based. b.m.: Peter, 2012.
There are many books about the grid. very popular and not, but I read this, so that's what and recommend. Here are the steps in great detail described the process of developing a universal grid (which in a goth version where there have been plenty). In General after reading just all falls into place, it becomes clear why. the

• 960 Grid System is one of the various ready-made sets of grids. Here is an already created layout templates for all popular editors like Photoshop, Illustrator, InDesign, etc. the List is very large, refer.
the
• GuideGuide and Griddify — plugins for Photoshop to create grids.

Article based on information from habrahabr.ru