A Picture is Worth a Thousand Plays
Posted by: Sam Horton on Feb 25, 2008 at 1:00 PM
I wanted to spend some time on the promotional side of game dev, and talk about the importance of designing a great preview image. When you upload your game to a portal site, it will be swimming amongst a sea of thumbnails, each one competing for visual dominance. This is the first stage of interaction you have with your players, and we all know how important first impressions are.
In Search of the Perfect Thumbnail
There are many approaches to designing for maximum visual impact, and if you want a first hand example then look no further than the cereal aisle of your local grocery store. For years the breakfast giants have been dealing with the same issue: "how do we stand out from the crowd in an otherwise equal environment." Check out the image below and take note of what box grabs your attention first.
Whichever box it was, you likely noticed it first due to a combination of factors that normally go something like this: "Blam! The bright colors pop out at you... Quickly, you Internalize the imagery, which triggers an emotional response leading you to either move forward or look elsewhere."
With games we have ratings and play counters that help influence our decision to play or not to play, but the initial reaction always follows the same process. We can dramatically improve our chances of getting the players attention if we follow some simple (if not obvious) rules.
Face is the Place
A great deal of information can be conveyed in a facial expression: aggression, compassion, joy, sadness, and everything in between. As humans, we place a high degree of importance on facial recognition. As a result, our brains have a tendency to spot faces quicker than other objects in a scene—more than likely due to those faces belonging to things with big teeth. So if your game's theme revolves around a central character, it makes sense to to capitalize on this common trait, and use a closeup of his/her face as your thumbnail image.
Do Like Cereal Does - Use High Contrast
High contrast colors are more noticeable, and will stay true to form even at greatly reduced sizes. Yellow is considered to be the most attention getting color, as well as one of the most fatiguing to the eyes due to the amount of light it reflects. When yellow is paired with blue for instance, it creates a striking contrast that will leap out at you. Not every combination of high contrast colors creates a desirable color scheme though.
When two very intense complimentary colors are juxtaposed—red and green for instance—an effect known as "vibrating boundaries" occurs. Basically the edges where the two colors transition into each other appear to be moving or highlighted. This can be very unsettling when trying to read text, but who knows, perhaps it could really get your game's thumbnail image to stand out.
Talking about all of this isn't really going to do it justice. Check out the following images to get a better idea.
High contrast yellow and blue maintain excellent legibility even at tiny resolutions.
Low contrast imagery is never a good idea when designing for small spaces, as it will become an unrecognizable blur.
Colors that exhibit the "vibrating boundaries" effect, cause text to become hard to read, and can fatigue the eyes if stared at for too long.
If you want to examine color theory further, then one of the best tools around is Adobe's Kuler. It will allow you to build color schemes without much knowledge of the whole process, but you will learn a lot just by experimenting with it. There is also a huge library of user-submitted color schemes to choose from.
Graphical Embellishment
There are usually two schools of thought regarding the creation of game thumbnail images. One says that it is only acceptable to use in-game graphics, period. The other Hearkens back to the days of Atari cartridges, where fancy box art allowed our imaginations to run wild in anticipation of how great the game was going to be. It was always a let down, but perhaps it was also the catalyst that spawned the race for better graphics... Personally, I think it's great to embellish. Just make sure some of it spills over to the game!
I've spent hours creating what I thought was the most amazing thumbnail graphic, only to have a portal owner replace it with the first random screen shot they could crop down into a 50x50 square. If a site gives their required dimensions, then you should always make a custom version of your thumbnail for them so they will be less inclined to make one for you.
Text or No Text?
If your game's title is short enough, you might consider adding it to the thumbnail image. You want to help people remember your game's name so they can easily find it the next time they want to play it, or show their friends. Since Flash games seem to attract some pretty short attention spans, it's common for people to play a game and never even know its name. So the more chances you have to remind them what game they are playing the better.
Making it Sociable
After you have your thumbnail designed and ready to go, make sure to set up your game's web page to take advantage of it. When submitting your game to a social bookmarking site such as Digg or Facebook, you can also include your thumbnail along with a description. Facebook has standardized the process, which mostly involves adding a few extra meta and link tags to your html, and is a snap to implement. For Super Saimon, I added something similar to this:
<meta name="medium" content="mult" />
<link rel="image_src" href="http://path-to-my-image..." />
For a full description of the Facebook share standard and how it applies to all types of media, check out the: Facebook share partners page.
That's about it for thumbnail 101. I hope you enjoyed the article, and if you are interested in reading more you can grab the Funface Feed. Time permitting, I plan on writing a new article every few weeks centering around Flash game development and promotion.
Credits:
The game thumbnails used in this blog post belong to their respective owners, and represent some excellent games!
Labels: color theory, flash games, promotion, social bookmarking standards, thumbnails
There
Good job, Sam! Keep it going.
Hey Chuck!
Good to see you around here!