The classic Moroccan quatrefoil pattern is also known as a leaf pattern, Arabic tile pattern or just simply as a quatrefoil pattern. It can be found on anything from website backgrounds and stationery to pillows and rugs. While this is actually a very simple pattern, it took me a lot of time to find an easy way to create the motif.
This tutorial is easy to follow, but you should be familiar with layers, guides, and the shape tools. I’m using Photoshop CC, so you might not have all these options in older versions of Photoshop.
How to make a Moroccan trellis pattern in Illustrator
This tutorial works well for both Photoshop and Illustrator. If you want to use Illustrator, follow this video tutorial. Scroll down to read the Photoshop tutorial.
Don’t forget to subscribe to my YouTube channel if you want to see more surface pattern design tutorials.
How to create a Moroccan quatrefoil pattern
When we create a tiled pattern, the first step is to create a motif. I’m going to start with a 200x230px canvas at 72dpi. This seems a bit random, but there were are a lot of calculations involved. I always start with a white background and then I delete it, but you can also choose a transparent background when you create a new file.
Before I start, I like to add a vertical and a horizontal guide at the center of the canvas. This will help me align the shapes. You can add a guide by activating the rulers (View/Rulers or Ctrl+R), and since you’re there, make sure View/Snap to is checked. Now click on the vertical ruler and drag a guide in the center of the canvas. You will feel it snapping in place at the center. Do the same with the horizontal guide.
We’re finally ready to create the motif. Create a new layer and choose a color. Black is the best color to use when you create a pattern because you can see the pixels well. You can change it when you create the background. We will use no fill, black stroke and 9px width for all the shapes.
Select the Ellipse tool, set it to Shape and click on the canvas. We will draw a circle that’s half the size of the canvas, so enter 100px for both horizontal and vertical values.
Position it like in the image below, on the left side, with the horizontal guide splitting it in half.
Right click on the Ellipse 1 layer in the Layers panel (Window/Layer or F7) and select Duplicate Layer. You will create another circle with the same width and height as the first circle. Move the circle to the right side using the Move Tool (shortcut: V).
The next step is to create a rectangle using the Rectangle Tool. Click on the canvas and enter 100px for the width and 140px for the height. Move your rectangle to the center of the canvas.
Go to the Layers panel and select the two ellipses and the rectangle by holding Ctrl/Command and clicking on them. Right click on the layers and select Merge Shapes from the menu. You can also do this by pressing Crtl+E.
Your new shape should look like this:
Now we need to get rid of the two horizontal lines from the top of the rectangle. First, right click on the shape layer and choose Rasterize Layer. This will turn our vector shape into an image made from pixels that we can edit easier with the Photoshop tools. Since in Photoshop patterns are made from pixels, they are not vectors like in Illustrator, there’s no point in trying to keep them as shapes or smart objects.
Add two more guides so it will be it easier to cut the horizontal lines. Then take the Rectangular Marquee Tool (M) and draw a rectangle like this:
Now all you have to do is press delete and then Crtl+D to get rid of the marquee. If you want to remove the extra guides, just drag them back to the ruler with the Move Tool.
We’re almost done. Switch to the Ellipse tool again and create another 100x100px circle in the center of the canvas and rasterize it. We are going to use the guides and the Rectangular Marquee Tool to split the circle into four parts.
Create a rectangle with the Marquee Tool like in the image above, right click on the canvas and select Layer Via Cut. You will have a new layer with a quarter of the circle.
Select the ellipse layer again and cut the right side of the circle. Do the same for the bottom half and you will have four arches.
The last part is to move them into place and create the Moroccan quatrefoil motif.
The lower half of the circle will be at the top of the shape while the upper half will be at the bottom.
When you have the motif, select all the layers (except the background), right click on the Layers panel and Merge Layers. This is how the motif should look like:
How to create a pattern
Before we make the pattern, delete the background layer or make it invisible by pressing the eye icon next to it.
Go to Edit/Define Pattern and give your new pattern a name.
How to create a background using your new pattern
Open a new document. I’m making an 800 x 1200px canvas because I want to use the pattern for the featured image.
Use the Paint Bucket Tool to change the color of the white background.
Create a new layer from the Layers panel or press Shift+Crtl+N. Go to Edit/Fill, select Contents/Pattern and from Custom Patterns choose your Moroccan quatrefoil pattern.
To change the color of the pattern, choose the color you want to use and press Alt+Shift+Del.
Here’s my pattern:
When you learn to make a new pattern, you should practice until you get the hang if it and then try new shapes and sizes. Remember that it might not be perfect the first time you try, but you will learn how to do it in time.
Was this tutorial difficult? Do you know an easier way to do a Moroccan quatrefoil pattern in Photoshop? I’d love to try it.