: Creating nested grids in Illustrator I'm currently using Illustrator and Photoshop CS6 and my goal is to create a UI for a Battleship game. I have my eyes on this to use as a reference:

@Chiappetta793

This sounds like a great job for Illustrator's powerful pattern tool.


Create one single cell of your grid. As in, a square with the 'crosshairs' in it;
Select all elements of that one cell and drag it into your Swatches palette. This will cause a miniature of the cell to appear as a pattern swatch;
Draw a rectangle with sides of a length that are multiples of the length of the side of your unit cell;
Select the new swatch as the rectangle's fill.


You can even double-click the swatch in the Swatches palette to enter the pattern editor, where you can change the pattern. As the pattern is a so-called 'global' swatch, any edits you make to it will be applied to any objects you have used the swatch on.

Vote Up Vote Down

@Mendez620

Here's a really simple way of doing this.


Create a single square of your grid, including the nested grid
Select this square and group it by hitting Command+G
Make sure Smart Guides art turned on by hitting Command+U
Now, with this group selected, hold down Shift and drag your shape sideways until it 'clicks' into the next shape
Repeat this step with the new shape by hitting Command+D until you have a complete row of your grid
Now select this entire row, and repeat steps 4 and 5 but this time down the page


This method will result in a grid made up of matching squares, which you may find is a bit over-wrought for what you need. A simpler way of creating your grid is to use criss-crossing lines. To do this:


Draw one line
Select it, hold Shift and drag it sideways to create the next gridline
Select this gridline and, on the Stroke panel, change it to a dashed line
Select both gridlines and, holding Shift, drag them to the side to make copies. Hit Command+D a few times to repeat this step.
Now select all of your gridlines and, on the Align panel, click Horizontal Distribute Space
Select all of your gridlines and hit Command+G to group them
Go Object > Transform > Rotate and click Copy (not OK) to create a copy of the group rotated 90 degrees
Select both groups of lines and using the Align panel, centre them horizontally and vertically

Vote Up Vote Down