An attractive way to showcase your digital product is with a digital mockup. You’ve probably seen images of ebook covers strategically placed on a tablet or a desk. Perhaps you’ve seen pages layered to show the content included in a specific download. It is easier than you might think to create a digital mockup for your product.
To get you thinking about how you can use a digital mockup, below are a few that I’ve created.
Digital Mockup Basics
A digital mockup can be used in a variety of ways. If you have a lead magnet, you can visually showcase what will be provided if a new subscriber signs up for your email list. While including a written description is important, a compelling visual can help to create the desired action.
When creating a product listing for a digital download, including a digital mockup helps the customer visualize the product they are purchasing. You should consider your target audience when creating a digital mockup and utilize elements that are appealing. The background image should connect with your target customer.
For example, the two images shown below connect with a very different audience. In the upper image, the school supplies, colorful pens and star-shaped eraser immediately convey that this is a product for use with children. Compare that to the next image which features an organized desk scene and healthy snacks. The target audience for the lower image is registered dietitians. The background is carefully selected to connect with the target audience. For more information on these listings, click here to visit Yellowbrick Nutrition’s store on RD2RD.
With a digital product purchase, it isn’t possible to touch or review a physical item before purchase. The product listing image and description must be thoughtfully designed to connect with the target customer and convey both the content, quality and expertise.
It is also important to note that in some internet searches, only your listing image may be displayed. The listing image should provide enough detail about the product to generate a click for more information. A well-designed digital mock-up is an excellent way to accomplish this.
How to Create a Digital Mockup Tutorial
Let’s dive in. This tutorial provides step-by-step instructions as well as video demonstration of the steps.
To create a digital mockup in 3 easy steps
- Create a page image (i.e. selected pages from your ebook, handout or toolkit)
- Create a “canvas” or background for your page image
- Add page image to canvas
Want to watch this article as a video, click play below.
Step 1: Create a page image
The digital mockup requires that you have a page(s) of your download as an image. While printing and then taking a picture of a page is a possibility, it isn’t necessary. You can create a beautiful image featuring pages from your download without ever taking a picture.
A page image can be tricky if you created your digital download in a word processing software program or another program that doesn’t allow you to easily save the file as an image (i.e. png or jpg) file type.
If you do not have your download already saved in PDF file format, read “Part 1A.” If you already have a PDF file of your digital download, skip to “Part 1B.”
From word processing tool (or other software), save your file as a PDF file type. In Microsoft Word, choose File, Save As and then select PDF.
Once you have a PDF of your download, you can convert page(s) to an image. I refer to this as a “page image” in this tutorial. A page image is simply a image file for a page of your downloadable product. Think of it as if you printed out the product and then took a picture of a specific page.
There are a number of ways to accomplish this, but the easiest way I’ve found to convert PDF pages to JPG is using the website, Smallpdf.com.
Choose PDF to JPG from the available options. Browse and upload your PDF file. Select “convert entire pages.” After converted, download all pages as a zip file or download selected individual pages.
In this example, I only want to include the cover image in my digital mockup, so I will download just the cover page image. Save the image file in a location you can easily find in the future.
Step 2: Create a Canvas or Background for Your page Image
Create a canvas that is sized for your purposes (i.e. square for social media). RD2RD listing images are 930 pixels wide by 700 pixels high. This is a custom size (not available as a template). For this demonstration, the listing image size for RD2RD will be used.
Part 2A: Create a Blank Canvas for Your Design
Login to Canva® (create a free account if needed). Click “Create a Design” button from the upper left. Then select “use custom dimensions” from the upper right-hand corner. Enter 930 as the width (pixels) and 700 as the height (pixels) and then click “Design.”
Alternatively, you can select a template listed (i.e. square social media graphic).
Part 2B: Select a Background Image
You now have a blank canvas to begin to design your digital mockup. The page image created in step 1 will eventually be added to the canvas after creating a visually-appealing backdrop.
Select a background image your canvas. You can use a picture you’ve taken or royalty free stock photography. You can also use a color or pattern instead of an image. I’ll show you how to use both a background image and solid color background.
Sites with free images include Unsplash, Pexels and Pixabay. Paid sites such as Depositphotos and Getty Images are also a great option. Look for images that have an area that you can place your digital product on. Include the word “background” in your search to bring up best results. For example, “office background” or “kitchen background.”
Below are two examples of background images shown before and after the page image was added. These stock images were purchased from Depositphotos. The third example uses a solid color background, not an image to show this alternative.
Part 2C: Upload Background Image
Upload your background image to Canva so you can then add it to your canvas to create the backdrop for your page image.
From the left-hand tabs, select “Uploads.” Click “Upload your own image.” Browse and select the file you wish to use for your background. Once the upload is complete, you will see a thumbnail of the uploaded image.
Part 2D: Add Background Image to Canvas
After the image has been uploaded, it will be available to be added to your canvas. To add the image to the canvas, click the desired image from uploads area. The image will be placed on the canvas and you can then manipulate and adjust it.
Resize the background image so that it covers the canvas that you created. Don’t be concerned if parts of the background image extend beyond the perimeter of the canvas. When downloaded, only the portion of the image on the canvas will be included. Note in the image below, the dotted lines showing the edge of the image extend beyond the perimeter of the canvas.
This is a good time to point out that depending on the purpose of the digital mockup, you may need to browse for a background image that is correctly shaped for your purposes. For example, a square social media graphic will provide less space for you position your page image than a landscape image you might include in a blog post.
Before moving on, I want to provide one additional tip. In the below images, you can see that the background in the top image appears to be muted or has a transparent effect. This allows the digital product to stand out more and not get “lost” in the background.
It is easy to create this effect in Canva. For a long time, I could see this effect used by others, but couldn’t figure out how to create it myself.
To add the transparent effect above, you need to add a white square over the image and then adjust the transparency, so you can see the background image. Here’s how.
Select “Elements” from the left-hand tabs, then shapes and select the first option, a square.
Resize the square to completely cover the canvas and change the color to white. To adjust the size, click and drag the edges of the shape. The image below shows how to select white from the available colors. If you prefer, you can choose a color other than white.
Adjust the transparency of the shape as desired. The higher the number, the more white (less transparent) the shape will be.
Using Solid Color Background
If you prefer, you can use a background color or pattern instead of an image. Canva offers preset colors or you can specify a hex code if you have established brand colors.
To change the background, from the left-hand tabs, select “background.” Select an available color or add a custom color.
The example below uses a solid color background.
Using Pattern Background for Mockup
Patterns are also available, and a selected number are free to use. If you choose one that isn’t free, you will be required to pay prior to downloading the image. Feel free to explore options. The dominant colors in the backgrounds can be changed as well.
Below is an example of a digital mockup that utilizes a pattern for a background not an image.
In the comprehensive tutorial video, I will show you how to add additional shapes, such as the red square below and text to your canvas.
Step 3: Add page image to your background
Upload your page image created in step 1 to Canva. Click “Uploads” from the left-hand tabs, then “Upload your own images” and browse and select the page image files you downloaded from smallpdf.com. If you downloaded multiple pages as a .zip file, you will first need to extract the files before uploading each page image to Canva.
You can add the page images directly to the canvas or you can position them to display in a digital device such as a tablet, as shown in prior example pictures. If it is a product that is intended to be printed, showing the pages on a desk is a great option. If you have an e-book, online course or webinar that is intended to be viewed electronically, you may want to consider showing it in an environment that would be easily recognized by the customer.
Below are a couple of examples showing different options.
To add the uploaded page image to your background, click the uploaded image and it will be dropped on the canvas. You can then rotate the image and resize by clicking and dragging the corner.
To add the page image to a tablet, you can either choose a background that has a computer screen or tablet already included or you can add an element directly from within Canva. For this demonstration, I will show how to add a tablet element and then add page image to the tablet.
Delete the page image previously added by clicking on the page image and then clicking the trash can in the upper right-hand corner of the page.
To Add a Tablet to Background
Canva offers a number of elements such as icons, shapes and images. You can search for what you are looking for by using the “Search” tab on the left-hand side navigation.
To add a tablet to your background, use the search term “tablet.” Note that the results show two types of options. There are both frames which allow you to easily drop in an image and a basic picture of a tablet. In the picture below, the arrow is pointing to the “frame” and you can see that inside the tablet, it shows a placeholder for an image. You will be putting the page image you previously created in this frame.
Click the image of the tablet to add it to your background. Re-position and resize the tablet to fit as desired.
The next step is to add your page image to the tablet and crop as needed. Select “Uploads” from the left-hand navigation. Click and drag the uploaded page image over the tablet until it snaps in to the frame. Once in the frame, you can crop and resize. Don’t be alarmed if it doesn’t look exactly like you want initially.
To crop and resize the image within the frame (tablet), click the tablet and then select crop. Move the image by clicking and dragging or change the size by dragging corner. Once you are satisfied, click the check mark to accept or the “X” to revert to prior settings.
You can then add text by clicking on the “text” tab and dragging over text. To position the text over a color block as shown in prior images, first add a shape such as a square. Shapes are found in the “Elements” tab. For step-by-step instructions, watch the tutorial video for this article.
Download Your Finished Product!
The final step is to download the mockup you’ve created. You can give your file a name (Canva saves all changes automatically), then click the download button. PNG is the preferred image file type, but you can also select JPG.
Creating a digital mock-up does require a few steps and some new skills, but it allows you to showcase your digital product. Digital mock-ups allow you to bring your product to life by carefully selecting a background that attracts your ideal customers, convey expertise and quality.
A digital mockup can be used for both paid and promotional products. For growing your email list, you can feature a stunning image of your free download you provide to new subscribers. Show above your email sign-up forms, it is sure to create more action than just text alone.
For paid products, your digital mockup is essential. You can use the image to highlight both the contents of your product as well as highlight special features. A high quality listing image with a digital mockup helps your product sell.
Go ahead, create a mock-up! You can always improve once you know the basics!