Advertise    Write for Us

Vectorboom

Adobe Illustrator Tutorial: How to Create a Seamless Pattern in Khokhloma Painting Style

posted by: Iaroslav Lazunov, in Illustrator Tutorials / Effects/ Comments: 11
Final Image Preview
Khokhloma seamless pattern

In this vector tutorial we will learn how to create a seamless pattern in the style of Russian Khokhloma. We will learn the techniques of creating the basic elements and steps of creating an ornament. Seamless pattern is very high in demand, as they are used in the textile industry and for creating of the backgrounds. After studying this lesson, you learn how to create these ornaments on a professional level.


You can download the source vector file for this tutorial



Tutorial Details

       
  • Program: Adobe IllustratorCS-CS5;
  •    
  • Difficulty: Intermediate;
  •    
  • Estimated Completion Time: 3-4 Hours;

Khokhloma is an ancient Russian folk handicraft which appeared in the 17th century in Nizhny Novgorod. This is a decorative painting of wooden utensils and furniture in red, black and goldish color. Green and yellow paint is occasionally used. Traditional elements of Khokhloma are red juicy rowan berries and strawberries, flowers and twigs. Often there are birds, fish and animals (Wikipedia).


Step 1

Each ornament is composed of repetitive elements. Let's get down to their creation. Start by creating of rowan berries. Take the Rectangle Tool (M) and create a black square, we will use it as background in order to pick right colors of the ornament. Now take the Ellipse Tool (L) and create a circle filled with red color.

ashberry for the russian ornament

Create two other circles one yellow and one black, as shown in the figure below.

ashberry for the russian ornament

Step 2

Create the Art Brush to create glare on rowan berry. Take the Polygon Tool and create a triangle.

ashberry for the russian ornament

Take the Direct Selection Tool (A) and move down the vertex of the triangle, as shown in the figure below.

ashberry for the russian ornament

Keeping this point selected, convert it from a corner into a smooth one.

ashberry for the russian ornament

Drag the created shape to the Brushes palette and save the new brush as Art Brush.

ashberry for the russian ornament

Step 3

Take the Ellipse Tool (L) and create a circle without a fill with a stroke of any color.

ashberry for the russian ornament

Now take the Scissors Tool (C) and cut this circle at points 1 and 2. Select and remove the upper part of the circle.

ashberry for the russian ornament

Apply the Art Brush created in the previous step to the rest of the circle.

ashberry for the russian ornament

Select and group up (Cmd / Ctrl + G) all the elements of the berry.


Step 4

Create another rowan berry. Now take the Ellipse Tool (L) and create a circle with a red fill. The size of this circle is a little bit smaller than that of the first one.

ashberry for the russian ornament

Create a new circle filled with yellow color. Keep the circle selected, go to Effect> Distort & Transform> Pucker & Bloat, and set -75% in the dialog window of the effect.

ashberry for the russian ornament

Now go to Effect> Distort & Transform> Transform and set the angle of rotation and number of copies in the dialog box.

ashberry for the russian ornament

Create another circle filled with black.

ashberry for the russian ornament

Select and group up (Cmd / Ctrl + G) all the elements of the second berry.


Step 5

Create another element of the ornament. Take the Ellipse Tool (L) and create a new circle of red color.

ashberry for the russian ornament

Copy and paste this circle in front (Cmd / Ctrl + C; Cmd / Ctrl + F), fill it with yellow color and move it down.

ashberry for the russian ornament

Copy and paste the red circle in front (Cmd / Ctrl + C; Cmd / Ctrl + F), select a copy of the red circle and a yellow circle and press the Intersect button from the Pathfinder palette.

ashberry for the russian ornament

Group up the objects of this item.


Step 6

Getting to the creation of colors. Take the Polygon Tool and create a pentagon.

flower for the russian ornament

Take the Ellipse Tool (L) and create a circle, the radius of this circle should be a bit more of the side of the pentagon. Combine the center of the circle with the vertex of the pentagon. Turn on Smart Guides mode (Cmd / Ctrl + U) and you will be able to do it very easily.

flower for the russian ornament

Step 7

Holding down the Opt / Alt, drag the circle to the centers of the remaining vertices of the rectangle.

ashberry for the russian ornament

Select all the created shapes and click on the Unite from the Pathfinder palette.

flower for the russian ornament

Create a circle of red color and keeping selected, go to Effect> Distort & Transform> Pucker & Bloat, and set 67% in the dialog box of the effect.

flower for the russian ornament

Now go to Effect> Distort & Transform> Transform and set the angle of rotation and number of copies in the dialog box of the effect.

flower for the russian ornament

Step 8

Create a circle of yellow color and move it to the Brushes palette, save a new brush as a Scatter Brush with the parameters specified below.

