Original Patterns: Design and Illustration Application

8,819

CHYEE

Original Patterns: Design and Illustration Application

This time, the theme is "designing original patterns".

So, what is a pattern? A pattern is a repetitive arrangement of designs.

In the art world, I'm sure you've heard of at least one artist famous for patterns, such as Gustav Klimt, Andy Warhol, and Yayoi Kusama, among others. But in fact, we can also frequently see patterns in our daily lives on items like tiles, wallpaper, clothes, and bedsheets – pattern design is not far from us at all!

This article is divided into three parts. First, I will briefly introduce some artistic elements that constitute patterns; then, I will explain the steps for drawing original patterns with Clip Studio Paint; finally, I will explain how to apply patterns to illustrations. Feel free to use the table of contents to navigate these three parts.

Let's get started!

1️⃣【Part 1: The Artistic Code of Patterns】

I. Shapes that Form Patterns

🟠Towards Simple Shapes:

For example, lines, geometric shapes (triangles, squares, circles, etc.), or even abstract patterns.

When drawing, you can combine different shapes, not necessarily just using one.

🏀Towards Realistic Shapes:

Shapes that can be recognized as physical objects, such as flowers and leaves, animals, food, heart shapes, star shapes, etc.

⚖️In Between the Above Two:

Of course, there are also some very minimalist cartoon patterns that make it hard to categorize.

But I want to point out that the above two are just "tendencies" rather than distinct groupings. Using a minimalist style to draw real objects, emphasizing shape while still showing it as a certain object, is also an option.

II. Artistic Style

In terms of artistic style, ⚠️realistic styles (images approaching photographic quality) are relatively uncommon;

The common ones are usually ✅images treated with artistic stylization.

Artistic stylization, simply put, refers to drawn images. Common examples of artistic styles include: cel-shading style (anime/cartoon style), watercolor style, colored pencil or crayon style, etc.

When drawing, ⚠️note not to use overly strong lighting and shadow effects. Just adding lighting and shadows that hint at the object's structure is sufficient.

Additionally, you can draw inspiration from different traditional styles: in addition to modern minimalist and modern Nordic styles, there are also Oriental style, Japanese style, medieval style, folk styles (e.g., Native American, Arabic, ancient Egyptian styles), etc.

Each style has its own artistic expression; for example, modern style mostly uses simple graphics; Oriental style prefers red and gold; Japanese style has many ancient and renowned patterns; folk styles often use diamond and triangular shapes, etc.

Due to space limitations, the design characteristics of each style will not be explained in detail here. Interested readers are encouraged to take the time to explore and find their favorite styles!

III. Graphic Repetition and Arrangement Methods

This refers to three aspects: the position, size, and angle of placement of graphics.

Within these three aspects, they can be further divided into two orientations: regularity and irregularity. Please refer to the diagram below for details:

Additionally, you can also decide whether to leave space between patterns:

IV. Color

The choice of colors for patterns has a high degree of freedom; soft, vibrant, light, and dark colors are all common.

I would suggest that beginners deliberately limit the number of colors.

If you are unable to decide while drawing, you can start with a monochrome grayscale palette and then adjust all at once later. Besides the 【Gradient Map】 function, you can also use the new 【Color Reference】 function added after Ver3.0 to change colors!

V. Designing Patterns (Summary)

After understanding the possible schemes for composing patterns, you can now try to imagine what style of pattern you want to create!

First, ask yourself the following questions:

Shape of graphics: (Is there a theme? Such as desserts, flowers, trees, etc. Or just simple shapes?)

Artistic style of graphics: (Do you want to use hand-drawn or clean color block drawing? Is there a specific regional style?)

Arrangement method of graphics: (Regular or irregular arrangement? If regular, how should it be drawn to achieve a tiled texture?)

Colors: (Color or black and white? Is the background transparent?)

Once you have a rough answer, you can visualize the pattern and start creating it.

For example:

Shape of graphics: Small and large hearts, diamond lines

Artistic style of graphics: Pixel art style, tending towards flat

Arrangement method of graphics: Regular arrangement

Colors: Pink tones, soft feeling

