游戏邦在:
杂志专栏:
gamerboom.com订阅到鲜果订阅到抓虾google reader订阅到有道订阅到QQ邮箱订阅到帮看

缩略图设计技巧及其对Flash游戏的价值

发布时间:2011-08-30 16:20:53 Tags:,,,

作者:Sam Horton

我想花些时间来分析游戏推广层面的事项,阐述下设计优秀缩略图的重要性。当你将游戏上传至门户网站时,缩略图需要与众多游戏竞争,它们都在争相吸引用户的注意力。这是你与玩家互动的首个舞台,我们都知道第一印象是非常重要的。

寻找完美的缩略图

设计出能够产生最大视觉冲击力的缩略图有许多方法,如果你想要第一手资料的话,不妨看看当地小卖部的谷类货架。多少年来,早餐业巨头总是在处理着同样的问题:“我们的产品如何才能在同样的环境中显得更为突出?”看看下面这个图片,注意哪个图片格子最先吸引你的注意力。

find the perfect thumbnail(from mochiland)

find the perfect thumbnail(from mochiland)

无论你选择的是哪个格子,鲜艳色彩等元素的组合通常都会在第一时间吸引你的注意力。元素会很快将图像内在化,由此引发的情感反应会引导你要么点击该图片,要么将注意力转移到其他地方。

在游戏领域中,评级之类的元素会决定玩家玩或者不玩游戏,但是最初的反应过程总是相同的。如果我们遵循某些简单的规则,便可以极大地增加我们获得玩家注意力的可能性。

使用角色面孔

face(from mochiland)

face(from mochiland)

面部表情可以传达非常丰富的信息,比如挑衅、怜悯、高兴、悲伤等等。作为人类,我们很看重面部识别。因此,相对于其他物体而言,我们的大脑会更快速地识别场景中的面孔,尤其是那些长着很大牙齿的面孔。因此如果你的游戏主题中有个核心角色,你就可以利用这个普遍规律,使用角色的特写来作为缩略图片。

使用高对比度颜色

高对比度颜色更容易引起人们的注意,即便在图片大小削减严重的情况下仍能保持其真实性。黄色别认为是最能够吸引注意力的颜色,当然也是最容易引起眼睛疲劳的颜色。比如,当黄色与蓝色相配对时,能够产生马上引起你注意的显著对比度。但是,并非每种高对比度颜色的结合都可以创造出令人满意的颜色组合方案。

震荡的颜色让我感到愤怒!

当两种非常强烈的互补色(游戏邦注:比如红色和绿色)同时出现时,就会产生所谓的“震动边界”效果。从根本上来说,两种颜色相互过渡的边界看起来不断移动或特别突出。这会让人们在阅读文字时感到很不安,但是谁知道效果如何呢,可能这种做法确实能够让你的游戏的缩略图显得尤为突出。

查看以下图片,你就会对此有更清晰的了解。

colors(from mochiland)

colors(from mochiland)

1.即便在较小分辨率的情况下,高对比度的黄色和蓝色仍然维持着优秀的易读性。

2.在设计小型图片时,使用低对比度颜色并不是个很棒的想法,因为这会让内容显得模糊且难以识别。

3.产生“震动边界”效果的颜色会导致文字很难阅读,如果看的时间过长的话还会导致眼睛疲劳。

如果你想要进一步研究颜色理论,那么Adobe的Kuler是最好的工具之一。它支持你在对整个过程了解不深的情况下构建颜色方案,仅仅通过实验你就可以学到很多东西。其中还有个用户提交的颜色方案库可供你选择。

图像润色

box art vs game play(from mochiland)

box art vs game play(from mochiland)

人们针对创建游戏缩略图通常有两种类型的想法。其一认为只能使用游戏玩法的截图,第二种认为应该回到Atari年代的做法,用魔幻般的盒装艺术来引发玩家对游戏质量的期盼。尽管当年玩家在玩到游戏后经常感到很失望,但这或许也是加快游戏图像发展步伐的催化剂。就个人而言,我认为需要对缩略图进行修饰和润色。

我花了数个小时的时间制作出自认为最具吸引力的缩略图像,但是门户网站经营者却用某个游戏场景将其替换掉,因为这样才能够符合网站50×50缩略图大小的要求。如果网站提供了他们需求的尺寸,那么你应该根据这个要求制作相应的缩略图,这样他们就不会随便以其他图像将其替换。

标题

如果你的游戏名称足够短的话,你或许可以考虑将其添加到缩略图中。这样你就可以让人们记住你的游戏名,下次想玩或者在向他们的朋友介绍时就可以很方便地找到你的游戏。因为Flash游戏似乎只能保持短时间的吸引力,所以人们玩游戏但不知道游戏名字是很普遍的现象。所以,在缩略图中加入游戏名称,这样他们就更有可能回想起你的游戏。

社交性

在设计完缩略图并准备发布之前,确保成立自己的网页并加以利用。当向诸如Digg或Facebook等社交站点提交你的游戏时,你也可以在描述中加上缩略图。Facebook有个标准化的过程,包括添加些许额外的meta和链接标签到你的页面。在《Super Saimon》中,我添加了以下代码:

<meta name=”medium” content=”mult” />
<link rel=”image_src” href=”http://path-to-my-image…” />

游戏邦注:本文发稿于2008年2月25日,所涉时间、事件和数据均以此为准。(本文为游戏邦/gamerboom.com编译,如需转载请联系:游戏邦

Thumbnail Design: A Picture Is Worth A Thousand Plays

Sam Horton

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 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.

Vibrating Colors Make Me Angry!

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 50×50 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. (Source: mochiblog)


上一篇:

下一篇: