How to Create Seamless Subtle Patterns in Adobe Illustrator

posted by: Iaroslav Lazunov, in Illustrator Tutorials / Web Design/ Comments: 1

Final image

How to Create Seamless Subtle Patterns in Adobe Illustrator

In this Illustrator tutorial we will take a closer look at the process of creation of the seamless patterns and the techniques which make this work easier. These techniques are universal, i.e. they are good for any version of Adobe Illustrator. Moreover, we will create one subtle pattern in Adobe Illustrator CS6. This application release has the Pattern Creation feature allowing us to automate the process. Currently, the Subtle Patterns are very popular in website design. They are often been used for the background creation of websites. Take a close study of this Illustrator tutorial and you will be able to create some unique patterns for your web projects.

Universal Techniques that Allow Creation of Subtle Patterns in Any Adobe Illustrator Version

Step 1

Let’s start our tutorial with the creation of the pixel seamless pattern. This type of patterns has been popular and remains being popular at the present time. I’m pretty sure, it will be popular for some more time in the future as well. Let’s take a good look at a couple of techniques which make the process of creation of the pixel seamless pattern easier. Pixel patterns differ from the rest of the patterns; their objects should exactly correspond to the size of the pixel grid. This quality allows the objects to have sharp boundaries. Turn the Pixel Preview mode (View > Pixel Preview) on. With this mode, we see the pixel grid lines when the artboard is zoomed. Moreover, with the Pixel Preview mode we can create the objects that have only the integer sizes in pixels. Zoom the artboard of the current document, then take the Rectangle Tool (M) and create a square as it is indicated on the figure below.

Create a couple of more squares which will be located on one of the diagonals of the first square.

The colors of the subtle patterns should slightly differ from one another. It can evince in a few percentage when working with the Gray Scale color mode. Select all the created objects and drag them into the Swatches panel.

Now you can apply this subtle pattern to the fill of any objects or use it as a background for your website.

Step 2

We took a look at one of the simplest examples of pixel seamless pattern creation. However, even while using this technique, interesting backgrounds can be created.

But it is not as simple as it might seem at the first sight. Let’s consider one more example. With the Rectangle Tool (M) create an element of a subtle pattern as it is indicated on the figure below.

Now drag it to the Swatches panel and apply to the object of any form.

As you can see, in the points of tile contacts we got the doubling of the elements.

I didn’t plan this subtle pattern, so it needs to be edited accordingly.

Step 3

Create a rectangle with no fill and no stroke and place it underneath all the pattern objects.

This rectangle limits the visible part of subtle pattern elements. Transfer all the pattern objects with the rectangle to the Swatches panel and apply it to the object.

Now my pattern looks like I expected it to look.

Step 4

Often in the process of subtle pattern creation it is difficult to imagine how it is going to look like after the application. Now I will introduce you some techniques which will allow you to see a couple of pattern tiles during its creation. So, create one pattern tile which consists of 1x1px squares.