MS Network – Page 3

How to Create a Wafer Text Effect Covered With Melted Chocolate in Adobe Illustrator

Final product image — What You’ll Be Creating

In
this tutorial, you will learn how to create a wafer-inspired text
effect with the help of the 3D options and the Transform effect to
obtain the wafer layers in Adobe Illustrator. You will also create the wafer pattern from
scratch using a custom pattern brush, and you’ll finish with the shiny
melted chocolate running down on the letters. Sounds delicious!

This
text effect was inspired by the Frosted Chocolate Wafers Alphabet Letters Set available on GraphicRiver. If you want more Illustrator
styles or food vectors, head over to GraphicRiver and browse through
a multitude of amazing designs.

Tutorial
Assets

To
complete the tutorial you will need the following assets:

1. How
to Open a New Document

Launch
Illustrator
and
go to File
> New to
open a blank document. Type a name for your file, set the
dimensions, and then select Pixels
as
Units
and
RGB
as
Color
Mode.

Next,
go to Edit
> Preferences > General and
set the Keyboard
Increment to
1
px and, while there, go to Units
to
make sure they are set as in the following image. I usually work with
these settings, and they will help you throughout the drawing process.

2. How
to Prepare the Text

Step
1

Grab
the Type Tool (T) and write “WAFER” on your artboard using the
Bob Font from Envato Elements. After that, choose Expand and Ungroup (Shift-Control-G)
from the Object menu to get the individual letters.

Step
2

Now,
take the Direct Selection Tool (A) and use it to move some of the
anchor points in order to make the indicated areas a little wider.

3. How
to Create the Wafer Layers

Step
1

Now
that the letters are ready, you can select all of them and go to
Effect
> 3D > Extrude & Bevel.
Set the Rotation Coordinates and settings as shown, and then hit OK.

Step
2

Focus
on the letter “A”. Choose Expand Appearance from the Object menu
and then Ungroup (Shift-Control-G) a few times until you get all the
shapes separated. Now, select only the four thin brown shapes (the
first wafer layer) and go to Effect > Distort & Transform >
Transform. Type 2.6 px in the Vertical Move field, choose 6 Copies, and then hit OK. As a result, you will get seven wafer layers, but because they’re filled with the same color, they are not clearly visible at this
point.

Repeat
the same thing for the other four letters.

Step
3

While
the seven wafer layers for the letter “A”
are still selected, choose Expand Appearance from the Object menu to
expand the Transform effect. Now, you can select each layer
separately with the Direct Selection Tool (A) and recolor them.

Repeat
the same thing for the other letters.

4. How
to Create and Apply a Wafer Pattern Brush

Step
1

Use
the Rectangle Tool (M) to draw a small 25 x 5 px rectangle filled
with gray (1). Now, use the Direct Selection Tool (A) to select only
the top corner points and move them inwards by pressing the
Arrow keys on your keyboard five times (2).

While
the new gray shape stays selected, go to Object > Transform >
Reflect, check Horizontal, and then hit Copy. Align the second shape
to the bottom of the first one, and change the fill color to
pink (3).

Drag
the gray and pink shapes into the Brushes panel and choose New
Pattern Brush. In the Pattern Brush Options window, just type a name
for your new brush and set the Colorization Method to Tints and
Shades.

Step
2

Use
the Line Segment Tool () or the Pen Tool (P) to draw a straight path
over the letter “W” and stroke it with the new Wafer Pattern
Brush. Reduce the Stroke Weight to 0.5 pt and use pink as the stroke
color (1).

While
the pink path stays selected, go to Object > Transform >
Reflect, check Horizontal, and hit Copy in order to get a second path.
Choose a different stroke color, such as green (2). Align the two
paths so the pink and green shapes match perfectly (see close-up).

Step
3

Multiply
the pink path and arrange the copies between the green shapes. You
may need to zoom to make sure they all match perfectly. Keep making
copies of the pink path until the letter “W” is covered (1).

Now,
multiply the green path and arrange all the copies between the pink
ones. Make sure they are matching, and this will be the wafer pattern
(2).

how to create the wafer pattern for letter W

Step 4

Select
all the pink and green paths and choose Expand Appearance from the
Object menu to get the individual small shapes. Now, use the Direct
Selection Tool (A) to select only one of the pink shapes, and go to
Select > Same > Fill Color. As a result, Illustrator will
select all the pink shapes for you, and you can easily change the fill
color to cream (1).

Next,
use the Direct Selection Tool (A) to select only one of the purple
shapes, and then go to Select > Same > Fill Color. Illustrator
will select all the purple shapes for you, and you can change the fill
color to beige (2).

how to recolor half of wafer pattern on letter W

Step
5

Follow
the same technique and recolor all the light green shapes with the
color indicated (1); then recolor the darker green shapes to brown
(2).

how to recolor entire wafer pattern on letter W

Step
6

Select
the W shape and Copy and Paste in Place (Shift-Control-V) to make a
copy of it in front of the wafer pattern. Set this copy to
stroke-none and fill-none.

Now,
select the wafer pattern along with the copy of the letter and go to
Object > Clipping Mask > Make (Control-7).

I’ve
explained the process of creating the wafer pattern for the letter
“W”. Apply the same method to create the pattern on the rest of
the letters.

5. How
to Color the Wafer Pattern Squares

Step
1

First,
select the W shape, and then Copy and Paste in Place (Shift-Control-V)
to make a copy of it. Give it any fill color (1).

Now,
select the two groups of shapes that make up the wafer pattern from
under the existing mask and Copy and Paste in Place (Shift-Control-V)
to make copies of them. Press Unite in the Pathfinder panel, and then
go to Object > Compound Path > Make (Control-8). Fill the
resulting wafer
compound path
with pink (2). Before you continue, make two copies of it for
later use, but hide them for the moment.

Select
the blue W shape along with the wafer compound path and press Minus
Front in the Pathfinder panel. You will get a group of blue squares
(3).

how to create the wafer squares on letter W

Step
2

Follow
the technique explained above to obtain the blue squares on the other
four letters as well (1). After you are done, fill each group of
squares with the linear gradient shown at a 90º Angle (2).
Drag these groups of squares between the wafer pattern and the actual
letters in the Layers panel.

6. How
to Create Shading on the Wafer Pattern Squares

Step
1

Focus
on the letter “W” and make a copy of the wafer compound path visible
again (1). Copy and Paste
in Front (Control-F)
this compound path and move it 1 px upwards by pressing the Up Arrow
key on your keyboard once (2).

While
both wafer compound paths stay selected, press Minus Front in the
Pathfinder panel. As a result, you will get a group of reversed
V-like shapes at the top of the wafer squares (3).

how to create shading shapes on letter W

Step 2

Fill
the group of shapes obtained in the previous step with brown; then go
to Effect > Blur > Gaussian Blur and apply a Radius of 1 px
(1).

Name
this group “shading” and drag it under the existing mask and
under the wafer pattern in the Layers panel (2).

7. How
to Create Highlights on the Wafer Pattern Squares

Step
1

Make
the second copy of the wafer compound path visible again (1). Copy
and Paste
in Front (Control-F)
this compound path, and this time, move it 1 px downwards by pressing
the Down Arrow key on your keyboard once (2).

While
both compound paths stay selected, press Minus Front in the
Pathfinder panel. You will get a group of V-like shapes at the bottom
of the wafer squares (3).

how to create highlight shapes on letter W

Step
2

Fill
the group of shapes obtained at the previous step with the color
indicated, and apply a 1 px Gaussian Blur (1).

Name
this group “highlight” and drag it under the existing mask and
under the wafer pattern in the Layers panel (2).

how to color highlight shapes on letter W

Step
3

I’ve
explained how to color and how to add shading and highlights on the
wafer squares for the letter “W”. Apply the same method to add
details on the other four letters.

how create shading and highlight on wafer letters

8. How
to Create Texture on the Wafer Letters

Step
1

First,
let’s create a mask shape. Select all the wafer layers and then Copy
and Paste in Place (Shift-Control-V) to make copies of them in front
of everything. Press Unite in the Pathfinder panel and, after that, go
to Object > Compound Path > Make (Control-8).

how to create a wafer layers compound path

Step
2

Next,
select the letters and Copy and Paste in Place (Shift-Control-V)
to make copies of them. Go to Object > Compound Path > Make
(Control-8) to obtain a new compound path out of them (1).

While
the red and pink compound paths stay selected, press Minus Front in
the Pathfinder panel; then go to Object > Compound Path > Make
(Control-8). We’ll use the resulting compound path to mask the
texture next (2).

how to create a wafer layers masking shape

Step
3

Use
the Rectangle Tool (M) to draw a rectangle that covers the letters.
Select gray as the fill color; then go to Effect > Texture >
Texturizer and apply the settings shown (1).

While
this rectangle stays selected, also select the mask shape obtained in the previous step and go to Object > Clipping Mask > Make
(Control-7) (2). Set the rectangle to Blending Mode Soft Light (3).

Step
4

Make
copies of the five letters and then go to Object > Compound Path >
Make (Control-8). Fill the new compound path with gray and apply the
Texturizer effect using the same settings (1). Set the Blending Mode
to Overlay and reduce the Opacity to 40%.

Make
a copy of the same compound path in front and remove all existing
appearances. Use it to mask the texture to get sharp edges (2).

9. How
to Create the Melted Chocolate

Step
1

Let’s
cover the top of the wafer letters with delicious melted chocolate.

Look
at the wafer letters and imagine chocolate running down on them. Use
the Pen Tool (P) to define that melted chocolate on each letter (1).
Next, join the paths between them (2) and, at the end, close the
shape at the top to cover the letters (3).

Step
2

While
the chocolate shape stays selected, add a New Fill in the Appearance
panel above the existing brown one. Use the radial gradient shown;
then go to Effect > Sketch > Chrome and apply the settings
shown. Set the Blending Mode to Soft Light.

how to apply chrome effect to melted chocolate shape

Step
3

With
the chocolate shape still selected, add a New Fill at the top of the
Appearance panel and use white as the fill color. Go to Effect >
Stylize > Inner Glow and apply the settings shown. Set the
Blending Mode to Multiply (white becomes transparent).

how to add inner shading to melted chocolate shape

Step
4

Make
a compound path out of the wafer layers and another compound path out
of the letters, as you did before (1). While both shapes stay
selected, press Unite in the Pathfinder panel, and then go to Object >
Compound Path > Make (Control-8) (2).

how to create a wafer letters compound path

Step
5

Select
the chocolate shape and Copy and Paste in Place (Shift-Control-V) to
make a copy of it in front of everything. Remove all existing
appearances and just give it a fill color (1).

