From the translator
This translation sort of complements the my previous post about Pixel Perfect without which it would be incomplete, especially since the original article about Pixel Perfect refers to the original article of this translation.
The material is designed for beginners, and tells a little about two things :
- How to avoid the problem that causes your layout to start including fractional portions of pixels between elements or guides;
- How to use grids for prototyping in Adobe Photoshop and Adobe Illustrator.
I find this material interesting from the point of view that I would have been very grateful if someone had told me about the pixel grid at the very beginning of my work as an interface designer.So I hope to make someone’s life easier by publishing this translation.
Like last time, one of the goals of why I’m writing this article on the Hubr (rather than limiting myself to translating to Tuts+, for example) is to compile useful links on the topic after translation.I encourage hubscribers to also share their insights and the tools you use when creating grids, maybe some other editors.One friend of mine commented on a previous article saying that, of course, the material is cool, but he uses Sketch, and it’s all out of the box there. Tell me, what do you use?
By the way, although the article is about Adobe Illustrator, in Adobe Photoshop you can also use a pixel grid, pixel anchoring, and your own customizable grid.
- To turn the grid on/off in Adobe Illustrator/Photoshop, press Ctrl + ‘
- To turn the guides on/off in Adobe Illustrator/Photoshop, press Ctrl + ;
Well, here we go.
Dealing with the grid in Adobe Illustrator
Adobe Illustrator is one of the most popular vector editors today. It’s such a huge program, and if you’re a beginner, it can take quite a while to get into what each button or option does.
It so happens that some features are overlooked by newbies, and I’d like to share one of them with you. Personally, I would have been very happy if someone had told me about this topic back when I was a newbie.
Yes, I’m going to tell you about the Grid.
What is Grid?
As in the study of any other question, let’s first define the term we are studying.
If you refer to the Merriam-Webster online dictionary, a grid is a network of evenly spaced vertical and horizontal lines (for example, for positioning points on a map).
An even more complete definition can be found on Wikipedia, because it is just from the point of view of graphic design: "A grid is a space (usually two dimensional) which consists of a series of intersecting straight lines (vertical, horizontal or angled) or curved guides which are used to organize content. The grid serves as a basis that allows the designer to place various graphic elements (images, symbols, paragraphs of text) in the right order on the layout so that they look nice on the layout, easy to read. The grid is also used to build relationships between different graphic elements, for example, to determine the ratio of sizes or location of different elements relative to each other, or relative to the canvas.
By the way, the Adobe Illustrator grid consists only of strictly vertical and horizontal lines. If you need curves or any other more complex grids to work with, you can create them with the guide guides, it’s really not hard.
Why is knowledge of the Grid important?
We’ve given a general idea of what the Grid is. But why use it at all? To recap briefly, the Grid is what helps us place elements relative to each other and set up relationships between objects’ sizes and locations. It’s like a grid offers us rules by which we can arrange objects in a layout, and most importantly, structure content.
In addition, the Grid as a tool helps designers create Pixel Perfect images, which is very important (in my opinion so necessary at all) when creating images for different devices with different screens.
Before I delve into the story of how Grid helps you create really sharp quality images, I’d like to talk briefly about some of the key points that distinguish the two types of images – digital images on the screen, and printed images.
Figure VS Print
It’s no secret that digital images on screens differ in many ways from printed images on paper. Each type of image has its own color scheme (RGBfor digital images and CMYK for printed pictures), and each type has its own output resolution (screen resolution and print resolution).All of this creates a difference in the way these two types of images are created, especially the way the curved, curved lines are produced.
Digital screens have their own resolution and their own pixel grid (on any screen, the square pixels are lined up one after the other in rows). This means that to create some kind of curved line, we just make some pixels semi-transparent (alpha channel) on those warp areas, and this is called smoothing, which artificially helps us recreate the curve on the monitor screen.
The printer in turn depends on the size of the paper and its print resolution, which means that if you have a large print resolution set, the printer will print you a curved line just fine. This is true because the printer can output dots to paper in multiple layers, which means the printer doesn’t have to fiddle with pixel translucency, unlike an electronic device screen.
One of the most interesting questions that can be raised in this thread. If you use bindings, it’s like you’re telling Illustrator to align your objects on the canvas to your grid or pixel grid.
Remember that Pixel Perfect image I stuttered about the other day? Now that you know the difference between printed pictures and digital pictures displayed on the screen, it’s time to tell you what I think the main role of the Grid is.
I’m sure you’ve probably seen various illustrations on Dribbble or Behance with super crisp images before. Personally, I’ve always wondered how the author managed to get such crisp lines? As it turns out, there’s nothing unusual about it! He or she simply tied all the objects to a pixel grid and created each element with integer values of size in pixels!
Just in case I want to make it clear that by integer values I mean 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 a height of 100 pixels and not 200.84 pixels by 99.8 pixels.
Expanded notion of grid
A picture is better than a thousand words. Let me try to show you an example of how to set up a grid. Let’s go through a step-by-step algorithm that you’ll go through every time you create a new project in Illustrator. I’m sure you’ll enjoy it.
When starting any new project in Illustrator, we always start with the new document settings. Let’s open Illustrator and create a new document with the following settings :
- Number of canvases : 1
- Width : 800 pixels
- Height : 800 pixels
- Units of measure : pixels
In the advanced settings tab :
- Color mode : RGB
- Rasterization resolution : 300 pixels per inch
- Equate new objects to the pixel grid : marked
As a side note, you might have noticed that we have set the resizing effect to 300 PPI, even though we intend to use our design on a monitor screen. If we use higher resolutions it won’t show up on the screen but if you want to print what you have just drawn (ignore the fact that we have RGBed) all your effects such as shadows will be of very poor quality if the PPI is under 300.
In fact, you can change the PPI value at any time if you go into Effect > Document Raster Effects Settings
After you have customized the document, create a black square with the dimensions 100×100 pixels , and place it exactly in the upper left corner of the Canvas, using the Align
To understand how the grid works, let’s take a look at this. Let’s open the menu View > Show Grid (or press Ctrl + "), and immediately the standard 1000×4 grid appears on the screen.
Now we can see the grid, but how does it work? Let’s try moving the little square with the arrows on the keyboard and see what happens.
Our little square will move a few pixels with each click, no big deal. Nothing happens because we haven’t enabled the Grid Bindings.
Let’s undo our last steps, put the square back where it belongs, and go to the menu View → Snap to Grid (Shift + Ctrl + Y) and then try to move our object again.
Now we can see the difference. Try moving the object to see what happens. Each movement of the square is referenced to a horizontal or vertical Grid line.
Let’s try to understand why Illustrator behaves the way it does by trying to understand the structure of the grid. As I said earlier, there are preset Grid settings, and here they are:
- Grid pitch every : 1000px
- Divisions within a grid step : 4
What do these settings really mean?
It’s very easy, look. In every 1, 000 pixels. Illustrator will draw a cell divided into 4 parts (thus a 2×2 grid will appear inside the cell), i.e. you will get cells each measuring 1000 x 1000 pixels , and in turn divided into 4 more cells of size 250 x 250 pixels ( 1000/4 = 250 ).
Since our canvas only has the dimensions of 800×800 pixels (i.e. completely fits three grid squares by 250 pixels and there’s still 50 pixels ), the binding will be triggered on the top and left side of this space, which fits into 1000 x 1000 pixels And the bottom and right part of the space on a line thick 200 pixels highlighted in red is left untouched.
Now if we go back to our little black square, we see that it only sticks to the grid lines, which are located in 250 pixels from each other, while the square itself 100×100 pixels If the black square were the size of 250×250 pixels then it would take up an entire grid cell, and it would jump exactly into one of the 16 small cells.
I hope the previous step made things clear to you about how grids work, but you should understand that in different projects you will have to configure 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, I’ve decided that using the minimum possible values is the most convenient, and if you combine all the power of the Grid and the PathFinder tool, I can super-fast place all my objects the way I want.
My grid settings are like this :
- A grid line every : 1 pixel
- Divisions within a grid step : 1
If you want to experiment and customize the grid, you just need to enter the menu Edit > Preferences > Guides Grid and configure everything the way you want it.
Rapid prototyping using a grid
Let’s do a little exercise and try to do a quick prototyping of a website using a grid every 800 pixels with division into 4 steps on a canvas of size 800 by 800 pixels
Yes, I know that the default minimum size for a website these days is 960 pixels, but I just want to show you a little example of how we can use the grid for rapid prototyping.
Create a rectangle of size 800×200 pixels and place it on top of our canvas and color it #191919 Now let’s take the Text tool and sign this element as our web site Title.
Note : If you have smaller elements that don’t have to be grid-connected, in our example the caption texts for rectangles, just select them, go to View and uncheck the option Snap toGrid
Create a small rectangle of size 600×400 pixels and color #191919 and try to place it, using the buttons on the keyboard, on the left side of our canvas, just under the hat.It should be signed as well, it will be Content.
Let’s create a smaller object of size 200×400 pixels color #B24747 and then place it on the right side, to the right of the content, and then sign it Sidebar
Complete our prototyping by adding the last element 800×200 pixels and the color #191919 Place this rectangle at the bottom of the canvas and call it Footer.
Roughly speaking, we just managed to sketch out the layout of the site in a few seconds. It’s great to spend so little time on such things, isn’t it?
Before you rush out and experiment with the grid, I’d like to tell you the difference between Attaching to a customizable grid and Pixel grid reference
By default, if you create a new document, Preview mode is usually set to Default. This means that what you create is what you see. (That is, you see the vector as it is, not rasterized.) In this case, the option. Snap to refers to Grid that you configure, and the Grid depends on the values you set in the parameters.
If you turn on Pixel Preview ( View → Pixel Preview ) and zoom in on the image, Illustrator will show you the pixels that make up your vector image. When snapping mode is enabled on pixels , each press on the keyboard arrows will move your object by a fixed number of pixels, which is set in the Keyboard Increment
Note: Yes, you can enable Keyboard Increment by any number of pixels you want. This option is located in the menu Edit > Preferences > General > Keyboard Increment
The key difference between the two anchoring methods is that if you have somehow created an object with non-integer values of dimensions, e.g. 200.9×60.40 pixels , pixel binding will change this, and it will automatically round your values.
I recommend that if you create objects in snapping to the grid mode, always switch to Pixel Previe w and check to see if your objects are normally embedded in the Pixel Grid. That way, you’ll have a sharp, high-quality image by the time your design is finished, and you won’t have to deal with any problems.
- Choi Win How to Design a Modern Website. Professional grid-based web design b.m.: Peter, 2012.
There are many books about meshes. popular and not so popular, but this is the one I read, so this is the one I recommend. It describes the process of developing a universal grid (which is handed out in a gothic version many where) in great detail, step by step. Pretty much everything falls into place after reading it, it’s clear what, why and why.
- 960 Grid System – one of the all kinds of ready-made grid sets. There are already created layout templates here for all popular editors like Photoshop, Illustrator, InDesign, etc. The list is very long, check it out.
- GuideGuide and Griddify – Photoshop plugins for creating grids.