Now that you have a basic concept of pattern design, let's actually try creating patterns using Clip Studio Paint!

2️⃣【Part 2: Using Clip Studio Paint to Draw Original Patterns】

🔧Basic Method

1. Create a new file.

The file size can be determined by the drawing content and application purpose.

The only requirement is that both width and length must be divisible by 2 (※even numbers).

2. Turn on the Grid function (①View → Grid);

And ②set the grid origin to the center, and the interval to the value of the canvas's longer side.

There is no fixed number of divisions. Of course, if you want to use the grid for measurement, you can set it according to your needs. For example, if you want to add lines at every ¼ mark of the pattern's length, you can set the number of divisions to "4".

3. Draw the image in the center, please note:

① When drawing, do not get close to the edges.

The exception is if you want to design a pattern that only repeats horizontally (i.e., it will look like a long ribbon when finished), then you can fill the top and bottom; however, the left and right edges still need to be left empty.

② When drawing with a brush, if you don't need to snap to the grid, you need to turn off the brush's "Snap to grid" function.

③ You can separate different layers when drawing (e.g., different objects, separate background colors). However, layers need to be merged when drawing is complete.

④ I recommend duplicating the object image layer as a backup before merging.

💡TIPS

You can use rulers as aids when drawing, such as symmetrical rulers, etc. For details, please refer to this official tutorial.
Additionally, using processed photos is also a good option, which will be demonstrated later in this section.

4. ①Select all (shortcut: Ctrl+A) →

②Right-click on the layer and select 【Convert Layer】 to convert it to a "Image Material Layer".

5. ①Use the "Object" tool → ②Move the layer to the bottom left, and align the top-left corner of the object's bounding box to the center of the canvas.

*You can zoom in as much as possible to ensure accurate positioning.

6. In the Object Selection tool settings, check "Tile".

You can choose the repetition method according to your preference. Please refer to the demonstration below:

(The image below is for demonstration purposes only. Please do not scale down the image in this step)

7. Right-click on the layer and select 【Convert Layer】 → convert to "Raster Layer".

8. Fill the pattern in the relatively blank central area.

*You can copy and paste from the image backup layer in step 3.

9. Right-click on the layer and select 【Convert Layer】 to convert it to an "Image Material Layer".

10. Use the Object Selection tool and check "Tile".

After scaling down the object, you can preview the pattern style. Done!

🔧Method for Connected Patterns

After understanding the basic method, let's look at what needs to be noted if you want to draw connected patterns!

1. Draw a basic image.

2. Copy and paste the image from step 1. Try to connect the images as much as possible.

3. Since the image in the demonstration is not a regular shape or a symmetrical shape, manual adjustment is required.

4. Repeat steps 4 to 7 of the basic method.

5. Continue to fill the central blank area with the basic image, and then adjust the shape again.

Please connect each image as much as possible.

(*The image drawn in this step is marked in blue in the diagram below)

6. Repeat steps 9 to 10 of the basic method. Done!

🔧Method for Overlapping Patterns

So, how do you create overlapping patterns? Below, I will demonstrate a ripple/scale-shaped pattern:

1. Use a grid to draw shapes of the correct size.

In the demonstration image, the canvas length is divided into eight squares. So the central circle has a diameter of four squares; the circles on both sides are of the same size, with their centers on the canvas edge.
If you want to draw an oval or other shapes as basic graphics, pay attention that their horizontal and vertical diameters should both be divisible by the canvas's respective side lengths. The canvas can be rectangular, not necessarily square.
You can add borders and other decorations according to your preference, making sure the border is drawn on the inner side of the circle.
Depending on your design, if the scales' colors don't change, drawing only one scale at the top and half a scale on each of the bottom left and right can achieve the same pattern.

2. Use the alignment function to center the image on the canvas.

3. Repeat steps 4 to 7 of the basic method.

4. After converting the layer back to a raster layer, cut out the bottom half of the semicircle and paste it onto a new layer.

5. Move the original layer in between the top and bottom shape layers and the top shape layer.

6. Convert the original layer to an "Image Material Layer". Set the tiling direction to "Left and Right".

