Mobile Evolution - Thoughts, insight, and experiences related to the mobile software industry

In marketing an app, one of the areas that needs attention is your website. The AppStore description and screenshots are sometimes not enough for every customer to make a decision. Sending them to your website gives you another chance at convincing them to purchase your product. In addition, many people do discover apps via search engines, so a website is essential for traffic that can link to your apps on the AppStore.

On your website you have more options with text formats and sizes, layout, and, of course graphics, including screenshots and device shots. Apple makes available device artwork and AppStore badges that you can use on your website, but you have to insert your own screenshots and resize the artwork to meet your needs. (The link requires a developer login). This post will cover some tips on processing your screenshots for device graphics on your website.

After entering the license agreement and downloading the artwork, choose a device and open it in Photoshop or GIMP. I use GIMP because our computers use desktop Linux, but many of the steps could able be applied in Photoshop. I chose an iPhone4 device. Take screenshots of your app using an iPhone4 and email them to yourself, using the highest image quality.

Screenshots from a retina display will have to be resized, and unfortunately, much of the definition will be lost, since websites/browsers are not as high res as retina. Ideally, a screenshot should be reduced by halves to get the best result, but that is not always ideal size for the website's design. The device artwork's screensize starts at 344x514 px at 72dpi, whereas retina screenshots start at 640x960 at 300dpi (both including status bar). If you open both creatives, and drag the screenshot onto the device image, the screenshot will convert to 72dpi have less crispness when reducing. Therefore, it's better to reduce your screenshot separately before moving it as a layer on the device file. It's also better to resize the images before placing them on your website. Browsers can resize, but the results are rather muddy.

Adding screenshots to two device sizes

I wanted my device shots be be rather small, so I resized my device image to have a 172 px wide screen, which is 50% of the original image. I also keep the image the same and have a “click for larger image” option on my website. This way my webpage isn't cluttered with huge images, but potential customers who wish, can see a bigger, clearer image.

After trying several iterations to find the clearest result, including resizing the device screen size to 320, trying several conversion algorithms, and varying degrees of sharpening filters, the best result I found is as follows:

For smaller image:

1. Crop the status bar off of original screenshot.
2. Resize the screenshot to 172 width using Cubic interpolation algorithm.
3. Scale the device by 50% using Cubic interpolation algorithms.
4. Drag and drop the screenshot onto the open device image file.
5. Use Filters>Enhance>Sharpen on the screenshot layer. Choose a sharpness of 20.
6. Save a copy of the image as a .png.

For a larger image:

1. Crop the status bar off of original screenshot.
2. Resize the screenshot to 344 width using Cubic interpolation algorithm.
3. Keep the original device size.
4. Drag and drop the screenshot layer onto the open device image file.
5. Use Filters>Enhance>Sharpen on the screenshot layer. Choose a sharpness of 20.
6. Save a copy of the image as a .png.

To use the two images on your website, use this html code:

<a href="LargeImageName.png"><img
title="Click for larger image" alt="add alternate text here"
src="SmallerImageName.png" style="border: 0px solid ; width: 288px; height: 511px;">

On mouseover "title" text is what the visitor will see. On a side note, it's always important to give your image an alt text—that is what the search engines will index.

Horizontal Device Screen Reflection

This time around, for A Journal for Trip Boss travel manager, I used the horizontal device, since we support landscape mode and I wanted to include a screenshot on our website. However, the device reflection includes part of the screen, so you need to add a screen reflection yourself. Here's how I did it:

1. Crop the status bar off the original screenshot.
2. Resize the screenshot to 344 (or 172, depending on which size you're working on) using the Cubic interpolation algorithm.
3. Keep the original device size, (or 50%).
4. Drag and drop the screenshot layer onto the open device image file.
5. Duplicate the screenshot layer.
6. Flip the new layer vertically.
7. Move the flipped layer to line up with the top of Apple's supplied layer “Screen Reflect” (it will go off the canvas, which is ok).
8. Select the flipped layer, Add a Layer Mask, White (full opacity).
9. Make sure you're on editing the layer mask, which should happen automatically.
10. Select the gradient tool, set to FG to transparent (reversed). Set FG color to black.
11. Drag gradient from the bottom of the device to the bottom of the iPhone's reflection.
12. Set the Opacity to 30.
13. Be sure to turn off the layer visibility for the “Screen Reflect”.
14. Save a copy of the image as a .png.

To see a few of the devices I've processed, including the horizontal one, please visit the webpage of our latest app, “A Journal for Trip Boss travel manager.” I also have these device shots showcased on our Expense & Budget, Itinerary, and Overview pages.