The COVID-19 pandemic has made face masks become a necessity as well as a part of our ‘new normal’ day-to-day lives. Some of us can have fun while making a small contribution to that situation by easily creating our own custom face masks!
In this tutorial, I will show you how to create a half-face mask design, using Adobe Illustrator, and upload it to the Placeit mockup generator to create a face-mask mockup.
What You Will Learn in This Face Mask Tutorial
How to plan and set up a half face mask design file
How to vectorize a cat snout illustration using Adobe Illustrator
How to create a mockup using Placeit
What Will I Need to Make a Designer Face Mask?
For this fun face mask design tutorial, I have decided to create a half-face kitten snout artwork, because who doesn’t love kittens!
You’ll need access to the following programs:
Placeit.net (mockup generator for the final presentation)
If you would like to save time, you can learn how to make a face mask with design elements and resources easily accessible from Envato Elements.
1. How to Set Up a Half Face Mask File Design File
Launch Adobe Illustrator.
First, set up a New Document (File > New or Command-N) with these settings:
Number of Artboards: 1
From the Advanced Tab:
Color Mode: CMYK
Raster Effects: Screen
Preview Mode: Default
Typically, I would sketch out a design and upload it to Illustrator before vectoring. However, illustrating a cat snout is quite basic and easy to draw, so we can easily improvise and create a fashionable kitten face mask without needing to sketching one first.
First, let’s set up our Ruler Guides to the center of the artboard. The center is where we will place our kitten nose.
To view the Rulers, choose View >Rulers > Show Rulers or Command-R.
To create a Ruler Guide, move your pointer onto the vertical ruler guide and drag the guide onto the 400 px mark, the center of our 800 px length.
By default, the guides are unlocked, so we need to Lock the guides by selecting View > Guides > Lock Guides.
Now let’s turn on the Smart Guides (Command-U) to help us align our artwork, and then open the Layers panel (Window > Layers).
On the Layers panel, name ‘Layer 1’ as ‘BACKGROUND’ and click the Create New Layer icon. Name the new layer ‘KITTEN SNOUT’.
2. How to Draw the Base of the Kitten Snout
Begin by working on the ‘BACKGROUND’ layer, where we will create the background cat snout color and face pattern.
From the Tools menu, select the Rectangle Tool (M) and apply a sandy brown Fill of #c1a8a1, with null Stroke color. With the help of the Smart Guides, draw an 800 x 400 px rectangle on the artboard.
Next, we will draw a basic egg-shaped snout. Select the Ellipse Tool (L) and apply a white Fill with null Stroke color.
Draw an ellipse in the center of the artboard, approximately 168 x 168 px. The Smart Guides will help you center it on the artboard.
Then grab the Direct Selection Tool (A), select the top anchor point of the ellipse, and drag it up as shown to create an egg-shaped snout.
With the egg selected, we need to offset the shape to create the cat head pattern behind the snout.
Object > Path > Offset Path
Offset: 10 px
Miter Limit: 4
Give the offset shape a color Fill of #d8c7c4.
Now, select the Pen Tool (P) from the Tools menu, and draw a shape similar to the one shown in the image below.
The Smart Guides will help you align with the edges.
Use the Direct Selection Tool (A), hold down the Shift key to select the two center anchor points. This will enable the Live Corners widget, which is the white circle icon displayed next to a selected corner. Drag the Live Cornerswidget with the Direct Selection Tool (A) to convert the corners into round corners. The corner will be highlighted in red when you reach the proximity of the Live Corners widget.
Now let’s reflect the rounded shape to the other side of the artboard.
Simply select the rounded shape, and pick the Reflect Tool (O). Set the center reference point to the center of the artboard, where the guide is; Option-Shift-Drag and release when the shape is mirrored across.
Now, use the Selection Tool (V), hold Shift to select both rounded shapes, and then we need to place the shapes back behind the white snout shape: Object > Arrange > Send Backward(Command-[).
When you are done, go to the Layers panel, Lock the BACKGROUND layer, and move onto the ‘KITTEN SNOUT’ layer.
Moving on, let’s add some blush to our kitten’s cheeks.
Grab the Ellipse Tool (L) and draw an ellipse of about 160 x 120px. Then choose the RotateTool (R), and rotate the ellipse by -21°.
Open the Transparency panel: Window > Transparency. Setthe Transparency to 50%.
Then let’s feather the edges so that it looks like a blush. Effect > Stylize > Feather and set the Radius to 19 px, and then pick the Reflect Tool (O). Set the center reference point to the center of the artboard, where the guide is; Option-Shift-Drag and release when the shape is replicated across.
When you are done, Lock the ‘BACKGROUND’ Layer in the Layers panel, and move onto the ‘KITTEN SNOUT’ layer.
3. How to Illustrate a Kitten Snout Face Mask Using Adobe Illustrator
Now it’s time to draw the features of a kitten snout. We will draw one side, and then mirror it to the other side.
We will start with the basic triangular-shaped nose. Grab the Pen Tool (P), set the stroke to 4 pt from the top menu bar, and apply a black stroke color.
Take the Direct Selection Tool (A), hold down the Shift key, and select the two center anchor points shown below to round the Live Cornerswidgets.
We need to create a nostril. Grab the Ellipse Tool (L) and draw a circle of 41 px around the inside of the nose, as shown below.
Open the Pathfinder: Window > Pathfinder. Select both shapes with the Selection Tool (V), and apply the Divide action from the Pathfinder panel. Then grab the Direct Selection Tool (A) to select and delete the excess circular shape.
Now let’s draw the kitty’s lip line. A kitten’s mouth is the shape of an anchor. We can easily draw that using the Rounded Rectangle Tool from the Tools menu.
Draw a vertical rounded rectangle of about 60 x 115 px from the mirror edge of the nose to the left, as shown below.
Then grab the Scissors Tool (C) and cut along the rounded rectangle stroke as shown in the image below, and delete the excess stroke.
Let’s give the nose some color.
Take the Selection Tool (V), select the nose, and Ungroup (Command-Shift-G) the divided shape, so we can give each shape a different color fill. Give the nose a color Fill of #d7817e. Then select the nostril and give it a color Fill of #441718.
Open Stroke panel (Windows > Stroke). Select the mouth anchor stroke, and apply a Round Cap to make the mouth look smoother.
Now let’s add some whiskers. When we draw cartoon cats, we usually put three dots on the snout of the cat. These common spots are the “pores” where the whisker follicles are. So to draw these dots, we can simply select the Blob Brush Tool (Shift–B).
Select a color Fill of #c0a7a0 and just click on the artboard area to add your three dots. If you need to modify the width of the brush, use the ] key to increase the brush width or the [ key to decrease.
Next, we’ll add some whiskers. Take the Pen Tool (P). Apply a black Fill and null stroke color, and freehand draw three curved whiskers, as shown below.
OK, now that half of our kitten face is ready, Command-A to Select All.
Click O for the Reflect Tool and set the center reference point on the center guide; Option-Shift-Drag and release to mirror the shapes across. The kitten face mask design is looking cute so far!
The kitten’s nose is currently split by the two shapes, so we need to join it together.
Take the Selection Tool (V) and hold the Shift key to multiple select both nose shapes. Head over to the Pathfinder panel and select Unite from Shape Modes to combine the two shapes.
Now you should have a full nose.
Next, we just need to add a few more features to complement the design, one being the mouth opening.
Grab the Pen Tool (P) and apply a Fill of #7d6c70. In the Tools menu, you will find the Draw Behind mode, which will allow you to draw behind all objects.
Use the Pen Tool (P) to draw a curved triangle along the lip line, as shown. The Smart Guides will help you align the anchors.
Now let’s give the kitten a blushed lip.
With Draw Behind mode still selected, take the Pen Tool (P) and apply a pinkish Fill of #d785a2. Use the Smart Guides to draw an aligned, wavy lip form, similar to the one below.
To create a blushed lip look, we need to Feather the selected lip shape(Effect > Stylize > Feather). Apply a Radius of 6 px, and click OK.
And for the last feature, we need to add a chin.
Take the Pen Tool (P). Apply a black Fill and null stroke color, and then draw a smile like the curve below the snout, the same as the one in the image below.
Finally, Save the file (File > Save).
4. How to Create a Placeit Face Mask Mockup
Now that our illustration is ready, we need to Export it to create our half face mask design mockup in Placeit.
Click Upload Image to upload the exported ‘Kitten_Face_Mask.jpg’.
Crop the upload if needed, and then you can customize the ‘Happy Little Girl’ Image by adding a logo, text, and graphics if you like. Give it a go and try it out!
Meow! Your Custom Face Mask Design Is Ready
Now that you know how to make a designer face mask, go ahead and create other bottom half face mask designs and use any of Placeit’s cool face mask mockups to make various designs and share them in the comments below. We’d love to see what you cool face mask designs you come up with.
See some of the different designs of face masks I created here, and if you’re interested in other creative designs and fun mockups, check out these cool roundups of tutorials below.
Italy is responsible for some of the world’s greatest creations.
While not everyone may appreciate all of the fine arts produced by Italy, one thing nearly everyone can agree upon is that Nutella is one of the greatest gifts Italy has brought into the world.
Nutella’s marketing team has decided to design 30 new casings for their creamy jars of goodness. They are designed to show off Italy’s beautiful scenery.
And boy is Italy beautiful. Not only does Italy have some of the most notable natural landmarks in the world, but it also contains some of the greatest marvels of the ancient world.
Nutella’s parent company, Ferrero, created these new designs to increase awareness of tourism in their county. Working together with Italy’s board of tourism, the team is attempting to spark interest in tourism one travel restrictions are lifted.
Because a certain virus has crippled much of the countries tourism industry, Nutella is offering a new way to visit these historic landmarks.
If you simply scan the QR codes on the newly designed jar of Nutella, your mobile device will take you on a virtual tour of these landmarks.
The CEO of Ferrero said, “In this difficult moment for [the] tourism sector of our economy, Nutella and ENIT [will] showcase to Italians their greatest national wealth: the beauty of Italy itself, the true and real one, made of nature and art, cities and villages, seas and mountains, the envy of the world.”
We look forward to the day when we can go see these landmarks in person. Until then, we will just have to enjoy the great taste of Nutella and look forward to that day!
In this tutorial you’ll learn how to use variants in Figma. Variants are a relatively new Figma feature; with them you can easily group and organize multiple versions of the same component.
Figma Skills You Will Learn in This Tutorial:
How to save color styles in Figma
How to use Figma auto layouts
How to create and use Figma components
How to convert components into variants in Figma
How to add a property for a variant in Figma
How to make a poker app
For more inspiration on how to adjust or improve your game UI design you can find plenty of resources on Envato Elements. Elements is home to thousands of UI and UX kits, compatible with your favorite design tools (including Figma) for one single subscription price!
What You Will Need:
You will need the following resources, available with your Envato Elements subscription, in order to complete this tutorial (but feel free to use your own alternatives if you prefer):
In this tutorial we’ll use the iPad game UI design shown at the top of the page to demonstrate how to work with variants in Figma.
What is a Figma Variant?
If you’ve ever worked with components in Figma, you’ll know that they can speed up your UI design process where you need to reuse objects. Buttons are a perfect example of where you’d want to use components.
Figma variants allow you to create a single component where you’d otherwise create several, instead allowing you to switch between variants of that component. For example, in a minute we’ll be creating a poker chip component which has several variants depending on the color we want to use:
Let’s jump in!
1. How to Create Variants in Figma
Select the Ellipse Tool (O) and hold down the Shift key while you click and drag to easily create a 24 px circle.
Focus on the right sidebar and change the Fill color of this shape to #FFB400, and then click the quadruple dot icon to open the Color Styles flyout panel. Click the Create Style button (+), name it Yellow, and then click the Create style button.
Your color should now show up in the Color Styles panel and you can easily use it whenever you wish.
Make sure that your circle stays selected and click the Stroke section from the right sidebar to add a Stroke.
Change the color to white (#FFFFFF) and increase the size to 3. Make sure that the alignment is set to Inside, and then click that triple dot icon to open the Advanced Stroke flyout panel. Enter 5, 5 in the Dashed box to make the stroke dashed, as shown below.
Once you’re done, open the Color Style flyout panel and save the color use for this stroke as a color style. Name it White.
Using the Ellipse Tool (O), create an 18 px circle and place it as shown in the first image.
Don’t bother to fill this new shape, but add a Stroke. Change its color to #EBA000 and keep the alignment set to Inside and the size to 1.
Select both circles made in this step and Group them (Control-G). Move to the left sidebar, inside the Layers panel, and rename this new group Chip 5.
Hold down the Alt key and simply click and drag a copy of your group. Select the main circle from this new group and replace the Fill color with #F5444C. Save this color as a color style and name it Red.
Select the smaller circle inside this new group and change the Stroke color with #E13038.
Move to the Layers panel and rename this new group “Chip 10”.
Add four more copies of your group and replace the existing colors with the ones shown below.
Don’t forget to save the five colors indicated in the following image.
Once you’re done, move to the Layers panel to rename these new groups: Blue – “Chip 25”, Green – “Chip 50”, Purple – “Chip 100”, LightBlue – “Chip 500”.
Using the Ellipse Tool (O), create one more 24 px circle. Fill this new shape with #CED4DD and add a White stroke. Increase the stroke size to 3 and make sure that the alignment is set to Inside.
Switch to the Text Tool (T) and type in a simple “D”. Use the Montserrat font, set the style to Bold and the size to 14, and then change the color to DarkBlue. Place this small piece of text as shown in the second image.
Select that small piece of text along with the circle that lies in the back and Group them (Control-G). Move to the Layers panel to rename this new group “Chip Dealer”.
Now, select all your chip groups and click the Create Multiple Components button from the toolbar to turn all your groups into separate Figma components.
Make sure that all your components are selected and click the Combine as Variants button from the right sidebar. This will merge all your components into one component with seven variants.
You can easily rename this new component in the Layers panel. To rename a variant or a property all you have to do is double click it, in the right sidebar.
Now you can click and drag your Figma component from the Assets panel and add it to your design.
You can easily select the desired Figma variant from the drop-down menu in the right sidebar.
2. How to Use Figma Variants for a Button
Using the Text Tool (T) add the “DESK:50$” piece of text. Use the Motserrat font, set the style to Bold and the size to 10, and change the color to White.
Make sure that this text is selected and press Shift-A to add Auto Layout. Move to the right sidebar to increase the Horizontal Padding for the auto layout to 15, and keep the Vertical Padding and the Spacing Between Elements set to 10.
Keep focusing on the right sidebar and add a Fill and a Stroke for your auto layout.
Set the Fill color to DarkBlue and the Stroke color to White. Increase the stroke size to 2 and make sure that the alignment is set the Inside.
Go to the top of the right sidebar and set the Corner Radius to 20, and then move to the Layers panel to rename your auto layout “Command”.
Make sure that your auto layout is still selected and turn it into a Figma component using the Create Component button (Control-Alt-K) from the toolbar.
With this new component still selected, focus on the right sidebar and use the + button from the Variants panel to add a new variant for your component. Name it “All In”.
Select the element that makes up this second variant, change the Stroke color to Purple and replace the text with “ALL IN:50$”.
You can also return to the Variants panel and pick a different name for that Default variant.
You can also add a new variant for a component using the + button from the bottom right corner of the frame. Let’s click it and select the newly added button.
Change the Stroke color to Yellow and replace the text with “CHECK:50$”. Don’t forget to rename this new variant “Check”.
Let’s also add an icon for this “Check” variant. Using the Pen Tool (P), create a tiny arrow, as shown in the following image. You can go to View > Pixel Grid to enable the Pixel Grid which will make it a lot easier to create this path.
Set the Stroke color to White and increase the size to 2.
In order to make this arrow button a part of your variant, all you have to do is drag it inside the button.
Enlarge the frame of your component to make some space for the next variants.
Add a fourth variant, rename it “Call” and select it. Change the Stroke color to Blue and replace the text with “CALL:50$”, and then select that arrow icon and rotate it 90 degrees, as shown below.
Add a fifth variant, rename it “Raise” and select it. Change the Stroke color to Green and replace the text with “RAISE:50$”, and then select that arrow icon and rotate it 90 degrees, as shown in the second image.
Add one last variant, rename it “Fold” and select it. Change the Stroke color to Red and replace the text with “FOLD”, and then remove that arrow icon.
Using the Pen Tool (P) or the Line Tool (L), create an oblique path, as shown in the first image. Duplicate this path (Control-C > Control-V) and rotate the copy 90 degrees.
Select both copies to Group them (Control-G) and move this icon inside the fold button, as shown in the final image.
As with the other component, you can drag your button component from the Assets panel and add it to your design.
You can easily select the desired Figma variants and keep in mind that you can adjust the text as you wish.
3. How to Use Properties and Variants in Figma
Using the Rectangle Tool (R), create an 80 x 104 px shape, make sure that it stays selected and focus on the right sidebar.
Set the Corner Radius to 5, change the Fill color to Red and the Stroke color to White, and then increase the stroke size to 5.
Using the Rectangle Tool (R), create two, 35 x 37 px shapes. Fill both rectangles with #E13038 and place them as shown below.
Select these three rectangles and Group them (Control-G). Move to the Layers panel and rename this new group “Card/Back/Large”.
Using slash / for names makes it a lot easier to convert components into variants. You’ll learn more about this technique and exactly how it works a few steps later.
Pick the Rectangle Tool (R) and create an 80 x 104 px shape. Set the Corner Radius to 5 and change the Fill color to White.
Using the Text Tool (T), add a simple “A”. Use the Odudo Mono font, set the style to Bold and the size to 38. Remember to check the Text Align Right button and change the text color to DarkBlue, and then place your text as shown in the first image. Having the text aligned to right will come in handy if you will choose to replace the “A” with a “10”.
Next, you will need the clubs icon from this 15 Gambling and Casino Icons Pack. Copy it inside your document and focus on the right sidebar. Make sure that you have the Constrain Proportions option active, set the Height to 25 px and change the Fill color to DarkBlue. Place your icon as shown in the second image.
Select the clubs icon and the “A” along with the white rounded rectangle and Group them (Control-G). Move to the Layers panel and rename this new group “Card/Clubs/Large”.
Add three copies of your latest group and replace the clubs icon with the other three icons.
Once you’re done, move to the Layers panel and rename the new groups accordingly.
Pick the Rectangle Tool (R) and this time create a 40 x 52 px shape. Set the Corner Radius to 5, change the Fill color to Red and the Stroke color to White, and then increase the stroke size to 3.
Using the same tool, create two, 17x 23 px shapes. Fill both rectangles with #E13038 and place them as shown in the second image.
Select these three rectangle, Group them (Control-G) and rename this new group “Card/Back/Small”.
Pick the Rectangle Tool (R) and create another 40 x 52 px shape. Set the Corner Radius to 5and change the Fill color to White.
Switch to the Text Tool (T) to add an “A” and use that same Odudo Mono font, set the style to Bold and the size to 19. Remember to check the Text Align Right button and change the text color to DarkBlue, and then place this text as shown in the second image.
Add a copy of your clubs icon, lower the Height to 12.5 px and place it as shown in the second image.
Select all three elements and Group them (Control-G). Move to the Layers panel and rename this new group “Card/Clubs/Small”.
Add three copies of your latest group and replace the clubs icon with the other three icons, and then move to the Layers panel to rename the new groups accordingly.
Before we turn all these groups into variants let’s better understand the use of this slash naming system. The text before the first slash is always used to name your component. The text after the first slash will be used to name all variants that will be available for the first property while the text after the second slash will be used to name the variants that will be available for the second property. Let’s turn all these groups into variants and see how easy it can be.
Make sure that you have all the groups selected, go to Create Multiple Components and then click the Combine as Variants button.
As you can see in the right sidebar, this will create the “Card” component (text before the first slash), with two Properties. Property 1 contains the 5 variants (Back, Clubs, Spades, Hearts, Diamonds) that were set after the first slash and Property 2 contains the 2 variants (Large, Small) that were set after the second slash. You can always double click a Property to rename it as you wish.
As with any component, you can easily drag it from the Assets panel and add it to your design, and you can select the desired Figma variants from the drop-down menu in the right sidebar.
Don’t forget that you can also adjust the text making it so much easier to create different cards.
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 Envato Elements, with interesting solutions to improve your design.
Want to Learn About More Figma Features?
We have loads of tutorials on Tuts+, beginner to intermediate level, take a look!
The cardboard sleeve to an 8-track tape cartridge offers less space than the cover for a 12″ vinyl record. Instead of scaling the illustration down beyond recognition, just a detail with Domino’s face was used. The type was rearranged accordingly, too.
A rare sighting of the pre-digital Cooper Nouveau Swash 7! The bolder variant, Swash 10, was much more popular back in the day. At least that’s what I have to assume from the examples we have documented on Fonts In Use so far.
Cooper Nouveau was drawn by Dave West around 1966. Photo-Lettering’s One Line catalog from 1971 shows threestyles; the upright Cooper Nouveau, an amorphous take on Cooper Black, and the italic Cooper Nouveau Swash in twoweights named 7 and 10. The bold weight was copied by Lettergraphics in or before 1969 as Funky. Letraset’s Lazybones from 1972 seems to be heavily inspired by it, too.
After House Industries had acquired the Photo-Lettering assets in 2003, they invited West’s namesake Dave Foster to digitize Cooper Nouveau. For some reason, the revival covers the lesser known light style only. It was made available around 2015 through photolettering.com, a site that reimagined the original PLINC experience of ordering settings of exclusive alphabet designs for the digital age. Despite this marvelous idea, the service apparently didn’t really catch on, as it has been retired a while ago. In November 2020, the digital Cooper Nouveau was added to the retail library of House Industries and made available for conventional licensing.
A Scatter of Stardust is “a skyful of science fantasy gems” by E.C. Tubb (1919–2010). It was published as Ace Double 79975, together with Technos by the same author. The cover art is by Karel Thole (1914–2000).