Table

of Contents
Introduction
Preface
1. iOS App Screenshot Introduction
2. Designing Screenshots with Keynote
3. Designing Screenshots with Sketch
4. Photoshop Template Resources
5. Conclusion
Published: 31/10/2017 | Last Updated: 31/10/2017 | AppCoda © 2017

Copyright ©2017 by AppCoda Limited

All right reserved. No part of this book may be used or reproduced, stored or transmitted
in any manner whatsoever without written permission from the publisher.

Published by AppCoda Limited

All trademarks and registered trademarks appearing in this book are the property of their
own respective owners.
Preface
Writing code is just one of the steps of developing an App. Other than designing the app
UI in earlier stages, you will need a few beautiful screenshots when submitting your app
to App Store. Standard screenshots can already satisfy the requirements of App Store, but
visual pleasing screenshots are definitely more attractive to users.

Many would say, "It is impossible to learn design without natural talent."

The saying can actually be applied to almost any subjects, disciplines or even anything.
You cannot learn XXX (just fill in the blank) without natural talent. This is not something
I believe.

I am a software engineer specializing in web and app development. But I am not a

professional in UI/UX design. Before becoming an indie developer, there was a design
team in the company I work for. I didn't have to struggle with the design part. After
founding AppCoda, I no longer have the privileges of having a dedicated design team.
And, due to the tight budget, I could not hire a UI designer and have to take up the design
role. However, in early stages, I found it really hard even for designing a simple mockup
photo, not to even mention the app UI.

Since then, I started learning UI design. My aim is not to become a UI designer but I
want to understand more about app design and eventually design my own apps. Till now,
I am still learning, but what I discovered is that app design is a skill that you can learn,
even if you're without natural talent. The most important thing is to expose yourself to
other high-quality designs to develop the design sense.

Why would I choose to share the skills of screenshots design? We always say first
impressions are very important. Except for logos and the app preview videos, the app
screenshots are the first impressions your app give your potential users. It's just like shop
facades. So, how can you ignore the screenshots design while having beautiful
screenshots can boost the download rates of your app?

App Screenshot Design Guide | AppCoda 4

That is why I am writing this guide. I wish it could offer you a low-cost option to design a
series of beautiful screenshots before you can afford to hire a designer.

App Screenshot Design Guide | AppCoda 5

iOS App Screenshots Introduction
To submit an App, the most standard requirement is to upload a few screenshots of the
app (at most five).

Normally, especially when you are an indie developer without a design team, you will just
upload the app screenshots to iTunes Connect directly, like the screenshots shown below:

It's not difficult to find similar screenshots on App Store:

App Screenshot Design Guide | AppCoda 6

Beautiful Screenshots Attract More
Downloads
Those screenshots are fine and they do meet the App Store requirements. But they are
not attractive enough. Take a look at this:

App Screenshot Design Guide | AppCoda 7

How do you feel? Is it more attractive than a standard screenshot? Although the above
example is just a screenshot wrapped by an iPhone device, it gives a very different feel.
The heading and subheading also allow you to briefly introduce the function of the app
and add promotion slogans.

Maybe you would ask, "Why do I have to spend time on designing screenshots when I
have already satisfied the launching requirements of Apple?"

Let me ask you, "Why do you want to launch your App?"

Different developers may have a different reason for creating an app. But one thing in
common is all want to have more people knowing their products and downloading the
app. The series of beautiful app screenshots is one of the many important factors
attracting users to download your app.

You Don't Need Natural Talent To Do It

App Screenshot Design Guide | AppCoda 8

As mentioned, UI designers will be responsible for the design of these screenshots if you
have your own design team. You can stop reading it if you do. But if you are just like me,
with no design team or a designer, how can you make your screenshots look great?

You can, of course, hire somebody else to design it if budget is not your primary concern.
However, it is not that difficult to create it yourself. All the polished screenshots that you
are going to see can be easily created by using Keynote or Sketch or Photoshop.

Just like many other developers, I am specializing in programming instead of design. I

am writing this tutorial aiming to teach you how to create a beautiful App screenshots
with low cost in the view of an indie programmer. This tutorial will focus on introducing
these two tools to you:

Keynote
Sketch

By using one of the tools above, together with some free (or paid) templates, you can
easily create some stunning app screenshots.

App Screenshot Design Guide | AppCoda 9

Designing Screenshots With Keynote
If you are using Mac, you must have installed Keynote. Let me first introduce how to
wrap the app screenshots with an iPhone frame. You must be asking, "Isn't Keynote just
used for preparing slideshow?" Keynote can actually be widely used for designing
screenshots, product mockup photos, and even app prototype.