While
the blue and pink shapes stay selected, press Intersect in the
Pathfinder panel and then go to Object > Compound Path > Make
(Control-8) (2).

Use
the Delete Anchor Point Tool (-) and the Add Anchor Point Tool (+) to
distort the resulting shape, especially at the top. Add a lot more
anchor points and move them randomly to create an irregular edge (3).

how to create a melted chocolate masking shape

Step
6

Select
the chocolate shape along with the pink compound path from the
previous step (stroke-none, fill-none) and go to Object > Clipping
Mask > Make (Control-7).

how to mask the melted chocolate on wafer letters

10. How
to Create a Shadow Under the Melted Chocolate

Step
1

Make
a copy of the chocolate shape and move it behind the original
chocolate but in front of the wafer letters. Remove the existing
appearances because we have new ones. Select dark brown as the fill
color and apply the Drop Shadow effect using the settings shown.

how to add shadow under melted chocolate on wafer letters

Step
2

We
need a mask shape now. Make a compound path out of the wafer layers
and another compound path out of the letters, as you did before (1).
While both shapes stay selected, press Unite in the Pathfinder panel
and then go to Object > Compound Path > Make (Control-8) (2).

how to create new wafer letters compound path

Step
3

Go
to the Layers panel and find the mask shape that you used for
the chocolate. Copy and Paste it in Place (Shift-Control-V) because
we need a copy of it (the orange shape) (1).

While
the blue and orange shapes stay selected, press Unite in the
Pathfinder panel and then go to Object > Compound Path > Make
(Control-8) (2). Use this new compound path to mask the copy of the
chocolate shape with the Drop Shadow effect applied to it (3).

how to mask shadow under melted chocolate

11. How
to Add Details and Shine on the Melted Chocolate

Step
1

Grab
the Pen Tool (P) and draw a few paths following the top edge of the
chocolate (1). Give all of them a 5 pt black Stroke and use Width
Profile 1 in the Stroke panel. Next, go to Effect > Blur >
Gaussian Blur and apply a Radius of 2 px; then set the Blending Mode
to Multiply and reduce the Opacity to 25% (2).

Group
(Control-G) all these paths and drag the group under the existing
mask used for the chocolate in order to mask the blur that goes over
the top edge.

how to add shading on edge of melted chocolate

Step
2

Take
a closer look at the chocolate and at the details created by the
Chrome effect (1). Follow those details and draw a few paths on top using the Pen Tool
(P) (2).

Give all of them a 2 pt white Stroke and
use Width Profile 1 again. Apply a 2 px Gaussian Blur; then set
the Blending Mode to Overlay and 75% Opacity (3).

how to add highlights on melted chocolate

Step
3

Draw
more paths on the chocolate as shown in the image below, where there is a
bigger empty space (1). Give them a 4 pt white Stroke and use Width Profile 1 again. Apply a 4 px Gaussian Blur; then set the
Blending Mode to Overlay and 25% Opacity (2).

how to add extra details on melted chocolate

Step
4

Let’s
add more shine. Draw a few paths following the bottom edge of the
chocolate (1) with the Pen Tool (P). Give them a 4 pt Stroke using
the color indicated and use the Black Blend Art Brush 100×3 (info
below). Next, go to Effect > Stylize > Feather and apply a
Radius of 4 px (2).

I
have an entire tutorial dedicated to Blend
Art Brushes and
how useful they are. I use them in my drawings all the time. You can
find out how to create and save the Black
Blend Art Brush 100×3 that
we are using today in How
to Create a Set of Multi-Use Blend Brushes in Adobe Illustrator.
Since
the Colorization of the brush is set to Tints, when you select
another stroke color, the brush becomes that color as well, despite
its name.

Step
5

Let’s
add even more shine. Draw more paths closer to the edges of the
chocolate (1) using the Pen Tool (P). Give all of them a 3 pt Stroke
and use the Black Blend Art Brush 100×3 again. Go to Effect >
Stylize > Feather and apply a Radius of 4 px to make them smoother
(2).

how to add extra shine on melted chocolate

12. How
to Add a Shadow Under the Wafer Letters

Go
to the Layers panel and find the shape that you have used to mask the
shadow under the melted chocolate. Copy and Paste it in Place
(Shift-Control-V) because we need it again (the gray compound path).

Move
this copy to a new layer called “Shadow” under the letters, and
then apply the Drop Shadow effect twice.

These
are the settings for the Drop Shadow effects:

Congratulations!
You’re Done

Here
is the final image of the wafer text effect that gets covered with
delicious melted chocolate. I hope you enjoyed this sweet tutorial and
learned new techniques. Don’t forget to share an image with us if you
decide to recreate it.

Keep on drawing and learning with the recommended tutorials from below.

How to Create a Half-Blurred Text Effect in Adobe Illustrator

We’re honouring the German language and culture this week in celebration of the launch of the German version of Envato Elements!

In the following steps, you will learn how to create a half-blurred text effect in Adobe Illustrator.

For starters, you will learn how to set up a simple grid and how to create the background. Next, you will learn how to create the main piece of text and how to easily align it.

Taking full advantage of the Appearance panel, you will learn how to keep your text editable, but stylize and mask it. Finally, using thin rectangles along with some more masking and blending techniques, you will learn how to add subtle shading and highlights.

For more inspiration on how to adjust or improve your final text effect, you can find plenty of resources at GraphicRiver.

What You Will Need

You will need the following resource in order to complete this project:

1. How to Set Up a Grid and Create the Background

Step 1

Hit Control-N to create a new document. Select Pixels from the Units drop-down menu, enter 850 in the width box and 500 in the height box, and then click that More Settings button. Select RGB for the Color Mode, set the Raster Effects to Screen (72 ppi), and then click Create Document.

Enable the Grid (View > Show Grid) and Snap to Grid (View > Snap to Grid). You will need a grid every 10 px, so simply go to Edit > Preferences > Guides & Grid, enter 10 in the Gridline every box and 1 in the Subdivisions box. Try not to get discouraged by all that grid—it will make your work easier, and keep in mind that you can easily enable or disable it using the Control-“ keyboard shortcut.

You can learn more about Illustrator’s grid system in this short tutorial from Andrei Stefan: Understanding Adobe Illustrator’s Grid System.

You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Don’t forget to set the unit of measurement to pixels from Edit > Preferences > Units. All these options will significantly increase your work speed.

Step 2

Pick the Rectangle Tool (M) and focus on your toolbar. Remove the color from the stroke and then select the fill and set its color to R=242 G=242 B=242.

Move to your artboard, create an 870 x 520 px shape, and place it as shown below—the grid and Snap to Grid will make it easier.

Step 3

Using the Rectangle Tool (M), create an 870 x 260 px shape and place it as shown below. Fill this new rectangle with the radial gradient shown below, lower its Opacity to 75%, and change the Blending Mode to Overlay. Use the Gradient Tool (G) to stretch your gradient as shown in the following image.

2. How to Create the Main Text

Step 1

Focus on your toolbar and set the fill color to black (R=0 G=0 B=0). Open the Character panel (Window > Type > Character), select the Robinson Regular font, and set the size to 250 px. Pick the Type Tool (T), click on your artboard, and add the “UNSCHARF” piece of text.

Make sure that your piece of text stays selected and open the Align panel (Window > Align). Set the aligning to Artboard (open the fly-out menu and go to Show Options if you can’t see the Align To section as shown in the following image) and then click the Horizontal Align Center and Vertical Align Center buttons. This should move your text to the center of the artboard.

Step 2

Select your text, focus on the Swatches panel (Window > Swatches), and click that [None] swatch to remove the black text color.

Open the Appearance panel (Window > Appearance) and add a new fill using the Add New Fill button. Select that new fill and set the color to R=41 G=171 B=226. Make sure that your text is selected and hit Control-C to copy it. You’ll need a few copies of this text in the following steps.

3. How to Create the Blurred Half of the Text

Step 1

Make sure that your text stays selected and focus on the Appearance panel. Select the fill, lower its Opacity to 50%, and go to Effect > Blur > Gaussian Blur. Set the Radius to 10 px and click OK.

Step 2

Make sure that your text stays selected, keep focusing on the Appearance panel, and add a second fill using the Add New Fill button.

Select this new fill and set the color to black. Lower its Opacity to 25% and change the Blending Mode to Soft Light, and then go to Effect > Distort > Glass. Enter the attributes shown below, click OK, and go to Effect > Stylize > Feather. Set the Radius to 15 px and click OK.

Step 3

Make sure that your text stays selected, keep focusing on the Appearance panel, and add a third fill using that same Add New Fill button.

Select this new fill, drag it below the other two fills, and apply the linear gradient shown below (the yellow zero from the Gradient image stands for the Opacity of that slider). Lower its Opacity to 30% and go to Effect > Distort & Transform > Transform. Enter the attributes shown below, click OK, and go to Effect > Distort & Transform > Free Distort. Drag the bottom points as shown in the following image, click OK, and go to Effect > Blur > Gaussian Blur. Set the Radius to 10 px and click OK.

Step 4

Pick the Rectangle Tool (M), create an 870 x 260 px, fill it with white, and place it as shown in the first image. Select this new rectangle along with your blurred text, open the Transparency panel (Window > Transparency), and click the Make Mask button.

4. How to Create the Other Half of the Text

Step 1

Hit Control-F to easily add a copy of your blue text in the same place. Pick the Rectangle Tool (M), create an 870 x 260 px, fill it with white, and place it as shown in the first image.

Step 2

Select your white rectangle along with the blue text, go to the Transparency panel, and click the Make Mask button.

5. How to Create the Sleek Highlights

Step 1

Pick the Rectangle Tool (M) and simply click on your artboard to open the Rectangle window. Set the Width to 870 px and the Height to 1 px, and then click OK to create your thin rectangle.

Place this new shape exactly as shown below, set the fill color to white (R=255 G=255 B=255), and then lower its Opacity to 75% and change the Blending Mode to Overlay.

Step 2

Hit Control-F to add a new copy of your blue text as shown in the first image. Select it, replace that blue with white, and go to Effect > Blur > Gaussian Blur. Set the Radius to 10 px and click OK.

Step 3

Select your blurred white text along with the thin white rectangle, go to the Transparency panel, and click the Make Mask button.

Step 4

Pick the Rectangle Tool (M) and click again on your artboard to open the Rectangle window. Set the Width to 870 px and the Height to 1 px, and then click OK to create your thin rectangle.

Place this new shape exactly as shown below, set the fill color to black, and then lower its Opacity to 50% and change the Blending Mode to Soft Light.

Step 5

Hit Control-F to add a new copy of your blue text as shown in the first image. Select it and just replace that blue with white.

