Photopea is a free online design app that works amazingly similar to Adobe Photoshop. It now has this really cool PSD Template Gallery too now. So you can use user-submitted templates in your own designs, which is a lot like Canva only more powerful and totally free. 

We uploaded the ButtonMakers.net PSD templates to the Photopea PSD Template Gallery and also added this mockup to help you prepare your files to post online or to email to clients for approval. 

Mockup Tutorial Starts at 13:06

Text from the video:

In this video we are going to be using Photopea to lay out a 1.75 inch button for print as well as a  finished button mockup.

I know a lot of people who are making buttons have kind of their own work flow. They've got Canva and these button tool subscriptions. We have one on our website too, for free by the way. designer.buttonmakers.net and those are great. You're welcome to keep using those if you want to.

 But I wanted to do some tutorials in Photopea because it has everything that photoshop has for the most part. You've got layers, layer masks, font, type along a path, you can remove backgrounds, layer different graphics on top of one another. Any feature that you would need a photo editing program for Photopea's got it. It's very similar to Photoshop too so all of your skills you learn in Photopea will tranfer over to Photoshop and vise versa. So it's a really powerful tool. If you can learn how to use you can do your whole workflow in it without having to switch over to another program to do the page layouts, etc. Photopea will set you free.

1. Go into a web browser and go to photopea.com.
   
   
2. Go to ButtonMakers.net and download the Photoshop template for one and three quarter inch. It's a zip file because it's got two files in it. Unzip the file. 
   
   
3. In Photopea click  File -  Open. Navigate to the zip file and click on 175.psd and open it up. 
   
   
4.  The next thing we want to do is open up  the photo. It's a cell phone photo of a print of some christmas portrait from the 80s. The first thing we want to do is make a selection on this for the area that we want. I'm just going to select the whole thing because it's easy. And then click Edit Copy then we'll pop back over to this template and hit Edit Paste. Because you can't drag and drop stuff in photopea the way you can in photoshop. But that's one of the very few limitations that it has. 
5.  Move your photo to it's desired location and delete any of the extra template layers by dragging the layer to the trash can icon in the bottom right of the layers pallet. If your photo is still too big drag it so that you can see a corner. Then click Edit - Transform - Scale. Hold down your Shift key on the keyboard while dragging the corners in to maintain it's aspect ratio while you're resizing it to fit.
    
6. On the Paths pallet click the Cut Line path then click the Selection button at the bottom right of the Paths pallet to turn the cut line into a selection. 
   
   The templates from ButtonMakers.net include Paths. Mostly the paths are to give you that nice perfectly rounded text along a circular path. That's a really handy thing. I use text along a path for the rounded type instead of doing some kind of text effect or warp or whatever. Because it's a thing that you want to be able to edit, to change a letter or change something out. You don't want to have to do ten different steps to change one letter. So text along a path helps you do that. It's a little bit complicated, advanced feature but it really does help. In addition to text along a path the paths are also really good for shortcuts for making selections. 
   
   
7. Then go back to the photo layer and click the quick mask icon to add a mask.
   I like to use masks because you want to set up your entire workflow so that you can go back and make changes later. You don't want to cut pixels right because then you can't get them back. But if you use a mask you can hide the pixels. Everything under this black area is hidden and everything in the white area is showing.
   
   
8. Turn off the Face Line layer. 
   
   
9. Save it as a PSD.
   You always want to save your files with the layers in tact. You never know you need to make a change. 
10. To get the file ready for print click Edit- Define New - Pattern.
    This is another really handy part of the button makers templates.
    
    
11. Open a new page, set it to 8x10 and 300 DPI. (This is important)
     
12. Select Edit - Fill. Drop this down and select Pattern. Drop this down and select the pattern you just created and click OK. 
    
    

1. Click File - Open More - PSD Template.
   We won't need the layered verions of this it's just going to be for web use. Search for Button select the Finished Button Mockup.
    
2. Resize the mockup template. Select Image - Image Size. Change it to 1000 x 1000 pixels. 
   Now this was made at 2000x2000 pixels and as you saw before the template is like 700x700. So this is already too big for our button. If we paste in our button graphic in here it will be too small. You can transform and make it bigger, but then you're stretching it out and it's interpolating those pixels and will probably look crappy. and because you're saving a jpeg to email or post online, 2000 pixels is too big to do that with anyway. You really don't need to go bigger than 1000.
   
   
3. Go back over to tab containting the button template and Flatten it. Select Image - Flatten Image. (do not save the flattened version).
   
   
4.  Then select the Paths pallet to get that face line selection. Click on the face line path. Click the Selection button at the bottom right of the Paths pallet to turn the path into a selection. Select Edit - Copy. 
   
   
5. Then pop over to our mockup and select Edit - Paste. Then we are going to grab our Move tool and move it underneath the effects layer. In the layers pallet, this has got to be below the effects layer. It can't be above it. Then we are going to move it around until it looks good. 
   
   
6. Use the Free Transform or Transform. Edit - Transform - Scale. Shift key held down to maintain aspect ratio. 
   
   
7. When you're happy,  click Layer - Flatten. Then export as a Jpeg and email that bad boy over to your client for approval.
   
   Happy Button Making!!