Advertise    Write for Us

Vectorboom

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.

How to Create Seamless Subtle Patterns in Adobe Illustrator

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

How to Create Seamless Subtle Patterns in Adobe Illustrator

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.

How to Create Seamless Subtle Patterns in Adobe Illustrator

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

How to Create Seamless Subtle Patterns in Adobe Illustrator

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.

How to Create Seamless Subtle Patterns in Adobe Illustrator
How to Create Seamless Subtle Patterns in Adobe Illustrator

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.

How to Create Seamless Subtle Patterns in Adobe Illustrator

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

How to Create Seamless Subtle Patterns in Adobe Illustrator

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

How to Create Seamless Subtle Patterns in Adobe Illustrator

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.

How to Create Seamless Subtle Patterns in Adobe Illustrator

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.

How to Create Seamless Subtle Patterns in Adobe Illustrator

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.

How to Create Seamless Subtle Patterns in Adobe Illustrator

Group all the squares (Cmd / Ctrl + G). The size of this group is 16x16px. You can see this in the Transform panel or on the Control panel.

How to Create Seamless Subtle Patterns in Adobe Illustrator

You can read full version of this tutorial on Designmodo.com

Follow us if you want to be the first to know about the latest Adobe Illustrator tutorials and articles. Vectorboom team works for you!

Total comments: 0
Only registered users can add comments.
[ Registration | Login ]
Subscribe Now!
RSS feed twitter
Username
Password
Recent Consultations
DrawScribe preview: InkScribe introduction
Free Vector Greeting Stickers