How To Make Awesome Screen Shots for The App Store

Can’t see the video (usually with new Safari + Mountain Lion)? Click here to watch

Ever seen those screen shots that look super sweet? The ones that obviously had a designer put some work into? It makes a difference and can really add some value to your app.

I wanted to share some tips and strategies that I use to make those screen shots without spending lots of money or time on them. I walk through the process in Photoshop and show you how easy it is. At the end of the post you’ll also see a link for the layered PSD file so you can download this yourself.

Below is the transcript of the video. Hope you like it!

Carter

Hey, you guys.  This is Carter over at Blue Cloud, and I was just kind of messing around.  I’m uploading a bunch of games right now and because of that I’m doing all the marketing materials, screen shots being a huge part of that.  I’m kind of figuring out some secrets and some tips that are really formulaic and I think could help you guys out a lot.  

So I just want to do a quick video and show you guys how you can make really nice-looking screen shots really easily, and without much work.  In under five minutes you can make something really slick, and I’m going to show you exactly how I do it, and then I’m going to send you the layered Photoshop file so that you can do this yourself.  If you don’t have Photoshop, it’s really easy to send this to a designer or get a free trial, or whatever you want to do, but the option is there.

Basically, what this is, instead of doing a straight screen shot where you’re just kind of displaying the screen – so this is a 960 x 640 canvas right here, which is what you need for a retina display iPhone screen shot upload – what I’m going to do is show you how to design within this canvas, and it’s just going to make it look a lot more dynamic, it’s going to pop a lot better.  It’s just going to make it look a lot more polished.  So I’m just going to walk through how I do it.

The first thing is I always start with using the iPhone, and if you look at the Photoshop for iPhone blog post I wrote, I give you the links for these templates.  Some guys did these.  They’re great.  They’re fully layered so you can really design them.  One thing I will say before I start is that the marketing guidelines for Apple say that you’re not supposed to overlap these products.  

If you’re doing it all by the book, and you want to maybe get featured by Apple, or you want to do anything that’s really high end, you really want to read through those marketing guidelines.  They have a minimum height of 200 pixels and you can’t do a lot of things with them, so just keep that in mind.  This is going to be a little bit off the cuff here, just to show you what’s available, but definitely bear that in mind if you’re looking to make this some super high-end thing.  But this is just a cool way to do it.

I always start with these templates.  They’re always layered.  The goal is to get the screen shots from the apps on these layers.  So what I do is, if you have Xcode you obviously know the iPhone simulator, which is right here, and I’m just going to pop open Alpha Combat.  If you’ve been following my blog at all you definitely know that this is one of my first games.  This is obviously the RevMob ads, which if you don’t know about, check it out on my blog.  This is the game.  This is the opening screen.  The opening screen is pretty cool.  

I want to feature OpenFeint.  That’s a cool function that I have in the game.  But instead of just displaying this screen shot as it is, what I’m going to do is I’m going to drop this from here and move it over to here, within this screen shot.  So what I do is just a straight screen catch, grab, whatever, in Mac.  So if you have a Mac, just Command+Shift+4.  If you don’t have a Mac, just grab some free screen-sharing software like Jing is a really good piece of software.  

Then we’ll do that, and we’ll do one for the store.  This is kind of a cool screen.  I probably wouldn’t recommend doing something like the screen for the actual iTunes Store, just because I’m not sure how much I’d really want people thinking that I’m trying to sell them something right off the bat. 

So I’m just going to open this, so now we have these screen shots in Photoshop.  All you’ve got to do is we select the iPhone, and I’m going to remove the Lock screen, kind of take that stuff off, and drop this right there.  That’s just a Copy-Paste, and it’s pretty close to being the proportions already, just because everything lines up.  Same thing on the other screen.  I’m just going to undo that, and I think it was this one.  I’m just going to do that, and exact same thing.  

Drop the screen here, and I’m just going to keep it under the glare so that the glare looks a lot more natural.  So now we’ve got this.  This is kind of a cool place to start, and it kind of looks cool.  It’s just like a nicer, more designed look, kind of like how the Apple ads look. 

You can start to mess around a little bit.  You can add a little text, whatever you want to do.  That outer glow is kind of intense, so we’re going to take that off for now, but you could put it wherever you want.  I usually put it at the bottom.  And then one thing I do is, I personally don’t love boring backgrounds like this.  It’s white, kind of lame.  An easy way to do it is I take this screen and what I’ll do is I’ll just make that the background.  I have the PSD file somewhere on my hard drive, but what I would do is I would probably get that and remove all these buttons, so that it was just the plains.  

