Create a Seamless Vector Quatrefoil Pattern in Illustrator

Create a Seamless Vector Quatrefoil Pattern in Illustrator

A modern take on the classic four leaf clover quatrefoil design element

Quatrefoil is an ornamental design with four lobes that resemble a flower or clover leaf, it is most commonly seen in Gothic architecture but can also make a cool, minimal pattern for modern web and graphic design. This quick tutorial will show you how to create a seamless, vector quatrefoil pattern with Adobe Illustrator CS6 or newer.

Information

Please note that this tutorial requires that you have at least version CS6 of Adobe Illustrator due to using the Pattern tool. Also, if you'd rather skip the tutorial and download our 20 pre-made quatrefoil patterns for free you can do so here

Step 1

Begin by launching Illustrator and creating a new document, 800 x 600 pixels is a good size to begin with (it can easily be changed later). how to create a quatrefoil pattern

Step 2

Fill the artboard with a white rectangle to use as the background color. how to create a quatrefoil pattern

Step 3

Draw a new circle 44 x 44 pixels, and give it a thick 10 pixel teal (#00D2AF) stroke. how to create a quatrefoil pattern

Step 4

Duplicate the circle and move it down 56 pixels. how to create a quatrefoil pattern

Step 5

Select both circles and duplicate them in place. how to create a quatrefoil pattern

Step 6

Rotate the duplicated circles 90 degrees around a center reference point. how to create a quatrefoil pattern

Step 7

Select all 4 circles and combine them with the Union Pathfinder operation. how to create a quatrefoil pattern

Step 8

Highlight the 8 vector points in the middle of the shape and delete them. how to create a quatrefoil pattern

Step 9

Highlight the shape again and go to Object > Pattern > Make to make a new pattern preset. Click OK if a dialog box pops up. In the Pattern Options panel change the width and height to 100 pixels, the shapes should now overlap each other nicely. how to create a quatrefoil pattern

Step 10

Exit out of the Pattern editor mode and delete the original shape we created (it is still safe in the Pattern swatch) how to create a quatrefoil pattern

Step 11

Duplicate the white background layer and fill it with the Pattern Swatch you created. how to create a quatrefoil pattern

Step 12

To invert the colours, first duplicate the swatch. how to create a quatrefoil pattern

Step 13

Then edit the duplicated pattern and change the stroke fill to white (#FFFFFF). how to create a quatrefoil pattern how to create a quatrefoil pattern

Step 14

Then exit back to the main Artboard and change the background rectangle fill to teal (#00D22AF). how to create a quatrefoil pattern

Step 15

And on the top rectangle change the pattern swatch to the white one instead. how to create a quatrefoil pattern

Results

Here are both of the patterns, they are not only perfectly seamless but also completely vector! If you want to use them on the web as a bitmap then export the whole artboard to JPG 72DPI and crop the result to a 100 x 100 pixel square in Photoshop or any similar tool. how to create a quatrefoil pattern

Download Seamless Vector Quatrefoil Patterns

seamless quatrefoil patterns
This pack includes 20 perfectly seamless vector quatrefoil patterns for Illustrator featuring various ornamental designs with four cloves. They are scalable and can be edited in Illustrator CS6+, also included are 20 high resolution JPG files ready for production use, measuring 600 x 600 mm at 300DPI.

Download Free

Comments

X

You've successfully logged in!