flower for the russian ornament

Create a new circle with no fill with any color stroke and apply the created brush to its outline.

flower for the russian ornament

Group up all the elements of the flower.


Step 9

Create another flower. Take the Ellipse Tool (L) and create a red ellipse. Now with the help of Pen Tool (P) create a point lying on the vertical line passing through the center of the ellipse.

flower for the russian ornament

Select the ellipse and the point, and group them up (Cmd / Ctrl + G). Keeping the group selected, go to Effect> Distort & Transform> Transform and set the angle and the number of copies in the dialog box.

flower for the russian ornament

Go to Object> Expand Appearance.


Step 10

Create a new circle with yellow fill.

flower for the russian ornament

Select all the petals and a yellow circle, take the Shape Builder Tool and holding down the Opt / Alt click in the center of the yellow circle.

flower for the russian ornament
flower for the russian ornament

Shape Builder Tool is a tool that became available in Adobe Illustrator CS5. Those who use earlier versions of the program will have to use the technique applying the Pathfinder palette, as described in step 5. Create another circle in the center of the flower. Select and group up all the elements of the flower.

flower for the russian ornament

Step 11

Now create a decorative leaves for our ornament. Take the Pen Tool (P) and create a broken line such as one shown in the figure below.

leaf for the russian ornament

Set green fill color for this element. Points 1 and 2 must lie on a single vertical line. Convert four points of the leaf from corner to smooth ones, by moving their handles, bring the shape of a leaf to the shape shown in the figure below.

leaf for the russian ornament

Step 12

Select half of the leaf and go to Object> Transform> Reflect ..., select the Vertical option in the dialog box and click on Copy.

leaf for the russian ornament

Move the second half of the leaf to the right, holding down the Shift key until uniting their extreme points.

leaf for the russian ornament

With the Direct Selection Tool (A) or Lasso Tool (Q) select the upper points of the two halves of the leaf and go to Object> Path> Join (Cmd / Ctrl + J). Perform the same operation with the lower points of the leaf. As a result, we should get a closed outline.

leaf for the russian ornament

Step 13

I changed the height of the leaf by pulling it up with the Selection Tool (V).

leaf for the russian ornament

Keeping the leaf selected, go to Object> Path> Offset Path and set the offset value of the outline, picking it up on eye.

leaf for the russian ornament

Fill the bottom contour of the leaf with yellow, take the Scissors Tool (C) and cut the upper green contour at the points 1 and 2. Now delete the right side. Unite points 1 and 2 with the Pen Tool (P).

leaf for the russian ornament

Step 14

Take the Pen Tool (P) and create the shape of the stem filled with black.

leaf for the russian ornament

Let's proceed to the creation of the lateral veins of the sheet. Take the Pen Tool (P) and created a triangular shape.

leaf for the russian ornament

Transfer this shape to the Brushes palette and save it as an Art Brush.

leaf for the russian ornament

Take the Pen Tool (P) and create upper and lower veins of the leaf. Remember that you can change the thickness of a vein by changing the thickness of the line in the Stroke palette.

leaf for the russian ornament

Step 15

Now go to Object> Blend> Blend Options and set the number of steps in the dialog box. Now select both veins and go to Object> Bland> Make.

leaf for the russian ornament

Select the whole Blend object and go to Object> Transform> Reflect ... and click on Copy.

leaf for the russian ornament

Move the created veins to the left.

leaf for the russian ornament

Step 16

Keeping blend object selected, go to Object> Expand Appearance, then to Object> Expand and change the fill color of the veins to yellow.

leaf for the russian ornament

Locate all the groups with yellow veins in the underlayer below the shape of the stem. Do the same actions with the right veins. With the Direct Selection Tool (A) move the points at the ends of the veins so that they could lie on the stem.

leaf for the russian ornament

Work carefully, the quality of the vector and, of course, its price depend on such details. Select and group up all the elements of the leaf. Using this technique, create a leaf of another shape.

leaf for the russian ornament

Step 17

Basic elements of the ornament are ready. We will take a look at the creation of the rest during the creation of the composition.

elements of the Russian ornament

Step 18

Proceed to the creation of the composition. Auxiliary background, a black rectangle, can be removed, it is not needed. Create a new background. Take the Rectangle Tool (M) and create a square filled with black. My rectangle is 1000 by 1000 px in size. I have a wide monitor and it is convenient to work with this one. Place all the elements of the ornament below the rectangle outside the composition.

composition of the Russian ornament

These items will be duplicated - dragged to and drop into the background, holding down Opt / Alt key and put in the right places.


Step 19

Everything is ready to get started - let's go. First, create the largest elements of the composition. Using copies of the berries, create a bunch of them. Of course, you can create your own composition using the principles described in this tutorial.

