How to Make Great App Store Screenshots

What do apps like Cut the Rope 2, 7 Minute Workout Challenge, and Scribblenauts Remix all have in common?

Click the above links to see for yourself. Notice that each has a particularly interesting app store screenshot to lure and entice customers.

Instead of just doing a screen capture of the simulator and calling it a day, the developers added graphics, showed the app running on a device. It has the effect of making you want to download it, right now!

You may be thinking to yourself, “But I don’t want to pay a designer to create fancy screenshots.” or even worse, “I don’t have the graphics skills to make sexy screenshots like that.”

Well, there’s good news. Thanks to a plethora of tools available, creating interesting app-sale-driving screenshots has never been easier or affordable.

Let’s look at a screenshot from Ryan Nystrom’s Weather App:

Pretty nice looking app, right? Clean design, very professional, useful, everything you could want in a nice weather app. A screenshot like this could entice someone to download the app, but what if it was shown at an eye-catching angle with some descriptive text and background image?

Now that looks like a truly impressive app! Just a few small additions transform a plain screen capture into something more grandiose.

What if you took a basic screenshot of Flappy Felipe:

And spiced it up with an artwork overlay?

This makes the game feel playful, and the Felipe bird acts as a mascot that represents what the app has to offer.

Today, you’ll learn how to create screenshots like these without having to pay a graphic designer and without having to go to art school yourself. It’s a lot easier than you might think.

Getting Started

Here are four tools that you can use to create nice screenshots and promotional images with minimal investment and difficulty:

• Screenshot Maker Pro (iOS – Free to Try)
• Promotee (OSX – $4.99 USD)
• PlaceIt (Website – Free/Paid)
• Adobe Photoshop CC (OSX/PC – Free Trial/$9.99-$19.99 per month).

The first three are pretty much drag-and-drop, but lack flexibility. Photoshop is the most flexible, but also the most time-consuming.

In this article, we’ll take a quick tour of the first three options, then we’ll have a step-by-step tutorial on how to recreate the beautiful screenshots shown above in Photoshop.

Screenshot Maker Pro

Screenshot Maker Pro is a free iOS app that lets you place screenshots into pictures of iOS devices. You can save up to two screenshots per day, or you can purchase the unlimited saving option for $2.99.

The main benefit of Screenshot Maker Pro is that it’s user-friendly. In addition, there are several options for devices on which you can choose to show your screenshots. You can choose from iOS, Android, Windows, Blackberry and even Mac OSX devices to display your screenshots.

The interface is as simple as choosing the image you want to show on a device and then choosing the options such as type of device, reflection, shadow, etc. Within mere seconds, you can create images like these for Flappy Felipe and Ryan’s Weather App:

Did you notice how showing the apps running on a device at an angle adds a bit of flare and makes them more interesting?

Unfortunately, Screenshot Maker Pro does not allow you to add overlays or text onto your screenshots. You would have to do this in software such as Photoshop or another application.

Also, the screenshots it creates are not sized for any particular app store, so you’ll need another app to size them accordingly. However, it is a useful program to know when you want to create a quick screenshot for a myriad of devices.

Promotee

Promotee is an OSX app that is very similar to Screenshot Maker Pro.

Its drag-and-drop interface lets you place images into pictures of different devices. Unlike Screenshot Maker Pro, it doesn’t give you options for Windows and Blackberry devices.

To use Promotee, just drag your image into the device you want and click the Save button.

It’s extremely easy to use, but lacks customization options. Similar to Screenshot Maker Pro, it will not export images that are sized to fit any app stores. You’ll need to resize them manually with different software.

If you’re looking for something that is quick and easy to use, Promotee may be the tool for you. If you’re looking to tinker with customization options, then you may want to look elsewhere.

PlaceIt

PlaceIt is a website that allows you to drag-and-drop your images onto devices, just like Screenshot Maker Pro and Promotee. However, PlaceIt really shines for other reasons, namely, the sheer number of devices and scenarios available.

The nice thing about PlaceIt is not only does it put your screenshot inside a device, but it also shows the device in different contexts, like on a table or in someone’s hand. You can even create animated images to show the user how to operate the app.

Pricing ranges from free to $100 per photo, or you can subscribe for $12 to $250+ a month. The price you’ll pay depends on how big you want to go.

If you want a variety of still and animated images, PlaceIt is definitely worth checking out. As far as pricing goes, the structure accommodates almost every budget. Best of all, the images look great.

PlaceIt does not offer native support for overlays, text or correct sizing for app stores, much like Screenshot Maker and Promotee. If you’re looking for those options, you’ll need additional tools.

Adobe Photoshop

Adobe Photoshop is going to give you the most features and versatility for your money when it comes to creating screenshots and other images. Wait a second…where are you going?

Photoshop is not as complicated as it seems. Also, with Adobe’s new subscription model, you don’t have to make a large initial investment in software, so there’s little risk of buyer’s remorse.

