How to Edit Mockup Files

As you already know the mockup templates is a good thing to showcase your design in most realistic way. Also you hear, that if you have a mockup to wear it with a new design is as simply as 1-2-3. So, today we are going to show you how easily you can use mockup templates for your design presentation.

• 8 Reasons to Use Figma for Mockup Creation

What Will You Need?

If you want to use and customize mockups that are prepared as PSD files, you will need a few things:

• Software for unzipping packed files (WinRar, WinZip etc).
• Basic skills in Adobe Photoshop.
• Adobe Photoshop in version at least CS4.

Avoiding Common Mistakes

• Saving Smart Objects. Check if your Smart Object is saved by looking for an asterisk next to the file name in the Photoshop window tab. If there is an asterisk, changes have been made that aren’t yet saved. Your mockup won’t reflect those changes until the Smart Object is re-saved.
• Moving and transforming items. When moving items or scaling them in the mockup make sure all associated layers are transformed at the same time. To do so, select all other relevant layers at the same time by holding down Shift while clicking on them. Otherwise, object filters, shadows, and other effects will not match up.
• Adding items.Reflect the scene in perspective and lighting when you add items to the mockup (Adobe Dimension is particularly good at helping with this). For instance, with the example above, I made the hippos’ shadows run left, since the mug shadow runs left, and the lighting on the hippos’ backs comes from the top and right.
• Save your mockup file in a project folder. Keep in mind that any saves you make to your freshly downloaded mockup merely overwrite the downloaded file, which lives in the folder you keep your downloaded files (for most Mac users, that might be the Downloads folder). If you want to keep your mockup handy in a different folder, use “Save As” and select the folder where you want it to live. It’s a good idea to start any mockup project by doing this so you don’t realize later that you emptied your Downloads folder along with that mockup you worked so hard to build.

Steps to edit mockup:

1. Download Your Mockup

To begin using mockups you will need any PSD mockup that can be downloaded from the web. Download may take a few minutes, as mockup files can be pretty large.

2. Unpack It

As soon as you download your mockup, probably you will need to unpack it. For mockups  we use zip format as it is most common format.

The most popular program for such operation is WinRar – we use it for years and it works well. You can download WinRar here.

3. Read Info About It

When all files are extracted, in many cases you will notice two kind of files. PDF file and PSD files. PDF file is the license and from this you may read what you can do with the mockup, is it free, how can you distribute it or can you use it in your commercial work.

4. Open It

Now let’s take care of the PSD file. When you double click on any PSD file Photoshop (or any other software that can edit PSD files) will start.

If you will open psd mockup you`ll see example project that is used as leaflet design.

What you will need to do, is to change this project and customize background color. Both modification can be done on “layers” panel.

5. Change Background Color

To change the background color you`ll have to double click on layer thumbnail, that is placed on the right of the layer name (Background_Color).

Color Picker panel should appear and in this panel you can set any color that you like.

Notice that for in most cases you should use light colors, as the Background_Color layer is put to Linear Burn (or sometimes Multiply) blend mode. It means that the background will be darker than the color you picked.

6. Find Smart Object Layer

Of course the most important part of the mockup is project of the material that you want to customize. Fortunately, it’s very easy to change it. To do this we have to find Smart Object Layer that contains the project. Remember the layer panel? This is the place where your search should begin.

Layers with projects usually have names that easily allows to identify themselves – i.e. „project here”, „design” etc.

If you will have any problem with finding this layer look for the small icon that indicates that this layer is „Smart Object”. This icon is highlighted on the image on the right.

7. Paste Your Project

After you`ve localized the Smart Object Layer you need to double click on it’s thumbnail. When you do this, new window will appear, and this is the place where you should paste your new design. Of course, you could even make it from scratch here, but I`m not recommending this.

Your project should be done in another file (in example in Photoshop or Illustrator), and all you need to do is paste it into this smart object. As you do this, save the file, close the window and you should see that your project is beautifully pasted into the mockup.

That’s it! You have done it. Save the file and share your design with the rest of the word.

Video Tutorial

Always is better to see it in your own eyes. So hopefuly I have choiced the best video tutorial for you.

There are many video tutorials available to help you check out here