When developing a design or creating a complex image, it is convenient to use modular grids. They serve as the basis of the composition, dividing the sheet into a specified number of vertical and horizontal steps with the same or different distances.
Necessary
Abode Photoshop program
Instructions
Step 1
All modern graphic editors and web design programs have built-in modular grids. If you are working in Adobe Photoshop, turn on the grid display for easy arrangement of image objects and their exact placement on the sheet. To do this, go to the Edit menu item and move the mouse over the Preference caption. In the menu that appears, select the Guides, Grid & Slices item (depending on the version of the program, this item may have different names, choose the word Grid).
Step 2
In the settings window that opens, set the parameters of the modular grid. In the Grid area, select the color of the lines that form the grid items and the line spacing. Click "OK", and check how the changes made will affect the appearance of the image. In the Adobe DreamWeaver web development environment, the grid is included by default in the layout of the page you are developing.
Step 3
You can add various tables (grid items) with any set of rows and columns using the Insert Table item, as well as insert new tables into cells, thereby creating a complex network for building page elements.
Step 4
You can create a modular grid manually using CSS styles. To do this, use the tools #grid, Gridmaker, CSS Grid Builder, 1 KB CSS Grid, Gridr Buildrrr and other modules. For example, the following code snippet creates a grid of four modules of a given width:.page-layout {margin-right: -5px; }.layout-box {float: left; margin: 0 5px 5px 0; }.lb-1 {width: 779px; } / * 100% * /. Lb-2 {width: 583px; } / * 75% * /. Lb-3 {width: 387px; } / * 50% * /. Lb-4 {width: 191px; } / * 25% * /
Step 5
The presence of a modular grid makes it easier for both novice designers and web developers, and experienced masters in this field. Projects created on the basis of a modular grid are easy to edit and transfer, which is very convenient for large volumes of work. You can also stop work at any time and continue using the saved file.