For the rest of this article, we’re switching to tutorial-style, and I’ll show you how to get up close and personal with Adobe Photoshop.

Get ready to have a little fun with Flappy Felipe and Ryan’s weather app!

Installing Photoshop

If you’re not already a Photoshop user, sign up for an Adobe account and download a trial version of Photoshop CC here by clicking Try under Photoshop and Lightroom.

Bring up the installation wizard and follow the steps install Photoshop CC and Adobe Creative Cloud. Creative Cloud lets you install software and save files to their cloud server, should you decide to do so. The feature also makes updates much less disruptive, so it’s good to leave Creative Cloud running in the background so it can do its thing.

Flappy Felipe Flying in Photoshop

The first enhanced screenshot you’ll create in Photoshop is for the Flappy Felipe game. You’re going to take a screenshot of the game and add some graphics for fun.

To give you a head start, download the Flappy Felipe artwork folder Felipe_START. Save and unzip the Felipe_START folder to your Desktop.

Locate a folder called 8bit_wonder in the Felipe_START folder. You’ll use this font in the Felipe screenshot project, so you need to install that onto your system.

You may also download it from here. For Mac users, double-click the 8-BIT WONDER.TTF file and then click Install. Windows users, if you’re unsure how to install fonts, check out this link.

Open Photoshop once installation finishes. Click on the Window menu option and make sure that your Layers, Paragraph and Characters window panels are open.

There are two easy ways to open artwork in Photoshop. The first way is to navigate to File > Open… in Photoshop and then browse for your artwork.

The second way, which is my preferred method, is to simply drag-and-drop the artwork to the Photoshop icon in the dock/toolbar.

Using whichever method you like, open felipe_bg.png, felipe.png and speech_balloon.png in Photoshop.

Each image will open in Photoshop in its own tab. Click on the felipe.png tab, Select All (Cmd+A / Ctrl+A), and Copy (Cmd+C / Ctrl+C).

Next, click on the felipe_bg.png tab and Paste (Cmd+V / Ctrl+V). Now you have your Felipe mascot on the screenshot!

Every time you add an element to your image, the program creates a new layer in the Layers panel. This goes for text, shapes, pasted images, etc.

It is wise to get into the habit of naming all of your layers.

Double-click on the text of Layer 1 in the Layers panel and name it Felipe. Now you’ll know where to find Felipe when you need him (besides on RayWenderlich.com, of course).

Using the same steps as before, click on the speech_balloon.png tab, Select All (Cmd+A / Ctrl+A) and Copy (Cmd+C / Ctrl+C).

Click back on the felipe_bg.png tab and Paste (Cmd+V / Ctrl+V). Double-click the text of Layer 1 in the Layers panel and name it balloon.

So now you know the basics of opening images in Photoshop and combining them into one project, and it’s easy enough.

There’s still one very important step, though. You need to save your project. In fact, save as often as you can. Although Photoshop CC is pretty stable, it would be a shame to lose your work.

Use Cmd+S / Ctrl+S or File/Save to save your new project as felipe_bg.psd in the Felipe_START folder. Your file will now have a .PSD extension (Photoshop Document) which will save the project in its entirety, including the layers.

Now that you have all of the pieces you need, it’s time to arrange and add layer styles. In the Photoshop Tools Panel, select the Move Tool (V). If you don’t see the Tools Panel, you can find it by navigating to Window/ Tools.

Select the Felipe layer in the Layers panel and move him into the lower-left corner of the project by clicking and dragging in your workspace.

Now select the balloon layer in the Layers panel and move it down by Felipe.

Select the Move Tool to fine-tune your layer positioning using the arrow keys on your keyboard. Holding Shift while pressing the arrows creates large movements and just the arrow keys move the layer in small increments.

Add Some Style

One of Photoshop’s most notable features is the ability to add different styles to layers. For this project, you’re going to make the Felipe mascot and his speech balloon stand out from the background image. Double-click the Felipe layer in the Layers panel and the Layer Style window will appear.

Click the checkboxes next to Stroke and Drop Shadow. As you may have guessed, this will add a line stroke and drop shadow effect to the Felipe mascot. However, you’ll need to customize the effects.

Click on the Stroke tab and set:

• Size to ’3′
• Position to ‘Outside’
• Blend Mode to ‘Normal’
• Opacity to ’100′
• Fill Type to ‘Color’ and Color to ‘White’

To change the color to white, click the box next to Color, which will bring up the Color Picker window. Here you can drag the circle on the left to the upper-left corner and then click OK.

Now click the Drop Shadow tab and set

• Blend Mode to ‘Multiply’
• Opacity to ’75′
• Angle to ’120′
• Distance to ’0′
• Spread to ’45′
• Size to ’13′
• Noise to ’0′

Click OK and now you’ll see Felipe outlined in white with a drop shadow and a list of effects under his layer. Looking good, Felipe!