Another thing is it’s obviously really in your face.  It takes away from a lot.  It’s hard to read.  So what I do is lower the brightness a lot, and in Photoshop you can put a black layer on it, drop the opacity a little bit, and you see it a little bit but it’s just way more of a background type situation, and that just gives it a little bit more texture, a little bit more color.  I think it just looks a lot cooler. 

So then we do that, and back to, I guess, outer glow.  This kind of makes it a little bit more, whatever.  I’m just going to make it blue, just to match the screen, and maybe do something like “Awesome Game.”  All right.  Cool.  One other thing that I’ve been doing that you might be seeing a lot, like you see a lot on icons now and I’m seeing on some screen shots.  Something that I’ve been doing is just kind of like a branding thing.  

You don’t have to do this, by any means, but I think it’s kind of cool, especially if you’re building more than one app.  I put this badge on here, like a generic IOS badge that I’ve been using, and then I just throw on Blue Cloud, just for now.  You could put your own website or whatever.  There’s something about it that just looks a little bit more professional, like you’re a little more legit.   

Now you’ve got these iPhone screens that are starting to look really sweet.  Going back to what I said earlier, make sure, if you want to go by the book, you don’t want to overlap these, so you want to either do one at a time or shrink them down enough to make it look good.  I’m just going to show you kind of what’s available.  

One more final thing I do.  If you merge the groups in Photoshop, it allows you to manipulate them a little bit more.  It’s something I tend to do.  I think it’s just a personal preference, and you can do this thing that’s like changing the perspective, so it kind of looks like there’s a little bit more dimension to the picture.  It’s looks like it was put there by somebody, like it looks a little bit more real-life.  Some people don’t like that look, and other people do.  Definitely pick and choose.  I’m just going to leave it like that.  I like how that looks.

But that’s it.  That was, what, five minutes?  Now, this is what I would upload to iTunes, and you can do multiple of these, where maybe this is your first slide and the rest are just straight screen shots, or maybe you do all of them like this and this is just a different screen every time.  Or have a little tag line and, like I said, you can move this around, and you can push these guys down or whatever.  However you want to do it.  You can get really creative about it, but no matter what, it looks pretty cool, and I think it’s a really creative way to do something without starting from scratch and being like, how do we build this out? 

So that’s pretty much it.  It’s a template. It’s really easy to do.  I’m going to send out this layered PSD file.  You can easily pop that into your Photoshop and manipulate it just like I’m doing in Photoshop.  Please feel free to comment or ask me questions or whatever, and I’d love it if you guys could share this because I think it’s hard to find information like this, and I really want to be able to make sure that everyone out there knows that you don’t have to be some crazy, awesome designer to put up stuff that’s really nice looking.  So post it on Facebook, share it on Twitter, or whatever you want to do, but I think that would be a pretty cool thing to do. 

Just to let you know, this is something I’m doing.  If you look at the game, this is a game that I put up a few months ago, and it’s the same sort of thing.  This is what I’m doing.  It’s working out really well.  People seem to like it.  I’ve actually had comments on the actual screen shots, so it’s something to think about.  So this is definitely something that I’m doing myself and I’m going to continue to do.

I hope you enjoyed this.  Like I said, feel free to leave a comment, and right on.  Talk to you soon.

 

CLICK HERE TO DOWNLOAD THE PSD FILES