Select this white text along with the thin black rectangle, go to the Transparency panel, and click the Make Mask button.

6. How to Add Overall Shading

Pick the Rectangle Tool (M), create an 870 x 520 px shape, and place it as shown below. Fill it with the radial gradient shown below, and don’t forget to lower its Opacity to 30%.

Congratulations! You’re Done!

Here is how it should look. I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects. Don’t hesitate to share your final result in the comments section.

Feel free to adjust the final design and make it your own. You can find some great sources of inspiration at GraphicRiver, with interesting solutions to improve your design.

How to Create a Still Life Illustration of German Food in Adobe Illustrator

We’re honouring the Germany, their language and their culture this week in celebration of the launch of the German version of Envato Elements!

In this tutorial, we will create an illustration with delicious German
food. All the elements of this illustration are simple, made from basic
shapes, which will lead you to quick but awesome results. We’re going
to need the Pen Tool a couple of times, but I promise that it won’t be
that hard.

My family and I lived in Germany for four years, and now that we are in
the USA, we miss some hearty German dishes! Envato Market has a
beautiful collection of these delicious German meals. Just try
not to run to your refrigerator afterwards, as we still need to finish
this tutorial! Let’s get to it!

1. Create a Shelf, a Tablecloth, and the Background

Step 1

Start by creating a new document (File > New) with 600 px width and
400 px height. We will first create a shelf where all the foods will be
displayed. Take the Rectangle Tool (M) and create a long, narrow
rectangle.

Step 2

Now take the Pen Tool (P). Don’t be scared—you will just need to click
your artboard five times with this tool. Place the first dot where the
number 1 is in the image below. Then move on to the second position,
then the third and the fourth. The fifth dot has to be exactly where the
first dot is. Change the fill color as shown in the image below.

Step 3

Let’s move on to the tablecloth. We will use the Polygon Tool to make a
triangle. Take the Polygon Tool and click on your artboard. In the new
dialogue window, type 3 Sides with any Radius. Then click OK.

Turn the
triangle upside down: right-click >Transform > Reflect. In the new
dialogue window, check Axis Horizontal and press OK. After that,
stretch the triangle and place it on the shelf. We’re going to turn this
into a Bavarian-themed tablecloth.

Step 4

Select the triangle from the previous step. Now take a look at the
Appearance panel. Click on the tiny triangle in the top-right corner and, in the pop-up menu, select Add New Fill.

Now look at the Swatches
panel. Go to Swatches > Patterns > Decorative >
Decorative_Geometric 1 and select the Diamond Harlequin pattern for this
new fill. Set the Opacity to Color Burn. Our Bavarian tablecloth is
ready!

2. Create a Beer Stein

Step 1

Draw a rectangle using the Rectangle Tool (M). While keeping it
selected, go to Effect > Warp > Arc. In the new dialogue window,
adjust the options as you see in the image below—this is our basic glass
shape.

Step 2

Go to Object > Path > Offset Path. In the new dialogue window,
make Offset -12 px. Make Joins Miter, Miter Limit 4, and press OK.
Change the fill color to what you see below. We just filled it up with
the beer.

Step 3

Delete the fill color and set the stroke color. Using the Ellipse Tool
(L), draw an ellipse. Then take the Direct Selection Tool (A), and move
the left anchor to the right. You will get a handle for our beer stein.

Place the handle on the side of the glass.

Step 4

Delete the stroke color and set the fill color. Hit the Rounded
Rectangle Tool and draw a long rounded rectangle. While keeping it
selected, hold down the Alt and Shift keys together, move it to the
right, but not too far.

Press Control-D once more to move this rounded
rectangle again. Go to Effect > Warp > Arc, as we need to warp it a
little. In the new dialogue window, adjust the options as you see here:

Place warped rounded rectangles on the beer stein. Germans call it Maß
or Mass (pronounced [mas]), which is the Bavarian word describing the
amount of beer in a beer mug, which in modern times is exactly 1 liter
(33.8 US fl oz) (from Wikipedia).

Step 5

Let’s go ahead and place this beer stein on the shelf. It’ll be easier
to draw the foam for our beer since we’ve got a colored background.

Using the Ellipse Tool (L), hold down the Shift key (to draw an even
circle) to draw many small circles representing the beer foam. Once
you’re finished, take the Rounded Rectangle Tool and add a tiny, long, rounded rectangle to show overflowing of the beer.

3. Create a Pretzel

Step 1

I’ve always wondered how to draw a pretzel in a simple way. Different
people have different ways of drawing the pretzel, but I divided the
shape into simple parts, especially for you! So it goes!

First, draw an ellipse with the stroke color from below and no fill
color. Then you need to get a sharp bottom anchor point with the help of
the Convert Anchor Point Tool (Shift-C).

Select the left and right
anchor points using the Direct Selection Tool (A) and shift them up. You
should have a upside-down drop shape.

Step 2

Keep this drop shape selected, and while holding the Alt key, shift it
to the right. You will get two of the same shape. Notice that they still
need to be overlapping. Take the Arc Tool to draw a curve. Place it
upside down on the bottom of the two drop shapes.

Now, check Round Cap on the Stroke panel. Draw two small lines using the
Line Segment Tool () on the bottom part. The simple pretzel shape is
ready.

Step 3

Hold your horses! We need to jazz up our pretzel before we move on.
Let’s sprinkle some salt. Add a few tiny beige rectangles over it. Group
the whole pretzel (Control-G).

Place it on the shelf.

4. Create a Bavarian Spiral Sausage (Bratwurstschnecke)

Step 1

Since it is a spiral sausage, we will use the Spiral Tool to draw it.

First, delete the fill color and set the stroke color you see below.
Then take this tool and click on your artboard. Enter the following
options and click OK. Don’t forget to check Round Cap on the Stroke
panel. Rotate this shape and adjust the handles of the anchor points to
achieve the real shape of the bratwurstschnecke (the German name of this
sausage).

Step 2

To hold this sausage together, Germans pierce it with a wooden skewer.
So let’s delete the stroke color and set the fill color. Draw a long, narrow rectangle. Make it narrower at the top: move the top-left anchor
point to the right, and move the top-right anchor point to the left.

Step 3

Pierce the sausage with the skewer.

And place it on the shelf. Hungry, yet? We’re almost there!

5. Create the Goose

Step 1

Let’s use a beige ellipse for the body of the goose. By moving the
handles of the anchor points, achieve the result you see in the image
below. Notice that the bottom and left anchor points remain intact.

Step 2

Add a small ellipse for the head of the goose. Rotate it a little to the left.

Here comes the next challenging point of the tutorial—another Pen Tool
(P) moment for the goose’s neck because he just can’t live without it.
The top of the neck needs to overlap the head, and the bottom of the neck
needs to overlap the body. Notice that when you’re using the Pen Tool
(P), you need to stretch the handles of the anchor points, not just
click on the artboard as you did at the beginning of the tutorial.

Step 3

Let’s create a beak for our goose. Create an orange ellipse, and then move
the top and bottom anchor points to the left. Move the handles to make
this shape sharper, but not pointy.

Step 4

Give the goose a beak. Add a tiny oval for the eye. And of course, brighten up his eyes by adding a white circle.

Step 5

Make a copy of the beak. We’re going to turn this into a tail. Change
the fill color: using the Eye Dropper Tool (I), take the color from the
body. Place it as the tail of the goose. Let’s make one more copy, but
make it a bit smaller. The tail is now ready.

Step 6

For the wing, create two ellipses where the wing should be. The first ellipse is
darker (below you can see the fill color) and the second, the top one,
is the same fill color as the body. Our goose is done.

6. Create the Traditional Bavarian Hat

Step 1

Start with a green rectangle and add some warp options that you see in
the image below. Finish off with an ellipse on the top. You don’t need
the black stroke on the ellipse—I just marked it to show you where it
should be placed.

Step 2

To create the brim of the hat, we will use a cutout of an ellipse. Cover
one half of the newly created green ellipse with any colored rectangle.
While keeping both shapes selected, press Minus Front on the Pathfinder
panel (Window > Pathfinder).

Step 3

Combine all the parts belonging to the hat together.

Using the Arc Tool,
draw a yellow stroked curve on the hat (without a fill color).

Step 4

Here we will create a simple feather which we will add as a decoration to our traditional German hat.

Draw an ellipse with fill color (R=232, G=216, B=175) and no stroke
color. Warp it by entering the following options below. Add a long, narrow
ellipse over it (fill color R=214, G=196, B=150). Using the Direct
Selection Tool (A), move the left and right anchor points of the new, darker ellipse down. Expand the feather (Object > Expand Appearance).

Step 5

We want to bend the feather for a natural-looking effect. Group the
whole thing together (Control-G) and apply the Warp Options you see
below. Expand the feather again (Object > Expand Appearance).

Place it on the hat but behind the yellow stroke. You can also place the
feather, and then put the yellow stroke over it (Control-X, Control-F).

Step 6

Group the hat together and place it on the head of the goose.

7. Create the Basket

Step 1

Draw a rounded rectangle using the Rounded Rectangle Tool. Cover the
upper part of it with a rectangle of any fill color. Press Minus Front
in Pathfinder (Window > Pathfinder).

Step 2

Add a long rounded rectangle of a lighter color.

Step 3

Delete the fill color, match the stroke color and draw a circle for the
handle of the basket. Make the stroke weight very thick on the Stroke
panel.

Step 4

To show a texture of the basket, we can just draw a few lines over it to show the weaving.

Step 5

And place the goose in the basket!

A little funny story… Once in the middle of the city center in Munich,
I spotted an old man in a traditional German outfit. It was
pretty evident that was his everyday outfit. And there I saw a very big
goose walking near him. It almost looked as though the man had just
descended from the Alps and came to the market to sell his goose as if
it were the Middle Ages! It was quite a strange and funny sight!

Awesome Work, You’re Done!

Place the basket with the goose on the shelf. We are done!

Yay, we did it! Hope you liked this tutorial, and maybe it even sparked some interest in Germany. Keep posting your results and ask me if you have any questions!

placing the goose in basket on the shelf

30+ Design & Illustration Tutorials on Tuts+ for Creative Cat Lovers

It’s long been established that the human race is run by furry overlords known as “cats”. I myself am a slave to two adorable, yet dominant felines who have manipulated my behaviour to overly share their images on social media and make them subjects of many vectors.

For International Cat Day, we at Envato Tuts+ would like to celebrate the awesomeness of cats with a roundup of our favourite tutorials in the Design & Illustration section featuring our feline friends. In addition, our community has shared their own creations for you to check out!

Vector Tutorials for the Feline Fanatic