ashberrys for the Russian ornament

Turn the rowan berries in different directions, using the Selection Tool (V). Working with clusters of rowan berries, you should pay attention not only to the shape of clusters themselves, but also to the shape of the gaps between the berries. Try to make the gap shapes balanced.

ashberrys for the Russian ornament

Step 20

Now create the main branches of rowan berries. Take the Pen Tool (P) and create a S-shaped curve. Apply the profile from the Stroke palette to this curve.

ashberry's branch for the Russian ornament

If you're working not in Adobe Illustrator CS5, you will have to create a shape similar to this profile and save it as an Art Brush in the Brushes palette. We have already created such brushes several times in this tutorial.


Step 21

Now create another branch and apply a different profile to it from the Stroke palette.

ashberry's branch for the Russian ornament

We have limited the space of our composition with two of these curves. Since we are creating a seamless pattern, the pattern should fill the entire background. This might sound simple, because we have quite simple elements of the ornament. However, while doing it, you should feel the harmony between the created elements, otherwise, your decoration will not seem complete.


Step 22

After you have created the branches, start creating leaves on them. At some places I had to put leaves into shamrocks. Shamrock is a very common element of ornamentation (55).

ashberry's branch for the Russian ornament

Some elements of the composition may go beyond the black background. It's not bad, even better. Let's talk about this later.


Step 23

Now create smaller branches coming from the main branch. In the figure below, I applied the trapezoidal profile.

ashberry's branch for the Russian ornament

There is no such profile in the Stroke palette. Let's see how I got it. At first I used a standard triangular profile.

ashberry's branch for the Russian ornament

Then use the Width Tool and double-click on the sharp end of the branch. In the open dialog box of the tool, set the width of the profile at this point, watching the change of profile.

ashberry's branch for the Russian ornament

Choose the right width – click on OK. If you are planning to use such a profile in this work, save it. Open the drop-down list with profiles on the top toolbar and click on Add to Profiles button.

ashberry's branch for the Russian ornament

Again, to the owners of earlier versions of the program: this work can be done in any version of Adobe Illustrator, but you will just have to create brushes of different shapes.


Step 24

We can use the created profile in several places. The thickness of the profile can be adjusted by setting its numerical value in the Stroke palette.

ashberry's branch for the Russian ornament

Using the described technique, continue creating different profiles of small branches.

ashberry's branch for the Russian ornament
ashberry's branch for the Russian ornament

Step 25

We will be making decorative leaves. Technique of their creation is not different from one of creating small branches.

leaves for the Russian ornament

When you create a composition of such objects, you must pay attention to three aspects: 1. shape of each element 2. shape of the composition, 3. shape of gaps between the elements of composition.

leaves for the Russian ornament
leaves for the Russian ornament
leaves for the Russian ornament

Step 26

Well, great. Probably, add more rowan berries to the upper left corner of the composition and on small branches.

Khokhloma style Russian ornament

Step 27

Now we can create spiral-like ornament elements. I use the Spiral Tool to create these elements. Select this tool and click at the location of the working space where you want to create a spiral. In the open dialog box, select the number of segments in a spiral, I do not think there should be more than 6 of them, and click OK.

Khokhloma style Russian ornament

After creating a spiral turn it so that it is linked to the rest of the composition, and apply the appropriate profile from the Stroke palette.

Khokhloma style Russian ornament

Step 28

The spiral and leaves combination, in my opinion, is an interesting solution.

Khokhloma style Russian ornament
Khokhloma style Russian ornament

Step 29

Continue filling the empty spaces with decorative leaves. Of course, you can use already existing elements, by changing and turning them.

Khokhloma style Russian ornament

Step 30

It's time to fill our composition with flowers. Use red and yellow flowers to fill in the blanks in the composition.

Khokhloma style Russian ornament

Step 31

Now create the tiniest elements of the composition. In this work we will be using the Scatter Brush, which consists of yellow circles. With the Ellipse Tool (L) create a circle of yellow color and drag it to the Brushes palette. Save a new brush as a Scatter Brush. Leave the parameters of this brush unchanged that means set by default.

Khokhloma style Russian ornament

We will be adjusting this brush while applying it.


Step 32

Take the Pen Tool (P) and create a curved line, use the created brush to the line. Double click on the brush icon in the Brushes palette opens up a window with the settings of this brush. Operating its settings, observe the changes that are going on.

Khokhloma style Russian ornament

Decorate the spirals with these elements.

Khokhloma style Russian ornament

At some places, it is faster to simply create a series of identical circles and place them on the right trajectory, rather than creating a new brush and reconfigure it.

Khokhloma style Russian ornament
Khokhloma style Russian ornament

Step 33

Show your idea, and combine a variety of smaller elements.

