We often stumble upon various seamless patterns in our life – textile and fabric, wrapping paper, website backgrounds and many, many more. Have you ever wondered how to make your own pattern? In this tutorial I’ll show you how to create a summer underwater seamless pattern in Adobe Illustrator from sketch to the final image with the help of Blob Brush Tool, Pattern Options and Scale Tool. Let’s get started!
1. Create Elements From Sketch to Outlines
Step 1
We’ll start creating our pattern from making up separate objects. Set the size of your artboard to 600 x 600px when creating a New Document. Now grab the Pencil Tool (N), set Stroke color to light-grey and Fill color to none. Double-click on the Pencil Tool (N) and set Fidelity to 1px and Smoothness to 1% in order to make the drawing process closer to real pencil. Here I draw some simple cartoon characters and objects associating with underwater sea life. Your doodle might be a little bit messy at this step, but don’t bother to draw every single line tidy, just sketch as you feel comfortable.
Step 2
At this step we will make a smooth and clean outline above our sketch. Lock the sketch layer and Create New Layer on top of it. Adobe Illustrator has a superb and versatile drawing tool if you are using a graphic tablet: the Blob Brush Tool (Shift + B) which allows you to draw merged paths. Double-click on the Blob Brush Tool (Shift + B) in the toolbox to bring up the Options window and apply the following settings (as shown on the screenshot):
- Fidelity set to 5px
- Smoothness set to 5%.
- Size set to 3pt and Variation to 3pt (if you are using a graphic tablet).
- Angle set to 38%
- Roundness set to 78% – this will make your brush more squashed.
Start making the outline by drawing smooth lines above your sketch with brown color.
Draw out all the objects in the same way.
2. Color the Objects Using the Pathfinder Panel
Step 1
Create a 600 x 600px square using Rectangle Tool (M) in the center of your canvas, fill it with white color and send it to back (Control + Shift + [). Now select everything and click Trim in Pathfinder panel. Click on the blank space between the objects and delete the unnecessary white shape which left after trimming.
Now we have separate shapes inside every object, which are very easy to recolor.
Step 2
Create your own color palette to make work easier and faster. Draw several square shapes and fill them with different colors. Copy and paste the same palette twice and make colors of one copy slightly darker (for shadows) and the second one – slightly lighter (for highlights).
Step 3
Let’s color the funny octopus! Select the body shape, take the Eyedropper Tool (I) and click on the pink square of your color palette. Eyedropper Tool (I) helps to apply colors to your shapes much faster and easier.
Step 4
Add minor details such as little spots on the forehead of a light-pink color with Ellipse Tool (L).
Let’s also add some shadows on his body. Draw a shape of a darker pink color above the body.
Make a duplicate of the body shape (Control + C > Control + F), then select both the copy and the shape which you’ve made and click Intersect in the Pathfinder panel. Voila! The shadow is ready. Make the shadows for the tentacles of our octopus.
Finally, add round blush spots on his cheeks using Ellipse Tool (L).
Step 5
Color other objects in the same way, adding highlights, shadows and details.
Step 6
Don’t forget to group objects using Lasso Tool (Q) and pressing Control + G so that you can Group the line art and color shapes together.
3. Make a Pattern Using Pattern Options
Step 1
Go to Object > Pattern > Make. Now we can see how our pattern will actually look like. Move the objects around to give it a better look and see the real time changes that you make.
Once creating a pattern, you will be notified by a pop-up window that you can always return to Swatch Options and edit it again by selecting your pattern in Swatches panel and clicking the Edit Pattern button.
Step 2
Add more elements such as air bubbles, sea weed and fish shoals. This helps to connect the elements and to cover blank spots. The great thing here is that you can draw new elements while being in Pattern mode and they will be shown as multiple copies immediately.
Step 3
You can play with options, for example, dim the copies to make them more transparent and more convenient to work with, by checking the Dim copies to box.
Step 4
What is more, you can hide the artboard boundaries to see your pattern full screen. For this purpose go to View > Hide Artboards.
Step 5
In this case we will use Grid Tile Type. It multiplies all objects around the canvas without changing the distribution of the objects. You may try applying other Tile Types and choosing the most suitable for you. However, if you want to export your pattern and use it outside Adobe Illustrator, for example as a seamless background made of repeating fragments on website or blog, it won’t match. So change the pattern options carefully.
Step 6
Set 600px in Width and Height fields, which equals the size of our canvas, and the Overlap to Right in Front and Top in Front, so that your main objects will be above their copies.
4. Add Background Color To Your Pattern
Let’s add some background color to our texture. Double-click on the canvas or click Done button above, when you are satisfied with you pattern to quit Pattern mode. Create New Layer below the swatch layer. Use Rectangle Tool (M) to create a 600 x 600px square and bring it in the middle by using the Align panel (Window > Align). Fill your square with beige color.
5. Scale the Pattern Inside a Shape Using the Scale Tool
Step 1
What if you want to see your pattern in a double step or smaller? Piece of cake! For this purpose we are going to use Scale Tool (S). Select your pattern and double-click on Scale Tool (S). The first thing to do here is to check the Transform Patterns box and deselect all other check boxes. Now change the values in Uniform field of Scale box to 50-70% and enjoy the result.
You can apply your pattern to various shapes and scale the pattern inside these shapes using the same method with Scale Tool (S).
6. Save Your Pattern For Web
All in all, Pattern Tool is great for making textures and applying them to various shapes in Adobe Illustrator. However, it may happen that your texture won’t match (if its size in Pattern Options differs from the size of your canvas). In this way your texture may look better, but what to do if you want to export it and use as a background for your website? Try the following technique.
Step 1
Create a blank New Layer, select you pattern in the Swatch panel and drag it onto the canvas. You will see a bounding box around your pattern. Select it with Direct Selection Tool (A) holding down Alt key and you’ll see its size in the control panel above. These are the values you need.
Step 2
The next thing you have to do is to change the size of your artboard so that it will match the size of the bounding box. Select Artboard Tool (Shift + O) and edit your canvas by dragging its corner handles or just type the Height and Width in the fields above.
Step 3
Finally, go to File > Save for Web (Alt + Shift + Control + S) and don’t forget to check the Clip to Artboard box.
Congratulations! Your Seamless Pattern Is Ready!
Great job! Now you have a seamless texture that you can use as a website or blog background! As you can see, Pattern Options is a great tool for making textures and patterns. Try it once and find out how convenient it is!
{excerpt}
Read More