In today’s tutorial we’re going to learn how to create a set of messenger stickers to share on our chat apps. We will use basic Adobe Illustrator geometric
shapes and tools, grasping some quick, useful tips along the way.
I have roughly sketched out the concept that we will be creating: the numbers from 10 to 1 in various balloon forms and fireworks. If you're looking to speed up your workflow or buy similar illustrations, you can always head over to GraphicRiver to buy graphics to decorate the pack.
Let’s start popping with our balloon countdown!
In order to complete this tutorial, you'll need the following:
- Sniglet Font
1. How to Set Up the New Project File
Start up Adobe Illustrator.
Let’s set up a New Document (File > New or Command-N) using the following settings:
- Width: 512 px
- Height: 512 px
- Units: Pixels
- Number of Artboards: 11
- Color Mode: RGB
- Click Create
2. How to Illustrate the Balloon Shapes & Numbers
Begin by typing in the countdown numbers, 10 to 1.
Open the Character panel: Window > Type > Character (Command-T). Select the Type Tool from the Tools panel. Choose a bubble-like font; for example, I used Sniglet. Set the stroke color to null, with black fill color.
From the Character panel, set the font size to 215 pt, and type onto each Artboard the corresponding countdown number, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, and leave the last artboard empty.
Let's begin drawing our balloon shapes.
First you need to transform all the type into objects. To do so, Select > All (Command-A), to select all the numbers. Next, Type > Create Outline, to turn the numbers into objects.
From the Tools panel, select the Pen Tool (P), and set the stroke color to black, with no fill color. Draw in all the balloon shapes freehand except the circular ones, for which you can use the Ellipse Tool (L).
Then from each artboard select the elements, expand them gradually to fit within the artboard space, and rotate them slightly to create a floating illusion.
Next, take the Selection Tool (V), select all the black filled numbers, and Shift-X as a shortcut to swap fill with stroke color.
Then select the balloon shapes and Object > Path > Offset Path. Set Offset at -13px and Joins: Round, then OK.
Object > Ungroup (Command-Shift-G), to ungroup them from one another.
Select the Pen Tool (P), from the Tools panel, keeping the black stroke color, with no fill. Draw the inner balloon highlight and shadow areas.
We need to put in the balloon strings.
Start by opening the Brushes panel: Window > Brushes. Then from the panel menu: Open Brush Library > Show Calligraphic Brushes > Artistic > Artistic_Calligraphic library.
Choose the 10pt Calligraphic Brush, from the Artistic_Calligraphic library. Then select the Paintbrush Tool (B), with a black stroke, no fill, and draw the balloon strings for each balloon.
File > Save (Command-S).
3. How to Color & Add Effects
First, give the following colors to the inner, outer and balloon knots:
- Pink: Inner (
#FA3D9E) : Outer (
#FFA1D5) : Knot (
- Blue: Inner (
#2B8EF9) : Outer (
#5FD2FF) : Knot (
- Red: Inner (
#F63536) : Outer (
#FF9CBB) : Knot (
- Green: Inner (
#71BA0B) : Outer (
#ABED27) : Knot (
- Yellow: Inner (
#FFDC0D) : Outer (
#FFFB73) : Knot (
Make sure to change the stacking arrangement of your objects as you move along.
To Arrange top or bottom in position: Object >
Arrange > Bring to Front (Shift-Command-]) or Object > Arrange >
Send to Back (Shift-Command-[).
To Arrange one step front or back: Object > Arrange > Send Backward (Command-[) or Forward (Command‑]). Object > Arrange > Bring Forward.
Give the fireworks red and yellow colors.
Next, let's add gradient color to the numbers.
Open the Gradient panel: Window > Gradient. Apply the following gradients:
#FFBC00set at -90° angle
#E01C1Dset at -90° angle
#5F9B00set at -90° angle
Next, let's add some highlights.
Open the Transparency panel: Window > Transparency. Take the Selection Tool (V) and select all the balloon highlights. Remove the black stroke color, and select Fill (X).
Then from the Transparency panel, set Blending Mode to Screen. On the Gradient panel, choose a white fill for the left gradient slider, and set an Opacity of 80%, fixed at a -45° angle.
Afterwards, choose a white fill on the right gradient slider, and set its Opacity to 0%.
Then move on to placing the shadow gradients.
Start with the shadow area of the pink: Take the Selection Tool (V) and select all the balloon shadow areas. Remove the black stroke color, and select Fill (X). Choose Blending Mode: Multiply, from the Transparency panel.
Then on the Gradient panel, choose a dark pink color fill on the left gradient slider, and set Opacity: 80%, at a 120° angle. On the right gradient slider, keep it white and set Opacity at 8%.
Repeat the same steps for the other shadows, except match the dark color gradient slider with the respective colors, so dark red slider with red, dark green on green balloons, etc.
After, with the Selection Tool (V), select each balloon string and give it a stroke color of your choice. Make sure all are sent back: Object > Arrange > Send to Back (Shift-Command-[).
Let's add some shine.
From the Tools panel, under the Paintbrush Tool (B) dropdown, select the Blob Brush Tool (Shift-B). Select a white fill.
Then choose a Blob Brush Tool size by holding the left square bracket key ([) to decrease and the right square bracket (]) to enlarge the brush size, to draw some shine blobs on the balloons.
Afterwards, add highlights to the numbers.
Use the Blob Brush Tool (Shift-B), but instead of a white fill use light color tones, and apply Screen: Blending Mode from the Transparency panel.
Let's draw some confetti!
Draw the confetti using the Paintbrush Tool (B). Use the 5pt Oval brush from the Artistic_Calligraphic library and use a 2-3pt Stroke Weight.
Try drawing confetti swirls with different colors and stroke weights.
Add more confetti using the Ellipse Tool (L), Star Tool and Rectangle Tool (M), and use different colors and shape sizes. Note: Don't draw tiny elements.
Then Arrange to the front or back: Object > Arrange > Bring to Front (Shift-Command-]) or Object > Arrange > Send to Back (Shift-Command-[).
Next, we need the numbers to pop out a bit.
Use the Selection Tool (V) to select the numbers inside the balloons: 10, 9, 7, 5, 4, 3, and 1. Duplicate the selection by Shift-Option-Dragging slightly lower.
Give the selection a yellowish gold color
#CCB842. Then set the Blending mode to Multiply, from the Transparency panel.
You will need to Arrange one step back: Object > Arrange > Send Backward (Command-[.
Finally, use the Selection Tool (V) to Group (Command-G) each balloon with its respective parts, center it on the artboard, scale it, and modify anything you find misfitting.
File > Save (Command-S).
4. How to Export & Share
Once you've finalized the artwork, you need to Export your files.
File > Export > Export As, and select a location for the file. Make sure to choose a PNG format, and select Use Artboards to Export.
Set the PNG Options settings:
- Resolution: Screen (72 ppi)
- Background Color: Transparent
Now that you have created your sticker set, it's time to upload it.
Head over to Sticker Market, and Register yourself a Creators Account, and wait to get verified. This is a relatively quick process, compared to other sites. Once you are verified, fill in your details.
Follow the sticker upload Guidelines. Upload the set, fill in the description, price and tags, and Save.
On the next page, select the type of Action and Emotion for each sticker. Fill in the details and Save for submission.
Wait for approval, and your stickers will be ready for the public to purchase.
10, 9, 8, 7, 6, 5, 4, 3, 2, 1.....Congratulations!!!
Hope you had fun following this tutorial and you were able to learn some useful tips.
I would love to see what you create! Please feel free to share your sticker designs with us.
Count down, have fun, and share with your friends on chat messengers like WhatsApp, Viber, Line, iMessage and more on Android or iPhone!
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post