Move the object layer so its top-left corner is at ¼ of the canvas from the top-left.

7. Duplicate the object layer and place it second to last at the bottom.

Move its bottom-right corner to ¼ of the canvas from the bottom-right.

8. Select all layers and merge them.

9. Repeat steps 9 to 10 of the basic method. Done!

🔧Method for Processing Photos into Patterns

Besides hand-drawn patterns, you can also use your own photos to process them into patterns!

1. Take photos. I recommend trying to use a solid color as the background when photographing objects.

Additionally, the same object can be photographed from different angles to add more variety to the pattern.

2. Open the photo and make color tone adjustments. The purpose is to make the image's color tones more defined.

The image below demonstrates different adjustment methods using 【Edit → Tonal Correction】: ① "Brightness/Contrast", ② "Tone Curve", and ③ "Level Correction". You can choose your preferred method to adjust the colors.

3. First, select the image with the 【Lasso tool】, invert the selection, and delete unnecessary surrounding parts.

4. Use the 【Auto Select tool】 to select the remaining parts. If necessary, you can use 【Expand Selection】 to select an appropriate range, and then delete.

5. Manually correct the edges with the 【Eraser tool】.

6. After obtaining a clear strawberry, you can further adjust the image to achieve satisfactory color and artistic effects.

The demonstration image below uses Layer Blending Modes to adjust colors and adds an outline.
You can also use various Filters to achieve different effects. Combine different adjustment methods to get your own unique image!

Use the patterns above and follow the steps of the basic method to easily create patterns!

🔧Method using Custom Brushes

For detailed settings of custom brushes, please refer to this official tutorial.

1. Select the layer with the image, choose 【Edit → Register Material → Image】.

Check "Use as brush tip shape", and add search tags.

2. Right-click on a brush and duplicate the sub tool.

3. Click on the brush settings, select "Brush Tip", and click on the material selection location.

4. In the selection window, enter the search tags to add all the images you just created.

5. Set the brush values to achieve a random pattern effect. Below are some values that affect graphic randomness; the value settings can be adjusted according to personal preference.

A. Brush Tip → Direction → Random
B. Spray Effect → Particle Size → Random
C. Spray Effect → Particle Direction → Random

6. Use the brush and paint directly on the canvas to get a pattern with irregularly repeated and arranged graphics!

Done!

3️⃣【Part 3: Applying Patterns in Illustrations】

📁Registering Patterns as Materials

Although you can use the pattern by simply saving the file as a clip file, if you want to upload the pattern as a material to the cloud for easy access, or upload it to Clip Studio Paint Assets to share with other users, please refer to the method in this section!

The method is very simple: just drag and drop the layer from the mouse to the Material Palette:

Double-click the material icon to modify its name, add search tags, etc.:

🖼️Adding Patterns as Illustration Backgrounds

The simplest use of patterns in illustrations is, undoubtedly, for backgrounds!

🔧Method

Drag and drop the pattern file directly from the Material Palette to the Layer window.

💡TIPS

Since patterns can often appear visually cluttered when added to an illustration, you can add an outline to the main character to make them stand out.
Since tonal adjustment functions cannot be used directly on image material layers, if you need to modify the pattern colors to suit the illustration, you can use a 【Tonal Correction Layer】.

🔧Creating a Tonal Correction Layer — Method

1,2. After adding the pattern layer, click the icon in the top-left corner of the Layer window.

3,4. Create a new tonal correction layer. Choose the color adjustment method as needed.

5. Clip the tonal correction layer to the layer below it. Done!

🧇Adding Patterns as Illustration Textures

Besides backgrounds, you can also add patterns as illustration textures!

I recommend using this method for illustrations with large color blocks that need more visual information.

Also, since the illustration is already colored, it's recommended to use monochromatic patterns to avoid distracting from the main subject of the illustration.

🔧Using Layer Blending Modes — Method

1. Add the pattern layer and set it as a clipping layer for the desired part. In the demonstration image, this means clipping it to the clothing layer.

2. Set the layer blending mode, and adjust the layer opacity as needed.

💡TIPS

