A Practical Guide to Creating App Store Screenshots Efficiently

[00:00:00]So, you finally finished building your app and  you're ready to get it up on the App Store, but you're here staring at App Store Connect looking  at this screen and like, "Oh, I need screenshots."

[00:00:10]And then you remember, "Oh, these are really  important." Because good app store screenshots can be the difference between a user downloading your  app or a competitor's app. And you're probably not a designer, so this feels daunting. Don't worry, I  got you. In this video, I'm going to show you how to get App Store screenshots uploaded fast and  easy using a tool that I use called AppScreens.

[00:00:32]You can choose from a ton of pre-designed  templates for your screenshots. And if you like what you see, you're good to go. Or you can  take those templates, tweak them, customize them to really make them your own. And if your app is  localized into other languages, app screens will localize your screenshots as well. And the nice  thing, you can upload all these screenshots with one click. You don't have to waste your time  exporting and dragging and dropping all these screenshots into App Store Connect. This video  is sponsored by AppScreens. So if you like what you see here, check them out. Link is in the  description. All right, so you're looking at App Store Connect and you got this blank area  for your screenshots here for the iPhone. So let's talk about the requirements because if you  go view all sizes in media manager, you can see for the iPhone you got the 6.9 display, the 6.5  display, all the different iPhone sizes, even the old ones with the old chin. But don't worry,  you don't have to create app store screenshots for every single version of these cuz they all  have different dimensions because the phone size is different. Now, it defaults to the 6.5 display.  But a little tip here is if you upload screenshots for the 6.9 display, which is the bigger iPhones,  the App Store will show those screenshots for all of the other displays, so you don't have to create  so many variations. A huge timesaver. And here are the dimensions for the 6.9 display that you need  to create your screenshots in. But don't worry about memorizing these cuz these change all the  time as Apple releases new devices. you can always come here and check them out. Or if you use app  screens, you don't have to worry about it. Now, another thing that catches people off guard is  that even if you only have an iPhone app, you don't have an iPad version, you still need iPad  screenshots. And that is because your iPhone app will still run on the iPad. It'll just look like  an iPhone. I mean, it's a horrible user experience to be honest with you, but it still happens.  So, you will have to have iPad screenshots. So, the same thing applies here. As long as you have  screenshots for the 13-inch display, you will get the screenshots for all the other iPads, no matter  the dimensions. So, that's what we're going to do.

[00:02:17]We're going to use app screens to create iPad  13-inch display and iPhone 6.9 in display. And that'll have us covered. So, back to our app. Let  me show you real quick how to take screenshots of your app here in Xcode. I have two simulators  running. One for the iPhone, one for the iPad.

[00:02:29]And you can have up to 10 screenshots for your App  Store Connect page. You don't necessarily have to have all 10, but I would definitely have a minimum  of three because as you can see here on the app store, three of them show up as user is scrolling.  So, you absolutely want to have at least three.

[00:02:41]But the idea here is to go through your app, point  out all the cool stuff it can do. Like there's a schedule, here's the different money stuff, and  then on the iPad, you got the schedule here, you know, different money stuff for this particular  app. So, go ahead and take the screenshots. Now, how you do that, you see this little camera  button up here? You click that and you see your screenshot goes there and it'll be on your  desktop. So, that's a quick and easy way. Okay.

[00:03:01]And as you can see in my finder here, I've already  done this before the video to save some time. I've taken the screenshots I wanted. You can see here's  the iPad versions of my screens. And I have them organized in an iPad folder and an iPhone folder,  which I highly recommend you do because if you're going and taking a ton of screenshots, this gets  messy real fast. So, organization is key. And once we have our screenshots, now we can go over to  AppScreens to start bringing those screenshots into these pre-existing design templates. We're  here at appscreens.com. See, they got a nice little video showing you everything you can do.  You can scroll through the website, check out all that they offer, but we're going to get right into  it and we're going to create screenshots fast. So, click on AI screenshot creator and you'll walk  through a wizard. Now, if your app is uploaded on the app store, you can search for the app on  the app store. I'm showing you the use case where you haven't uploaded your app yet. So, you can  hit create manually and then what you need to do is do the app name. So, mine is creator view  and the bundle IDs. Go to Xcode in general, get your bundle ID, copy that, and paste it here.  Same thing if you have your Android ID. I don't.

