You already know us, so we cannot deceive you: we love the flat design. However we won’t say no either to a good pattern, provided that it appears in the right place at the right time ;).
Not so long ago we told you about textures. They are a good resource for background, although they have been a bit outdated in design, as the trend of flat design consists of backgrounds with a single colour, which among other things make the website load faster.
That does not mean they are useless or web pages look old. We’re talking about trends, and as happens in fashion, they are always changing. In fact, we have used them with good results at some of our WordPress templates, like Vowels or Dessert.
However, a good pattern can help you to customise a web or graphic work, giving this fun and personalized touch that we are looking for. Although there are patterns already made and perfectly adapted to websites. If you have some knowledge of Illustrator, I will tell you how to design your own patterns in this article. But you don’t need to be an expert designer, as the use of Illustrator to make a pattern is a user level.
At Christmas, we presented our Christmas pattern, and now, as we feel like dancing, we will make the tutorial with a pattern of a musical theme!
In this case the graphics are designed by us, but you do not have to make concrete illustrations. A group of geometric figures such as circles, squares … can be the focus of our pattern. Its use will depend on what are you looking for.
This manual is made using Adobe Illustrator CS6.
Let’s start step by step:
1. Create an “ArtBoard” of 600px by 600px. Dimensions are approximate and they are created to be comfortable working on them. Under no circumstances they are required when making a pattern, but we recommend its use, based on our experience.
2. In this ArtBoard, we draw a square of 300px by 300px. Since we will work with coordinates, it is important to make a grid (View-> Show Grid) and adjust our square of 300 by 300 to the grid (View -> Snap to Grid). My recommendation is to give any colour to the square (you can change it later) and place it on a locked layer, so it does not move while we are creating our pattern.
3. Well, we have the square from which we will create our pattern. All that is included within it, will be what make it up, our canvas. It is the design space of the pattern which will be repeated.
We can place freely any item that does not touch any of the edges, but we cannot do the same with the elements that are located within one or more edges of the square. Whenever we place an item in any of the edges, we have to repeat it on the opposite side, so once created the pattern, they appear superimposed. Let’s see an example:
If we start from the guitar in the circle, the other guitars have to always be at 300px from the one in the circle, in the direction “x” and “y” (because it is located in a corner touching two sides of the square). If, however, (as discussed below) it is placed only on one side of the square, it must only be repeated in one of the two directions. We can know the exact coordinates when clicking on an item on the “transform” tag and go plus or minus 300 pixels to the new elements.
4. If instead the element touches one side of the square, it must be repeated only in the direction where it is located, either horizontal (x) or vertical (y).
And we do so to complete the area we want of the sides of the square. My recommendation is to start with one side and fill the entire square so overlaps, we do not want, don’t appear. Thus, we can do later the inside of the square, and form it in a freer way.
5. Once we complete the space of the square edges, we can complete the interior. For this you must not follow any rules. You can complete as you wish. We will use the same elements designing the pattern in a free way.
6. Once we have designed our square, our pattern will be ready! We just need to apply it in the space of swatches of Illustrator.
Thus, after removing the grid, we put the square on which we have worked without outline and fill. We select both the square and the elements we have drawn on it, we drag it to the tab “swatches” and voila! We have our texture.
7. We just have to make the figure we prefer and drag the pattern from the “swatches”
As you can see it is quite simple and not much knowledge of Illustrator is required. You just have to decide the reason, find the elements that compose it and design! It’s an easy way to create patterns that can be used in web backgrounds or graphic works. Everything is allowed, you just need to consider the edges 😉 !
Furthermore, it is addictive. Once you make a pattern, you cannot stop doing more. Any time is good to perform a composition!
I hope you find it useful!
Its very usufull site.