iPhone 5s template

Whether you are an App Store developer, graphic designer or otherwise, adding an iPhone bezel to your screenshots is a simple task that can make the images look much more professional. There are a variety of ways to go about doing this, one being to search for an iPhone template on Google and overlay your screenshot onto it using Photoshop or a similar program. That process can be cumbersome and time consuming, however, so read ahead for an alternative method that requires no expensive software and minimal effort on your part… 

FileSquare offers a free service called MockUPhone for wrapping screenshots in various iPhone and iPad device mockups. A selection of templates for the iMac, TVs and Android and Windows Phone smartphones are also available. Most device mockups are available in both portrait and landscape views, with multiple color options. The colorful iPhone 5c, for instance, is offered in blue, green, red, white and yellow. Read ahead for step-by-step instructions on how to use MockUPhone to generate your own product mockups.

Step 1: Navigate to the MockUPhone website on your desktop browser. Have the screenshots you will be using ready to go, and select which device mockup to use. If you are not at a computer, the website also works directly on your iPhone or iPad; however, it lacks a dedicated mobile version.

Mockuphone 1st

Step 2: Once you have selected a device, import your screenshots in PNG, JPG or PSD format by dragging and dropping them inside the dotted lines or clicking the black button to upload them manually from your computer. There is a recommended aspect ratio that you should maintain if you want the end result to look the best. For the iPhone 5s, it is 640×1136 pixels.

Mockuphone 2

Step 3: Click the generate product mockups button. Depending on how many screenshots you uploaded, your product mockups should be generated in a matter of seconds or minutes. On the next page, a preview of only some of the mockups are shown in a gallery format. As noted on the website, not all orientations of the device are shown. All of them are located in the ZIP package that you download in the next step.

Mockuphone 3

Mockuphone 4

Step 4: Click on download my mockups.

Mockuphone download

Step 5: You will be prompted to enter an email address for MockUPhone to send the zipped files to. Be advised that you will also be subscribed to FileSquare’s email newsletter, but I have yet to receive spam or any type of contact whatsoever from the company in over a month of using the service. Your personal mileage may vary.

Mockuphone Email

Step 6: A confirmation message will be displayed and you should have now received an email from MockUPhone in your inbox. If not, check your spam folder or rinse and repeat the steps above. The email you receive should be entitled “hello,” and contains a direct download link for you to download your mockup files. Unzip them and you’re finished.

Mockuphone Thank you

What methods do you use to create iPhone and iPad mockups?

Mac and iOS apps that add a frame to your screenshots

As noted by our readers, there are a few apps in the App Store and the Mac App Store that let you do that.

Other tools you can use

iDB reader Anton submitted a few tools worth looking into:

  • Umut Bilgiç

    Wow, very useful!

  • Jonathan

    Thanks. I was just going to make my own. 😀

  • ✪ aidan harris ✪

    The Screentaker Mac app is very good at doing the same thing as this web service should anyone want a standalone application:

  • Maxim∑

    I literally was just looking for this for my app. Thanks!

  • Or you could download Screenshot – Frame Maker from the iOS App Store.

  • Adam

    very useful post, already used this for work!

  • omrishtam

    wallpaper of first pic please

  • Guest

    Just made one 🙂

    • Sunny

      Ooks great!
      May i ask how ypu added the weather on the bottom please? Thank you

  • ConduciveMammal

    For me personally, this is one of them apps that have little use to me, yet it’s still fun to keep ahold of.

  • Mark

    You can also use DS Screenshot from the iOS App Store. There is a free version.