[00:03:56]And then we'll go ahead and create the app. Now,  what it will do if it's actually on the app store, it will go out, look, and grab the metadata  of your app and help create your app store screenshots based on that metadata. But we don't  have our app on the app store. So, what we can do, if we go back to App Store Connect, if you already  have your description on your App Store Connect page, go ahead and just copy and paste that in.  Or, as you can see here, you can paste in your App Store description or just write about your  app's features. Just write a quick paragraph, tell it what your app does. Basically, AppScreens  is going to use this to create the text on your App Store screenshots. So, I've pasted in my app  description there. Hit save and generate and it's generating your screenshots and the text on it  based on some good ASO best practices. In here you get a short form version. You see channel control,  take charge of your channel, analytics hub, track key performance metrics, smart planning, plan your  content efficiently. That would be my schedule. So it pulled my app store description and these  are going to be the titles on my app store screenshots. You can have a short form version or  if you click long form, you see there's a longer form version depending on the style of screenshot  that you're going to. And of course in the editor you can change these if you don't like exactly  what it gave you. but it's a great starting point. So, now we want to select our template. And  then, like I said, there are tons of pre-designed, beautifully made, ready to go templates. This is  what I was saying, like if you're not a designer, AppScreens has you covered. You don't have to  design all your screenshots yourself. And if you like one of the templates as is, you're just  going to bring in your screenshots that we took on the simulator, hit upload, and you're done.  Great. But let's say you want to tweak one of these templates, right? It's not exactly what you  want. Well, AppScreens allows you to do that. So, I'm going to pick this one, this inner glow  one, cuz that kind of looks like my brand, what I'm going for. So, I'm going to hit select  template. And it pulled in those titles, right?

[00:05:28]The channel control analytics hub. It doesn't have  any screenshots yet, right? We haven't uploaded that. What we're doing right now is we're just  selecting our template that we want, our design.

[00:05:36]So, I'm going to hit save and edit. And then  name it creator view. Then now output sizes. So, this is where you can determine what sizes you  want. Obviously, we're not going to have Android, so we're going to unclick that. But you notice  the red eye here next to the 6.9 and the 13 in.

[00:05:51]That is basically saying that if you export these  sizes, you're going to get all the other sizes.

[00:05:55]And as you can see, here's your options of what  you can export. Again, we're just going to do the iPad 13 inch, the iPad 16.9, and then languages.  We're not going to have any languages right now, but if your app was localized into Spanish,  French, German, you would pick these and then the screenshots would get translated into those  as well. And then again, when you hit that upload to App Store Connect button, all the screenshots  go to the proper languages, the proper devices, all that stuff. That saves so much time. And  another thing too, even if you don't have other localizations besides English, well English is a  little different between like the US, Australia, Britain for example, in the US we call it candy.  Well, in Australia they call it lollies and in the UK they call it sweets. So even if all you have  is English, you can have different variations on English. And again, AppScreens translates all that  for you. Has you covered for all of that. So let's hit create. And here we are in app screens. We  have all of our screenshots. Now, before we upload our screenshots, I only have five screenshots  for the sake of this example. Like I said, you can have any number of them. So, I'm going to  go 1 2 3 4 5. And then I'm going to delete these last three just to clean it up. You'll see when  I upload my screenshots. I don't want anything like extra here. So, that'll leave us with five  screenshots. So, now when I hit app screens here, we're going to upload our device screenshots.  You can see I have screen one, screen two, screen three, screen four, screen five. And here  I have the iPhone 16.9 and the iPad 13 in. Now, if I go back to my finder, so channel control,  we'll call this our our dashboard. So, I'm going to look for my dashboard screenshot. There it is  on the iPhone. I can just drag it in here to the iPhone. And then back to the Finder. Go to the  iPad. Find the dashboard. There it is. Drag it into the iPad. Now, I'm only going to do one more  screen. Like, you don't want to watch me drag and drop so many. And then for screen two, the text  I got is analytics hub. Okay. So, we'll do our analytic screenshots again. Back to Finder. I'm  on iPhone. Here's my analytic screenshot for the iPhone. Cool. Back to Finder. iPad. Analytic  screenshot. Cool. There we go. Now, I'm going to edit here. I'm going to upload the rest of my  screenshots. You don't want to watch me drag and drop those all in. It's boring and repetitive.  So, see you in a second. All right. I've brought in the rest of my screens. So, now I'm going to  hit save. And then you will see them populate here accordingly. So, now, like I said, if you for  some reason nailed the design, you like the design on the template you picked. Now, you can just hit  upload and you're done. But, we're going to make some changes because I don't like the roundness of  this font. You can see the colors not quite right.