COMMENTS

  • David J. July 28, 2012

    Great tutorial Carter!

    Looks beautiful, definitely learning a lot from your blog.

  • Ali July 31, 2012

    Great video! Learned a lot. Your website came up on a google search I did, checked out your website and it was exactly what I was looking for as newbie trying to make it into the App Store lol. Great job I’ve become a fan and hope you make more videos like these.

    Where can i get the iphone template that you started out with?

  • Carter Thomas Carter July 31, 2012

    Hey Ali,

    Thanks for the feedback, glad you found the site! I’ll definitely be making more videos like this and am actually starting to work on a few video courses that go through pretty much everything you can imagine when it comes to app marketing and monetization. Hopefully I’ll have that for you in a few weeks.

    Check out this blog post about Photoshop for apps – scroll down and you’ll see links for all those PSD files and some other tutorial sites I found helpful. Also – at the bottom of this post you’ll see a link for the PSD file I use in the video (it’s a zip with the PSDs inside).

    Good luck!
    Carter

  • Chad Grills August 15, 2012

    Hey Carter,

    I’m really enjoying the site. I have photoshop open as we speak, and am revamping my marketing for my first app, SomeCaps.

    I’m a complete newbie to tech- just left the Army Infantry after 6 years. Your site, and posts have been great tools so far. Some of your marketing/Rev Mob info was great to work into my first app. It went from idea to live in the store in just over a month, and I’m scrambling to piece together an update as we speak.

    Congratulations on your work so far, it’s already helped me a ton.

    -Chad

  • Carter Thomas Carter August 15, 2012

    Chad –

    Awesome! So pumped to hear this. I’m fired up to help you and hope that I can continue to do so. Good luck with your update and keep in touch.

    Just saw you liked a few of the posts on Facebook too – thanks!

    Carter

  • Chad Grills August 15, 2012

    Carter,

    A couple likes are the least I can do for the content, templates and explanation.

    The learning curve is a bit intimidating, but I know it’s a necessary test.

    Will keep in touch.

    -Chad

  • Sophie August 22, 2012

    Carter – You. Are. Awesome.

  • Carter Thomas Carter August 22, 2012

    Sophie – Thank. You. Very. Much.

  • Gabriel August 22, 2012

    Awesome Carter, thanks for sharing

  • Chris September 3, 2012

    Great post, but I have to ask why you not using these types of screenshots for this game in the app store? Just checked in iTunes and in my iPhone and all I can see is straight up screenshots. Not these modified ones.

  • Carter Thomas Carter September 5, 2012

    Hey Chris,

    I didn’t do it retroactively, just for most of my apps moving forward, specifically the ones I’m flipping. Check out Tiny Ninjas – that’s got this format. You can also look up Jewel Jubilee and others under that account to see what’s up.

    Carter

  • Gloria Poupard-Walbridge October 6, 2012

    Hi!
    I stumbled across this blog: blown away! When will you have other videos?

    OUCH! HELP!
    I only have Photoshop for CS5, so I am struggling to follow and to see how to perform the different steps you have demo’d… appears so easy… I don’t seem to have the skills.

    What about doing something like this with Techsmith’s Snagit tool (for dummies just like me attempting my first App?)

  • Carter Thomas Carter October 8, 2012

    Hey Gloria,

    Working on more videos for sure. Any suggestions on what you’d like to see?

    Photoshop is awesome and well worth it. SnagIT could help, but you’re probably better off just doing straight screenshots of your app. If you have $50-100, you may want to hire someone to do the screenshots for you while you’re learning Photoshop.

    Good luck!

    Carter

  • Mo November 28, 2012

    THANKS!

    Very cool tip. I am going to use it on my upcoming game. I am using Revmob by the way (Corona SDK). I was going for straight screenshots but after I saw your video, I am hooked! I do not have Photoshop ( I may try the one online $20/month) or simply use GUMP. Not great but beats $600 right now!

    In any event I just wanted to says thanks.

    Mo

  • Carter Thomas Carter Thomas November 28, 2012

    Right on, Mo. Best of luck to you. I think you can get Photoshop for a 30 day free trial if you just want to get going with the PSD.

    Keep rocking,

    Carter

  • Sophie December 9, 2012

    Hi Carter,

    Do you have anything like this for iPad? Because I used this for my iPhone version but now I need to market the iPad version… Any ideas where I can get a PSD file to use? Love your work. Check out my screenshots on Cut Me In :)

    Sophie

  • Carter Thomas Carter Thomas December 12, 2012

    Hey Sophie,

    I think your best bet is to expand the canvas size in Photoshop from one of the corners, then content aware stretch the background. If you want to replace the iPhones with iPads, Google something like “ipad GUI PSD file” and you should get the layered file.

    The rest should be the same.

    Good luck!

    Carter

  • tasnim ahmed December 13, 2012

    I am using normally cmd+s to take screenshot.so exact screen images is saved.Thanks for the video and TEMPLATES.

  • Dee Martin July 6, 2013

    Carter, thank you so much for these! I am about to put my first app on the market and it is going to be awesome with the screenshots. Thanks.

  • Kevin Sitek November 16, 2013

    Carter,
    Great tutorial. Thank you so much for taking the time to put this together. One tip for you. DO NOT USE MERGE GROUP. LOL. Instead right click on the folder of the group and select “Convert to Smart Object.” This way you can manipulate the group (and all the layers inside it) but still have all the layers editable in case you have to make any adjustments. If you “Merge Group” you flatten everything and then you have to recreate the screen again in order to make any changes. Remember Smart Objects are your friend and VERY POWERFUL! LOL. Again, thanks for the great video and the great code you keep putting up for everyone. You da man!

    :: K

  • Brian Ma December 1, 2013

    Thank you!! Just what I was looking for!

  • Vaira March 20, 2014

    Carter, thought this might be a better alternative – our app marketing tool generates such images within seconds. Please take a look at Placeit: https://placeit.net.

Leave a Comment