How to create hatching in Illustrator

Simple way to add standard looking hatching to your shapes in Illustrator


Couple of days ago I need to create a hatched drawing for one of my project plan. Discovered a neat way to create hatching in Illustrator and I thought it might be useful to share.

Create a new document, any size. Press “M” to access the Rectangle Tool:

Rectangle tool in Illustrator

Click on the canvas and make a 100 px x 100 px rectangle:

Rectangle tool options

Choose Rectangular Grid Tool (within line tools):

Start: make a 100px rectangleEnter values below. Don’t forget to set the horizontal dividers to zero if you want to create a vertical hatching grid and vice versa:

Rectangular grid options in Illustrator; 141 px was chosen to account for the diagonal of the enclosing rectangle.

Create hatching — grid parameters in Illustrator

Vertical grid done with Rectangular Grid Tool in Illustrator

Create hatching in Illustrator — vertical grid to be aligned with the shape.

You will get a vertical grid of 20 lines spaced equally within a rectangle 141 x 141 pixels:

Press Shift + F8 to bring up the Transform menu (or go to Window → Transform):

Tilt the grid

Create hatching in Illustrator — tilt the grid to get the 75 degree standard inclination.

Enter -15 in the angle box. This will skew the grid to 75 degrees from horizontal, the standard hatch angle. Press enter.

-15 degrees from zero translates into 75 from horizontal, which is the standard tilt.

The grid will be skewed:

Titled grid; 75 degrees is the standard tilt.

Pres cmd + A (Mac) or Ctrl + A (Win) to select all. Then press Shift + F7 to bring up the align panel and center both objects:

Select both objects. Don't make a mask yet !

Select the rectangle and bring it to front. If you encounter difficulties in grabbing the rectangle (it is beneath the grid) then select the grid and press Option + Cmd + [ (on mac) or Ctrl + Alt + [ (on windows) to select next object below (or go to Select → Next Object Below); press Cmd + Shift + ] (mac) or Ctrl + Shift + ] (win) to bring the object in front:

Bring the rectangle in front

Press Cmd + A (Ctrl + A) to select all; right click and choose “Make clipping Mask”:

The object will be hatched:

Masked grid with the rectangle; keep it selected and give it a stroke.

With the object still selected, give it a black stroke. Deselect:

Final result — hatched rectangeThat’s it !

Core Animation documentation revisited

January brings updated documentation from Apple and I want to share the link to the  completely rewritten Core Animation Programming Guide. The release notes include reference to a “Major revamp, reorganization, and expansion to cover modern Core Animation behavior in iOS and OS X”. Just in time, as some of my projects rely on this. […]

NSOutlineView — Inside Out 2

Some good months ago I started a series on NSOutlineView that I didn’t imagine it will stir such an interest. To my astonishment, googling NSOutlineView ranks my post fourth in the search, immediately after Apple’s official documentation and some other two links: This intriguing situation (nevertheless inspiring for me) might have to do with the […]

Leave a Reply

Your email address will not be published. Required fields are marked *