How to Create App Icons & Screenshots in Under 5 Minutes

screenshots header

You have less than 3 seconds to sell an app to a customer.

One of the biggest advantages (if not the biggest) in beating the competition is the use of icons and screenshots.  There are thousands of the exact same apps in Stores.  I'm talking same code, same functionality, and sometimes even the same  resources.  Yet one gets downloaded while the others get kicked to the curb.

Advertisers have been tricking us to buy things for years by using the same old techniques:

1. Exhibiting a limited time offer

2. Quantifying social proof

3. Acknowledging the customer's resistance

4. Highlighting the sweet spots

Along with the title, icons and screenshots are crucial to hook a customer and get a potential download or purchase.  I've seen the best apps in the market crash and burn because not enough time and emphasis was spent on icons and screenshots.

Don't let this happen to you.

Displaying images triggers the customer's brain to magnify the UX.  Not only do icons and screenshots detail an app's functionality, they also help storyline an app to give the user a unique experience.

Design work can be expensive and take a long time if done incorrectly.  It is crucial to provide designers with enough detail to get the job done correctly the first time.

Recently I was able to get several icon and screenshot resources completed by putting in less than 5 minutes of my time.  Keep in mind I was not looking for Pulitzer Prize winners, but wanted the job done quickly, affordably, and with a level of quality.

My project is simple and if marketed correctly could be deadly with an update or as a skinning template.  Because I didn't want to waste all my time and energy on an ‘unknown project,' I gave my designer simple instructions that got the job done right the first time.

Here are some simple tips you can use to save a lot of time and money.

Show examples and define the angle

Designers can't read your mind.  Provide them with 2-5 projects that resemble the design style and angle you are taking.  The easiest way to do this is by sending them direct links.  Go through the Top Charts via the App Store and paste examples into your instructions.

Try and stay away from apps that are not ranked.  If their design isn't working for them, it probably won't work for you.  I also use Topappcharts.com for searching sub-categories.

License free sites like Shutterstock are great for examples and time savers.  If you find an image you're in love with on Shutterstock, it could save your designer a ton of time.

QUICK TIP:  Make sure you highlight what you like and dislike about the sample projects and resources you've provided.

Share resource folders

This is easy to do and answers all the designers questions regarding sizes, format, etc…

Resources are generally grouped together in a parent resource folder in a code and are easy to find.  By having all the resources in your code, your designer can recreate any scenario within the app.  It saves the hassle of having to capture screenshots with multiple devices.Dropbox

QUICK TIP:  I upload (or have my coder upload) the ‘resources parent folder' to Dropbox, and then send a link to my designer.  Now the designer has access to EVERYTHING needed without having access to the code.

Send screen captures you want published

If you are looking to pinpoint an exact menu or moment in an app, capture it with a screenshot and send to your designer.  These images aren't necessarily going to be used to create your screenshots, but they will give the designer a sense of direction.

QUICK TIP:  You can capture screenshots straight from your device or use programs like Quiktime and Reflector.  Checkout the post iOS 8 App Video Previews for a tutorial of how to capture images with Quicktime.

Request Exports & Masters

Make sure your designer exports to all the correct sizes for both icons and screenshots.  This is important so your coding team isn't waiting for days for images that take 2 seconds to scale (it happens).  You can get all the sizes needed for icons and screenshots by sending your developer to the Apple Developer Portal App Properties.

Some platforms like Apple are strict with file sizes and formats.  If the file size is even 1 pixel off, Apple will not allow it to upload.

Scripts are available that automatically export all images to specific sizes in seconds.  You can download export scripts for both Apple and Android icons and screenshots here.  It's extremely easy and fast to do and only requires Adobe Photoshop.

Photoshop iconQUICK TIP:  Make sure you get the Master Files also.  This is most likely a PSD (Adobe Photoshop) or AI (Adobe Illustrator) file.  Developers can be picky about giving out their design templates, but you paid for it.  Make sure you get it and store it somewhere safe.

Retina Display Supported

When you're checking your deliverables, make sure they support retina display.  It is not uncommon for a designer to lazily scale up images to fit other devices.  Be cautious and thoroughly check as this can cause rejections.

QUICK TIP:  Provide the designer with iPhone 6 Plus and iPad Retina screenshots/images, and he or she should have everything needed for retina and all other screenshots.

Provide Copy if needed

Adding text to screenshots is a great idea.  It helps focus the customer and display features that might not be visible with an image alone.  Make sure your text is engaging.  Don't just list features, CHALLENGE the user. 

Make sure you don't misspell anything in your copy instructions to the designer.  The last thing you need when in a rush is to re-export all screenshots (20+ images) because you misspelled a word.

QUICK TIP:  If the designer includes the master PSD or AI file, make sure he or she also provides you with the font file too. 

Request Multiple Designs

For icons especially, it is crucial to nail the design and feel.  Ask the designer for 2-3 different style icons.  This will save time down the road if alterations are needed.

QUICK TIP:  Even a background color or image change can have a huge influence on an app's exposure.

Ask Designer's Availability & Set a Price

Waiting on a few resources can be painful.  Emphasize the need for the resources and set a deadline.

QUICK TIP:  Check in with your designer with different methods of communication.  If you emailed instructions, shoot him or her a Skype message a day or 2 before your deadline. 

Alterations

This is a creative process and sometimes deliverables are way off.  Unfortunately only you know what you want, don't be irritated if a designer delivers something that you don't like.

Ask for drafts if you are worried about the designers understanding of the project.  Also inform the designer small iterations may be required.

QUICK TIP:  Remember it is not what you like, it is what gets downloads.  Test all designs, even if you are not crazy about them.

Keep it simple

With new designers, it could take a couple rounds before they understand your style and the deliverables expected.

Always keep instructions simple.  Try and send all the instructions in 1 email with as few words as possible.  Get to the point, let the professional take it from there.

Most importantly, appreciate your designer's work.  Who knows how long the work actually took.  Creating images for someone else's project can be extremely challenging.  Give credit and a big thanks to your designer.

What are your secrets for creating quality icons and screenshots on the fly?  Drop a comment!

COMMENTS

  • Darshan April 23, 2015

    It’s just amazing, I never thought that icons can create in just 5 minutes.

  • Chirag November 3, 2016

    I’m recently going through project for social media app and that’s why I’m following this blog.
    While designing of logo I forced designers to keep it simple with one or two letters of app name as example f for Facebook
    And tell your designers to make a logo in a way that it should not tier users eye and you should keep in mind while designing theme of app too.
    Thanks

Leave a Comment