Window-based GUI Tutorial.

[Robin]

A GUI plays a large part in your game. For a truly successful project, it's need to be well-programmed, it needs a large variety of in-game graphics and it needs to appeal to a user from a game-play point of view. That all goes to waste, however, if the way the user accesses it, is through a poorly designed, confusing GUI .

To create an aesthetically pleasing GUI, you need the right tools. This tutorial will show you how to create a GUI using Photoshop, one of the best image editing software products around. The same principles still stand in other software products, but the tools may not have the same functions as those shown here. If you don't have access to Photoshop, then GIMP is probably the next best thing, and it's completely free.

Before we begin, I'd just like to point out that the screenshots taken for use in this tutorial were too big to embed in the actual page, so each one is a thumbnail. To see the full image, please click on the thumbnail.

**Creation:**

The first thing to do is open Photoshop and create a suitably sized canvas. Generally, 100-300 pixels is good for height and width but you should use your own discretion when choosing a size.

[](http://www.pwnz.co.uk/pictures/1.PNG)

Once you have created your space, you should fill up a large portion, around 90% of the entire space, with a shape. Any shape will do, but a rectangle/rounded-rectangle will be the most suitable for a GUI in-game, as well as being the easiest to program in.

[](http://www.pwnz.co.uk/pictures/2.PNG)

Once you have created your shape it'll take on the colour you have set as your forecolour. The colour of the shape doesn't matter, as we'll be using a gradient overlay later on. For now, just make sure that it's a good shape and the width/height proportions look all right for a window which will be viewed ingame.

[](http://www.pwnz.co.uk/pictures/3.PNG)

Double-click on the layer that the rasterized shape is on, and you'll come to the Layer Blending Options window. We'll be using this window to create most of the effects which the GUI will have. First, click the 'Stroke' checkbox and change the size and opacity to your own taste.

[](http://www.pwnz.co.uk/pictures/4.PNG)

Next, we'll begin adding in the colour. A gradient is a lot more interesting than block colour, and will make your GUI less boring to look at. Click the 'Gradient' checkbox.

[](http://www.pwnz.co.uk/pictures/5.PNG)

Now we'll begin creating our own custom gradient. To do this, click on any of the existing gradients. I usually do this on the top-left one. Some settings will appear underneath the gradients, and we'll use this one to set the different colours we're going to use. To set the colours, you need to click on one of the small arrows which appear along the preview box. Then, you should click on the 'Colour' box to set the colour, like shown in the screenshot.

[](http://www.pwnz.co.uk/pictures/6.PNG)

Do this for both sides. It's usually best to choose two different colours which blend into each other easily, like the one found here:
[]http://quiltsandcreativity.com/wp-content/uploads/2007/07/analogous-color-wheel2.jpg](http://quiltsandcreativity.com/wp-content/uploads/2007/07/analogous-color-wheel2.jpg[/img)

Once you have your two colours, it should look something like the screenshot below.

[](http://www.pwnz.co.uk/pictures/7.PNG)

Now that you have your gradient decided, you can use the colour overlay to either lighten or darken the entire thing. You can do this by selecting a black or white overlay then changing the opacity to your preference. Personally I felt the colours I chose would look better darkened, so I set a black overlay with a 30% opacity.

[](http://www.pwnz.co.uk/pictures/8.PNG)

Next we'll add an inner glow. This is used to make the shape's stroke more apparent and give the layers a bit more depth. For lighter colours, choose a dark inner-glow, for darker colours, choose a light inner-glow. As I'm using fairly dark colours I chose a white inner-glow.

[](http://www.pwnz.co.uk/pictures/9.PNG)

We'll now add an outer-glow. This is completely optional, but it helps make the GUI more viewable when in certain coloured maps. This time, we choose a glow to match our chosen colours. For dark colours, a dark outer-glow, for light colours, a light outer-glow.

[](http://www.pwnz.co.uk/pictures/10.PNG)

Now we'll begin to add the textures to the GUI. We'll be creating the texture on a new layer, but we only want the texture to appear on the actual User Interface]GUI, not on the surrounding area. To do this, we use the 'Magic Wand Tool' to select the GUI area.

[](http://www.pwnz.co.uk/pictures/11.PNG)

With this area _still selected_ we'll create a new layer.

[](http://www.pwnz.co.uk/pictures/12.PNG)

Next, select the 'Pattern Stamp Tool' which is just above the Eraser tool. If you currently have the 'Clone Stamp Tool' set to that space, right click the icon and change it to 'Pattern Stamp Tool'. You'll notice a new set of menus appear in the top right of Photoshop. These are used to change the tool to suit our own needs. For this example, however, we will only need to change the pattern itself, none of the tool's settings. Click the small arrow button which is right of the texture preview to open up a new menu showing all the different textures. Choose one you think looks promising and just brush away until the entire GUI area is filled with texture.

[![](http://[img]http://www.pwnz.co.uk/pictures/13_th.PNG[/img]

Now, that actually looks pretty bad. What we need to do is blend it into the layers which are below it. To do this, we go to the 'Layers' window and click the little drop-down list which says 'Normal'. Scroll through the different styles till you find one you like. I generally use 'Colour Burn'. Then, set the opacity down until it looks okay.

[url][img]http://[img]http://www.pwnz.co.uk/pictures/14_th.PNG[/img]

The best way to see how your GUI will look in-game is to set an image behind it. I used a screenshot of the engine. Now, set the opacity of [i]both[/i] the texture [i]and[/i] the box down until it it slightly transparent. This part of the GUI will be shown below the main part as a sort of border.

[url][img]http://www.pwnz.co.uk/pictures/15_th.PNG[/img][/url]

Next, right click the box layer and select 'Copy Layer Style'. Then, create a new shape like you did for the border, only smaller with room at the top of it for a window title. Once you have a shape you like, right click the layer and select 'Rasterize layer', then paste the layer style of the previous layer to get the same gradient effect.

[url][img]http://www.pwnz.co.uk/pictures/16_th.PNG[/img][/url]

Use the same steps as you did originally to create another texture, this time only covering the new smaller layer of the GUI.

[url][img]http://www.pwnz.co.uk/pictures/17_th.PNG[/img][/url]

Finally, using the same space you selected with the 'Magic Wand Tool', delete that area of the border layer and border pattern. Then you can set the transparency of the new foreground.

That's it! You're done. Now you can simply go back and mess around with the blending controls and colours till you come up with a style you like. Don't worry if you mess up the first time, just keep trying till you find something that you wouldn't mind staring at constantly whilst playing your game.

Once you have it to your liking, and with some clever manipulation of a C++ .dll dependency to create alpha-blending in your game, it'll look something like this screenshot shown below.

[url][img]http://www.pwnz.co.uk/pictures/gui2_thumb.PNG[/img][/url]

I wish you every success,
[i]Robin[/i][/img][/url])](http://www.pwnz.co.uk/pictures/13.PNG)

[Lenton]

This is a brilliant tutorial, surely it must be stickied.. Very nice work robin.

[Robin]

Thanks, but there's only 4 threads in this entire forum xD

Hardly needs to be stickied.

[Lenton]

Maybe, but we wouldn't want to loose this one. This would help out a lot of people.

[Robin]

You're not gonna lose it. It's also on pwnz.

[Bobbus]

Wow! Nice stuff Robin. :D

[Robin]

Nearly lost the thread ;-;

Updated.

[L0lz]

You use a lot more layers than I do lol. I think o.o. Neways I hope some put this tut to use, I've rarley seen any GUI's that were good, or even moderately well.

[tylian]

This is great!
You should make some more GUI tutorials.
Like how you made the hp/mp/exp bars in Essense (sorry if that was againsed the rules).

I still can't figure out how you make such simple steps look so good …

[L0lz]

Colors, Gradients, and Layer properties my friend. Oh, and don't forget the Lasso Tool ;D.

[tylian]

So basically the same way everything is made? :P

[Robin]

I make most things the same way. Shapes with gradients, then put a blended texture over the top.

Rory did most of Essence's GUI though.