Have you ever wondered how to make those stunning app screenshots? Yeah, those ones that make your app look like a million dollars.

This is a screenshot of our newest template RadioJive ­čÖé

UPDATE: It seems some of the mockups I linked to earlier might violate Apple’s terms. So I have updated the post to only show the process for the black iPhone 5.

So let me show you how to make the screenshot below in about 4 minutes and for free too. All you need is Photoshop. You can download a free version here. Photoshop Elements

Step 1: Create a screenshot Using the iOS Simulator

Run your app in the simulator and select File-> Save Screenshot. This will send save a screenshot on the desktop.

Step 2: Download a Mockup template.

Here is the secret sauce. There are tons of device mockup to download for free online. Well, it’s not so secret anymore is it?

Here are some links to the best ones I have found online.

iPhone 5 Mockups

Mockup 1 | Mockup 2

iPhone 4/4S Mockups

Mockup

iPad Mockups

Mockup

iPad Mini Mockups

Mockup 1 | Mockup 2

Download the one you like and open it up in Photoshop. Most of them have a “Smart Object” layer that depicts the screen. Double click on the layer to open it up.

Step 3: Replace the Screen with Your Screenshot

Double-clicking on the smart object will bring it up in a new tab in Photoshop. Now, open the screenshot you took from the iOS Simulator on Photoshop. Type Cmd+A to select it all, Cmd+C to copy it and then paste it in the Smart object tab.

Close the smart object tab. It will prompt you if you want to save it. Click on Yes.

Step 4: Export Your New And Shiny App Screenshot

Now if you open the original mockup tab, you will now have your nice screenshot waiting for you on the device. You can do anything you want with it. Crop it, resize it etc.

Click File->Save As and select the PNG option to save your screenshot.

Now it’s your turn. Make your Own

Finally, you are done. You finally have an amazing screenshot you can show off to friends, show to reviewers or beta-testers to get them excited about your app.

Here are two things you need to do now.

1) Share this page on Facebook and tell your friends, Click on the Facebook button to the right to do so.

2) Go download the mockups, make your own screenshots and post a link to it in the comments below. I can’t wait to see them.

16 comments

  1. Fran├žois

    Great tutorial. Even though it would be cool to replace the time with 9:41 and delete Carrier… Thanks

  2. David

    Nice, Tope! Although in your post you link to Photoshop Elements, yet you’re using CS6 for your editor. CS6 isn’t cheap – is there an alternative that we could use?

    Dave

    • Lorenzo

      Hi David,

      Pixelmator is also a great and powerful app to do image editing. and I think it is only $30…

      and it handles PSD files.

    • Chris

      You could rent a copy of photoshop fo a month when you’re ready to do all of your artwork and take your screen shots. I have a monthly subscription which makes it affordable.

      Pixelmator is also fantastic, but I find that now I rent Photoshop it opens up a whole world of resources for app design.

  3. Sammy

    Why not just do a CMD + 4 then press spacebar over the iOS simulator window? It’ll save the entire window, including the iPhone image. I mean, if you’ve already got the app running in the simulator… Am I missing something?

  4. Xavier

    Hey Tope, just wanted to say you guys rocks! Thanks a lot for your great designs and great advices.