Now you’ll apply the same layer effect to the balloon layer, but this time you only need to make a couple of clicks. Right-click on the Felipe layer in the Layers window and select Copy Layer Style.

Now right-click the balloon layer and select Paste Layer Style.

Voila! Now the speech balloon has the same layer style as Felipe, and it was as easy as copying and pasting.

Felipe Has Something to Say

Now, Felipe is an outgoing bird, so you’ll need to add some text to his speech balloon. In the Tools panel, select the Text Tool (T).

In the Character panel, select the 8BIT WONDER font you installed and set the size to 40.

Then click the box next to Color and change the color to #224200 in the Color Picker Window. Click OK.

Next, in the Paragraph panel, select Center Text.

Make sure your balloon layer is still selected in the Layers window, and that your Text tool is still selected from the Tools panel. Then click and drag a rectangle over the balloon layer to create a text box.

Now type (without quotes) “FANTASTIC FELIPE FLAPPING FUN” into the text box you just created. If your text runs outside of the box, you can use the squares on the text box’s border to resize the text area.

Click on the Move Tool in the Tools Panel and adjust the position of the text with the arrow keys on your keyboard as needed. You’ll notice that the text layer has now automatically changed its name from “Layer 1″ to “FANTASTIC FELIPE FLAPPING FUN”, so there’s no need to change the layer name.

And there you have it, your very own screenshot with a cartoon overlay!

All that is left is to Cmd+S/CTRL+S to save your changes to the .PSD file. Then go to File /Save For Web…, which will bring up the Save For Web (Cmd+Option+Shift+S) window. Here you can save it as a PNG-24 file and send it off to the App Store.

If you want to compare PSD files, you can download the completed version here.

What’s the Weather Like Today?

Now that you’ve mastered essential Photoshop skills, this next lesson shouldn’t take long to complete. This screenshot is going to combine the use of Screenshot Maker Pro and Photoshop to make a unique image.

Download the source images here. Save and unzip the folder to your Desktop and open it.

Here you’ll see screenshot.png, which was created using Screenshot Maker Pro and bg.png, which is just part of a picture taken for this tutorial. Open both images in Photoshop.

Now you need to past the screenshot.png image on top of the bg.png image.

• Select the screenshot.png tab
• Select All, and then Copy
• Then select the bg.png tab and Paste

• Double-click Layer 1
• Rename it screenshot
• Cmd+S to save your PSD file to the Weather_START folder
• Name your new Photoshop document Weather.psd

As noted before, software such as Screenshot Maker Pro, Promotee and PlaceIt do not export images to the exact sizes that app stores require. However, in Photoshop, you set the size of the image:

• Open the Image Size window by navigating to Image/Image Size… or use Cmd+Option+I
• Change the width to 1024 and height to 768
• Click OK

If you want to see the actual size of the image, navigate to View/100% and you’ll see your image in all of its 1024×768 glory.

If you’re on a Mac, change the font to Helvetica Neue, Thin, 60px in the Character panel. If you’re on a PC and don’t have Helvetica Neue, choose a comparable thin, sans-serif font.

In the Paragraph panel, select Center Text.

Select the Text Tool (T) in the Tools Panel and in the lower-right corner of the image, place a rectangle text box.

Now type (without quotes) “Live Weather Updates” with “Updates” going on its own line. If it doesn’t fit, resize the text box by dragging its corner until it fits neatly.

Select the Move Tool from the Tools Panel to fine-tune the text’s position and there you go! Now File/Save For Web… (Cmd+Option+Shift+S) and save as a PNG-24 file. Make sure the size is set to 1024 x 768.

Just like that, you’ve created two enhanced screenshots ready for the App Store!

If you’d like to compare PSD files, you can download the final version here.

Where to Go From Here?

Always remember to take advantage of every available slot for screenshots when you upload to an app store.

If you’re allowed 5 screenshots, don’t rest on your laurels at 3 or 4, go big and use all 5 because just having a couple more can make a big difference to your sales and downloads.

Browse the app stores and look at your favorite apps’ screenshots.

• Are they just plain screen grabs from the simulator or are they enhanced in some way?
• Are they shown on an actual device? Do they have cartoony overlays or mascots?
• Do any of the pictures show a user interacting with the app or use animation to show how it works?

Use the ideas you see to inspire you as you create screenshots for your apps.
Try to replicate some of the effects you see from popular apps’ screenshots in Photoshop using the tools that you’ve learned in this tutorial. A great exercise is to use the .png graphic files from your app and combine them in Photoshop to see what you can create.

Don’t be afraid to try out new tools that you find online for screenshot creation. You never know if you’ll find the one that works the best for you.

Thanks for taking the time to join me for this tutorial. If you have questions or ideas that would help other developers, or perhaps just want to show off your new screenshot skills, feel free to leave your thoughts below.

How to Make Great App Store Screenshots is a post from: Ray Wenderlich

The post How to Make Great App Store Screenshots appeared first on Ray Wenderlich.