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://www.pwnz.co.uk/pictures/13.PNG)