Photoshop Tutorials for the Crazy Cat Lady

Drawing Tutorials for the Kitty Devotee

Now, I did notice something when I was putting together this list. Monika Zagrobelna and I appear to be the perpetrators of around 80% of cat education on Tuts+ in the Design & Illustration section. Hmmm, let’s side-step that for now.

Submit to Our Feline Overlords!

An article on cat tutorials could not be complete without showing off the art work our community has created. So here’s some awesome work from some of our readers. Thank you to everyone who sent me work to show off for this article!

Artwork by Corine G. You can find her on deviantART and Facebook.

Artwork by Jude Potts. You can find him on Facebook and his website.

Artwork by Kenny Kiernan. You can find him on Twitter and his website.

Artwork by Olga Latif. You can find her on Facebook and her website.

Artwork by Monika Zagrobelna. You can find her on Tuts+, Twitter and her website.

Artwork by Sharon Milne (me!). You can find me on Tuts+, Behance and Facebook.

Artwork by Miss Chatz — Artwork by Miss*Chatz. You can find her on Tuts+, Facebook and her website.

Artwork by Asher Benson. You can find her on Tuts+, Facebook and her website.

Show Us Your Cats!

We’d love to see your felines, be it artwork or photographs of your feline friends. Upload them to the comments, and don’t forget to leave links to your social media and website for others to check out more of your work.

How to Create a Zeppelin Illustration in Adobe Illustrator

We’re honouring the German language and culture this week in celebration of the launch of the German version of Envato Elements!

In today’s
tutorial we’re going to take a look at the process of creating a floating
zeppelin illustration in Adobe Illustrator, using nothing more than a couple of geometric shapes and
tools.

So, assuming you already prepped yourself with a fresh cup of coffee,
let’s jump straight into it.

What You’ll Need

Before we begin, I wanted to point out that the texture that I ended up using for the current project is part of the Subtle Halftone Textures pack (more precisely halftone number five) which you can find over at Envato Elements.

Oh, and don’t forget you can always expand your resource library by heading over to Envato Elements, where you’ll find a great selection of vector graphics.

example of subtle halftone textures — Subtle Halftone Textures by Envato Elements

1. How to Set Up a New Project File

As always, we’re going to kick things off
by setting up a new project file by heading over to File > New (or using the Control-N
keyboard shortcut), and then adjusting it as follows:

Number
of Artboards: 1
Width:
800
px
Height:
600
px
Units:
Pixels

And from the Advanced tab:

Color
Mode: RGB
Raster
Effects: Screen (72ppi)
Preview Mode: Default

2. How to Set Up the Layers

Once we’ve finished setting up our project
file, it would be a good idea to structure our document using a few layers, since this will help us maintain a steady workflow by allowing us to
focus on one section of the illustration at a time.

That being said, bring up the Layers panel and create a total of four
layers, which we will rename as follows:

layer
1: background
layer
2: zeppelin
layer
3: gradient
layer 4: texture

3. How to Create the Background

As soon as we’ve finished layering our
document, we can start working on the actual illustration, and we will do so by
creating the background. So make sure you’ve positioned yourself
on the first layer, and let’s jump straight into it!

Quick tip: before we
start, I wanted to point out that the entire project was built with pixel
perfection in mind, so you might want to check out my How to Create Pixel Perfect Artwork tutorial, which should get you up to speed in no time.

Step 1

Grab the Pen Tool (P), and after setting your Fill color to #7AC6F4, carefully draw
the main shape for the lower background cutout using the reference image as
your main guide.

creating the main shape for the lower background cutout

Step 2

With the Pen
Tool (P) still selected, quickly draw the smaller upper cutout, positioning
the resulting shape as seen in the reference image.

Step 3

Once you’ve finished drawing
the background segments, we can start working on the foreground clouds, which we
will create using some circles of varying sizes. Position them on the sides of the bottom shape, coloring the front ones using #F0FBFF
and the back ones using #D4F7FF.

Step 4

Since we want the shapes to remain constrained to the surface of the
background segment, we’re going to group (Control-G)
and then mask them using a copy (Control-C)
of the underlying shape which we will paste in front (Control-F). Then, with both the copy and the grouped shapes
selected, simply right click > Make
Clipping Mask.

Once you’re done, don’t forget to select and group all of
the current section’s composing shapes using the Control-G keyboard shortcut.

Step 5

