How To Place Your UI Design In A Mock-up (Photoshop tutorial)

How To Place Your UI Design In A Mock-up (Photoshop tutorial)

I frequently get questions from friends and on Instagram on how I place my designs in Mock-ups (in devices like iPhones and Laptops and different environments). It’s very easy so I wanted to share how I do it in a short video.

If you can’t watch the video this is a short version:

  1. Google “Free Mockup” + the device you want for example “Free Mockup iPhone X”
  2. I usually go to mockupworld and just download one I think looks nice.
  3. Open up the file in the right program (often Photoshop or Sketch)
  4. In these files you’ll find a layer called “Edit me” or “Change me”. Open this and change the content.
  5. Save the “Edit me”/”Change me” layer. I forget this sometimes and nothing will happen.
  6. Return to the main file.
  7. Export as the format you want. Most often PNG works best for UI design displayed on the web.

Hope you guys liked it and that it was helpful!

This is my first YouTube video and I would be very thankful if you guys supported me by Subscribing or liking my video! I will be sharing more UI design tutorials for beginners.

Here are more similar articles

Wendy Zhou - Design

UX/UI designer from Sweden. I write about design, tech, side projects, personal finance, and cyberpunk. Contact:

This Post Has 4 Comments

Leave a Reply