[00:08:07]And I'm going to change the background cuz I like  a gradient that goes across all the screens. And I'm going to change the device. So, let's actually  start off with the background here. We can pick gradient. And there's tons of customization  options, by the way. I am just being brief, giving you an overview. I do have another video  where I go really in-depth into how to use app screens. You can check that out, too. Link will  be in the description. But let's go to presets on the background. And what kind of gradient  do I like here? Going. All right. This Mirage, I still like the dark feel. So, this Mirage looks  good. And I always like these screenshots where the gradient goes across all the screenshots  so the screenshots look cohesive. So, you get that pretty easily. Like look how quickly I just  did that. And then now let's start editing this screen because the cool thing is once I edit this  screen, I can just hit like apply all settings and I don't have to customize all the other screens.  It's great. So let's start with the device here.

[00:08:53]You can see a flat device mockup. You can see the  color here. I'm going to go real light. So now you can see the device is silver instead of black. And  I like that because it pops. Now let's talk about the font here. This channel control that color  is not quite correct. So I'm going to click on the font. I'm going to highlight that channel.  And then I'm going to pick the color. And then now I'm going to do the eyedropper because I want  to pull the color right from my app so it matches perfectly. There you go. And then back to the  font. The font family is Nuto. You click on the font. Uh let's go with Roboto. It's a typical tech  font. Hit select. And then you can make it bold.

[00:09:23]You know, you can do do whatever you like here.  And of course you can continue to customize and tweak this all to your liking. I feel like that's  enough for the demonstration. So now that I got what I want, I can hit this button right here.  Copy settings. Copy from screenshot one. We want this to go to all the screenshots. And I did the  background settings, device style, text styles, and that's really all I did. So, I'm going to  hit copy. Now, you're going to see the rest of these. You see the font changes, see the font  color change. Now, all my devices are silver as well. So, we're good to go. I am ready to export.  These are the changes I wanted. But you see how quickly and easily I got my screenshots in. I  made some changes to make it look like my app, my brand, everything matches. Again, super fast  and easy. Now, that was just for the iPhone. We can go to the iPad, and you can see those styles  copied over. Look at the font. Look at the silver device outline. Look at the gradient going across  the background. Boom. iPad screenshots. And again, if this isn't exactly what you want, there's a  very powerful editor tool. Like you see me do all this. You can tweak all kinds of things. So, the  last thing we want to do is preview and export.

[00:10:20]And now we can preview what we have. Again, we  only have the iPhone 6.9 and the iPad 13, but if you had multiple languages, if you had more device  variety, this would all show up here. And you can get a quick preview before you export and upload.  Now, you can download the zip of all these files, but that's the old way. Like, you're going to  spend so much time going through that file, dragging and dropping to all the different  languages, all the different devices. That's just such a waste of time. Upload all app stores.  You can authenticate your app store connect account with AppScreens. So, AppScreens has the  permissions to just upload these screenshots. I've already done that offscreen because that takes  a few minutes and I didn't want to bog down the video, but AppScreens has great documentation.  It's pretty simple. They walk you through it. So, I've already authenticated. So, I want to hit  upload to app stores. Now I need to connect my credentials to this. So I'm going to hit upload  to app stores. I haven't done my credentials.

[00:11:06]Hit okay. So it pops up on the app. Remember when  we added the app and added our bundle ID? Well, I forgot to do credentials. So you do that and then  connect your App Store Connect. And then if you had Google Play, you would do that as well. But  I only have the App Store Connect credentials. So hit select. Now that my credentials that I created  when I authenticated my App Store Connect account with AppScreens are good to go. They're connected  to the Creative View app. Hit upload to App Store.

[00:11:27]And it's going to take a couple seconds to upload  all this, but once this is done uploading, we'll go back to App Store Connect. We won't see them at  all because I have to refresh App Store Connect, but I'm going to show you this in real time. All  right, it's uploading. All right, there we are.

[00:11:39]Exports away. Cool. It's been uploaded. Hit done.  Now, let's go back to App Store Connect. And okay, this is where we copy and pasted our description.  If you remember, I don't have any screenshots. Oh, okay. View all sizes in media manager 6.9. These  are our screenshots that we just created. Boom.

[00:11:55]Uploaded. And like I said, if you do the 6.9  display, here you go. You get it for all these other displays and it uses those screenshots.  So, super fast and simple. What about the iPad?

[00:12:03]Did we get our iPad screenshots in there?  Boom. There's the iPad. And now we have it for all the other iPad displays as well. So,  there you go. Even if you're not a designer, you saw how fast and easy it was for me to  get screenshots uploaded into app screens.

[00:12:17]Pick a great looking design. I could tweak  the design and it took no time at all. So, if you were staring at App Store Connect and you're  like, "Oh man, how do I get these screenshots in here?" And you're not a designer, AppScreens  is a great tool. You should check them out.