Let's have a look at the final deliverables. The screenshots below are all designed by using
Keynote. Don't they look nice?

Let's learn how to design it now.

Preparing the Graphics

To begin, let's talk about the design resources. Where can we find some free iPhone
devices images?

Facebook has created a series of device resources that are free to use in any personal and
commercial projects. This device photos cover most of the popular phone models (as well
as computer, tablet, and watch models) for public to download.

You can check them out on this website:

http://facebook.design/devices

App Screenshot Design Guide | AppCoda 10

If you want to download the frame images of all devices, click "Download All Devices". As
our demonstration is focusing on iPhone 7, you can choose "Phone" and roll down to find
it.

Click "iPhone 7" to download related files. Unzip it and you will see a file "Device". There
are iPhone 7 images in different colors.

App Screenshot Design Guide | AppCoda 11

Wrapping Screenshots With iPhone Devices
With the resources prepared, open Keynote. Open a new file and choose the template
with white background and black words. I believe you are not new to Keynote and should
be very familiar with this step. You should have the same screen as below:

As we are designing an app screenshot, the original size for slides is not suitable. Choose
"Document" on the upper-right corner of the application window. Click the drop-down
list of Slide Size and choose "Custom Slide Size…" Set the width to 750 pts and the

App Screenshot Design Guide | AppCoda 12

height to 1334 pts, i.e. the size of screenshots of iPhone 6/7/8. If you want to design
screenshots in other sizes, just change it respectively.

