Skip to content Skip to footer

Mastering Mockups: A Step-by-Step Guide to Using PSD Files in Photopea

Welcome to the world where creativity meets simplicity! Whether you’re a seasoned designer or just starting out, mastering PSD mockups in Photopea can elevate your designs and presentations to the next level. Photopea is a powerful, web-based tool that makes design accessible to everyone, regardless of the operating system you’re on — be it Mac or PC. In this guide, we’ll walk you through the essentials of using PSD file mockups in Photopea, ensuring your journey is as smooth and enjoyable as your final design. Let’s dive in and unlock your design potential!

Step-by-Step Guide

Step 1: Access Photopea

Navigate to Photopea.com: Open your preferred web browser and type in the URL. Photopea is entirely online, so there’s no need to download anything!

Step 2: Open Your PSD Mockup

  • File Opening: Click on File in the upper left corner, then select Open... from the dropdown menu. You can also simply click on the Open From Computer button or drag and drop your PSD file directly into the Photopea interface.
  • Shortcut: Use Ctrl + O (Windows) or Command + O (Mac) to open the file dialog quickly.

Step 3: Familiarize Yourself with Layers

Layers Panel: On the right side of the screen, you’ll see the Layers panel. PSD mockups are organized in layers, making it easy to edit specific parts of the design. Some mockups come with layers named according to their function, like “Replace me”, “Your Design Here” or “Double Click to Edit”.

Step 4: Using a Blank White Layer to Reduce File Size

Now that you’re familiar with the Layers Panel, let’s discuss a useful tip for managing PSD file sizes — utilizing a blank white layer. This technique is something I always employ to make the file easier to share and download without affecting the quality.

Purpose of the Blank White Layer: By placing a blank white layer at the very top, we compress the file size, facilitating smoother transfers and downloads, especially with large files.

  • Identifying and Deleting the First Layer: In the Layers panel, look for the topmost layer, I always name it “Delete This Layer”. This layer is solely for reducing the file size and should be removed before editing.
  • Two Methods to Delete:
    1. Keyboard Deletion: Select this layer by clicking on it, then press Delete on your keyboard.
    2. Context Menu Deletion: Alternatively, right-click (or Control-click on a Mac) on the “Delete This Layer” within the Layers panel, and select Delete from the context menu that appears. This method gives you the same result but might be preferred by users who are more comfortable with mouse navigation.

Step 5: Editing Smart Objects

  • Locating the Editable Layer: In the Layers panel, identify the Smart Object layer that you’re meant to edit. While these layers are generally named with prompts like “Replace Me” or “Insert Design Here”, I specifically name this layer “Double Click to Edit” for clarity.
  • How to Edit: Double-click on the “Double Click to Edit” layer’s thumbnail. This will open the Smart Object in a new Photopea tab, allowing you to place your design.

  • Placing the Design: Now, with the Smart Object tab open, you have a couple of options to insert your design:
    • Using File Menu: Click File in the upper menu bar, then select Open & Place.... Navigate to your design file (it doesn’t matter if it’s a JPEG or PNG), and click Open to place it into the Smart Object.
    • Drag and Drop: Alternatively, you can simply drag and drop your design file directly onto the Smart Object tab. This method is quick and intuitive, especially if you have your design file readily accessible.

 

  • Confirming Placement: After positioning your design as needed, click the checkmark button in the upper menu bar to confirm. This action embeds your design within the Smart Object.
  • Saving: After placing your design, save the Smart Object by clicking File > Save (Smart Object) or using the shortcut Ctrl + S (Windows) or Command + S (Mac). Close the Smart Object tab to return to the main mockup. Your design will automatically reflect in the mockup.

Step 6: Optional Adjustments to Enhance Your Design

After embedding your design into the mockup through the Smart Object, you might consider making adjustments to ensure it looks just right. While I’ve pre-adjusted the mockup’s exposure and lighting for a balanced look, you may want to fine-tune settings such as brightness, contrast, and saturation to match your specific needs. However, it’s essential to make these adjustments on the correct layer.

  • Selecting the Right Layer: Before you start tweaking these settings, ensure you select the background layer from the Layers panel. This action is crucial; otherwise, you might end up making adjustments only to the Smart Object layer (your design) and not the mockup image as a whole.
  • How to Adjust: Go to the Image menu in the upper menu bar, then choose Adjustments. You’ll find options like Brightness/Contrast, Vibrance, and Hue/Saturation. These tools allow you to modify the mockup’s overall appearance:
    • Brightness/Contrast: Adjust to brighten or darken your scene, and to tweak the contrast for more depth.
    • Vibrance/Saturation: Use these to enhance or reduce the color intensity, making the mockup’s colors pop or appear more subdued, depending on your project’s requirements.

Final Step: Export Your Finished Design

Exporting your finished design in Photopea is a straightforward process, yet it offers flexibility to ensure your final image meets all your needs, including specific requirements like those for Etsy listings.

  • Selecting File Format: Go to File > Export As, then select your preferred file format (e.g., JPG, PNG). Different formats can be better suited for different types of projects, so choose the one that best fits your needs.
  • File Name and Dimensions: In the export window, you can name your file whatever you like, making it easier to organize your work. This is also where you can adjust the image’s width and height. It’s crucial to mention the “Keep Aspect Ratio” feature here. Look for a little link icon between the width and height inputs. Keeping this option selected (it should be selected by default) ensures that when you adjust one dimension (width or height), the other will automatically adjust to maintain the original aspect ratio of the mockup image. This prevents your image from becoming distorted. If this link icon is not selected, manually changing the dimensions can lead to a stretched or squashed image, which is usually not desired.
  • Quality Settings: You’ll see a quality slider which allows you to set the export quality anywhere from 0% to 100%. Pushing the slider to 100% maximizes quality but also increases the file size. For uploads to sites like Etsy, where there’s a possible file size limit on listing images (currently 10 MB), exporting at maximum quality might not be feasible. Reducing the quality to around 70% can significantly decrease the file size while still retaining a high degree of visual fidelity.
  • Saving the File: Once you’ve set everything — file format, dimensions, quality — click Save and choose where you want to save the file on your computer. Your design is now ready to be shared or uploaded to your listing.

 

Keep Exploring and Creating

Well done on enhancing your skills with PSD mockups in Photopea! If you’re eager to dive deeper and experiment with more mockups, I might have just what you need.

 

My Etsy shop hosts a diverse range of more than 500 stationery mockups. Explore my Etsy shop whenever you’re ready for more!

Plus, I’ve got some exclusive mockups available now on my website! Take a peek at my webshop!

 

Don’t let your creativity be bound by limits. Elevate your shop and make your designs pop to ensure your designs stand out! Happy designing!