Home Sweet Home! In this tutorial we’ll
create the cozy atmosphere of a living room, designing a flat-style interior with
a cute cartoon character sitting in a comfy armchair. We’ll be using basic
geometric shapes and working with the Transform panel to render all the
elements in a fun and easy way.
By the end of this lesson, you’ll be able to use the techniques that we’ve covered during the tutorial and apply them to your new illustrations. Feel free to seek inspiration on Envato Market and check these examples of flat interiors and flat characters. Let’s begin!
1. Create a Flat Character
Step 1
First of all, let’s create a New Document of 450 x 300 px size.
Step 2
We’ll start designing our character from the head. Take the Rectangle Tool (M) and make a 45 x 60 px yellow shape. Switch to the Direct Selection Tool (A) and use the Live Corners feature to make the corners rounded by pulling the tiny circle marker to the center of the shape.
We can also adjust the size and the Corner Radius of the shapes either from the control panel on top or from the Transform panel (Windows > Transform). We’ll be using the Transform panel during this tutorial, as it allows us to adjust every corner of the shape independently.
Step 3
Now let’s make an eyelid. Use the Ellipse Tool (L) to make a small 7 x 7 px circle with brown Stroke and no Fill. Set the Stroke Weight to 1 pt and the Cap and Corner to middle positions in the Stroke panel.
Grab the Scissors Tool (C) and click the side anchor points of the circle to split it apart. Delete the top half.
Step 4
Make another 7 x 7 px circle for the nose and fill it with yellow, slightly darker than the color of the head. Select the top anchor point with the Direct Selection Tool (A) and drag it up to make a stylized nose.
Step 5
Design the face, using the elements that we’ve created. Add a couple of small light-pink circles for the blush on the cheeks and make a mouth, using the same method as we did for the eyes.
Step 6
Let’s move on to the ears. Make a 7 x 12 px yellow rectangle and use the Live Corners feature to make it rounded. Place a small rounded rectangle on top, filling it with darker yellow color. Group (Control-G) the elements and Send to Back (Shift-Control-[). Make a copy of the ear group and attach both ears to the head.
Step 7
Let’s draw a nice hairdo for our character. Use the Ellipse Tool (L), hold Shift and make a 55 x 55 px blue circle. Place the circle above the top of the head, as shown in the image below. Use the Scissors Tool (C) to click the side anchor points, splitting the shape into two halves.
Delete the lower half. Select the remaining shape, click the right mouse button and Join to make the path closed.
Step 8
Use the Add Anchor Point Tool (+) to add a point on the bottom edge of the hair shape and drag it up, using the Direct Selection Tool (A). Switch to the Anchor Point Tool (Shift-C) and drag out the anchor handles, placing them at 45 degrees to make the hairline smooth.
Step 9
Let’s continue styling the hair. Make a 55 x 55 px square of a darker blue color. Select both hair shapes and click the lower shape once again to make it a Key Object. Use the Align panel to align both shapes to the center and to the top.
Make the top of the shape fully rounded, using the Transform panel or the Live Corners feature.
Step 10
Now let’s modify the bottom of the shape. Use the Anchor Point Tool (Shift-C) to drag the anchor handles down, making the bottom of the shape slightly arched and adding smoothness.
Tip: Use the Guides to make the length of the anchor handles equal. Press Control-R to show the Rulers and drag the Guide down from the horizontal ruler. Select and delete the guide when you don’t need it any more or clear it from View > Guides > Clear Guides.
Select the shape and Send to Back (Shift-Control-[), beneath the head, forming a stylish short hairdo.
Step 11
Now let’s render the body of our character. Use the Rectangle Tool (M) to make a blue shape of 30 x 57 px size and use the Transform panel to set the Corner Radius of the top corners to 10 px and the bottom corners to 12 px.
Copy the shape and Paste in Front (Control-C > Control-F). Keeping the top copy selected, take the Eraser Tool (Shift-E), hold Alt and delete the bottom part of the shape. Change the color of the remaining piece to green, making a bright shirt.
Step 12
Take the Pencil Tool (N) and draw a smooth arched line for the arm. Set the Fill color to none and the Stroke color to yellow. Set the Stroke Weight to 8 pt, making the arm thicker. Switch Cap and Corner to the middle positions, making the tips of the line rounded. Add a smaller line for the thumb, setting the Weight to 3 pt.
Add a darker yellow 8 pt stroke for the opposite arm and Send it to Back (Shift-Control-[). Draw another stroke for the same arm, but this time place it between the body and the first arm, using the Control-[ keys to move the shape down.
Step 13
Let’s make a cat and let our character hold it in her arms. Make a 30 x 30 px dark-grey circle and use the Direct Selection Tool (A) to drag the bottom anchor point up, squashing the shape. Send the shape Backward (Control-[) to make the top hand cover it.
Step 14
Make a 15 x 10 px rounded rectangle for the head, setting the Corner Radius to 5 px. Add the eyes, using the same technique as we did for the eyes of our main character.
Move on to the ears and use the Polygon Tool to make a triangle, setting the number of sides to 3 in the Transform panel.
Step 15
Let’s add the legs to our character. We’ll make the legs bent so that our character could sit in a cozy armchair.
Use the Pen Tool (P) to make a line with 90 degrees corner and 8 pt Stroke Weight. Use the Direct Selection Tool (A) and the Live Corners feature to make the corner rounded, forming a stylized knee.
Step 16
Let’s add a foot in a soft house shoe. Make a 12 x 15 px light-beige shape for the top of the boot. And add another rectangle for the bottom, making the shapes overlap. Make the top right corner rounded. Select both shapes and Align to the Bottom of the Key Object, using the Align panel.
Group (Control-G) and copy (Control-C > Control-F) the shapes to add a second leg. Place the copy beneath the body (Shift-Control-[) and adjust it slightly, changing the corner radius of the knee and making the elements a bit darker.
2. Design a Flat Interior
Step 1
Let’s start designing a soft, cozy armchair. Use the Rectangle Tool (M) to make a105 x 125 px pink shape. Make its top right corner rounded with 13 px Corner Radius.
Create another rectangle of 25 x 125 px by the left side of the first shape, making both shapes partially overlap. Fill the new rectangle with darker pink color and make the top of the shape fully rounded.
Use the Align panel to Align both shapes to the Bottom of the Key Object.
Step 2
Let’s create an armrest. Make a 28 x 28 px light-pink circle and place it as shown in the image below. Connect the circle and the bottom of the armchair with a narrow light-pink rectangle, Aligning the shapes to the Bottom of the Key Object.
Step 3
Make a tiny circle button to decorate the top of the armrest.
Create a 60 x 28 px rectangle of darker pink color and make its corners fully rounded. Place the shape beneath the light-pink circle (Control-[) and apply the Horizontal Align Right function, using the light-pink circle as a Key Object. As you can see, both shapes are of the same height (28 px), so they combine with each other perfectly.
Finish up this part of the armchair by adding a dark-pink rectangle beneath the armrest.
Step 4
Group (Control-G) the elements of the armrest. Double-click the Reflect Tool (O) and flip the elements over the Vertical Axis. Click Copy and place the created mirrored group by the opposite side of the armchair, Sending it to Back (Shift-Control-[).
Add a 110 x 23 px rectangle for the seat of the armchair, making its right side rounded. Put a dark-pink rectangle beneath the seat, creating a gentle shadow.
Step 5
Now we can sit our character in the armchair and continue working on the surrounding interior. Use the Rectangle Tool (M) to create a narrow 275 x 10 px stripe for the floor, filling it with light-beige color.
Let’s start shaping the chest of drawers. Make a 70 x 80 px beige rectangle and Send to Back, beneath the armchair.
Copy the shape and Paste in Front (Control-C > Control-F). Make the color of the copy lighter and squash it, reducing its width to 47 px.
Step 6
Let’s add some drawers. Make a 35 x 20 px light-beige rectangle and put a small round handle in the center of it. Group both shapes, hold Alt-Shift and drag the group down, making a copy. Press Control-D to add a third drawer.
Step 7
Let’s add a long flat shadow to the chest of drawers. Make a rectangle and rotate it 45 degrees. Fill the shape with beige color and switch the Blending Mode to Multiply in the Transparency panel, making the shape semi-transparent.
Combine the top corner of the rectangle with the armrest (see the circle marking in the image below). Select both the shadow and the chest of drawers shape. Take the Shape Builder Tool (Shift-M), hold Alt and click the unneeded elements of the shadow shape that you want to delete. Great job!
Step 8
Let’s place a small table lamp on top of the chest of drawers. Use the Rectangle Tool (M) to make two small perpendicular shapes for the lamp stand.
Make a 25 x 30 px rectangle for the lamp shade. Switch to the Direct Selection Tool (A) and select the bottom left anchor point of the shade. Press the Enter key to open the Move options window. Set the Horizontal value to -5 px and Vertical value to 0 px. Press OK, moving the point 5 px to the left.
Repeat the same for the bottom right anchor point, moving it 5 px in the opposite direction.
Step 9
Let’s add a few more details to the interior by hanging some pictures on the wall. Make a 45 x 55 px rectangle with light-beige Fill and darker beige Stroke of 3 pt Weight, depicting a picture frame.
Make another rectangle inside, filling it with light-yellow color and adding some simple abstract shapes on top.
Step 10
Make two more pictures and hang them on the wall, above our character. Finish up the illustration by making a light-yellow rectangle of 450 x 300 px for the background (Shift-Control-[).
Congratulations! Our Cozy Flat Interior Illustration Is Finished!
Great job! We’ve made the composition look balanced and completed. I hope you’ve enjoyed following this tutorial and learned some new tips and tricks that will help you to create more flat interior illustrations with fancy characters and pets.
Have fun!
