Tutorial Create A7 Envelope Card Mockup in 3 Minutes

In this tutorial, you will learn how to create a mockup to present an A7 Envelope Card using a free stock photo. Looking to improve the presentation of your designs using stock photos I’m going to help you with that by teaching you how to use the right tools, with this article I start a series of quick tutorials to create product mockups that help improve the presentation of our designs and totally free! This is something that many creatives are doing to show off their stores at Etsy, Creative Market, portfolios, or their own websites. Why do I call them Fast Tutorials? Well, you will notice it in the video, I don’t want to bore you with a 16 minutes video watching me use Photoshop, my intention is to show you the process but also to point out the tools and steps to do. In this article I’ll be showing you some secret mixes using Photoshop to create mockups:

  • Where to find stock images for product mockups.
  • What photoshop tools I use to create the mockup.
  • How to create Smart Objects in Photoshop.

Let’s watch how to do it in 3 minutes

Where to find stock images for product mockups

Some time ago I made a list here on the blog about Free Stock Photo Sites where you can download images that you can use in your personal and commercial projects. You can also use them to create mockups for your projects. The author of the photo used for the creation of this mockup is Kate Macate from her portfolio at Unsplash

Let me explain how I did it.

Let’s start, first create a folder, named it Mockup, on this folder we are going to create a mask and for them, I started using the Pen tool

Pen Tool (P)
Select without much detail the area where we will place our design if you wish you can also use the Polygonal Lasso tool (L)

Create A7 Envelope Mockup from Free Stock Image
Pen Tool Vector
Create A7 Envelope Mockup from Free Stock Image
Selection Generated Fig 2
Create A7 Envelope Mockup from Free Stock Image

Press Ctrl key (Cmd) + Enter, to generate a selection (Fig 2), apply it to the folder as a mask, pressing Shift + click to the Add a Mask button – at the bottom of the layer panel -.

I try to be careful with details although sometimes I miss one or two, so the next thing I’ll do is use Brush Tool (B) to paint over the mask those spaces where the first selection didn’t mask

Create A7 Envelope Mockup from Free Stock Image

Brush Tool (B)
This tool and the Zoom Tool (Z) (Ctrl + + (plus)), I zoom in on the areas of the mask that still show some flaws to be masked.

Create A7 Envelope Mockup from Free Stock Image

Blur Tool
Use this tool is to make the mask border line softer, before applying it make sure you have the mask selected.

Create Smart Objects for A7 Envelope Card

Smart objects are layers that can contain images or objects from Photoshop or Illustrator so that the original properties are conserved and a transformation or effect filter can be applied to these layers. Imagine the Smart Object as a container and to place your image inside you only have to double click on the layer icon and a new tab will open in Photoshop if it is an image or an element of Photoshop and in Illustrator if it is an Illustrator element, save your design and the filters or the transformation made will be reflected on the images.

Create A7 Envelope Mockup Tutorial

Create a new file with the measurements that the Smart Object will have, in this case, 5 x 7 inches, an A7 Invitation card.


Create A7 Envelope Mockup Tutorial

Let’s rename the background layer and name it A7 Envelope Card then we’ll turn that layer into a smart object

Create A7 Envelope Mockup Tutorial

It’s simple, in the layer panel select the image you want to convert to a smart object, right-click on the layer, select the option that says Convert to Smart Object, or go to the main menu Layers > Smart Objects > Convert to Smart Object.

Drag the Smart Object into the mockup’s tab and drop it, to place it properly inside the mockup’s folder so that each corner of the object is well-positioned with respect to the mask.

Envelope Card Mockup Tutorial

Next step, make photo-realistic the mockup

Envelope Card Mockup Tutorial

So we create a new folder FX, duplicate and apply the mask that has the other folder – Press Alt and with the sustained click drag and drop the mask over the FX folder –

Envelope Card Mockup Tutorial

Press Ctrl (Cmd) + Right-click on the mask, we will generate the Selection, select the background layer and copy Ctrl (Cmd) + C, then go to the FX folder and press Ctrl (Cmd) + V, to paste, change the Blend Mode to Linear Burn

Finally! Open the Smart Object, select the layer we named A7 Envelope Card, and right-click on it and choose Edit Contents.

As you can see a new window has opened, there you must place your design, File > Place Embedded, save the changes and close that tab

Envelope Card Mockup Tutorial
Envelope Card Mockup Tutorial

I hope the tutorial was clear and you like it, I will be uploading new tutorials soon if you have any suggestions, there are welcome!


The music used in the video is part of www.bensound.com