Using layer blending modes allows you to preserve the original illustration's lighting and shadows.
Different blending modes have different effects. For details, refer to this official demonstration or this demonstration.
Please refer to the image below for my general classification of blending modes. You can start by asking "Do you want the pattern to be darker or lighter than the original object?", try different modes to see which one is suitable, and then adjust the opacity.

🌽Adding Patterns as Object Textures in Illustrations ①

If you want the pattern to not appear too flat but instead conform to the object's surface, please refer to the method in this section!

🔧Method

1. After adding the pattern, first decide on the layer blending mode, opacity, and other settings, as well as the pattern's size and angle, to preview the final result.

2. If your pattern connects to the canvas edges, you need to create a new file slightly larger than the original canvas.

3. Copy and paste the pattern layer to the new file.

4. Rasterize the pattern layer. Then copy and paste it back to the original canvas.

💡TIPS

If the pattern does not touch the canvas edges, you can directly rasterize the pattern layer without creating a new file.
The purpose of expanding the canvas is to reserve a larger area of the pattern for deformation. Otherwise, if the pattern needs to bend inward, the pattern at the edges will break.

5. Select and delete the excess parts of the pattern. (You may need to slightly move the pattern to delete parts outside the canvas)

6. Use the 【Mesh Transformation】 function to deform the image. The deformation direction needs to conform to the object's surface; auxiliary lines are drawn in the image below to help explain.

【Mesh Transformation Method】

① Edit → Transform → Mesh Transformation

② In the Tool Property window, you can adjust the number of mesh divisions.

③ Set to "Move Plane".

④ Warp the pattern according to the object's surface.

7. Use 【Clipping Masks】 and 【Layer Masks】 to erase unnecessary parts. Done!

🌽Adding Patterns as Object Textures in Illustrations ②

Sometimes, we need to break patterns to conform to the object's surface, which is particularly common in the depiction of clothing.

The criterion for judgment is: "Is there a part of the item that cannot be seen?"

If so, then when applying the pattern, you need to pay attention to its cross-section. Below, I will demonstrate how to add patterns with cross-sections.

Before starting, let's analyze the structure of the collar in the demonstration image:

① There are a total of 6 visible faces from the front.

② It's best for patterns #3 and #4 to appear connected, as there isn't much folded part between these two faces. Conversely, other faces, such as between #1 and #2, don't need to be connected, as there are considerably more folded parts between them.

③ Furthermore, faces #1 to #4 are generally oriented towards the left side of the screen; while #5 and #6 are oriented towards the right side. Together, these form two main directions. Therefore, we need two pattern layers for 【Free Transform】: Edit → Transform → Free Transform or shortcut: 【Ctrl+Shift+T】, to first transform the patterns into approximate directions.

(*In fact, the direction of #5 is somewhat in between the two; this step is for a general transformation, with fine-tuning to follow.)

④ After completing the transformation, you need to duplicate the transformed patterns. #2 and #4 can share one piece; #1 and #3 can share one piece.

Since there is space between the strawberries in this pattern, you only need to focus on the strawberries when processing.

First, I recommend using the 【Polyline Selection】 tool to select the area along the folds of the clothing.

1. In the first pattern layer, select face #3 and erase it.

2. Select the second pattern layer (shown in blue in the demonstration image) and process the heart shape between #3 and #4. Since #3 is above #4, move the layer upwards.

3. Erase the excess parts.

💡TIPS

Deliberately adding broken patterns to the folds can easily achieve a realistic effect.
When dealing with patterns at the edges, sometimes it's easier to process by expanding the canvas size.

Additionally, you can also use the 【Liquify】 tool to fine-tune the pattern.

【Conclusion】

Thank you for reading this far!

Personally, one of the biggest challenges in creating seamless patterns is: "From where to where does the pattern in my mind repeat? What shapes should I draw at the beginning to achieve that pattern?".

Unfortunately, this question can only be answered intuitively by observing and analyzing patterns more yourself.

This article only explains some software usage functions, but I believe it is quite useful as an introduction. Enjoy the fun of pattern design!

What do you think of this article?

Feel free to leave a comment and let me know! I hope this tutorial was helpful to you.

Original Patterns: Design and Illustration Application