Effective game icons

You will need a 500px by 400px image to use as your game’s icon. Accepted formats include JPG, GIF and PNG.

Static game icons

Since your icon will always be displayed with your game’s name we recommend using either custom-made key art or gameplay for your icon.

EXAMPLES OF GOOD STATIC GAME ICONS:

 

Animated game icons

Animated icons are very impactful and a great way to draw attention to your game when players are looking for something new.

EXAMPLES OF GOOD ANIMATED GAME ICONS:

• Animated title scene: Best used for games with a lot of great atmosphere or a simple visual design.
  
  

GENERAL TIPS FOR ANIMATED ICONS

• Since your icon will only play on hover make sure your first frame makes a good first impression.
• Try to keep your clips short. 5–10 seconds of precise animation can do quite a lot.
• If you create your icon with a higher frame rate you can use the first frame as a static title screen. It should be invisible on loop.

A quick guide on making a great animated icon

Animated icons look complicated to make, but with the right tools and assets you can make a pretty solid icon with relative ease.

Before you get started, you’ll need two things:

1. Screen recording software. Windows users can use LICEcap or take advantage of Windows 10’s Game DVR. MacOS users can use Quicktime. If you want to dive in to some more advanced software, OBS is a great choice.
2. Video editing software. Use the tool you’re comfortable with but, in this tutorial we’ll be using Photoshop.

If you already have a sizzle reel or a trailer you can skip screen recording and start with that as your base.

STEP 1: CAPTURING YOUR VIDEO GAME

Use whichever tool you feel most comfortable with to record clips of your video game. Record long clips of a few minutes or more, but try to look for snippets of about 5–10 seconds in length, as these will build the foundation of your game icon.

Sometimes a single long clip will convey all you need for your game icon, but other times it will need to be a series of shorter clips. Either is a great option; it’s just a matter of what best fits your game. Try to keep yourself open to opportunity, but it’s also good to have a plan going in. If your game is made of small intense moments your icon will likely be a series of short clips with quick cuts between moments. If your game often has extended moments of fluid action you’ll want clips that are longer.

If your plan is to use multiple small clips in your icon it’s important to cover a variety. No two clips should cover the same subject and, as much as possible, they should each be visually distinctive. This will allow you to show the variety of your game in only a few seconds. Remember, this is just a teaser to entice users to click through to your game’s storefront.

STEP 2: RESIZING YOUR VIDEOS IN PHOTOSHOP

Your final icon will be a GIF with the dimensions of 500px wide by 400px tall and a maximum file size of 25 MB. Luckily, Photoshop is going to make that quite easy.

To format your videos:

1. Create a new Photoshop document that’s 500px by 400px. This will become your game icon.
2. Enable the Timeline Palette by selecting Window > Timeline.
3. Click “Create Video Timeline” in the Timeline Palette.
4. Use the File > Open dialogue to open your videos as new documents.
5. Right-click on the video layer in the Layers palette. Select “Duplicate Layer…” and select your game icon from the list of open documents. Select “OK”.
6. Use the Transform tool (Edit > Transform > Free Transform) to resize your videos to the appropriate size. Don’t feel you need to fit your entire game in the frame. Size for clarity and interest. If there’s a particular piece of action or interaction that’s happening in your clip you should fill the frame with that piece. It’s always OK to crop out information that doesn’t tell the story you’re trying to tell.
7. Line up your clips in whatever order appeals to you. If you’re lucky and have one solid run of action you can use, that should be pretty simple. If you’re arranging multiple clips try to arrange them with rising action. That way the clip continues to grow in excitement and keep players’ interest.

For more information on Photoshop’s Timeline feature you should check out this guide from Adobe.

STEP 3: FINISHING TOUCHES

At this point if you think your icon is done then it probably is. It’s easy to over-think these things, but the simple answer is the best icon is the one you think sells your game the best. If the single fluid clip or multiple short clips you’ve arranged in your timeline does that then all you need to do is save the file.

However, this is also a good opportunity to add some final touches. You can adjust the colors, add gradients, change the contrast… Experiment! Try to think of things you’ve seen other people do and try to replicate them.

When you’re ready to export your game icon, select File > Export > Save For Web from the menu. Make sure the file format is set to GIF and you’re using the 256 color space. That will yield the best results. Save your icon and check the file size. If it’s under 25 MB you’re good to go. If it’s not you’ll need to reduce it somehow. Your options for that include reducing the number of colors—we’d recommend not going below 128 unless your game has a very restricted color palette—or reducing the length and number of clips you’re using to make your icon.