In this post, we’re going to show you how to create transparent backgrounds for your mockups. Along with how to add mockup background images from Unsplash and colors, gradients, and textures.
Let’s dive in, shall we?
How to customize your mockup background images.
If you haven’t yet got the Mockuuups Studio downloaded, click the “try it free” button in the top right corner of this page.
While the mockup background editor is part of the premium plan. You can try it free for 7 days (which is plenty to get you started.)
Oh… and if you’re a Figma or Sketch user, be sure to get the plugin.
STEP 1: Choose a device in the Studio
Assuming you’ve booted up Mockuuups Studio, start by clicking “open studio” in the top left of the grid.
Here you can choose from dozens of phones, tablets, and computers — ranging from the latest models to older classics.
STEP 2: Customizing your background
Once you’ve selected your device. Now it’s time to customize your mockup background. If you click the “background” tab up top, you’ll be presented with five options:
- Transparent Backgrounds
- Color Backgrounds
- Gradient Backgrounds
- Textured Backgrounds
- Unsplash Photo Backgrounds
Let’s explore these now.
How to make transparent mockup backgrounds
By selecting transparent mockup backgrounds, you can tweak your mockups after exporting. This is perfect for making social media creatives when mockups are just a part of the puzzle.
For those looking to add a backgrounds URL to a photo mockup, platforms like Picmonkey make it simple.
How to change the background colors on a mockup
We often get asked – “How do you add a white background to a mockup?”
If you head over to the color tab, you can choose a background color from the curated selection, or go ahead and create your own colors from the color palette.
The great thing about selecting colors is you can save presets for future use.
How to add gradient backgrounds to mockups
If we head over to the gradient tab, you’ll find several presets to choose from. You can go subtle with two similar colors, or bold with contrasting colors. Below the color options, you can choose where the fade happens with the slider, or change the direction with the gradient knob.
How to add textured backgrounds to mockups
Now it’s time for textured mockup backgrounds. In this tab, you can choose from categories including, paper, walls, marble, wood, and fabrics.
Textured mockup backgrounds are perfect for realistic views of devices on real-life surfaces.
How to add photos to mockup backgrounds
Adding photo mockup backgrounds is a breeze in Mockuuups Studio thanks to the Unsplash integration. If you don’t know what Unsplash is, it’s one of the world's largest collections of stock images. Instead of having to download images and add them to mockups separately, you can access Unsplash’s huge image library inside Mockuuups Studio.
Simply enter a search term, and you’ll find millions of images to choose from!
STEP 3: Saving and exporting your mockup template
Once you’ve selected your mockup background, head up to the top right and click “save mockup.”
Once saved, export your mockup at your preferred resolution. Saved mockups will be added to your mockup collection where you can go ahead and add your screenshots.
STEP 4: Adding your screenshots
To add your screenshots, all you need to do is open up the blue image icon at the bottom left of the studio, and you’ll be presented with a couple of options. You can either upload your screenshots or enter a website URL and have Mockuuups Studio take a screenshot for you.
Don't worry… You won’t have to format your images for every mockup. Mockuuups Studio formats images to the entire collection for you.
Get Inspired
Endless mockup customizations
You’ve created a custom mockup background, but why stop there?
Mockuuups Studio lets you customize device colors, add ethnically diverse hands, and select shadows and overlays — giving you over 788 million mockup combinations.
We created Mockuuups Studio so you could create scenes no one else is using as if you were in the photo studio shooting scenes with us.
Here’s a run-through of the customization options:
What you should do now
Now you know how to customize your mockup backgrounds the easy way. Head up to the top right of this page, download Mockuuups Studio, and get started.
If you’d like more tips and tricks on how to make mockups no one else is using, sign up for our newsletter. Every month, we get the camera out and shoot fresh mockup scenes, so sign up to be the first to know about it.
