Tutorial: Photopea


Ever since I've started creating mockups, I've been looking into free programs and resources to find a tool that would give any of my clients the opportunity to work with my Photoshop mockups. I'm creating all of the later with smart object layers to make inserting your design as easy and quick as possible. Furthermore, they often come with additional features like drop shadows to make sure your the final images looks very natural.

So, I was really excited to discover Photopea. This free online program offers so many incredible possibilities and its setup is very similar to that of Adobe Photoshop. I've created my first tutorial showing you how to edit one of my mockups in Photopea. Watch the video or read the summary below.


Since I’ve started creating mockups, I’ve been looking into free programs and resources to find a tool that would give any of my clients the opportunity to use my creations to their fullest. And I’ve finally found it in Photopea!


Photopea is an online program which means you don't have to download anything to your computer. Just go to www.photopea.com and start working right away.

Select "Open from Computer" and open your purchased PSD-mockup from your files. (Choose the file marked with 8bit as the 16bit file is currently not compatible with Photopea.) 
On opening, you will see a little message from me placed on a layer named "DELETE THIS LAYER". You can blend it out or delete it completely. It's only use is to reduce file size for up- and download.

Double click on the icon of the "Double Click to Add Design" Layer. A new tab will open with a plain white page.
Next, go to File > Open and select the design you want to insert into the mockup. Click right on the layer and select "Duplicate into..." and from the pop-up window, select the plain white page you've opened with the double click before. The design is now placed on the white page. If necessary, go to File > Free Transform and adjust the size. Finish by going to File >Save (as Smart Object).

And that was already it! If you want, you can increase or decrease the added layer effects. (Double click on the layer effects to edit them.) Full color designs will require a heavier drop shadow than designs on a white (or bright) background. Just play around with the effects until you are happy with the result.

Once you're finished, go to File > Export as and select the file type you want to your computer.