A good screenshot can really sell your game. In this tutorial, I'm going to describe several simple tricks that will improve the quality of your screenshots. These tips are generic enough to be applied to most games, whether 2D or 3D. I'll talk about tools that help you to choose better view position and angle, user interface considerations, ways of improving screenshot colors, cropping issues, and more.
Why Good Screenshots Matter
Screenshots are important for many reasons:
- You can showcase the game in the best light.
- Sharing a picture is an easy and effective way to spread the word about your game.
- People will recognize your game by screenshots before they'll look at an article or a video.
- You'll need them for marketing your game on your site.
- They should be put into your press kit and emails so reviewers can easily use them.
- You'll need them for store submissions.
- They are a good source of your game art for advertisements and marketing materials.
And of course, good screenshots will make all those things better.
Use Your Own Screenshot Mechanism
While there are external tools to make screenshots, making your game capture screenshots by itself is useful in several ways:
- It's always there; you don't need to remember to run any programs to make screenshots when you need them. Any time you get that "Wow! Great view!" moment while testing your game, you can just press a button to capture it.
- You can save screenshots where you want them, in any format you want.
- You can automatically hide things you don't want in your screenshots (like on-screen debugging information, guide lines, or the HUD).
- You can automatically add things like watermarks or your game's name and website's URL.
- You can post-process images if necessary.
- Once you've got it, it's easier to add extra features like recording short animations or making huge screenshots for posters by rendering multiple images.
Unfortunately, this might be not an option (or might be too difficult) in some engines. Fortunately, it's already done for you in many engines; you'll just need to tune it to your needs.
Pause Mode With Active Camera
You want to make a nice screenshot, but the enemies run away or appear suddenly and attack your character. Or that particle effect you want to capture is just so elusive.
The solution? Add a button that pauses your game instantly (and unpauses it when pressed again) while allowing you to move the camera to get just the right angle for your screenshot.
I find this feature extremely useful. You can capture any images, whether the player can see them in the game normally or not. You can get close-ups of the scenery or characters. You can also use it to debug your game, pausing it to analyze the situation, which is even more useful if you have visual debugging aids.
Single-Step or Slow-Motion Mode
You can improve that pause mode even further by adding a button to single-step your game or run it in slow motion. This will help you to capture the right moment of the animation (in addition to the camera angle) and is very useful for debugging as well.
Composition
The purpose of having the pause mode with active camera is the composition of your screenshots. The topic of composition is beyond the scope of this article, but there's one simple thing you can do to help yourself out: add guidelines.
The rule of thirds is a common way to compose images, and you might find golden ratio useful too. Of course, you can always just eyeball things, but if you have trouble with that, guidelines are useful. Make sure not to include these guidelines in the actual screenshot, though!
Guidelines can also be used to preview how the image will look when cropped to various aspect ratios. More on that below.
Teleport Player Character
The player-controlled character is often an important piece in the composition of your screenshots. Save yourself a lot of time and trouble by making it easy to move it anywhere you want in your level.
The exact method varies depending on your game, but something like "point and press a button" or "hold a button and point" is usually the best. No-clip turbo movement mode works well, too. You don't need to get to any place in one jump, but getting anywhere in a few seconds is essential.
In my game LEVEL UP! I have a "view mode" which is activated with a single key press. The view can be quickly scrolled with the mouse and the character can be teleported to the cross-hair with a single button press:
And, again, you'll find this feature useful for other things, too, like testing your levels and mechanics or debugging your game.
Text, User Interface and Menus
Avoid putting too much text in your screenshots. All in all, you're making pictures; if you want to say something with text, you'd better write it separately.
User interface takes a lot of time to make, so you'll naturally want to show it off in your screenshots (I know I do). But that's not a good idea. It's okay as a development screenshot in your blog, but user interfaces and menus shouldn't be the focus of your game gallery screenshots unless it's a hardcore simulation with extensive spreadsheets or something like that.
However, there's another kind of user interface: the HUD (head-up display) or the in-game interface (the latter is mostly for strategy games). You should consider whether you want this in your screenshots.
To anyone interested enough, the HUD provides information about the game mechanics and gameplay. This means that it can offer more info about your game:
However, showing the interface often redundant across multiple screenshots, and you might not want to do so for marketing reasons, either (early work, competition, stealing). It also hides and clutters your art. It's necessary when you play the game, but not when you show its pictures to others.
As you can see, there are more disadvantages than advantages to including the UI, but you should weigh them yourself for your game.
Add a Button to Hide the HUD and In-Game GUI
Even if you decide to keep the HUD in your screenshots, adding a button to toggle it is still a good idea. You might need your game art for things other than screenshots: site design, print materials, and advertisements.
And of course, your players might want to take nice screenshots of your game to share on the web or make into wallpapers, where a HUD will just get in the way.
Analyze Your Screenshot Histogram
A histogram shows the number of pixels for each level of brightness as a bar. You can find it in Photoshop, GIMP (as a separate window), and Paint.NET (in Adjustments > Levels). The examples below use the GIMP histogram, with a logarithmic scale for clarity.
Let's start with this screenshot. You can see some bonfires and likely some enemies and walls if you squint. Let's take a look at its histogram:
The gap at the far left represents unused dark colors—there's no black in the image at all! The gap at the right (which is about a third of the range) represents unused light colors (up to white).
The actual image colors only use about a half of the total range—that's bad. Let's fix it with some post-processing. I'll use the "levels" adjustment, which is available in many graphic processing programs, and set the input range to match used colors in the histogram and adjust the gamma (curve) a bit:
That's not ideal, but it's much better. Let's look at the histogram now:
As you can see, the used colors now fill the whole brightness range; the adjustment "stretched" the color values to fill the range. This can be done automatically as a post-processing step in your rendering. You can also try other processing effects in your image manipulation program of your choice, and then apply the ones you like in your game.
However, there's another way.
Adjust Art Based on Histogram
The original screenshot histogram tells us that there's lack of both dark and bright colors, so the used range is smaller than it could be. Let's fix that by improving the art. The bright things here are flames and monster eyes, and the dark ones are the background (floor) and ashes.
Okay, that looks even better than the post-processed one. What about its histogram now?
As you see, the brightness range is used much better now. Of course, you can combine art adjustments with post-processing!
I compressed the bright end of the range (the flames), sacrificing some detail in it to expand the range of the rest of the image:
And here's the original again to compare:
Resolution and Aspect Ratios
Wherever there's a screenshot gallery for your game (your site, an online store, and so on) it's best to keep the screenshot resolution consistent across that gallery. At the very least, you should keep the aspect ratio (like 16:9, 4:3 or 2:1) consistent.
That raises the question of how to choose the best screen resolution for your game. Consider what your primary target platform is and choose the resolution and aspect ratio based on that.
Cropping
Whatever resolution you've selected, sooner or later you'll encounter the issue of cropping. Whether it's Twitter pictures or Screenshot Saturday, some sites will crop your images to conform to their standards.
To deal with it, I recommend keeping the most interesting things in the center of your screenshot and checking how it'll be cropped to the square. Adding guidelines in your game can help with that, too. You can also add guidelines for other aspect ratios if you need them.
Thumbnails
Another similar issue is when your images are scaled down to create thumbnails. This effectively removes small, high-frequency details from your screenshot, leaving only large, low-frequency features. So make sure you have them, and that they have high enough contrast. That's good for your game too, since it's easier to get what is where on the screen when there are large contrast visual features to guide your glance.
To help you with that, add a preview thumbnail which is shown together with other screenshot tools like guidelines.
Animated Screenshots
Some games look good in motion, but not that good in still screenshots. And sometimes, a static image just can't give enough information about your game.
Consider making animated screenshots with GIFs. There are other ways to do that, but GIFs are widely supported, allowing a lot of people to view them on various devices. If you want to get more modern or efficient, try Gfycat for HTML5 videos.
You can record a video and convert it to a GIF, or use a program that can record to GIF directly like GifCam or LICEcap.
Looping Buffer
This feature is built in to FRAPS, and you could implement it directly in your game. The idea is that the program is always recording to a buffer of limited size—let's say 30 seconds of video. So, when you play your game, do something, and think "hey, that was awesome" you can just press a button to save a video of the last 30 seconds before you pressed it, as if the recording started 30 seconds ago.
Conclusion
You now know of several tools and methods that will help you to showcase your game in the best way possible: active pause mode and teleporting player character to get the best view, hiding your HUD (or keeping it, and when to do that), analyzing your screenshot histogram to improve its colors, and using guidelines to assist with cropping and composition.
Many of these tips will also help you while developing the game and will improve the quality of your game art and community-made screenshots.
