How to add an iPhone or iPad template to your screenshots

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:

  • resize to all resolutions
  • screenshot designer with cool templates