Click "OK" and you will see a slide in the size of iPhone 8. Delete the two default
textboxes and change the background color to Silver Grey in "Format". If you are not
good at handling color like me, you can simply pick any flat color
(https://www.flatuicolors.com or http://www.flatuicolorpicker.com). Most of the color is
visually pleasing.

You can now add the iPhone 7 resource to Keynote and place it at the lower part of the
slide. Add a heading and a subheading.

App Screenshot Design Guide | AppCoda 13

At last, add the app screenshot. You have to resize the screenshot a bit (W: 519pt, H:
923pt). This is how the product looks:

App Screenshot Design Guide | AppCoda 14

This design is simple yet improved a lot comparing with the standard screenshot. Here is
one more tip to make it more convenient to change the screenshot: Choose the
screenshots added earlier, click Format > Advanced > Define as Media Placeholder.

You can simply copy and paste to change other screenshots afterwards. Or you can click
the "Media" icon to choose suitable screenshots from your Photo Library.

Adding Irregular Background Shape

App Screenshot Design Guide | AppCoda 15

If you find the background too boring and want some variations, you can add some
simple pattern. Websites like thepatternlibrary.com and subtlepatterns.com offer tons of
subtle patterns for free download.

I will use this pattern (http://thepatternlibrary.com/img/an.jpg) as an example.

Download and save the file. Go back to Keynote and make a copy of the slide you made.
Change the headings and screenshot (of course, you can keep the original screenshot).

Now, choose "Shape" from the toolbar and choose Pentagon.

Reverse and enlarge the pentagon as below. Right-click and choose "Send to back" to
move the pentagon to the most bottom layer.

App Screenshot Design Guide | AppCoda 16

Keynote presets the shape as blue. Choose "Style" in the sidebar and change "Color Fill"
to "Image Fill" in Fill part. Click "Choose" and select the file you downloaded. Keynote
will automatically fill the pentagon with the pattern. Right-click and choose "Send to
back" to move the pentagon to the back.

As the original font color is set to black, it is hard to read the headings. Just change the
color to white.

Using Blurry Backgrounds

It is not always necessary to wrap the screenshots with an iPhone device to make it
beautiful. By applying different background photos, you can also some great screenshots
with different effects. As background photos can't be too fancy, a simple blurry photo will

App Screenshot Design Guide | AppCoda 17

do the job. Although Keynote can't create blurry backgrounds, you can find many free
resources on the Internet easily. I will be using a blurry photo designed by Brandi Lea for
demo. You can first download it through this link:

https://dribbble.com/shots/1576433-16-Free-Blurry-Backgrounds

Unzip the file and you will find 16 blurry background photos. Choose any one of them.

Go back to Keynote and click "＋" to add a blank slide. Add the background photos you
chose to the slide, then add words and screenshots to create the below design. You can
also use "Style" function to create different effects. I added shadow for the screenshots.

You don't have to follow the above tips and tricks strictly. Mix and match different
elements and you will get different designs. For example: adding an oval to separate the
screenshot and the words.

App Screenshot Design Guide | AppCoda 18

Creating Screenshots With Hand Holding iPhone
You can also use another set of resources provided by Facebook
(http://facebook.design/handskit) to create screenshots with hand holding iPhone.

It is not difficult to create a screenshot as below. After downloading the resources, add a
blank slide in Keynote. You can change the background color first if you want. It is also
fine to keep it white. Then, add one of the photos of hand holding iPhone to Keynote.
Combine it with headings and the original screenshot. That's it!

App Screenshot Design Guide | AppCoda 19

Exporting To Image
I have shared with you some design tips for creating great app screenshots. There is one
more point to mention.

How can we export these screenshots in Keynote?

It is pretty easy and probably you already know the answer. Keynote has an export
function to change the slides to other file formats. In the menu bar at the top, choose File
> Export To > Images.

Choose "All" and set the format as "PNG". If you only have to export some of the slides,
just mark the target pages. Click "Next…" to continue and choose the file to export.

App Screenshot Design Guide | AppCoda 20

App Screenshot Design Guide | AppCoda 21
That's it! You can find the exported files in the folder you chose. Now they are ready for
you to upload to iTunes Connect.

App Screenshot Design Guide | AppCoda 22

Designing Screenshots Using Sketch
Have you heard of Sketch? It is a very popular design tool in recent years. Developed by a
Netherlands company named Bohemian Coding, Sketch is a tool built for UI Design.
Engineers like me have always found Photoshop hard to use in designing app UI.
Comparatively, Sketch is more simple and easy to use.

Sketch is a paid software, which is only available for Mac. While the full version costs
USD$99, the company provides a 30 day trial period. I think it is worth to invest in the
software if you use Sketch as the app/web interface design tool. That said, if you just
want to use it for designing some simple app, you may want to save the money. Keynote
is good enough for the job.

Before we continue, let me clarify. It is not a full tutorial for Sketch. I will focus on a few
common skills of designing app screenshots.

Downloading Sketch Trial Version

App Screenshot Design Guide | AppCoda 23

In case you haven't installed Sketch yet, you can download the trial version from the
official website (https://www.sketchapp.com). The trial version does not have any
limitation. It is just the same as the full version but it expires after 30 days. If you don't
have time to follow the demonstration now, I suggest you download it later. Just wait
until you have time to go through the tutorial.

Creating a Screenshot With Sketch

After installation, open Sketch and create a new document. Then, click the "＋" button
from the toolbar and choose "Artboard". If you are more familiar with keyboard
shortcuts, you can simply press A after creating a new document.

Sketch provides different sizes of artboards. You can choose "Apple Devices" from the
drop-down list and choose "iPhone 8".

App Screenshot Design Guide | AppCoda 24

Next, you will see an artboard in the size of an iPhone 8 (4.7-inch). You can select the
newly added artboard and change the background color in the Inspector on the right. My
usual practice is to insert a rectangle over the artboard as a background for easier editing.
Press R and the cursor will change to cross shape. Pull down from the top-left corner to
the bottom-right corner of the artboard to create a grey rectangle in the same size with
the artboard.

App Screenshot Design Guide | AppCoda 25

On your left, it is the layer list. You can easily choose the object in the artboard. To
change the color of the rectangle, choose "Rectangle" and click the color button under the
Fills selection of the Inspector. Choose the color you like or type the preferred color code.

App Screenshot Design Guide | AppCoda 26

Using Sketch, you can easily create gradient background color. Click the second choice in
the previous color selection and Sketch will automatically generate gradient effect.

You can move the gradient line to create different gradient effects.

App Screenshot Design Guide | AppCoda 27

One of the advantages of Sketch is you can easily find third-party plugins and active
users. Even if you are not familiar with gradient colors, there are lots of designers
providing free color templates. Download them and add to Global Gradients directly. You
will be able to use them anytime. Here are links for a few color templates:

https://www.sketchappsources.com/free-source/1230-gradients-sketch-freebie-
resource.html
https://dribbble.com/shots/1998202-Gradients-free-sketch-psd
https://dribbble.com/shots/3380672-Sketch-Gradients-Freebie

After getting background color done, the following steps are very similar to what we have
done in Keynote. You can start by adding the iPhone device photo and then add the
screenshots. To add the headings, press keyboard shortcuts T to add text. It is also easy
to rotate the photo. Choose the photo and insert the degree under the "Transform"
selection of the Inspector to get it rotated.

Okay, you may wonder why you need to use Sketch to create the screenshot.

Yes, you're right.

App Screenshot Design Guide | AppCoda 28

At the very beginning of this guide, I pointed out that Sketch is a tool that focuses on UI
design. You may not be able to feel its power by just designing a simple screenshot.

Up to this moment, we are still using the free iPhone device photo provided by Facebook.
Are there any other photos? Yes, and most of them are designed for Sketch (or
Photoshop). Sketch's powerful community support may make you fall in love with it
immediately.

Check out the website www.sketchappsources.com. You will find different types of
mockup photos. Best of all, most of them are free. You are free to use different types of
iPhone frames to create stunning screenshots in different styles.

Here is another demonstration. I am using screenshot of the App "Taiwan Super

Weather" as an example. The screenshots have blurry backgrounds and simplified iPhone
frames.

App Screenshot Design Guide | AppCoda 29

When using Keynote, we have to use free blurry resources as background. Using Sketch,
you can easily create blur effect.

Go back to Sketch and add another iPhone 8 artboard. Paste a photo on the newly added
artboard. Basically, any photos will do but if you want to create the same effect as what I
am going to show you, download this photo (https://unsplash.com/?
photo=PC_lbSSxCZE).

Shrink the photo proportionally until it fits the whole artboard.

App Screenshot Design Guide | AppCoda 30

Let's apply the blur effect to the photo. Press R to add a rectangle in same size with the
artboard. After that, a grey rectangle will fully cover the background photo.

Under the Borders selection of the Inspector, cancel the color of the border and change
the color opacity under the Fills selection from 100% to 10% , creating a transparent
effect. To further apply the blur effect, click the drop-down list of "Gaussian Blur" and
choose "Background Blur".

App Screenshot Design Guide | AppCoda 31

Blur effect is created in such a simple way. You can change the amount under
Background Blur to create blur effect in different degree.

App Screenshot Design Guide | AppCoda 32

Then, we can now handle the iPhone frame. On the SketchAppResources.com website,
you can find the simplified version of iPhone frames. Download and save this resource
(https://www.sketchappsources.com/free-source/799-iphone6-plus-and-iphone6-
wireframe-sketch-treebie-resource.html). Unzip it and open the Sketch file.

Choose the smaller iPhone 6 wireframe on the right and paste it to the blurred
background photo. Resize of the wireframe in the Inspector with width 250 and height
490 .

App Screenshot Design Guide | AppCoda 33

The lines of the iPhone 6 wireframe are preset as gray. To change them to white, click the
triangle next to the iPhone 6 file in the Layer List to disclose the components inside. Hold
the command key and choose all the components. Change the border colors from gray to
white under the Borders selection of the Inspector.

At last, add your screenshot and a simple heading. That's it!

App Screenshot Design Guide | AppCoda 34

Exporting Artboards
Sketch provides an Export function allows users to export artboards to images in
different formats. To export the two artboards, choose them in the Layer List (of course
you can only choose one of them).

In the Inspector, click the + button in the Export section. Change the size from 1x to
2x , which means the exported photo will double the size of the artboard. If you have

been paying attention to the size of the iPhone 8 artboard, you will notice that it is set to
be 375 x 667 points, while the resolution of the screen is 750 x 1334 pixels. That's why we
have to set it to 2x when exporting to images.

App Screenshot Design Guide | AppCoda 35

At last, click Export Artboards and the image will be exported.

Designing Screenshots With Angled Devices

Up to this moment, all screenshots we designed are mainly using the front-face of
iPhones. However, some of the screenshots on App Store will show their screenshots in a
cooler way: with an angled device, e.g. Google Photos.

App Screenshot Design Guide | AppCoda 36

With some basic knowledge of Sketch, you can easily create screenshots like that. You can
just need some free/paid templates, plus the Magic Mirror plugin, to help you realize the
design.

First, where can you find the angled iPhone devices photos? Just do a search on Google.
Or you can go to these websites to buy them if you don't mind to pay:

https://designcode.io/angle
https://ui8.net/products/230-professional-mockups-collection
https://ui8.net/products/hero-iphone-7-mockups
https://bundle.smartmockups.com
https://lstore.graphics/uipk/
http://designerbundle.com/products/square-apple-devices-mockups-bundle/

There are fewer free resources for this type of iPhone frames. Here are two websites for
your reference:

https://www.sketchappsources.com/free-source/1973-iphone-templates-magic-
mirror-sketch-freebie-resource.html
https://dribbble.com/shots/2656867-FREEBIE-MagicMirror

Download and save the iPhone templates from the first website. We will use it for the
upcoming demonstration.

App Screenshot Design Guide | AppCoda 37

So, what is the Magic Mirror plugin? Embedding a screenshot to a flat (front-facing)
iPhone device is super easy. You just have to shrink the image and paste it to the frame,
just like how we did earlier.

But how can we embed the screenshots to an angled 3-D iPhone device?

This is where Magic Mirror comes in. Developed by James Tang, a Sketch/iOS developer,
Magic Mirror is a Sketch plugin designed for creating perspective mockup photo. It
allows you to embed any screenshots (or photos) to iPhone devices (or other designs), no
matter the iPhone devices are angled or not.

"Magic Mirror is a powerful plugin to perspective transform artboards into shapes.

Enjoy your freshly created mockups!"

- Bohemian Coding, Creator of Sketch

Magic Mirror is a free plugin but you would have to pay on monthly or yearly basis to
unleash all features (include exporting high-resolution images). You can check out the
details on Magic Mirror's official website (https://magicsketch.io/mirror/pro/). If you
want to buy it, you can use the promotion code "appcode30" for an extra discount.

The free version of Magic Mirror is good enough to go through the following
demonstration. Download Magic Mirror (https://magicsketch.io/mirror/) plugin. Unzip
and double-click "MagicMirror3-3.sketchplugin" to install.

Open Sketch. Choose Plugins from the toolbar on the top and choose Magic Mirror 3 >
Enable MagicMirror. After enabling it, you will find a Magic Mirror 3 selection in the
Inspector.

That's all for the preparation work. We can now start designing a screenshot.

App Screenshot Design Guide | AppCoda 38

Press A to add an artboard and choose the size of iPhone 8. Next, open the iPhone
frame resource downloaded earlier (https://www.sketchappsources.com/free-
source/1973-iphone-templates-magic-mirror-sketch-freebie-resource.html). There are
two angled iPhones. For this demo, I will use the left one.

Choose the left iPhone and copy it to the newly added artboard. Set the width and height
to 450 pts and 702 pts respectively.

App Screenshot Design Guide | AppCoda 39

Then, press A to add another artboard in the size of iPhone 8. This artboard is used for
preserving the original screenshot. You can paste the prepared screenshot to the artboard
directly.

Then, click iPhone 8 Copy artboard (the one you just pasted the screenshot to). Under the
Magic Mirror 3 section, tick the "Include in Artboards" checkbox. This indicates the
artboard can be used by Magic Mirror.

App Screenshot Design Guide | AppCoda 40

Go back to the artboard with the iPhone device. Click the triangle icon next to iPhone 8
in the Layer List and then expand the components in group 1 . You will see a layer
named "YOUR SCREEN". Click YOUR SCREEN and you will find there are choices appeared
under the Magic Mirror 3 selection of the Inspector. Set the drop-down list of YOUR
SCREEN as the artboard of iPhone 8 Copy .

App Screenshot Design Guide | AppCoda 41

Magic Mirror kicks in at this moment "mirroring" your screenshot artboard to another
image. It's so amazing! At last, add headings to finish the screenshot design.

App Screenshot Design Guide | AppCoda 42

Photoshop Template Resources
If Photoshop is your commonly used design tool, you can easily design the above types of
screenshots too. I will not go into details here. In general, the PSD templates usually
provide a Smart Object layer for you to insert the screenshots easily.

I highly recommend Sketch for screenshots (and interface) design. A minor advantage of
Photoshop over Sketch is that there are a lot of templates out there at your disposal. Here
are some of the template resources for your reference:

https://colorlib.com/wp/free-psd-iphone-mockup-templates/
https://www.mockupworld.co/free/category/iphone/
https://designshack.net/articles/graphics/100-iphone-psd-vector-mockups/
http://www.pixeden.com/psd-mock-up-templates/perspective-app-screens-mock-
up-16
https://psddd.co/screens-free-perspective-psd-mockup-templates/

App Screenshot Design Guide | AppCoda 43

Conclusion
We often say, "To build a great app, you have to nail the UI and UX!"

Of course, the app's UI is very important. You should not neglect other design elements
including icons and screenshots displaying on App Store. These small elements will
always affect users' views towards your products. A series of high quality and visual
pleasing screenshots can effectively boost the download rate. Even if the download rate
cannot be increased immediately, it can at least create a professional feel and build your
company's image.

I have introduced Keynote and Sketch in this guide. For designing screenshots, Keynote
is quite a good tool. But if budget is not your concern, I will suggest you buy a copy of
Sketch. It's more powerful and you'll probably use it for UI design and prototyping as
well. No matter which set of tools you use, I hope this guide could provide you a quick
and low-cost solution to design a series of beautiful screenshots, making your app more
appealing to users.

Last but not least, if you wish to have a more professional and customized design, and
you have enough budgets for it, hire a professional UI designer for help.

App Screenshot Design Guide | AppCoda 44