Creating a business card mockup is a very commonly asked-for product for marketing and communications professionals.
I have found making an a real-life mockup to increase client satisfaction and approval rates.
I am going to share a super easy way to produce the mockup.
This method is even better than Photoshop at mocking up
In the past, I would download PSDs of business card mockups.
However, in order to create a mockup this way, you’d have to have Photoshop, then copy and paste your design into a PSB file embedded into the file.
There’s a lot of costs involved in doing this: a Photoshop subscription and the cost of getting mockup PSD from a stock website.
Use Vistaprint to make your mockup
It’s pretty shocking that a online printer can help you visualize your artwork without paying them a cent.
Step 1: choose the business card you want
Go to Vistaprint and then choose the type of card you want: rounded corners, square, standard, single/double-sided, etc.
Then click “Upload Design”.
There will be a slide-out menu asking for orientation (vertical or horizontal). Choose the appropriate one.
Step 2: upload your designs
Use the buttons on the sidebar to upload the designs that you have created.
If you intend to print with Vistaprint, you can find the specifications on the nav bar, where it says “Specs & Templates”.
There, you can find the specs and files with the outlines pre-drawn.
Step 3: get the mockup
Click the black “Next” button.
On the next page, you will see your mockup!
Step 4: Extract your mockup from web page
You can’t just download the image by right clicking and saving.
The easiest way is actually to just screenshot it. Use the Snipping Tool in Windows to screenshot the area with the mockup.
Alternatively, you can visit “My Projects” and right-click on the images and download them.
If you need something higher in resolution, then you will need to go into your browser’s Inspector tool.
In Chrome, right click on the mockup image and then click on “Inspect”.
The Developer Tools should now be open. You should now be able to see a window with a lot of code. It might be floating, at the bottom or on the right.
What you need to focus on right now is the “background-image” CSS property. It should be a hyperlink. Click on it.
Copy everything that looks like a URL. In other words, exclude the
url(" at the front and the
") at the back.
Paste that into your browser and you should see a large image of your mock up.
Designing a nice business card requires you to have images. I compiled a list of where you can find free stock images that will complement your business card creation.