Tutorial: How to Create Localized Screenshots

In a previous post, we talked about localization and how it can help to double your downloads. As we mentioned in that post, localizing your screenshots is one of the easiest things you can do to test the viability of expanding your app into other countries.

So in this post, we will continue the conversation and show you how to do the screenshots yourself, with a simple Photoshop tutorial. You will learn how to create templates that can be easily modified for each new language that you want to add. Then we will discuss when it makes sense to outsource language translation and screenshot graphics creation.

When to do Your Own Screenshots

Screenshots can be simple to create and if you want to do yourself, the following tutorial will show you how to create reusable templates. Whenever you need a screenshot in a new language, just pull up your template and change the language elements. You should do your own screenshots if you have quality graphics readily available. If you do not, then you should consider having a freelancer do most of the work and have him/her leave a space for you to customize the text.

How to Easily Create Screenshot Templates With Photoshop

The first thing that you want to do is start with a blank image. Refer to Table 7-8 in the Developer Guide to find the specifications that pertain to your app.

In this example, we will create a portrait iPhone 5 screenshot. Here are the specs:

• 640 x 1136 pixels

• 72 ppi, RGB, flattened, no transparency

• High-quality JPEG, TIFF or PNG image file format

In Photoshop, create a new image by going to File --> New...

In the dialog box, enter the specifications for the type of screenshot you want to create:

You will now have a new, blank image. Open your existing screen shot graphic in Photoshop by going to File --> Open.

Then select the entire screenshot by going to Select --> All.

Copy and paste your screenshot into the new, blank image. Position the image as you see fit. In this example, I am just using a stock photo. I positioned my image to leave some room at the top for text.

After you paste your screenshot, there will be a new layer in the Layers box, on the right. If you don’t see the Layers box, go to Window --> Layers in the menu bar and be sure that it is checked.

Now that you have your background image, it is time to add some text. Click on the text button on the left side of the screen.

Click on the image and type in some text. Adjust the font and font size, and position the text by clicking and dragging the text to where you want it to be.

Notice that another layer was created in the Layers box. The order of the layers is important. They are like sheets of paper. The layers on the top of the list will always be visible, covering the layers under it. If you have multiple layers and you don’t see a layer in your image, click and drag the layer you want to see in the Layers box so that it is at the top of the Layers list.

Now add some styling to the text. For example, you could add a simple drop shadow. Right-click the text layer and select Blending Options.

When the Blending Options dialog box comes up, check Drop Shadow and choose your settings on the right. When you are done, click OK.

This is what the screenshot will look like:

If you really want to make your screenshots pop, you can check out some text effects tutorials or ready made bundles to create professional effects. These are just a couple of examples, but if you do some searching, you will be able to find a lot more.

Save this image as a Photoshop (PSD) file. This file will be your template. When you need to create a new localized screenshot, just open this file and click on the text layer in the Layers box. Then select the text tool and edit the text, as necessary.

When you create a different localized version, be sure to do a File --> Save As... and save another copy of the PSD file in the new language.

Then, to create the final JPG image that you are going to upload to iTunes connect, do a File --> Save As..., and save the file as a JPG.

You can now upload the JPG image to the localized version of your app’s information in iTunes Connect.

Is the full version of Photoshop too expensive? You can try using a free program like GIMP. It is not as powerful as Photoshop, but can be good enough to get you started, and works on both Mac and PC. The functions are very similar to Photoshop.

Older versions of Photoshop work just fine too, and Adobe also offers a trial version. Adobe Photoshop Elements is also an affordable alternative.

When to do Your Own Language Translation

If you are on a tight budget, then the do-it-yourself approach may be your first thought when it comes to language translation. But unless you know a language really well, you don’t want to put the success of your app in the hands of Google Translate.

Use the resources below to find a professional translator in the language you need. The fee may be smaller than you think. You can also look for a local native speaker who might be able to help you out for a small fee. Only do the translation yourself if you feel very confident in the nuances of the written language. Otherwise, find some outside help.

Outsourcing Resources

As an app developer, you have more than enough to do, so outsourcing should probably be at the top of your list when it comes to most routine tasks. If you do not want to do the graphics and translation work yourself, here are a few good options:

Conclusion

We hope that this post has not only helped you create your own localized screenshots, but also given you some options when it comes to making the best use of your time by finding outsourced talent.

Do you do your own graphics and translation work or do you outsource? Let us know in the comments below.

Related Posts

How Localizing Your Apps Can Double Your Downloads (link)

Should I Localize the Title of My iOS or Android App? (link)

5 Successful Puzzle Games Can Still Grow Through Localization (link)

Clash of Clans vs Candy Crush Saga - Which App Localizes Better? (link)

The Internationalization Tool Discovers Localization Opportunities (link)

Revealed: Localization Strategies of the Most Valuable iOS Apps (link)