Khokhloma style Russian ornament

Here's a final view of my composition.

Khokhloma style Russian ornament

Select and group up all the elements of the composition separately from the background.


Step 34

Now we have to create seamless texture using this basic composition. Create a new file Cmd / Ctrl + N. Take the Rectangle Tool (M) and create a square 100x100 px without a fill and a stroke of any thickness and color, just to be visible.

Khokhloma seamless pattern

Keep the rectangle selected, go to Effect> Distort & Transform> Transform and set the offset parameters in the dialog box.

Khokhloma seamless pattern

Now again apply the same effect (Effect> Distort & Transform> Transform) and set new parameters.

Khokhloma seamless pattern

Apply the same effect with the new parameters for the last time.

Khokhloma seamless pattern

Step 35

Turn off the stroke of the square and move the shape with transformation effects applied to it into Graphic Styles palette.

Khokhloma seamless pattern

Step 36

Delete the rectangle. Go to File, in which we created a pattern, copy the group with a pattern (Cmd / Ctrl + C), go to the file, in which we created a graphic style and insert a pattern into its workspace (Cmd / Ctrl + V). Reduce the pattern proportionally to the size of a square 100 x 100 px.

Khokhloma seamless pattern

Step 37

Keep the pattern selected, applying the created style to it.

Khokhloma seamless pattern

Now we can slightly increase the pattern in order to reduce the distance between the copies of the pattern. You can do it with the help of the Selection Tool (V) or the Transform palette.

Khokhloma seamless pattern

Step 38

Seamless pattern should be a continuous pattern with no gaps. I will consider a good work at which for the viewer it will be hard to understand where the basic element of composition is. In step 22, I said that it would be good if some of the items will go beyond the background. It is necessary in order to connect the patterns without gaps. Nevertheless, we still have work to cover the remaining gaps.

Khokhloma seamless pattern

On the right we have a gap junction, which we will be hide by placing there the items of ornamentation.

Khokhloma seamless pattern
Khokhloma seamless pattern

There is nothing new for you in the creation of these items.


Step 39

The elements we have created are single, we will have to duplicate them to all the copies of the ornament.

Khokhloma seamless pattern

To do this, open the Layers palette and drag the created elements to the group of basic ornament.

Khokhloma seamless pattern

The group already has the required properties, so the created elements will appear on all the copies of the ornament.

Khokhloma seamless pattern

Proceeding in this way, fill all the gaps of the seamless pattern. Create a rectangle of black color and place it below the pattern.

Khokhloma seamless pattern

Step 40

Create a new rectangle 100 by 100 px in size with no fill and stroke, and place it below all the elements of the composition.

Khokhloma seamless pattern

Select all the objects (Cmd / Ctrl + A) and go to Edit> Define Pattern, name the new pattern and click on OK.

Khokhloma seamless pattern

Now we can create any shapes and fill them with the created pattern in the style of Khokhloma.

Khokhloma seamless pattern

Conclusion

I hope you have enjoyed this tutorial. You can use the created pattern as a skin for your laptop, iPhone or in the textile industry.


You can download the source vector file for this tutorial


Final Image Preview
Khokhloma seamless pattern
Khokhloma seamless pattern

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: 11
0   Spam
1 Bruno Gätjens   (2011 Aug 25 09:13)
This looks great!!! Thanks for sharing! biggrin

0   Spam
2 jaroslav   (2011 Aug 25 11:29)
Thanks

0   Spam
3 Lorena   (2011 Sep 23 09:05)
Impresionante diseño!!!! Excelente!!!! Gracias por compartirlo!

0   Spam
4 jaroslav   (2011 Sep 23 09:08)
Lorena, Gracias, ¡Te quiero! biggrin

0   Spam
5 len   (2011 Dec 10 19:35)
Lovely! And clear, concise explanation. Thank you!

+1   Spam
6 Eva   (2012 Jan 16 08:00)
that's so awesome! Thanks so much. Might even learn some AI tricks along the way!

0   Spam
7 jaroslav   (2012 Jan 16 08:03)
Thank you and Welcome!

0   Spam
8 diana   (2012 Mar 23 19:55)
That is an outstanding piece of art!

0   Spam
9 jaroslav   (2012 Mar 23 21:10)
Thanks!

0   Spam
10 Masoud   (2012 Jul 04 13:22)
Perfect, viva Iaroslav Lazunov and May the Force be with you

Thanks

0   Spam
11 jaroslav   (2012 Jul 05 11:13)
Thanks a lot

Only registered users can add comments.
[ Registration | Login ]
Subscribe Now!
RSS feed twitter
Username
Password
Recent Consultations
DrawScribe preview: InkScribe introduction
Create a Fairy Castle DrawScribe Plugin – Part 1