The iPhone app is made and you feel ready to ship. However, you need to get the iPhone app screenshot images into the App Store. When you work at a great place like CARFAX, there are other awesome people who do that quite well.
When doing it on your own, it’s no small feat to make and upload images for your iPhone app that are decent. Sure, one can just grab a screen shot of the app and shove it up there. However, high quality images that evoke an emotional response and reveal interesting parts of your app are best.
Some questions came to mind while I was going through this process:
- How to create a screen shot of the iPhone app without the status bar?
- How to have the screenshots look fancy like the Clear or CARFAX mobile apps?
By fancy, I mean have the screenshot surrounded by an iPhone image that is appealing.
Possible Solutions
Let’s quickly go over some possibilities I first ran across. At first glance, placeit.net looked promising. Searching on quora, picapp.net was another possibility. If all else failed, I was going to back to the Ray Wenderlich tutorial to dig up another answer.
placeit.net
placeit.net had real promise. I found out about it from the Ray Wenderlich tutorial. placeit.net has lots of variety in their images. After playing around with it for a long time, I found an image I liked but it didn’t seem like a drop in solution for use in the App Store. Since the variety is fantastic, I may go back to it later for some of my website marketing. For app images though, I eventually decided to start out with something simpler.
picapp.net
This site has a simple and easy to use interface. I like how they have things set up so that you can use PayPal and codes to get your purchase. After playing around, I came up with an image I like. So how many images do I need? Five images for four phone sizes came to twenty images. Each image would cost a few dollars. Hmm. Can one do better?
Ray Wunderlich Tutorial
The tutorial title is How to Make Great App Store Screenshots. It’s a good tutorial. It introduced me to several different options. The last time I saw this tutorial I skipped down pretty quickly to the Photoshop solution so I hadn’t deeply checked out the other options.
Random Thoughts
While going through the tutorial and seeing how much time I spent on all of this, I started having some random thoughts. Thoughts like:
- Why is this taking so much time?
- There’s clearly a market for iPhone pictures for the app store.
- Why do I see typos wherever I look? For example, Screenshot Maker Pro has some serious grammar errors here.
After I got over the typos, I saw that Screenshot Maker Pro looked promising.
Screenshot Maker Pro
I had my doubts due to the typos and from what I saw on the webpage. However, trying out the app had increased my confidence in the solution. After taking a screenshot, making an image, and playing with the settings, I found something I like. However, it’s the wrong size and transparency is on. Apple doesn’t like App Store pictures with the transparency on.
So, into an image editor I go. I tried various things including a command line tool called sips. However, I finally landed on using Acorn. It only cost me about $30. My goal was to just make a 4.7 inch portrait image that’s 750 wide x 1334 tall or vice versa for landscape. After some messing around, I got something that worked. I had to resize the image and then the canvas. I also figured out how to turn off the transparency aka alpha by using the Preview app.
With this new found knowledge, I did the other sizes. For the iPhone 4S, Screenshot Maker Pro didn’t quite work. So, I just uploaded the screenshots themselves. Sometimes you have to know when to say when and move on.
Specific Example For an Image That I Wanted as Landscape:
- While preserving aspect ratio, I resized the image to a height of 750 pixels. The width ended up being 1089 pixels.
- I resized the canvas width to the needed 1334 pixels
Time to get rid of the transparency. I turned off the alpha using Mac Preview’s export to PNG with the alpha unchecked.
Image Concerns
- One of my images showed off the notification that the app sends. However, it also showed the home screen. That violates the following guideline: “Never display the Apple Watch, iPad, iPhone, iPod touch, or Apple TV Home screen or any icon or image that you do not own.” I deleted that image.
- Looking at my other images, another concern arose. The status bar showed a specific carrier, AT&T.
To hide the status bar for App Store sakes, I found this from a Stack Overflow post:
|
1 |
self.window.windowLevel = UIWindowLevelStatusBar; |
With that I could temporarily hide the status bar while taking the screen shots. So, I redid all the images.
Acorn Again
Now with the concerns are out of the way, it’s time to reuse Acorn and fix the newly created portrait images with Acorn:
- Resize image height to 1334 (forces width of 583 to keep same aspect ratio)
- Resize canvas to 750 width
- Open in Preview, export as PNG, uncheck “Alpha”
Images Loaded
I loaded the images into iTunes connect. It complained about one of the images, but logging out and logging back in let me put the last image into place.
Now What?
Next step, I need a website. While figuring out how to get a starter webpage up quickly that doesn’t totally stink, Freddy A. Montas mentioned LaunchKit. Glancing at a related TechCrunch article, it seems like LaunchKit might take care of what I need and maybe even the App Store screenshots I just did. So, all of the above might not be needed in the future. That’s OK. I learned a lot and that won’t be my last release into the App Store.
Good luck with your app submission and marketing adventures!
Disclosure: I work for CARFAX as an iOS Software Developer.
Update April 2019: Apple Screenshot specifications require an upload of 6.5-inch screenshots. That means the iPhone XS Max. However, Screenshot Maker Pro does not support iPhone XS Max. This will not do. I am hoping that reading Save time and increase your apps conversion rate serves well.
