Recently I have been paying a lot of attention to in-game onscreen text in many AAA games to understand what is behind creating text on screen that looks great. When developing my own stuff, I have always felt the on screen text has been a weak point of my game's presentation. It just looks incredibly flat and boring, unprofessional really. I am not the greatest graphic designer or artist (probably closer to one of the worst) but I'm looking for maybe some hints/tips/anatomy behind making it fit right into the game's environment.
Looking at some games that i feel have great screen text, first I thought there was something about having a glow or border around the text that made it pop or fit right while being placed ontop of the environment, for example:
In this screen from split second, it just seems to fit. Looks great here, doesn't really look like it is just plastered onto the screen over the 3d rendering, it feels more like it is in the game and not ON the screen. I know that the blue meter helps the illusion that it is actually in the game but even without it i think it would look great. It seems here that there is a bit of glow to the letters, maybe that helps.
another example:
in this final fantasy screen, it is very simple, and has a shadow + black border on the letters, but still looks good in my opinion.
After seeing a lot of screens like this I thought the text needed some sort of glow/gradient/shadow etc.. but then you have your fps that usually have none of these. Halo Reach for example:
http://mkgaming.com/wp-content/uploads/2011/03/hr8.jpg
Here we have solid color, non-effects text and still manages to look good on screen. Doesn't have the ameture feel that throwing arial black font has that is so familiar to many indie games, yet it is just as simple.
Each game I go through I try to improve on things I thought my last game lacked, and this is definitely one of the subjects I have failed.
If anyone has any pointers, hints, suggestions/guidelines that they use when using on screen text, please I would greatly benefit from any experience you have. Also if you know of games that the in-game text is fantastic, leave your thoughts here and let others learn from the better examples out there already in games. And here I will leave below a screen from my project that I just hate:
Great looking on screen text, studying successful art styles
http://www.youtube.com/user/bigrookdigital
Undead Empire for Xbox 360 --> http://bit.ly/dYdu3z
Gamerscore Tracker for Xbox 360 --> http://bit.ly/vI4T4X
www.bigrookgames.com
twitter.com/BigRookGames
In my opinion making good text usually has to do with practice and a lot of it, a way my friend use to go about was getting random images from the web, and trying to make text or icons and such that looked like they fit.
Now if you have photoshop this job becomes easier, and well if your not using it I highly recommend it, but text doesn't fit just due to styles or effects onto them, for the picture to look right they have to all work together and compliment each other. Example, for a game I'm making there's a wood pattern I use, alone the wood pattern looks well horrible, even if I make the wood sections and add all my general effects it looks horrible, however in combination with a background I am using, the wood pattern suddenly fits, it looks good and in my opinion looks like it was made for the background. Now you have to do this with text, and it can sometimes be tricky, one effect I find myself always using is:
Outer glows - I use small and very similar in color to the edge of the text, this makes the text "Blend" into the background
Now this is just me, but I think I have at the very least tried to give you good advise, hope it helps.
-edit-
for your game you might wanna try a color of a menu that feels like its part of the walls, and make it semi-transparent; Then you might have more success in a slightly different menu layout and just plain AA white text might look good. Just an idea I had
Now if you have photoshop this job becomes easier, and well if your not using it I highly recommend it, but text doesn't fit just due to styles or effects onto them, for the picture to look right they have to all work together and compliment each other. Example, for a game I'm making there's a wood pattern I use, alone the wood pattern looks well horrible, even if I make the wood sections and add all my general effects it looks horrible, however in combination with a background I am using, the wood pattern suddenly fits, it looks good and in my opinion looks like it was made for the background. Now you have to do this with text, and it can sometimes be tricky, one effect I find myself always using is:
Outer glows - I use small and very similar in color to the edge of the text, this makes the text "Blend" into the background
Now this is just me, but I think I have at the very least tried to give you good advise, hope it helps.
-edit-
for your game you might wanna try a color of a menu that feels like its part of the walls, and make it semi-transparent; Then you might have more success in a slightly different menu layout and just plain AA white text might look good. Just an idea I had
Thanks a bunch, it definitely helps. I messed a little with the transparency and also i noticed the lighting in the scene is very orange, so maybe green isn't the best compliment to it. but even just bold text and transparency makes a noticeable difference.
http://www.youtube.com/user/bigrookdigital
Undead Empire for Xbox 360 --> http://bit.ly/dYdu3z
Gamerscore Tracker for Xbox 360 --> http://bit.ly/vI4T4X
www.bigrookgames.com
twitter.com/BigRookGames
Updated a few more things, I don't think the green went well with the orange lighting, so switch it to blue. I will probably end up doing the headings in PS and adding glow and/or shadow, but it's easier to see with more of the layout filled out.
http://www.youtube.com/user/bigrookdigital
Undead Empire for Xbox 360 --> http://bit.ly/dYdu3z
Gamerscore Tracker for Xbox 360 --> http://bit.ly/vI4T4X
www.bigrookgames.com
twitter.com/BigRookGames
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
Recommended Tutorials
Advertisement