Are you ready to twist your mind and create a super-bright and playful seamless pattern with crazy characters? In this tutorial we’ll go through the entire process of developing a sticker bombing style pattern, rendering every character with basic shapes and Warp Effects and then gathering the created elements into a fancy overlapping texture with the help of the Pattern Tool. Let’s get started!
1. Create the Character Stickers With Basic Shapes
First of all, let me say a few words about the actual style of our future pattern in order to inspire you and to make the topic clearer.
Sticker bombing is a whimsical and ambitious design style which came from Japan with their special JDM stickers. A similar style was also formed by a group of enthusiasts from New York who created a lot of fancy graffiti images one over another, the so-called “bombs”.
It's usually associated with street art and the way of decorating various things (mostly vehicles, skateboards and so on) with colorful overlapping stickers of various sizes in order to emphasize some part of an object and to attract the viewer’s attention.
Sticker bombing commonly uses some ready-made stickers with well-known characters, but in this tutorial we’ll go further and create our own crazy band of heroes.
Step 1
Let’s start by creating a funny hipster cat with a cup of coffee.
First of all, let’s create a squashed ellipse with the Ellipse Tool (L) and fill it with bright-orange color. Then move to Effect> Warp > Arc and set the Vertical Bend value to 48%, bending our ellipse to the left side. Now that we have one of the cat’s paws ready, Object > Expand it and create the body base by forming an almost even circle. Stick our banana-shaped paws to both sides of the body. Keep a couple of copies of the paw-shape, because we’ll need them later.
Unite all the created elements in Pathfinder, making a single shape. Our shape looks more like a chicken now, so we need to smooth the sides. Select the side anchor points that are left in the places where the paws merged with the body, and delete them by clicking the Remove selected anchor points button in the control panel above. Then edit the area in the bottom part of the body, by moving the anchor handles with the help of the Direct Selection Tool (A).
Use the paw copies that we created earlier to add a pair of cat’s ears in the upper part of the body.
Step 2
Let’s put some trendy hipster glasses on our cat! Start by making an ellipse and delete its upper part with the Eraser Tool (Shift-E) by holding the Alt key to erase an even half. Go to Object > Path > Offset Path and set the Offset value to about -5 px, creating a smaller shape inside the first one. Your Offset value may differ from mine, but you can see the actual scale of the objects in comparison to each other in the screenshot below.
Select both objects and use the Minus Front function of the Pathfinder panel to cut out a hole, thus creating a glasses rim. Duplicate the rim by clicking it with your left mouse button and dragging while holding the Alt key.
Step 3
Add a simple and cute nose to our cat by forming a triangle with the Polygon Tool and then smoothen its corners with Effect> Stylize > Round Corners. Set the Radius to about 4 px and check the result by ticking the Preview box. Object > Expand the nose and fill it with bright pink color.
Let’s add a pair of funny round peepers to the kitty. Start by placing a white even circle by holding the Shift button and making a shape with the Ellipse Tool (L). Add a smaller brown circle inside for the iris. Finally, create a white triangle highlight on top of the iris and form the second eye.
Step 4
Move on and create a paper coffee cup that our character will be holding in its paws. Make the base from a brown rectangle with the help of the Rectangle Tool (M).Then select its lower left anchor point and click the Enter key to call out the Move options window. Set the Horizontal Position value to 5 px and other values to 0 px, thus moving the point straight horizontally to the right. Repeat the same with the right anchor point, setting the Horizontal Position value to -5 px this time and moving it closer to the center, thus making the cup base narrower at the bottom.
Add a light-yellow rectangle for the cup’s cap and make its lower part wider in the same way as we did with the cup base. Finally, make an additional anchor point in the middle of the cup’s bottom part and drag it down a bit, making the shape smoother and more curved.
Add another rectangle of a pale-yellow color across the middle of the cup for the paper wrap. Bend it down with the Arch Warp Effect, setting the Horizontal Bend value to -20%. Duplicate the cup base and use the Intersect function of Pathfinder to cut off the unneeded parts.
Step 5
Add an elliptical logotype in the center of the paper wrap and use the Knife Tool (you can find it in the same folding menu as the Eraser Tool) to draw a curved line across the created ellipse, thus splitting it into two halves. Separate the halves from each other, forming a coffee bean.
Step 6
Cover the left side of the cup with a narrow rectangle and apply Arc effect with 10% Vertical Bend value to curve the rectangle. Object > Expand the shape and fill it with dark-brown color, switching the Blending Mode to Screen in the Transparency panel, this way creating a warm overtone on the cup. Add another bent rectangle on the opposite side of the cup and switch it to Multiply Blending Mode, making a shadow.
Step 7
Place the cup above the cat's tummy and use the Pencil Tool (N) to draw a curved freehand shape for the “arm” or paw. Fill it with linear gradient from yellow on the tip to orange so that the arm blends with the cat’s body and at the same time pops out. Add the second arm, placing it on the opposite side, so that the cat is holding the cup.
Step 8
Create another squashed ellipse, this time for the cat’s tail. Apply the Arc Warp effect with -4% Horizontal Bend value to make the bottom part wider and expand the shape. Apply another Arc effect to the same shape with -24% Vertical Bend value. Attach the tail to the cat’s body and expand it if you’re happy with the result. Otherwise, increase the Bend value to make the tail more curved.
Step 9
Form the inner pinky part of the cat’s ears by applying the Offset Path to the cat’s body, creating a smaller body silhouette inside. Fill the created shape with pink color and separate the upper part with the Eraser Tool (Shift-E), deleting the bottom part completely.
Make the cat's figure a bit more three-dimensional by adding a gentle shadow. For this purpose, duplicate the body base twice and move the copy down and to the right a bit. Use the Minus Front function of the Pathfinder panel to cut off the unneeded parts, leaving only a thin stroke along the edge of the body. Fill it with darker orange color, forming the shadow.
Step 10
Let’s add an outline to our character in order to separate it from other stickers when we’ll be forming a pattern. Select the body shape and set the Stroke color to dark brown. Head to the Stroke panel. Here we need to set the Weight to 3 px and switch the Cap and Corner in the middle positions. As for the arms, let’s change the Profile of the outline toWidth Profile 1 (you can find these options in the upper control panel), thus making the lines very thin at both ends. Don’t forget to add the outlines to the coffee cup and the cat’s tail as well.
Step 11
Let’s use the base of our hipster cat to make another cat character with an aristocratic look.
First of all, change the position of the paws and the tail to make the characters differ from each other. Then start adding minor details. Form a monocle rim by creating two even circles, one inside the other, and cutting out the center. Add another smaller circle for the glass and make it semi-transparent by lowering the Opacity in the Transparency panel. Make a group of stripes and turn them into a single object by creating a Compound Path (Control-8). Place the created stripes above the glass, cutting off the unneeded parts outside the monocle, and switch it to Screen Blending Mode, creating a highlight. Add a small overtone to the rim as well, by selecting a rim shape and creating a smaller and lighter brown element inside with the help of the Offset Path.
Let’s make the cat’s eyes half closed to give him an important and haughty look. Duplicate the white eyeball shape and fill it with orange, a bit darker than the skin tone. Use the Eraser Tool (Shift-E) to delete the lower part, forming the eyelid.
Step 12
Our cat needs a few more appearance details that will make him look like a sir. Firstly, let’s add a fancy curled moustache! Start by forming an even circle and use the Direct Selection Tool (A) to drag its right anchor point further right and up a bit. Use the Anchor Point Tool (Shift-C) to move the anchor handles, forming a sharp angle. Continue moving the handles to form a twisted curl.
Step 13
What's a sir without a top hat? Let’s make one! Form a dark-brown rectangle and make its bottom part much narrower, as we did with the paper coffee cup. Add a squashed ellipse for the hat brim and make the hat more three-dimensional by adding a highlight from one side and a gentle shadow from another. Decorate the hat with a bright turquoise stripe made with a narrow rectangle and Arc effect. Rotate the finished hat slightly and let it cover one of the cat’s ears.
Step 14
Our cat’s hands are still empty, so let’s add a few more items! These will be a smoking pipe and a teacup. Start forming the pipe from its upper part, which consists of two squashed brown ellipses, one inside the other. Make the top ellipse darker, depicting the deepening in the pipe.
Add another ellipse of lighter brown color for the base of the pipe and place the first group of ellipses right in the middle of the new ellipse. Erase its upper part, forming a rounded wooden pipe bottom.
Duplicate one of the cat’s arms and attach it to the pipe, making a mouthpiece.
Step 15
Use the base of our pipe to form a simple teacup, making its inner part a bit larger. Switch the colors to light-turquoise and use the Pencil Tool (N) to add a tiny crooked shape for the cup handle. Put the cup and the pipe in the cat’s hands.
Add outlines to the cat and the items.
Step 16
Our next character is a cute chicken. The base of its body is created in a similar way as the cat’s moustache, but not so curly. Start with an even circle of a bright yellow color and move both side anchor points up a bit to make the top of the ellipse more flattened. Drag the lower anchor point down and reposition the anchor handles to create a sharp-pointed tail.
Step 17
Draw two ellipses one inside the other for the chick’s eye. Make the inner circle dark-brown, forming an iris, and add a tiny white spot above for the highlight. Make a copy of the eye and move it to the opposite side of the bird’s head. Select both the body and the eye-copy and use the Shape Builder Tool (Shift-M) to delete the unwanted parts by holding the Alt key and clicking them.
Use the Polygon Tool with 3 Sides to form two tiny triangle shapes for the beak. Rotate the shapes and move their central anchor points closer to the right.
Step 18
Add another orange ellipse for the chick’s wing and use the Shape Builder Tool (Shift-M) to make it fit the body. Use the Blob Brush Tool (Shift-B) with default settings (or check out my settings in the screenshot below) to form a small arched line for the bird’s leg. Add three tiny fingers and Unite all parts in Pathfinder. Duplicate the created element and move the copy to the right, adding the second leg.
Make our bird more childish and cute by adding a funny curled lock on the top of the head with the Blob Brush Tool (Shift-B). Add dimension by forming a subtle shadow on the right part of the body and, finally, outline our character, making it more defined and vivid.
Step 19
Let’s add more birds for our future pattern! This time we’ll make a funny owl. Form a blue ellipse and modify it by flattening its upper part. Use the Eraser Tool (Shift-E) to delete the bottom part of the body and start adding small details: place an even circle in the lower left corner of the body shape. Hold Shift and Alt at the same time and drag the created circle to the right, creating a copy. Press Control-D several times, repeating your last action to create more copies, thus forming a skirt-like shape. Unite all the elements in Pathfinder, making a single shape.
Add a light-yellow ellipse for the face. Squash the shape by moving its upper anchor point down and extend the side anchor handles to make the face heart-shaped.
Add big rounded eyes and form a small triangle beak in the center of the owl’s face.
Step 20
Let’s form a feathered wing. Place three squashed ellipses close to each other, varying their height. Group(Control-G) the shapes and go to Effect > Warp > Arc, bending the feathers to the right side with -50% Vertical Bend value.
Object> Expand the wing and Unite the feathers in Pathfinder. Duplicate the shape and reflect the copy to the other side of the owl.
Select the body base and go to Effect > Distort & Transform > Free Distort to reveal the pop-up Free Distort options window. Make the bottom part of the body narrower by moving the lower points of the square closer to the center. Add a gentle shadow as we did previously and outline our character.
Step 21
Let’s make a copy of our owl and modify it a bit to render an entirely new character. Change the color of the body parts to violet and work at the facial expression. Erase the upper part of the eyeballs, creating a grumpy look. Select the beak shape and go to Effect > Warp > Arch, setting the Vertical Bend value to 45% to make a crooked beak.
Style a wind-swept bang on top of the owl’s head with the help of the Pencil Tool (N) and don’t forget to Stroke it.
Here is how our grumpy owl looks at this step.
Step 22
The last character of our sticker set is a lovely T-Rex dinosaur. Start by forming his head from a green circle and make it slightly extruded by dragging the left anchor point further left. This will be the dino’s nose area. As for the body, let’s take our cat’s basic body shape and fill it with the same green color, attaching it to the head and forming a distinctive dinosaur silhouette.
Step 23
Move on and make another essential body part: a long green tail. Place a narrow shape made with Rounded Rectangle Tool at the lower part of dino’s body. Head to Effect > Warp > Arc and set the Vertical Bend value to 5%, making the tail wider from its left side. Expand the shape and add two more anchor points closer to the tip of the tail. Use the Direct Selection Tool (A) to bend the tip by moving its final anchor point up.
Step 24
Use a pale-yellow circle to form a row of funny teeth. Place the teeth group beneath the head shape by rearranging its position with Control-[ keys combination. Add two short rounded paws touching the dino’s cheeks. Finally use the same teeth-circled shapes to create a chain of spinal elements running along the edge of the body right to the tip of the tail. Form two arched strokes for the eyes with the help of the Blob Brush Tool (Shift-B) and add two tiny round nostrils.
Use the Eraser Tool (Shift-E) to edit the scales, which we’ve placed on dino’s head, by erasing their bottom part. Switch the color of the scales to light green and add several groups of elliptical spots to the body. Finish up by adding a dark-brown outline to our character.
Step 25
We've already created a paper coffee cup and a fancy teacup that we can use separately from our characters in order to fill the blank spaces of our pattern. Let’s add one final element that we’ll be able to use for the same purpose! This will be a simple donut.
Start by forming an even circle of creamy color. Cut out a hole in the middle and deform the shape slightly with the help of the Warp Tool (Shift-R) (I’ve left the Warp Tool options as default, but you can change the brush size or the intensity if you click the tool icon twice).
Use the Offset Path function several times to create two smaller shapes one inside the other. Fill the newly created shapes with yummy pink color, making the top shape brighter to give it a glazed look. Sprinkle the top of the donut with bright yellow confectionery crumbs made of tiny rounded rectangles. Add a solid brown stroke to the donut.
Step 26
Now that all items are ready, we can start rendering the pattern! You can finish up with the characters at this step or go further and add a few minor details to each of them, making the images more intricate and cartoonish.
For example, I like the spots that we’ve formed for our T-Rex, so I decided to add the same spots to other characters as well. I also decorated both owls' bodies with two additional layers of feathers. For this purpose I just copied the body shape several times, moved the upper copy up, and cut off the unwanted pieces that were left outside the character.
When you're satisfied with the result, let’s move to the final part of our tutorial!
2. Render a Crazy Sticker Bombing Seamless Pattern
Step 1
Select all the items that we’ve made so far and go to Object > Pattern > Make. By entering the pattern creation mode, you’ll be notified that the new pattern we're creating will be added to the Swatches panel. You can edit the created pattern any time from the Swatches panel, even after returning to normal mode.
Find the Pattern Options window and set the Width and Height of the Tile to 600 x 600 px. Leave the Tile Type as Grid to make the arrangement of the objects easier.
Start moving the characters over the canvas and rotate them by various angles. You will see transparent copies of the objects, which help you to form the pattern, imagining the whole picture.
Step 2
Use the Reflect Tool (R) to mirror the objects over the Vertical or Horizontal (if you want some objects to be upside down) Axis, making the pattern more dynamic and diverse. Put the stickers one above the other, making them overlap, so that there are no white spots or blank spaces between them.
Step 3
If you see that some objects blend with each other, making a mess, feel free to recolor them (don’t forget to keep the initial copy as well)! For example, we’ve placed two orange cats too close to each other. In order to visually separate them, let’s change the skin tone of the hipster cat to lighter yellow. Switch the color of the glasses to lilac and make a bright spot by coloring the coffee cup pink.
Step 4
Continue filling up the composition, adding more characters.
Add donuts and cups here and there to make the scene more varied.
If some elements happen to cross the character’s faces or look as if they are in the wrong place, just reposition or delete them completely. For example, select and rotate the brown cat’s tail to move it away from the lower cat’s eyes.
Step 5
As soon as you’re happy with how your pattern looks, click Done in the upper panel, quitting the Pattern mode.
Let’s try out our texture! Make a rectangle of 600 x 800 px size, find our pattern in the Swatches panel and apply it to the created shape. Now we can leave it as it is or make the tiling smaller. Find the Scale Tool (S) in the Tools panel and click it twice to call out the options window. Set the Scale to Uniform with 70% value. Tick the Transform Patterns box, unchecking the others, and hit Preview to see the result.
Boom! Our Crazy Sticker Bombing Seamless Pattern Is Finished!
Great work! I hope you’ve enjoyed styling playful characters and designing this fancy seamless texture, discovering some new tips and tricks! Try out these simple techniques and get back for more! Good luck!
