Home This Article Is Taken From The Game Programming MegaSite, A Definitive Resource For Game Developers!

Creating A Menu Graphic
By: Steve King

I've noticed there aren't too many Photoshop tutorials on game design web sites, and the ones that are there aren't too advanced.. (how to make easy drop shadows, etc.. boring.) I decided to try making my own game graphics tutorial, but this same technique would work exactly the same for web pages, so I hope at least someone finds it useful! For my computers class I'm working on a game called "Planet of Darkness". In this tutorial, I'm going to create a simple menu interface based on the one I did for the game.

Once you have the basic idea for your menu in mind, and you know the size the menu will be, you can start creating the graphic.. Since my game has a futuristic theme to it, I decided to make the menu, game console, etc. look like control panels. I found a really cool metal plate-type texture on the net, and tiled it to my image. (see other tutorials for how to tile a texture) This exact same procedure works for any texture, try it with one of the ones from my Texture Archive, or one you find on the net, or one of your own. (tip: With a "natural" looking texture, such as wood, rock, etc. straight lines often look too artificial. Try doing the shadows freehand, and don't rely on selection boxes or using Shift to make a straight line..)

I set my foreground color to black, and selected the airbrush tool. 30% pressure, size 35 brush. By holding the Shift button while using a tool, you can create straight lines without having to move your mouse perfectly straight. I did this along the sides and the bottom, making it look somewhat 3 dimensional. You can do this in the center as well, but there is an easier way. I created a rectangular selection, feathered the selection to a 5 pixel radius, and filled with black. I did the same thing with a bit of the image at the top, so I can later add in something to make this control panel look more interesting.

I created a simple grid texture for the menu background, but pretty much anything can be used depending on the texture you're using for the menu. In my game the menu scrolls down from the top of the screen, so I decided to add in something like a tube for the wires or whatever to be in. I created this with the gradient tool, with my colors set to black and a medium-light grey. I repeated this pattern, and then used the airbrush tool, this time set to 100, to create a 3D shadow effect. Simple, huh?

Now for the easy part.. I chose LCD font, with a bright green color, and placed some text.. Because I code with DJGPP & Allegro (tho I am learning DirectX at the moment), I will make parts of this menu bright pink so they will be transparent. That depends on what language you're programming with however. As for graphics, you're done.. The rest is all done with code. My game has the menu options light up when the mouse moves over them, and it plays a sound when you click them. Not a lot of work, and it looks much nicer than a plain text menu! ;)

In case anyone was wondering how I got the menu to scroll, it was extremely easy.. 


stretch_sprite(menubuffer,menuscreen,0,0,screen_w,screen_h);
while (menu_move_y < menu_h)
{
	stretch_sprite(menubuffer,menuscreen,0,0,screen_w,screen_h);
	stretch_sprite(menubuffer,console,menu_x,menu_move_y-menu_h,menu_w,menu_h);
	stretch_sprite(screen,menubuffer,0,0,screen_w,screen_h);
	menu_move_y+=6;
}
	
stretch_sprite(screen,menubuffer,0,0,screen_w,screen_h);

I used stretch_sprite instead of blit because one of the features of my game is multiple screen resolutions.. I think the rest of the code is pretty easy to understand.. I know, it's far from the most efficient way to do this probably.. let's just say I'm a better artist than programmer. ;)

The Game Programming MegaSite - ⌐1996- Matt Reiferson.