Make Hex and Brick Patterns Rectangular!
Illustrator is by far the easiest tool to create complex seamless patterns, but converting a hex or brick pattern to a seamless rectangular tile can look complicated at first glance. Learn how to export a seamless tile from Illustrator. Make a hex or brick pattern rectangular with a simple trick on the Illustrator pattern swatch.
Besides the traditional grid pattern, Illustrator also offers hex and brick pattern options as well. These pattern options allow users to quickly offset objects within the pattern to create diagonal spacing and hide pattern edges. Everything is saved neatly under an Illustrator pattern swatch.
However, other Adobe programs can’t import a pattern swatch. Therefore, seamless patterns don’t directly transfer.
Step-by-Step Tutorial to Export a Seamless Tile from Illustrator Using Hex or Brick Patterns
Create the pattern in Illustrator as usual. Once settled on the design, name and save the pattern swatch. Now, the new pattern appears in the Swatches panel.
Next, scroll to a wide blank spot in the canvas—no need for an artboard yet, but one will go here soon!
Find that pattern swatch. Then, click and drag the pattern swatch into the open space. Illustrator deposits the artwork used in the pattern swatch into a group. While it’s active, the pattern swatch displays the highlighted edge of a clear rectangle. These become the edges to a seamless tile!
Switch to the Direct Selection Tool (A), and select that clear rectangle within the artwork.
Finally, switch to the Artboard Tool (Shift + O) and choose the “Fit to selected artwork” preset from the dropdown menu. Illustrator automatically crops the pattern’s artwork to the rectangle.
That’s it! Save the new artboard to export a seamless tile from Illustrator using hex and brick patterns.
Quick Uses for Seamless Tiles
Use the seamless tile to create repeating background images on the web, import designs for printing wrapping paper, and more.
I found this seamless tile convenient for determining start and end points of the artwork for a new animation. Matching the edges of rectangles was much easier to do when preparing the animation. It was also clear where I needed to drag my artwork for a seamless diagonal movement across a rectangular canvas. (Plus, I only needed to maintain one link, which makes maintenance easier and decreases file size.)