Web Development: How to Make a Face Mask Mockup (Using a Face Mask Generator)

How to Make a Face Mask Mockup (Using a Face Mask Generator)

Final product image — What You'll Be Creating

Face masks have become an essential item for many of us in the world, and creating a face mask mockup design can be a great way to experiment with reusable options. Have you considered designing or creating your own face mask, rather than relying on disposable ones?

You can do so right now, from the comfort of your browser—no experience or software necessary.

Change colors, add images, and customize these face masks using a face mask generator, like Placeit.

We're going to do so with an online tool called Placeit. It's a browser-based design tool, and it can do a lot of really fun things. Whether you're looking to test out your artwork on a face mask mockup, T-shirt design, or a book cover, Placeit can do that.

However, it's an online design tool, too. You can design logos, work with video templates, and more, all from the comfort of your browser. If you're a beginner, it's super user-friendly and easy to dig right in. If you're an advanced designer or creative professional, it can be a fun and convenient addition to your design workflow.

We're going to create a face mask mockup design in this walk-through. Check out a sample of what you can work with. It's really only the tip of the iceberg.

PlaceIt — Create your own Face Mask Mockup Designs today, in your browser, using Placeit.

1. How to Make a Face Mask Mockup

Step 1

Let's dig right in.

First, you'll need to decide on a design that you'd like to preview in Placeit's face mask generator. You could use one of your illustrations, a custom-made pattern, a photograph, fabric you've found, a texture, or something else. There are plenty of possibilities.

One thing to note here—make sure you have appropriate usage rights for the content you'd like to use in your project. This isn't a problem if you've designed your assets yourself or you've purchased them (like purchasing fabric at a store or licensing a stock image).

However, it would not be appropriate to "take" any image you find from the Internet, especially if you intend to commercially distribute your masks. Respect other content creators and their copyright.

If you're looking for copyright appropriate content, there are plenty of great sources out there. For this demonstration, we'll use these patterns from Envato Elements. Feel free to download them if you'd like to work along—or use any imagery of your choosing.

Seamless Pattern Face Mask Generator — You can find a wide variety of graphics and seamless patterns to experiment with on Envato Elements

Step 2

Now, let's head over to Placeit.

There is a lot to choose from. Placeit has a wide variety of mockups, and it's also an online design tool. Feel free to browse around.

However, for this walk-through, we're specifically going to work with face mask mockup designs. You can click on Mockups to begin, and browse the many mockups available.

Type Face Mask into the search bar, at any point in your browsing, to check out the gallery of face mask mockup templates.

Step 3

Next, it's time to browse through the gallery of face mask mockups. There's plenty to see, so feel free to scroll and check out ones you might be interested in.

Here's the one that we'll use in this walk-through. Remember, it's free to experiment with mockups, so you can get started with no cost or obligation.

Click on the face mask mockup that you'd like to customize with your artwork. We'll be using the one highlighted below. Click here or click on the image below to try it out.

Step 4

Here's our face mask mockup, ready to be customized. Each mockup has different attributes that you can customize. In this case, we have the following:

We can customize the image itself. This includes things like the background color and the color of the stock item (in this case, the fabric mask). You can also add graphics outside of the face mask itself, such as a logo or your watermark, if you'd like one.
Then, we can also customize the mockup item. For example, we could add imagery, text, and even a logo to the mask. Note, this would not consider a flat or base color for the mask—that would be the image itself.

Some fabric mask mockup designs on Placeit may have other features you can customize, such as additional background elements, effects, and color changes. Make sure to check them out.

Note, if you're trying out Placeit on your tablet or mobile device, some of the options may be located in a different spot. However, they all function in the same way.

Step 5

Let's begin by customizing the mockup item. For this design, an 800 x 400 image is the ideal for an image overlay onto the face mask mockup. However, we can use an image that is not that exact measurement. Placeit has a handy, in-browser cropping tool for just such an occasion.

Let's begin by clicking on Upload Image.

Step 6

Next, choose an image from your computer. Placeit then allows us to resize and crop the image before we place it onto the mockup.

Once you're happy with how your image is cropped, just click on Crop.

Step 7

Now, our image has been placed onto the face mask mockup. Looks great, right?

We can also add text on the side of our work area. For this example, let's add some sample text that says "Stay Safe".

Click where it says Add Text.

Then, we can type whatever text we'd like here. We can also change the Text Color and the Text Background Color. Set the Text Color to any color you prefer—I went with white. Then, set the Background Color to transparent, unless you'd prefer a different color.

We can click and drag to position our text in the composition. It doesn't necessarily have to be on the mask. Check out my example below.

Step 8

We also have the option to upload a logo. To so do, click on Upload Logo, as highlighted below.

This process is the same as uploading an image. However, unlike our previous example, this image will not be uploaded directly to the mockup. We can move and adjust this image throughout the entire composition.

This can be a great choice for adding something like a watermark or logo to your work.

In this example, I added a logo design from Envato Elements to the bottom corner of the composition. Consider adding your own logo or slogan, or keep this blank if you prefer.

Step 9

Next, let's check out the options on the opposite side of the work area. In this mockup, we can change the Mask Color and the Background Color.

To do so, click on the color under each option. This will open a color picker. Choose a new color, and your choice will be updated in the mockup. Give it a try—it's easy!

Step 10

Want to start over? You can click on Reset Layout in the corner of your design mockup. This will reset the design to its original state.

Try applying your pattern to several different face mask mockups to get a feel for how it will look in action.

Here's a look at another face mace mockup design, using the same techniques we just discussed. It's free to test mockups out, so give it a shot!