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:

Photoshop cannot do much vector and grid work so I'm at the Illustrator step right now, I will need Photoshop in the future for styles and effects. Currently, I have the main grid setup here:

I also start on the "nested" grid, but the way I'm doing it now is quite tedious, I'm making the nested 2x2 grid by hand via copy paste. Not only does this take long but its also not living up to be like the reference picture:

Can I get some suggestions or tips on how to make my grid look more like the one in the link above?


2 Answers 2


Here's a really simple way of doing this.

  1. Create a single square of your grid, including the nested grid
  2. Select this square and group it by hitting Command+G
  3. Make sure Smart Guides art turned on by hitting Command+U
  4. Now, with this group selected, hold down Shift and drag your shape sideways until it 'clicks' into the next shape
  5. Repeat this step with the new shape by hitting Command+D until you have a complete row of your grid
  6. 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:

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

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

  1. Create one single cell of your grid. As in, a square with the 'crosshairs' in it;
  2. 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;
  3. Draw a rectangle with sides of a length that are multiples of the length of the side of your unit cell;
  4. 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.