Windows Phone

Making tiles and screenshots for the WP7 App Hub marketplace

Learn simple tricks for creating good tiles and screenshots for your Windows Phone 7 application before you submit it to the App Hub marketplace.

One key to getting your Windows Phone 7 (WP7) application into the App Hub marketplace is to have the proper graphics materials for it. App Hub requires a number of graphics, and suggests a few more for listing. It's possible to just slap some things together and call it a day, but I've found a few tricks to make things go smoother.

There are three major pieces of graphics that you should consider or need to create for your application submission: tiles, screenshots, and a background image. To submit an app, you will need at least the small mobile app tile (99 x 99), a large PC app tile (200 x 200), and one screenshot.

Tiles

The tiles are the most visible piece, since they are what the user sees in App Hub and represent your application on the phone. One of the nice things about WP7's fairly unique artistic style called Metro is that it is not difficult to make a tile that is Metro-esque. I've tried using cartoon-like tiles in the past, but they stick out like a sore thumb. Now, I stick to Metro-esque tiles.

To make a good tile, I use Microsoft Expression Design. You could use Illustrator or a similar application instead, but Design is what I have and as "the world's least imaginative graphics designer" it more than meets my needs. For my recent Lifter Calculator application, here is what I did:

  1. I started with a 200 x 200 canvas, since that is the largest tile used in a WP7 application (the "large PC" tile is what a user sees when browsing from a computer).
  2. I made a background layer, and filled it with my desired color. Given the themes on WP7 and the Metro style in general, I recommend trying to pick something that isn't too "loud" and isn't a pastel, but rather a clean, bright color. I grabbed one of the colors from my company's logo.
  3. I created a layer for each independent design element. My design was to have a quadrant, and in each quadrant, a symbol from a calculator (add, subtract, multiply, divide), but for the subtract symbol, make it a barbell instead of just the dash. Like I said, I'm the world's least imaginative graphics designer. This gave me four layers.
  4. I created the shapes for the layers. Design made positioning really easy; you select an object and at the bottom of the screen you can manually type in the pixel positions. Doing my quadrants and getting my items into position was a snap. I was also able to create the rough shapes, and then use numeric settings to fine-tune the actual sizes (length, width, etc.), which took the guesswork out.
  5. I made a "slice layer" so I could export the tiles as PNGs, JPEGs, etc. as needed for App Hub. I exported the following tiles: 200 x 200 (large PC tile), 173 x 173 (large mobile app icon), and 99 x 99 (small mobile app icon). Depending on your design, you may want or need to change the design a bit to have it look better at the smaller sizes. One thing I like about the vector art style of Metro is that it scales down very nicely without the need for dropping out elements like you often need to do with rasterized art.
Figure A

Working with my tile in Expression Design

Screenshots

The screenshots are a lot less work, thankfully. In the past, you needed to run the emulator and use ALT + Print Screen to grab the screenshot, and then work with the picture. With the 7.1 SDK, the emulator can take screenshots on its own.

To access the screenshot tool, in the emulator you click the "arrow" icon at the bottom of the toolbar, which brings up a window of additional tools. In there, you have a Screenshot tab. Click the Capture button and then Save... to make your screenshot. The screenshot is even the right size (480 x 800), but it has the debugging data from the emulator in it. Jeff Wilcox wrote an article on how to disable this display. While only one screenshot is needed, it's best to do a few that really show off the functionality.

Background art

The final piece of the pie is the background art, which is only needed if your application is picked to be featured in the marketplace. These pictures are supposed to be 1000 x 800. From what I've seen, a nice, rendered picture can work well, but the colors should be muted so they do not overpower the content. I have never bothered making one of these, and I do not see it as a must have up-front, though if your app is picked to be featured, it would be a nice, professional touch. Without having made one myself, I cannot offer much help on them specifically.

J.Ja

About

Justin James is the Lead Architect for Conigent.

0 comments

Editor's Picks