Move over to the smaller background segment, and start working on the
sun by creating its glowing halo using a 112
x 112 px circle (#FFCF83) followed by two smaller ones (#FFCF83), each 12 px smaller than the last. Stack them on top
of one another, making sure to lower their Opacity
to just 16%. Once you’re done, add
the actual sun using a 40 x 40 px circle
(#FFCF83), making sure to select and group all four shapes together using the Control-G keyboard shortcut.

Step 6

As soon as you’ve finished creating the sun, mask it using the same
process used for the foreground clouds, so that it will remain bound to the surface
of the underlying shape.

Step 7

Start working on the smaller floating clouds by creating three different
shaped ellipses (#FFFFFF) for each instance. Make them overlap (1), and
then adjust them by first pinching their side anchor points using the Anchor Point Tool (Shift-C) (2). Continue
adjusting their shape by individually selecting their lower anchor points using
the Direct Selection Tool (A) and
then removing them by pressing Delete,
making sure to close the resulting paths using the Control-J keyboard shortcut (3). Once you’re done, select and group
each of the clouds’ composing shapes using the Control-G keyboard shortcut.

Quick tip: to achieve different variations,
simply increase or decrease the width and/or height of the ellipses until you
get the desired shape.

Step 8

Finish off the background by positioning the resulting clouds as seen
in the reference image, selecting and grouping all of the current section’s
composing shapes afterwards using the Control-G
keyboard shortcut.

positioning the smaller floating clouds onto the upper background cutout

4. How to Create
the Zeppelin

Now that we’ve
finished working on the background, we can lock its layer and then move on to
the next one (that would be the second one), where we will take our time and
gradually build our little Zeppelin.

Step 1

Start by creating the main shape for the gondola using a 48 x 12 px rectangle, which we will
color using #664240 and then position on the larger background segment, at a
distance of 288 px from its left
edge and 208 px from its top one.

Step 2

Adjust the shape that we’ve just created by opening up the Transform panel and then setting the Radius of its bottom corners to 8 px from within the Rectangle Properties.

Step 3

Add the window panels using eight 2
x 2 px squares (#F7C263) horizontally spaced 2 px from one another, which we will group (Control-G) and then position as seen in the reference image. Once you’re done, make sure you select and group (Control-G) both the windows and the
larger underlying shape together before moving on to the next step.

Step 4

Start working on the balloon section by creating a 400 x 112 px ellipse, which we will color using #F99178 and then
position on top of the gondola so that it ends up overlapping it.

creating the main shape for the balloon section of the zeppelin

Step 5

Adjust the shape that we’ve just created by selecting and pushing its
center anchor points to the left side by 32 px using the Move
tool (right click > Transform >
Move > Horizontal > -32 px), making sure to shorten the right
anchor’s handles by 15 px in
order to thin out its rear end.

adjusting the shape of the balloon section

Step 6

Add the balloon’s bottom darker section by creating a copy (Control-C > Control-F) of the
resulting shape, which we will adjust by selecting and then removing its top
anchor point. Make sure to close the resulting path using the Control-J keyboard shortcut, coloring
the new shape using #C15142.

adding the darker outer segment to the balloon section

Step 7

Add the inner, lighter section using a second copy (Control-C) of the larger balloon, which
we will paste in front (Control-F). Change its color to #EA7B65, and then individually
select and push its top and bottom anchors to the inside by 16 px (right click > Transform > Move > Vertical > +/- 16 px
depending on which anchor you start with).

adding the lighter inner segment to the balloon section

Step 8

Create the darker bottom half using a copy (Control-C > Control-F) of the resulting shape, which we will
adjust by first changing its color to #D86552 and then removing its top anchor
point, immediately closing the path using the Control-J keyboard shortcut. Once you’re done, make sure you select
and group (Control-G) all of the
balloon’s composing shapes before moving on to the next step.

adding the inner darker segment to the balloon section

Step 9

Add the colored tip using an 8 x
112 px rectangle, which we will color using #664240 and then center align
to the balloon’s left edge, making sure to mask it (right click > Make Clipping Mask) afterwards using a copy (Control-C > Control-F) of the larger
underlying shape.

adding the colored nose section to the balloon

Step 10

Create the nose cone using a 12 x
4 px rectangle (#664240), which we will adjust by individually selecting
and pushing its left anchor points to the inside by 1 px using the directional arrow keys,
positioning the resulting shape so that it overlaps the larger balloon by 2 px.

adding the nose cone to the balloon section

Step 11

Add the main shape for the upper rudder using a 40 x 32 px rectangle (#D86552), which we will adjust by setting the
Radius of its top-left corner to 32 px, its top-right one to 4 px and its bottom-right one to 20 px from within the Transform panel’s Rectangle Properties.

creating and positioning the upper rudder

Step 12

Quickly decorate the rudder by adding the darker vertical section using
an 8 x 32 px rectangle (#664240), which we will mask using a copy of the underlying shape, followed by an 8 x 8 px circle (#664240), which we
will position as seen in the reference image. Once you’re done, make sure you
select and group (Control-G) all
three shapes together before moving on to the next step.

Step 13

Add the bottom rudder using a copy (Control-C
> Control-F) of the one that we’ve just finished working on, which we
will horizontally reflect (right click
> Transform > Reflect > Horizontal) and then position on the
bottom side of the balloon. Make sure to send them underneath all the other
shapes once you’re done (right click
> Arrange > Send to Back).

Step 14

Create the side elevator using a 40
x 8 px ellipse (#664240), which we will adjust by selecting and pushing its
inner anchor points to the left by 4 px, positioning the resulting shape 16 px from the balloon’s rear end.

creating and positioning the side elevator

Step 15

Add the little support segments using four sets of three 4 x 2 px ellipses (#664240), following
the line of the balloon’s inner sections as seen in the reference image. Take
your time, and once you’re done, make sure you select and group all of them
together using the Control-G
keyboard shortcut.

adding the support segments to the balloon section

Step 16

Finish off the zeppelin by adding the side engine using a 12 x 8 px ellipse (#664240), which we
will adjust by selecting and pushing its inner anchor points to the left by 2 px. Position the
resulting shape as seen in the reference image, making sure to select and group
all of the airship’s composing sections afterwards using the Control-G keyboard shortcut.

creating and positioning the side engine

Step 17

As soon as we’ve finished working on the zeppelin, we can add the little
trail lines using three 1 px thick
rounded rectangles (#FFFFFF), which we will position around the ship at a
distance of 8 px.

Step 18

Finish off the illustration by adding a few floating clouds (#FFFFFF), following the same method used to create the background ones. Once you’re done,
don’t forget to select and group all of the shapes together using the Control-G keyboard shortcut.

5. How to Create
the Gradient Overlay

Before we lock the
current layer and move on up to the next one (that would be the third one),
we’ll need to add a copy (Control-C)
of the background’s two cutouts and the zeppelin’s main body to the Clipboard
since we’re going to be using them to create the overlay.

Step 1

We want to start by pasting the copies that we’ve just added to the
Clipboard onto the current layer using the Control-F keyboard shortcut.

pasting the main shapes for the gradient compound shape

Step 2

Next, we need to make our shapes behave as a single larger one by
turning them into a Compound Shape. First select them, and then open up the Pathfinder panel and head over to its advanced menu and hit Make Compound Shape.

creating the compound shape for the gradient overlay

Step 3

Once we’ve created our compound shape, we can open up the Gradient panel and apply a smooth linear
gradient using #662D91 for the left color stop and #FBB03B for the right one.

adding the gradient to the compound shape

Step 4

All we have to do now in order to make the colors pop is open up the Transparency panel and set the
gradient’s Blending Mode to Color Burn, making sure to lower its Opacity to just 30%.

6. How to Add the
Texture

Once we’ve added
the gradient overlay, we can lock the current layer and then move on up to the
last one (that would be the fourth one), where we will finish our little
illustration by applying a nice subtle texture to it.

Step 1

We’ll want to start by first copying (Control-C) and then pasting (Control-V)
the custom texture onto our current layer, making sure to resize it so that it
ends up covering the entire Artboard.

pasting the custom texture onto the current document

Step 2

Once we have the texture in place, all we have
to do is mask (right click > Make
Clipping Mask) it using a compound shape created from the background and the zeppelin’s main shapes (the three that we’ve used a few steps ago), making sure
to lower its Opacity to 60% before hitting finally hitting that
Save button.

Great Work!

As always, I hope
you had fun working on this little project and most importantly managed to
learn something new and useful during the process.

That being said, if you have any questions, feel free to post them within
the comments section and I’ll get back to you as soon as I can!

Want to Learn More?!

If you want to expand your skill set and learn something new and useful, I’ve taken the time to handpick a few tutorials which I strongly recommend you check out!

Creating interesting textures can sometimes be a difficult and annoying task, especially if you don’t know exactly where to start. In this tutorial, you’ll…
Learn to create an instant snapshot of a busy city, using nothing more than some basic shapes and tools in Adobe Illustrator.
Learn how to create a digital version of the awesome Lego Batma using simple geometric shapes in Adobe Illustrator.
Today we’re going to kick it old school, and create one of the most iconic handheld consoles of all time: the original Game Boy. We’ll be using basic shapes…

How to Create a German Flag-Inspired Text Effect in Adobe Illustrator

We’re honouring the German language and culture this week in celebration of the launch of the German version of Envato Elements!

In the following steps you will learn how to create a fully editable text effect inspired by the colors of the German flag in Adobe Illustrator.

For starters, you will learn how to create a simple piece of text. Using the Appearance panel, four simple fills and several effects, you will learn how to create the final text effect. Finally, you will learn how to add a subtle texture and some overall shading to your final design.

We’ll be using a German proverb for the text: Anfangen ist leicht, Beharren eine Kunst. A literal English translation would be Starting is easy, persistence is an art. It highlights how starting something is much easier than seeing it through to the end. Keeping up your motivation is an art form in itself.

For more inspiration on how to adjust or improve your final text effect, you can find plenty of resources at GraphicRiver.

What You Will Need

You will need the following resource in order to complete this project:

1. How to Create a New Document and Create the Text

Step 1

Hit Control-N to create a new document. Select Pixels from the Units drop-down menu, enter 850 in the Width box and 990 in the Height box, and then click that More Settings button. Select RGB for the Color Mode, set the Raster Effects to Screen (72 ppi), and then click Create Document.

You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Also, set the unit of measurement to pixels from Edit > Preferences > Units. All these options will significantly increase your work speed.

Step 2

Pick the Type Tool (T) and open the Character panel (Window > Type > Character). Select the Robinson font and then set the size to 160 px and the tracking to 15. Move to your artboard, click on it, and type your text.

2. How to Create the Text Effect

Step 1

Make sure that your text is selected, focus on the Swatches panel (Window > Swatches), and click that [None] swatch to remove the existing text color. This should make your text invisible, but don’t worry—we’ll fix it in the next step.

Step 2

Make sure that your invisible text is still selected, open the Appearance panel (Window > Appearance), and add a new fill using the Add New Fill button. Select this new fill and set the color to R=255 G=206 B=0.

Step 3

Make sure that your text stays selected, keep focusing on the Appearance panel, and add a second fill.

Select this new fill, move it below the yellow one, set the color to R=221 G=0 B=0, and go to Effect > Distort & Transform > Transform. Drag both Move sliders to 1 px and enter 8 in the Copies box, and then click OK.

Step 4

Make sure that your text stays selected, keep focusing on the Appearance panel, and add a third fill.

Select this new fill, move it below the red one, set the color to black (R=0 G=0 B=0), and go to Effect > Path > Offset Path. Enter a 5 px Offset, click OK, and go to Effect > Distort & Transform > Transform. Drag both Move sliders to 1 px and enter 16 in the Copies box, and then click OK.

Step 5

Make sure that your text stays selected, keep focusing on the Appearance panel, and add a fourth fill.

Select this new fill and move it below the black one. Set the color to black, lower its Opacity to 50%, and go to Effect > Path > Offset Path. Enter a 5 px Offset, click OK, and go to Effect > Distort & Transform > Transform. Drag both Move sliders to 1 px and enter 24 in the Copies box, and then click OK.

Step 6

Make sure that your text stays selected and keep focusing on the Appearance panel. Click that “Type” section to make sure that your entire text is selected and go to Effect > Stylize > Rounded Corners. Set the Radius to 5 px and click OK.

3. How to Create a Background and Add Overall Shading

Step 1

Pick the Rectangle Tool (M) and simply click on your artboard to open the Rectangle window. Set the Width to 870 px and the Height to 1010 px, and then click OK to create your rectangle.

Select this new shape, set the color to R=221 G=0 B=0, send it to back (Shift-Control-[), and open the Align panel (Window > Align). Set the alignment to Artboard (open the fly-out menu and go to Show Options if you can’t see the Align To section as shown in the following image) and then click the Horizontal Align Center and Vertical Align Center buttons. This will quickly move your rectangle to the center of the artboard.

Step 2

Make sure that your red rectangle is still selected, add a copy in front (Control-C > Control-F), and bring it to front (Shift-Control-]).

Select this new shape and focus on the Appearance panel. Select the fill and replace the existing color with the radial gradient shown below. Lower its Opacity to 50% and change the Blending Mode to Soft Light, and then go to Effect > Artistic > Film Grain. Enter the attributes shown below and click OK. Use the Gradient Tool (G) to stretch your gradient as shown below.

Step 3

Make sure that the rectangle added in the previous step is still selected and focus on the Appearance panel. Select the existing fill and duplicate it using the Duplicate Selected Item button. Remove the Film Grain effect applied to this new fill and then increase the Opacity of the new fill to 100%.

Congratulations! You’re Done!

Here is how it should look. I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects. Don’t hesitate to share your final result in the comments section.

Feel free to adjust the final design and make it your own. You can find some great sources of inspiration at GraphicRiver, with interesting solutions to improve your design.

How to Create an Oktoberfest Illustration in Adobe Illustrator

We’re honouring the German language and culture this week in celebration of the launch of the German version of Envato Elements!

Do you know about Oktoberfest in the Bavarian region of Germany? It’s a huge celebration from the middle of September until the beginning of October. The celebration started from the royal wedding of Prince Ludwig and Princess Therese. The wedding was in October, so that’s why the name of the celebration is Oktoberfest. It was in Munich, and all the citizens were invited to celebrate this ceremony in 1810.

I still remember the time I lived in Munich, those beautiful parades with traditionally dressed people, decorated horses pulling flowered wagons. And, of course, rivers of beer…

If you want to see Oktoberfest themed images and get more inspiration, please visit PhotoDune.

In this tutorial, you will learn how to create an illustration on an Oktoberfest theme. We will take basic shapes, warp here, distort there, and as a result we will get a Bavarian man with beer glasses and pretzels. You will learn how to create the pretzels from one of my previous tutorials.

1. How to Create the Head

Step 1

After creating a new document (850 x 850 px Width and Height), we will start by forming the shape of the head. Using the Rounded Rectangle Tool, create a beige rounded rectangle. To get a rounded rectangle with very rounded corners, create a small rounded rectangle first and then stretch it. Or you can go to View > Show Corner Widget and modify the corners by dragging them inside.

Now let’s modify the bottom part of this shape to create the chin. We’ll use the Fish effect: go to Effect > Warp > Fish and enter the options below. Finally, we need to expand this shape. Select it and go to Object > Expand Appearance.

Step 2

For the hair, make a copy of the new shape behind the original one (Control-C, Control-B) and rotate it upside down. Change its color to light brown.

Next using the Ellipse Tool (L), draw an oval with the same light brown color. Take the Direct Selection Tool (A) and move the handles of the anchor points of this oval to achieve the result you see below. To make a sharp edge like the one below, you need to keep the Alt button pressed while moving the handles. If you do not keep this button pressed, the opposite handle to the one you move will also symmetrically move.

Finally, create a slightly darker ellipse behind the shape with the sharp edge. To place it behind, right-click > Arrange > Send Backward, and move it a little to the left.

Step 3

For the eye, create an even circle. For this, use the Ellipse Tool (L) while holding down the Shift key. Now, using the Direct Selection Tool (A), move the left and right anchor points down. This will be the eyelid.

Next, make a copy of this shape in front of the original one, make it a little smaller, and change the color to white and slightly move it to the right.

Add a brown, even circle in front of the white shape, then a smaller darker circle inside.

For the highlight, create a tiny white circle on top.

Step 4

For your convenience, group the eye (right-click > Group).

Now, to create another one, hold the Shift and Alt keys, and move the first eye to the right. You will get another copy of it to complete the eyes.

placing the eye and creating another one

Step 5

For the eyebrow, create a thin horizontal ellipse (the Ellipse Tool (L)). For further modification of this ellipse, go to Effect > Warp > Arc. Enter the options you see in the image below. Expand this shape (Object > Expand Appearance).

Step 6

Place the left eyebrow over the left eye. While keeping the left eyebrow selected, take the Reflect Tool (O) and while holding down the Alt key, click between the two eyes. In the new dialogue window, select Vertical, Angle 90 degrees and press Copy. Now we should have the two eyebrows.

placing the eyebrow and creating another one

Step 7

Let’s make the nose. Using the Eyedropper Tool (I), take the same fill color as the upper eyelid. To take the color you want, select the necessary object, take the Eyedropper Tool (I), and hit with this tool the color you want to take. Then create an ellipse. While keeping it selected, go to Effect > Warp > Inflate. Enter the options you see below in the first image.

Place a new horizontal ellipse covering the bottom part of the vertical one. Keep the new horizontal ellipse selected and again go to Effect > Warp > Inflate. Enter the options you see below in the second image.

Here are the options for the smaller horizontal ellipse:

Once the nose is done, group it (right-click > Group) and put it between the eyes.

Step 8

The mouth contains three half-ellipses. To create one, start with an ellipse, and set its color to white. I made the color a little bit darker so you can see it better. Cover the upper part of the ellipse with any color rectangle. Select both shapes and hit the Minus Front button in the Pathfinder panel. You will be left with a half-ellipse.

Create a copy of this half-ellipse behind (Control-C, Control-B), and make it bigger by stretching it downward. Change the fill color to the same as the face.

Create a third copy behind the previous one (Control-C, Control-B), make it bigger by stretching it downward, and change the fill color to the same as the nose.

Place the mouth where it should be.

Step 9

A good Bavarian man needs a mustache, so let’s give it to him. Make a left anchor point sharp on a newly created ellipse using the Convert Anchor Point Tool (Shift-C). Then take the Direct Selection Tool (A) and move the handles, forming the left piece of the mustache.

Step 10

Place this piece of the mustache over the mouth to cover its upper part. Create a vertical copy of the left part to have the right one.

placing the mustache and creating another one

Step 11

For the cheeks, first make an ellipse, and then move the handles of the anchor points to achieve the result shown below. Notice that the cheek has to be under the mustache. Then create a vertical copy of the left cheek to have the right one.

Step 12

Let’s make the chin. Be sure you have the same fill color as the nose. Make two ellipses. Keep both selected and press the Unite button on the Pathfinder panel. You’ll get one shape.

While keeping it selected, hold down the Alt key and move it up. You will notice that now you have two same shapes, as the Alt key gives you a copy of an object. Make the new copy slightly bigger.

Be sure the bigger shape stays over the smaller one. While keeping them selected, press Minus Front on the Pathfinder panel. Your result—it’s the chin of the Bavarian man.

Place the chin under the mouth.

Step 13

One of the last things we want to give our Bavarian man is an ear (keep the same fill color). Create two ellipses and make them overlap as in the image below. The lower one has to be on top. Press Minus Front on the Pathfinder panel while keeping both selected.

Add an ellipse behind, the same fill color as the face. And rotate the new ellipse a little to the left.

Step 14

Place the ear on the left side of the face. Notice that it should stay behind the face and in front of the hair. Make a vertical reflection of the left ear to get the right one, just as you did with the eyes and mustache.

Our handsome Bavarian man is almost done!

2. How to Create the Hat

Step 1

To create the hat, start with a green ellipse and then warp it: go to Effect > Warp > Arc. Enter the options you can see in the first image. After this, warp it again: go to Effect > Warp > Bulge. Enter the options you can see in the second image.

Here is the second image, where you can see the Bulge options.

Expand the result (Object > Expand Appearance). Then take the Delete Anchor Point Tool (-) and delete the anchor point marked in the image.

Step 2

Create a lighter copy behind this shape: first make a copy (Control-C, Control-B), shift it up, and change the fill color.

Add a tan rectangle as a hat ribbon. Warp the rectangle by entering the options from the image below.

Expand the rectangle and place it behind.

Step 3

Be sure to have the same green fill color as the hat. New ellipses need to be created. Using the Direct Selection Tool (A), move down the left and right anchor points.

Holding the Alt button, move it to the right. Now you have two shapes which you need to unite. So press the Unite button on the Pathfinder panel.

Select the top sharp anchor point marked in the image below and turn it into a smooth one by pressing the Convert selected anchor points to smooth button, which is located over your artboard.

It’s the upper part of the hat.

Place it behind the tan ribbon.

Step 4

For the feather, start with a rounded rectangle. Then go to Effect > Warp > Inflate. After warping, expand this shape.

Step 5

Add a very narrow vertical ellipse as a stem.

Now we want to cut off some parts to make this shape look more like a feather. As a cutter, we will take a triangle. You can make a triangle using the Polygon Tool, or even faster: create any fill color rectangle, take the Delete Anchor Point Tool (-), and delete one anchor point on it. Using the Direct Selection Tool (A), move the anchor points to make the triangle shape you want.

As you have a cutter now, make a few more copies of it. Place them over the main shape of the feather where you want to cut off. Select the feather and all the cutters together and press Minus Front in Pathfinder. It’s done!

Place the feather on the hat. Notice that the upper part of the hat is behind the feather, and the feather is behind the tan ribbon.

Group the whole hat for your convenience.

Step 6

Place the hat on the man’s head, behind it.

3. How to Create the Beer Glass

Step 1

Start with a long, vertical rounded rectangle. Cover its upper part with any color rectangle. While keeping the rectangles selected, press Minus Front in Pathfinder.

Now, make sure you don’t have anything selected, and press the Swap Fill and Stroke (Shift-X) button on the Tools panel. Then, on the Stroke panel, make a very thick stroke Weight and add one more rounded rectangle as a glass holder.

Step 2

Select the main beer glass shape and go to Object > Path > Offset Path… In the new dialogue window, enter Offset around -6 (it depends on your glass size), Joins Miter, Miter limit 4, and press OK. Change the fill color of the new shape.

While keeping the tan shape selected, go to Effect > Warp > Arc Lower. Enter the options you see below.

Step 3

Add a light yellow rounded rectangle for a highlight, and a few circles as bubbles.

Step 4

Then add beige circles to represent the foam, and rounded rectangles of the same fill color for the foam drip.

4. How to Create the Background

Step 1

Hit the Rectangle Tool (M) and click on your artboard. Enter Height and Width 850 px. Set its fill color.

Step 2

Add three darker and smaller rectangles.

Step 3

Using the Direct Selection Tool (A), move their anchor points to achieve a result similar to the image below.

Step 4

While keeping all three shapes selected, make three copies in front (Control-C, Control-F). Don’t take off the selection. Delete their fill color and set a white stroke color. Shift the new copies up.

Step 5

On the Stroke panel, check Dashed Line.

Step 6

Place the Bavarian man and beer on the background. Make one more copy of the beer.

placing all the objects on the background

Step 7

If you would like, you can add pretzels from my previous tutorial to this illustration.

adding pretzels from the previous tutorial

Cheers!

What a great job you did! You have learned how to create not just a person, but a person with a specific nationality, as well as national features. And everything using just basic shapes! Thanks for being with me to the end. I hope to see you again in my next tutorial!

How to Create a Set of Lumberjack Patterns in Affinity Designer

In today’s
tutorial, we’re going to take a close look at the process of creating a set of
lumberjack patterns using nothing more than some basic geometric shapes that
we’re going to adjust here and there in Affinity Designer.

Also, don’t forget you can always expand your library by heading over to GraphicRiver, where you can find a great selection of vector assets.

That being said, grab a fresh cup of that sweet coffee, and let’s jump
straight into it!

1. How to Set Up a
New Project File

We’re going to
start by setting up a New Document
by heading over to File > New (or
by using the Control-N keyboard
shortcut), which we will adjust as follows:

Type:
Web
Document
Units: Pixels
Create
artboard: checked
Page
Width: 720 px
Page
Height: 720 px
DPI: 72

2. How to Set Up the Artboards

Once we’ve created
the document, we need to take a couple of moments and structure our project
using a couple of Artboards, one for each variation, so that we can maintain a
clear and steady workflow.

Step 1

Start by selecting
the default Artboard from within the Layers
panel, and then create two copies by simply right clicking > Duplicate (or by using the Control-J keyboard shortcut twice), which we will then rename as
follows:

first
artboard: first pattern variation
second
artboard: second pattern variation
third artboard: third pattern
variation

Step 2

Since we don’t want
the Artboards to overlap, we’ll first select all three of them from
within the Layers panel (making sure
to start with the bottom one) and then open up the Arrange panel. Here we’re going to use the Align Horizontally > Space
Horizontally option, making sure to uncheck Auto Distribute and enter a custom value of 360 px.

Step 3

Once you have the
Artboards in place, quickly lock each and every one of them using the little
lock button, so that you don’t move them around by accident.

3. How to Create the First Pattern
Variation

Now that we’ve finished setting up our
project file, we can position ourselves on the first Artboard, where we will begin
working on our first pattern variation.

Step 1

Start by selecting
the Rectangle Tool (M) and then
creating the background using a 720 x
720 px square, which we will color using #FF6333 and center align to
the underlying Artboard.

creating the background for the first pattern variation

Step 2

Add the first of the
smaller plain squares using a 120 x 120
px rectangle, which we will color using #2A2033 and then position 60 px from the
Artboard’s left edge, making sure that only its bottom half ends up overlapping
the underlying background.

creating the initial plain square for the first pattern

Step 3

Create the first row of
squares using two copies (Control-C > Control-V) of the one from the
previous step, which we will horizontally distribute 120 px from one another, positioning them as seen in the reference
image. Once you’re done, select and group all three of them together using the Control-G keyboard shortcut.

creating the first row of squares for the first pattern

Quick tip: at this point, I
recommend you start grouping and naming the pattern’s different composing
sections as we go along, so that you can easily target them if you need to
later on.

example of naming the different artboards

Step 4

Add the remaining rows
using three copies (Control-C >
Control-V) of the one that we’ve just grouped, which we will vertically
stack 120 px from the original.
Once you’re done, select and group (Control-G) all of them together before moving on to the next step.

adding the remaining rows of plain squares to the first pattern

Step 5

Start working on the
smaller patterned squares by zooming in on the current Artboard and then
positioning yourself between the top and second row’s first composing
shapes. Once you’re in position, create the first row using eight smaller 8 x 8 px squares (#2A2033), which we
will space 8 px from
one another horizontally, making sure to select and group (Control-G) them together afterwards.

creating the first row of smaller squares for the first pattern

Step 6

Add the second row, using seven 8 x 8 px squares (#2A2033), which we
will position 8 px from one
another, grouping (Control-G) and
then positioning them as seen in the reference image.

adding the second row of smaller squares to the first pattern

Step 7

Create the remaining rows using a few copies (Control-C > Control-F) of the ones
that we’ve just created, which we will vertically
stack on top of one another until they end up filling the gap found between
the two larger squares. Once you’re done, don’t forget to
select and group (Control-G) all of
them together before moving on to the next step.

adding the remaining rows of smaller squares to the first pattern

Step 8

As we did with the larger squares, use a few copies (Control-C > Control-V) of the shapes
that we’ve just grouped to create seven rows, positioning them as seen in the
reference image. Once you’re done, don’t forget to individually select and
group (Control-G) each row, doing
the same for all of them afterwards.

adding the remaining shapes to the first pattern

Step 9

Finish off the current pattern by masking the two larger groups of
squares. You can do this by opening up the Layers
panel, and then simply selecting and dragging them within the background shape.

4. How to Create the Second Pattern
Variation

Now that we’ve finished working on our
first pattern, we can position ourselves on the neighbouring Artboard, where
we will quickly create our second variation.

Step 1

Start by opening up
the Layers panel and creating a
copy (Control-C) of the first pattern’s
background and plain squares, which we will paste (Control-V) onto the current Artboard.

creating the main shapes for the second pattern

Step 2

Using the Rectangle Tool (M), create a 120 x 120 px square (highlighted with
white FFFFFF—which we’re going to use as a clipping mask later on). Position it between the top and second row’s first squares.

creating the smaller reference surface for the decorative square

Step 3

Before we start adding the diagonal lines, we’re
going to want to create a slightly larger reference area using a copy (Control-C > Control-V) of the
previous square, which will help us correctly frame them within this designated
space. Once we have the copy in place, we’ll want to adjust it by setting both
its Width and Height to 128 px from
within the Transform panel.

creating the larger reference surface for the decorative square

Step 4

Once we have the reference shape in place, we’ll
want to grab the Pen Tool (P) and use
it to draw the center diagonal line (#2A2033), making sure to set its Width to 6 px from within the Stroke
panel.

creating the center diagonal line for the decorative square

Step 5

With the center line in place, we can add the
left and right sided ones using seven copies (Control-C > Control-V seven times) for each one, which we will position 16 px from one another, making sure to select and group them
afterwards using the Control-G keyboard
shortcut.

Step 6

Once we’ve added the remaining lines, we can
delete the larger reference square and then go about masking them by first
removing the fill of the smaller white square and then opening the Layers panel and simply dragging the
lines within it.

Step 7

As we did with the previous pattern, take a
couple of moments and populate the Artboard using seven rows of the patterned
square that we’ve just finished working on, which we will position as seen in the
reference image. Take your time, and once you’re done, don’t forget to select
and group all of them together using the Control-G
keyboard shortcut.

adding the remaining shapes to the second pattern

Step 8

Finish off the current pattern by masking its
patterned rows. You can do this by opening up the Layers
panel and then simply selecting and dragging them within the background shape.

5. How to Create the Third Pattern
Variation

We are now down to our third and last
pattern variation, so assuming you’ve positioned yourself on the remaining
Artboard, let’s jump straight into it!

Step 1

Start by creating a
copy (Control-C) of the first
pattern’s background and plain squares, which we will paste onto the current
Artboard, making sure to lower the Opacity of the copied squares to 40%.

creating the main shapes for the third pattern

Step 2

Add the transparent
rows using four 840 x 120 px
rectangles (#2A2033) with a 40% Opacity, which we will vertically stack 120 px from one another, grouping
(Control-G) and then center aligning
them to the underlying Artboard as seen in the reference image.

Step 3

Create the columns
using three 120 x 840 px rectangles
(#2A2033) with a 40% Opacity, which
we will horizontally space 120 px
from one another, grouping (Control-G)
and then aligning the shapes to the center of the Artboard.

Step 4

Finish off the pattern by opening up the Layers panel and
then masking both the rows and the columns by simply dragging them over the
background shape.

6. How to Use the Patterns

So we’ve created all three variations of
the beloved lumberjack pattern, but how do we go about seamlessly using them—especially since Affinity doesn’t have a dedicated pattern tool?

Step 1

You’ll want to start
out by creating a new document using the desired Width and Height values
(in my case, I went with a hefty 2400 x
1600 Artboard) and then copying (Control-C)
and pasting (Control-V) a copy of
one of the three pattern segments onto it.

pasting a copy of the first pattern to the empty artboard

Step 2

Fill in the
remaining surface of the Artboard using a couple of horizontal and vertical
copies as seen in the reference image, making sure they’re perfectly aligned by
using the Align panel’s Space Horizontally and Vertically tools.

It doesn’t really matter if the
pattern segments go outside of the Artboard since we’re going to fix that in a
couple of moments, so just focus on filling it up.

filling in the empty artboard using the pattern segments

Step 3

Once you have all the
pattern segments in place, select and group all of them together using the Control-G keyboard shortcut, and then center
align them to the underlying Artboard, which will ensure that the pattern will
be uniformly applied. Depending on the size of the project, you can always
upscale or downscale the final pattern in order to match your needs.

Great Job!

There you have it—a nice, easy
way of creating three different lumberjack pattern variations using nothing
more than some basic shapes and tools.

As always, I hope you had fun working on
the project and most importantly managed to learn something new and useful
along the way.

If
you have any questions, feel free to post them within the comments section and
I’ll get back to you as soon as I can!

Expand Your Affinity Designer Skills!

Want to expand and improve your Affinity Designer knowledge base, but don’t know exactly where to start? Well, if that’s the case, we took the time and put together this list of tutorials that should get you going in no time!

Learn all about the experience of switching from Adobe Illustrator to Affinity Designer, and the key obstacles to overcome.
Affinity Designer is a powerful program that allows you to create and combine both raster and vector graphics. This A to Z list breaks down all the tools and…
In this video, you’ll learn how to set up grids in Affinity Designer. Learn to master the key features of both the standard grid and the isometric grid.
In today’s tutorial, we’re going to embark on a creative journey into the magical land of Minecraft and learn how to create our very own cute little…

How to Create a Showroom Background With a Red Carpet in Adobe Illustrator

In this tutorial, you will learn how to use the Mesh Tool in Adobe Illustrator to create a showroom background with spotlights and a red carpet!

If you want to skip the tutorial and just use this vector in your work, purchase Showroom Background With A Red Carpet from GraphicRiver!

1. How to Draw the Pedestal

Step 1

Begin using the Mesh Tool (U) to create the top of the pedestal.

Draw a long, narrow ellipse and fill it with the #D9DDDD color.

With the Mesh Tool, add some mesh nodes inside the ellipse as shown below, and then select the nodes on the edge of the shape and recolor them with #C6CBCB.

Step 2

Draw a narrow rectangle, coloring it with #CACFCF. Then bend it: Effect > Warp > Arc, setting the Bend to -12%.

Select the shape and go to Object > Expand Appearance, and then begin to add mesh nodes inside, following the screenshot below.

Color the edges of the shape with #7A8688.

Step 3

Start with a rectangle filled by #8D9899, and then bend it with Arc and -14% Bend.

Use the Mesh Tool to color the edges of the shape with #252A2B and the other pictured nodes with #B0B8BA.

Step 4

Put all the parts together to assemble the top platform.

Step 5

Create a Blend shadow out of two ellipses: one white, and one filled with #555656.

Make the white ellipse transparent, and then go to Object > Blend > Blend Options, setting it to Specified Steps, 30.

Finally, select both shapes and apply Object > Blend > Make and set the object’s Transparency mode to Multiply.

Step 6

Place the shadow under the upper platform, and then create two bigger copies of it (Scale at 125%) to create the full pedestal.

2. How to Draw the Carpet

Step 1

Draw two shapes as shown below, filling them both with #BC0F09.

Step 2

Create a #BC0F09 rectangle, bend it with Arc at -3% Bend (Expand Appearance!), and then add some mesh to color the outer edges with #940E09.

Step 3

Draw another shape, using these colors:

#B20E08
#3C0705
#7D0B07

Step 4

#B20E08
#4D0805
#6F0A06

Step 5

#BC0F09
#940E09

Step 6

#B20E08
#3B0705
#700B07

Step 7

Construct a carpeted step with the parts you made, and then make a slightly bigger (125%) copy of the whole group.

Step 8

#700B07
#C00F09
#470504

Step 9

Construct the whole carpet out of the objects we made.

Step 10

Attach the carpet on top of the platform.

3. How to Draw the Spotlights and Background

Step 1

Draw the shape with mesh, and then set its Transparency mode to Screen with 60% Opacity.

#000000
#F5F5F5
#B9B9B9

Step 2

Create a Blend out of white and black ellipses (just like in section 1, step 5).

Step 3

Create another black ellipse and set the Blend on top of it.

Group (Control-G) both objects, and then set the group to Screen.

Step 4

Finally, create an ellipse with a Radial Gradient from white to #020200, and then set it to Screen.

Step 5

Set up the shapes we made to look like the picture below—it should look like the screenshot on both the white and the grey background.

Step 6

Draw the top part of the showroom background.

#0F1614
#718180

Step 7

Draw the lower part of the background.

#0F1614
#BFD0D0

Step 8

Combine all the elements to create your showroom background!

vector showroom red carpet mesh spotlight tutorial

Awesome Work, You’re Now Done!

What now? You can try any of my other tutorials from my profile or check out my portfolio on GraphicRiver, as well as the original vector we recreated in this tutorial.

I hope you enjoyed the tutorial, and I would be super happy to see any results in the comments below.

How to Create a Garden Gnome Illustration in Adobe Illustrator

Do you like garden gnomes? Learn how to create a garden gnome illustration in Adobe Illustrator.

For more images and inspiration, be sure to visit GraphicRiver to check their vector characters collection.

Let’s get started!

1. How to Create the Head of the Gnome

Step 1

After you’ve created a new document, let’s start to create the gnome. Use the Ellipse Tool (L) to draw an ellipse (fill color R=240, G=208, B=180). While keeping it selected, go to Effect > Warp > Fish and, in the new dialogue window, enter the options you see below. Then press OK.

Step 2

Change the fill color to R=140, G=88, B=56. Again, using the Ellipse Tool (L) and while holding down the Shift key (to create an even circle), create a tiny circle for the eye of the gnome.

To get the other eye, select the one you just created and hold down the Shift and Alt buttons. The Alt key will create a copy for you, and the Shift key will keep it perfectly aligned. So, while holding these two keys, move the existing eye to the right. You’ll notice that you just created another eye.

Change the fill color to R=232, G=1182, B=1450 and draw a small horizontal ellipse for the nose.

Step 3

Let’s create the mustache. Set a white fill color and draw an ellipse using the Ellipse Tool (L). While keeping it selected, go to Effect > Warp > Flag and, in the new dialogue window, enter the options you see below. After pressing OK, expand the shape (Object > Expand Appearance). Keep in mind that you do not need the black stroke—it’s just there so you can tell it apart from the background.

Step 4

Place the mustache behind the nose, or place the nose over the mustache (Control-X, Control-F). Next, while keeping the mustache selected, take the Reflect Tool (O) and click under the nose while pressing down the Alt key. In the new dialogue window, enter Axis Vertical, Angle 90 degrees and then press Copy. That’s how you’ll get the right part of the mustache.

You may have already noticed that the eyebrows are a copy of the mustache, which have shrunk vertically.

Step 5

To get the beard, create a copy of the head behind (Control-C, Control-B), and stretch it horizontally. Keep in mind that you don’t need the stroke color—it’s there just for better visibility.

Every self-respecting gnome must have a red cap. So hit the Polygon Tool and click on your artboard. Enter Sides 3 with any Radius in the new window. Change its fill color to R=228, G=65, B=69.

2. How to Create the Body

Step 1

Change the fill color to green (R=129, G=175, B=69) and draw an ellipse. Use the Rectangle Tool (M) to create a rectangle of any color overlapping it. You have to cover just the bottom part of the ellipse.

Select both shapes and in the Pathfinder panel (Window > Pathfinder) press the Minus Front button. You’ll end up with one half of the ellipse which will be the upper body of the gnome.

Place the upper body under and behind the head.

Step 2

Set a darker fill color (R=111, G=147, B=55) and using the Rectangle Tool (M) draw a thin vertical rectangle on the upper body, behind the gnome’s head.

Change the fill color to yellow (R=221, G=176, B=64) and draw a horizontal rectangle, as we’re going to create the belt.

Make the fill color darker (R=191, G=121, B=29) and draw a tiny circle on the belt.

While keeping it selected, and while holding down the Shift and Alt keys, move the circle to the right. You’ll get a new copy of it. After that, press Control-D a few times, as this combination will create more copies that are perfectly aligned.

Delete the fill color and set the stroke color to R=249, G=208, B=93. Select the Rounded Rectangle Tool and draw a small rounded rectangle for the belt buckle.

Finally, add a tiny line using the Line Segment Tool (/). The gnome’s belt is finished!

Step 3

To create the bottom part of the gnome’s body, simply create a copy of the upper part and turn it upside down.

Change the fill color to R=186, G=112, B=32.

Step 4

Let’s create the red boot for our gnome. First, draw a red rectangle (R=228, G=65, B=69).

While keeping it selected, go to Effect > Warp > Arc Upper and enter the options you see below. Expand this shape (Object > Expand Appearance).

After that, create a triangle the same way as you created the gnome’s hat. Place the triangle as shown in the image below. That will be the upper part of the boot.

Step 5

As we want our gnome boots have curled toecaps, we need to create a kind of crescent shape for it. Draw two overlapping circles as shown below. Be sure the smaller one is on top.

Then press the Minus Front button on the Pathfinder panel (Window > Pathfinder).

how to create the curled toe cap for the boot

Place the crescent shape on the boot we created. Make sure you don’t have any stroke color on the boot and it is grouped (right-click > Group).

how to combined all the parts from the boot

Step 6

Place the boot as shown below.

Now let’s make another boot. Select the existing one and create a copy of it in front (Control-C, Control-F). Then hit the Reflect Tool (O) and press the Enter key on your keyboard. In the new dialogue window, enter Axis Vertical, Angle 90 degrees and then press OK. After that, move the new boot to the right.

With a lighter fill color (R=252, G=114, B=114), draw a thin horizontal rectangle on top of the two boots. Then warp it (Effect > Warp > Arc).

how to place the boot and create another one

Step 7

To make sure the two legs are separated, draw a thin, black, vertically oriented rectangle where the two legs have to be divided.

Now, be sure your Transparency panel is open (Window > Transparency). Change the Opacity on the Transparency panel to Soft Light and lower the Opacity to 60%. See how the rectangle changed its color?

how to create visiual division of the legs

Step 8

We won’t create a new shape for the arms. Instead, we’ll create a copy of the upper body behind (Control-C, Control-B). Change its fill color to R=111, G=147, B=55. Stretch it down to the belt.

Then, draw a horizontal rectangle (R=178, G=211, B=127) behind the body and in front of the arms.

Change the fill color to R=240, G=208, B=180. Create a small ellipse and place it behind the whole body. It will be the left hand.

While holding the Shift and Alt keys, move the left hand to the right and you’ll get the right hand.

Delete the fill color and set the stroke color to R=232, G=182, B=145. Take the Arc Tool and draw a small curve to create the thumb of the gnome.

Create the same curve on the other hand. And your gnome is done!

3. How to Create the Background

Step 1

Take the Rectangle Tool (M) and click on your artboard. In the new dialogue window, enter Width and Height 850 px and press OK. A big square will appear on your artboard, which is going to be the background. Make sure the background stays in the middle of your artboard. Set the fill color to R=244, G=234, B=208.

Place the gnome on the background.

Step 2

Let’s create the fence. Set the white fill color with no stroke and draw a small rectangle.

Using the Pen Tool (P), put a new anchor point on top and in the middle of the fence. Using the Direct Selection Tool (A), move the new anchor point up. This will be the first wooden bar of the fence.

While holding down the Shift and Alt keys, move this wooden bar to the right. Then press Control-D a few times to get a line made of these bars.

Add a little darker horizontal rectangle in the middle of the line. The fence is done!

Place the fence behind the gnome and in front of the background.

Step 3

Add one more horizontal rectangle (R=242, G=224, B=184) where the gnome will stand.

4. How to Create the Trees

Step 1

Delete the fill color and set the stroke color to R=209, G=170, B=120. We will start with the trunk and branches. Draw a long, thick, vertical line, which will be the trunk. You can increase the stroke Weight on the Stroke panel (Window > Stroke).

Decrease the stroke Weight, take the Arc Tool, and draw a few branches.

Decrease the stroke Weight even more and draw some smaller branches.

Step 2

Using the green fill color (R=129, G=175, B=69) and no stroke color, create a bunch of ellipses as the foliage. The black strokes on the image will guide you.

Change the fill color to a darker green (R=111, G=147, B=55) and create even more ellipses behind the branches. The first tree is done!

Step 3

Let’s create an apple. Start with a red (R=228, G=65, B=69) ellipse that is rotated to the left.

Create a copy of it in front (Control-C, Control-F). Hit the Reflect Tool (O) and then immediately press the Enter key twice. You just created a vertical reflection of the red ellipse. Move the new copy to the right, but not too far—just enough to get the shape of an apple.

Delete the fill color and set the stroke color to (R=224, G=203, B=155). Using the Line Segment Tool (/), draw a stem for the apple.

Step 4

Create a green ellipse (R=178, G=211, B=127). Then, using the Convert Anchor Point Tool (Shift-C), make the anchor points sharp by clicking on the left and right anchor points. You’ll get a simple leaf shape.

Step 5

Place the leaf on the apple. Group the apple, make copies, and spread them on the tree.

Step 6

In a similar way, we’ll create the pear tree. First, draw the trunk, and then add bigger and smaller branches.

Then add the leaves (fill color R=131, G=153, B=77).

Step 7

Make sure you don’t have any stroke and have the fill color set to R=249, G=208, B=93. Create a yellow ellipse.

While keeping it selected, go to Effect > Warp > Fish. Enter the options you see below. Expand the shape.

Add a stem (stroke color R=209, G=170, B=120).

Add green leaves (fill color R=178, G=211, B=127). And group the whole pear.

Step 8

Spread copies of the pear on the tree.

Step 9

Place the two trees we just created in front of the background but behind the gnome. And you’ve finished your illustration!

how to place the trees on the background

Conclusion

I hope you enjoyed going through this tutorial with me. Feel free to post your result—it’s always interesting to see.

If you enjoyed this tutorial, why not try some of my others:

Tutorial Assets

1. How to Open a New Document

2. How to Prepare the Text

Step 1

Step 2

3. How to Create the Wafer Layers

Step 1

Step 2

Step 3

4. How to Create and Apply a Wafer Pattern Brush

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

5. How to Color the Wafer Pattern Squares

Step 1

Step 2

6. How to Create Shading on the Wafer Pattern Squares

Step 1

Step 2

7. How to Create Highlights on the Wafer Pattern Squares

Step 1

Step 2

Step 3

8. How to Create Texture on the Wafer Letters

Step 1

Step 2

Step 3

Step 4

9. How to Create the Melted Chocolate

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

10. How to Create a Shadow Under the Melted Chocolate

Step 1

Step 2

Step 3

11. How to Add Details and Shine on the Melted Chocolate

Step 1

Step 2

Step 3

Step 4

Step 5

12. How to Add a Shadow Under the Wafer Letters

Congratulations! You’re Done

What You Will Need

1. How to Set Up a Grid and Create the Background

Step 1

Step 2

Step 3

2. How to Create the Main Text

Step 1

Step 2

3. How to Create the Blurred Half of the Text

Step 1

Step 2

Step 3

Step 4

4. How to Create the Other Half of the Text

Step 1

Step 2

5. How to Create the Sleek Highlights

Step 1

Step 2

Step 3

Step 4

Step 5

6. How to Add Overall Shading

Congratulations! You’re Done!

1. Create a Shelf, a Tablecloth, and the Background

Step 1

Step 2

Step 3

Step 4

2. Create a Beer Stein

Tutorial
Assets

1. How
to Open a New Document

2. How
to Prepare the Text

Step
1

Step
2

3. How
to Create the Wafer Layers

Step
1

Step
2

Step
3

4. How
to Create and Apply a Wafer Pattern Brush

Step
1

Step
2

Step
3

Step
5

Step
6

5. How
to Color the Wafer Pattern Squares

Step
1

Step
2

6. How
to Create Shading on the Wafer Pattern Squares

Step
1

7. How
to Create Highlights on the Wafer Pattern Squares

Step
1

Step
2

Step
3

8. How
to Create Texture on the Wafer Letters

Step
1

Step
2

Step
3

Step
4

9. How
to Create the Melted Chocolate

Step
1

Step
2

Step
3

Step
4

Step
5

Step
6

10. How
to Create a Shadow Under the Melted Chocolate

Step
1

Step
2

Step
3

11. How
to Add Details and Shine on the Melted Chocolate

Step
1

Step
2

Step
3

Step
4

Step
5

12. How
to Add a Shadow Under the Wafer Letters

Congratulations!
You’re Done

4. How to Create
the Zeppelin