How To Use PSD Mockups WITHOUT Photoshop! Video Tutorial

How To Use PSD Mockups WITHOUT Photoshop! Video Tutorial 1024 602 Nick Saporito

Mockup templates can give your design work a real-world appeal. Although these templates are intended for Photoshop, a simple web-based application will allow you to use PSD mockups without Photoshop. In this post I’ll be demonstrating exactly how to do so.

Logo Design Guide


Curious about the creative process that inspires me to come up with design ideas and how I go about executing them? Be sure to check out my logo design guide for a look behind the scenes at my systematic approach to coming up with design ideas.

Learn How To Design Logos

PSD Mockups

PSD mockups are pre-made Photoshop templates that are intended to give your designs a real-world look and feel. All you have to do is open the PSD template with Photoshop, drop your own design into the Smart Layer, then let the template work its magic in applying your design to the product.

An example of a PSD mockup

You’ve probably noticed that I make good use of them on my own portfolio

Logos By Nick portfolio

Depicting your design work in a real-world context adds a layer of intrigue. It makes your design look more professional, authoritative, and helps to “sell” it to potential clients. It gets them excited about the buying process because they’re envisioning what it would be like to have their own logo embroidered onto a hat or hanging from a large sign above their storefront.

Where To Download PSD Mockups

You don’t have to look very far to find mockup downloads; they’re all over the internet. There’s two different places I like to get my templates from — one for free templates and the other for premium templates.

Graphic Burger

Graphic Burger logo

150+ Logo Templates

Need a professional logo but have a limited budget? Or are you a designer looking to add to your inventory of design elements? Check out my bundle of 150+ high quality logo templates, all designed by Yours Truly.

Get Your Logo Templates!

A site for free design resources; mainly PSD mockups. Of all the different sites I’ve downloaded free mockup templates from, Graphic Burger seems to have the highest quality designs. They’ve also been very trustworthy in my experience so far.

You always have to be careful when downloading things on the internet, and PSD mockups are no exception. I’ve found that a lot of sites only have something free to offer if you’re willing to comply with their malicious conditions. Graphic Burger doesn’t employ such unscrupulous tactics though.

Creative Market

Creative Market logo

Creative Market is an online marketplace for premium user-generated design resources, including PSD mockups.

Their mockup templates are premium products of the highest quality, so you’ll have to fork over some cash for them. Fortunately they’re not too expensive (I’ve gotten some great templates for as little as $3,) and it’s a great investment if you’re using them to entice clients who might hire you for $800 logo projects.

You also may want to consider purchasing premium mockups if you’re looking for something really specific that you can’t find for free, like a giftcard mockup for example.

The Problem with PSD Mockups

The number one problem with using PSD mockups is that they’re intended for use with Photoshop, and since the majority of you who follow my content use open source software like GIMP and can’t justify Photoshop’s price tag, you’re left with no other option.

PSD files can be opened with GIMP, but GIMP can’t make use of Smart Layers, which is required to apply your design to the mockup. Same with Krita — Photoshop-generated smart layers are usually incompatible.

Fortunately, there’s a free web-based alternative to Photoshop known as Photopea.

Photopea

Photopea is, from what I can tell, a near clone of Photoshop that works within your web browser.

Photopea screenshot

I tested it out with some PSD mockups and, sure enough, it works exactly as well as Photoshop does. And just so you know, I am in no way sponsored by or affiliated with Photopea. It’s just a website that I happened across when researching ways to use PSD mockups without Photoshop.

How To Use PSD Mockups Without Photoshop

That being said, let’s get started! Feel free to watch the video tutorial at the top of the page if you’d prefer more in-depth instructions.

Step 1: Open Your PSD Mockup with Photopea

Go to File > Open and locate your PSD file to open it with Photopea.

Opened PSD file

Step 2: Open The Smart Layer

Locate the placeholder layer in the Layers menu to the right of the screen, then double-click it. The layer will open in a new tab.

Smart layer location

Opened Smart Layer

Step 3: Place Your Design In The Smart Layer

In the layers menu to the right of the page, turn off the visibility of the current layer in order to get rid of the placeholder design. Now click and drag your own design onto the canvas.

Replaced design

Make sure to scale it up or down accordingly.

Step 4: Save The Smart Object

Now to go to File > Save (Smart Object) then close out of the tab.

Once you close the tab you will be taken back to the original tab where the mockup template will be, only now it’ll have your design superimposed!

Applied mockup

From there you can export and download your mockup by going to File > Export As and choosing your desired format.

And that is how you can use PSD mockups without Photoshop! If you have any questions simply leave a comment below, and as always, thanks for watching!

Get Started with GIMP!

Want to learn more about how GIMP works? Check out The GIMP Series – a comprehensive collection of over 60 videos where I go over all of the major tools, features and function in GIMP and explain what they do, how they work, and why they’re useful.

Get 20% Off All Products

Join the Logos By Nick mailing list to be notified of new posts and receive 20% off all courses, templates, and learning materials. Your information won't be shared with any third parties and you will never receive any kind of SPAM or promotional email from me.

Logos By Nick LLC is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com. Read affiliate disclosure.

Nick Saporito

Nick Saporito is a Philadelphia-based graphic designer who specializes in branding-specific design. A full portfolio and information regarding services offered can be found at LogosByNick.com.

All stories by: Nick Saporito

Leave a Reply

Your email address will not be published.