How to create good User Interface for your games

What will I cover in this tutorial:

  • How to use Adobe Photoshop
  • Basic controls in Photoshop
  • How to create some user interface for your Roblox Game.

Note: This tutorial that I made is my own interpretation of how to create User Interface. I’m sure others would have a different approach to this, so I will do my best to cover some important information.To start off, User Interface is actually quite important. User Interface for games on Roblox has been looked over, and still does not seem to be of much importance to some game developers. When creating User Interface, you need to keep in mind that anything on the player’s screen should only be there to inform the Player about things that they need to know that relate to the game. A bad example would be to have those classic “buy our gamepasses” text labels that display on the screen, which can sometimes obstruct the player’s view of the game.

Tools in Photoshop

Using these tools will help you better understand how to use photoshop

so that your experience will be a lot easier when using.

Move Tool
-The move tool lets you move a selection or a selected layer. You can do this by dragging your layer with your mouse.

Shortcut: V

Rectangular Marquee Tool
-The rectangular marquee tool lets you select shapes in your document.

Shortcut: M

Lasso Tool
-The lasso tool lets you select shapes in your document. Similar to the Rectangular Marquee Tool, however with the lasso tool, you are able to select anything by basically drawing the line yourself.

Shortcut: L

Magic Wand Tool
-The magic wand tool allows you to select certain portions of an image or layer.

Shortcut: W

Crop Tool
-The crop tool lets you crop your document to your own desired size.

Shortcut: C

Eyedropper Tool
-The eyedropper tool lets sample colors from an image inside of your document.

Shortcut: I

Spot Healing Brush Tool
-The spot healing brush tool lets you replicate areas from your image and blend areas to a specific area of your choosing.

Shortcut: J

Brush Tool
-The brush tool is used to draw using a brush.

Shortcut: B

Clone Stamp Tool
-The clone stamp tool is used to duplicate selected parts of an image.

Shortcut: S

History Brush Tool
-The history brush tool essentially lets you paint back parts of your original image to it’s previous state.

Shortcut: Y

Eraser Tool
-The eraser tool is used to erase parts of your image.

Shortcut: E

Paint Bucket Tool
-The paint bucket tool is used to fill places of your document with a color.

Shortcut: G

Smudge Tool
-The smudge tool is pretty much the equivalent to dragging one of your fingers through wet paint, creating a sort of “smudge” effect.

Shortcut: N/A

Burn Tool
-The burn tool lets you darken parts of your image.

Shortcut: O

Pen Tool
-The pen tool allows you to create paths and shapes which can be used in many different ways to create all kinds of shapes.

Shortcut: P

Type Tool
-The type tool allows you to type text on your document.

Shortcut: T

Path Selection Tool
-The path selection tool allows you to select and move points of existing paths or vector shape masks segments, or anchor points.

Shortcut: A

Rectangle Tool/Rounded Rectangle Tool/Etc
-The shapes tools allows you to create shapes inside of your document. This is what is used the most when creating user interface for your game.

Shortcut: U

Hand Tool
-The hand tool allows you to move around if you’re zoomed up closely in your document.

Shortcut: H

Zoom Tool
-The zoom tool allows you to zoom in and out of your document.

Shortcut: Z

Let's begin with creating a display for currency.

To start, create a new document on Photoshop by pressing the CTRL+N keys. When I create a new document to make interface for a game, I always make the document size 1920x1080 pixels.

Now when first getting into creating user interface for your game, you have to understand that you can’t simply just create anything out of the blue. What is best is if you have a very good style for the interface that somewhat relates to the game. For example, if you were creating a medieval RPG styled game, you’d want to go for textures that fit that theme such as concrete or metal, with dark colors mixed in.

A bad example would be to create user interface that is very bland and also does not really relate to the game in any sort of way. I’ve referenced Saber Simulator’s HUD User Interface, where they use primarily yellow colors with very basic shapes.

Step One - Colors:

So, let’s get started with creating this currency display. Assuming that you’ve come to a decision on what you want to do for your user interface, I’m going to actually be showing you how to create a wooden-styled currency display such as this:

First, you are going to want to start off by picking a base color, a dark color, and a light color. We will be using these colors to create the wooden frame.I have decided to go with these colors since they are the same ones that I used for the original:


Note: You can take this screenshot and paste it into your document, and use the eye dropper tool to get the same colors for yours!

Step Two - Creating the shape:

Next, we want to use the Rounded Rectangle Tool (Shortcut: U) to create the base shape. Make sure you have your base color selected to create this shape. Make sure that you set your radius at the top to 10. This is the radius in pixels that the rounded corners will be set to. Once you create the shape, go over to the right side panel where it says “Layers,” right click the layer of the shape you just created, and convert it to a smart object. Converting layers to smart objects helps a lot because if you want to scale down the layer and end up wanting to scale it larger later, the pixels won’t become blurry (unless you scale it to be larger than your original shape’s size).

Step Three - Creating the base texture:

Once you have your shape created, what you’re going to want to then do is create a new layer by holding the CTRL+SHIFT+N keys. A popup will display, and you are going to want to click the box for “Use Previous Layer to Create Clipping Mask.” What this does is create a new layer which you can paint inside of using the brush tool, but since it is Clipped into your previous shape, you will only be able to paint inside of that shape.

You are then going to want to use both your dark color and light color to paint strokes up and down your original shape, and it also helps to eventually lower the opacity of your brush. But before I do this, I want to rotate the canvas so that I can paint horizontal lines across my original shape. In order to do this, you can click the R key and rotate the canvas by clicking and dragging your mouse. If you want it to perfectly rotate, you can hold Shift as well while left clicking and dragging your mouse.

Step Four - Creating Wooden Cracks:

Once you have your base shape colored in, we want to then create some cracks to simulate a wooden texture. For this, you can use a darker color from your original dark color that you used originally. Once you have chosen your darker color for this, you want to create a new layer again by holding the CTRL+SHIFT+N keys again. A popup will display, and you are going to want to click the box for “Use Previous Layer to Create Clipping Mask.”

You are then going to want to start drawing these cracks, and it helps to look at reference images from online. You can look up “wooden textures” on Google Images or Pinterest and find a good reference to simulate these cracks. Once you have created cracks for this display, you want to choose another light color, one that is lighter than your original light color, and draw lines on the sides of your cracks to create some depth for your cracks.

Step Five - Creating The Display:

Now that you have your base shape with a wooden texture, there’s hundreds of ways to go about how you want to display the number of whatever currency the player has. You could simply just have text shown on top of the wood, but a better idea would to create a new shape that is dark so that your currency display’s text number contrasts well. I am going to be using my original dark color from Step One to create a rounded rectangle inside of my wooden box, and I’m going to create a darker color that outlines the top left corner of this shape to simulate depth. I will then use my text tool to type out some number just to show where the text will be displayed for when it is actually in your game.

Step Six - Creating The Currency Icon:

For this part, I am going to be showing you how to create a nice coin icon. Similar to the first step where you pick your base colors, you’re going to want to do the same for this part as well. When creating a currency icon, I will be using golden colors for a coin, and I will be using my light color for painting on some lighting onto the coin and I will be using my dark color for shading. This will give your coin icon very nice depth. We have three parts for this coin icon. One part being the inner circle shape, the second part being the actual coin frame, and the third part being the side of the coin. Watch this video as I demonstrate how to create the ideal coin icon:


Now you have learned both the basic of Photoshop as well as how to create a currency display for your game. You can use this tutorial for everything else that is in your game, more particularly the general HUD User Interface. If you guys have any questions, feel free to send me a DM on the Developer Forum and I'll get back to you as quick as I can.

Photoshop is really a great tool but if you want to work more efficiently and accurately I would seriously recommend getting your hands on Illustrator.


Agreed. Photoshop was made for editing photos and illustrator was created this purpose.


Could you redo this tutorial in Gimp?

Great tutorial! The one thing that confuses me about UI design is that when you implement it, how do you get all of the number values to be in the font used in photoshop? Or would you just implement it and use a basic text label?

1 Like

I have wondered this before, and I know the solution. The text is pretty much just for show, you add the text with a text label in studio. Imported text does not look good anyway.


Just going to also throw out there a few free tools, because Adobe tends to be very pricey and not at all needed for most beginners;

  • GIMP - like Photoshop but free and open source
  • - again like Photoshop, Windows only, much simpler and my editor of choice for images and photos
  • Inkscape - a brilliant Illustrator alternative, well suited to making vector art
  • Figma - cloud-based UI design and prototyping tool - my favourite tool to use and very capable

Generally you just have to use the Roblox fonts; though it’s definitely possible to make your own font renderer, it’s really difficult to do it correctly and support stuff like internationalisation and fallbacks.


I would like to add that all of these programs are way less hardware intensive. If you just need to do a quick edit for something, works wonder because it loads up instantly and it just suits my basic editing needs. Photoshop just takes too long to load.

Seeing a lot of great Windows/Mac alternatives to Photoshop (like GIMP) being posted.

Some great iPadOS/iOS alternatives are Lightroom, Procreate, and Darkroom. They’re affordable and actually can do a lot, especially if you have one of the newer iPads


Do we need to have an tablet for drawing?

No, you do not. However I do use a Tablet but it is not necessary.

You can do just fine using a mouse.

1 Like

Also, the cracks are like in Happy Wheels, but i can still say it’s a good tutorial.

1 Like

Really nice tutorial! I’d like to give a quick, useful tip: Use the color wheel, and avoid using complementary colors for gradients. Obey the color theory, in general! And also try to not go too muddy and/or saturated with the colors.

1 Like

Very very useful! I just learned how people get to create these icons by themselves. Thank you!

1 Like

A tablet isn’t required. If you have issues with line consistency, you could just use the pen tool, which is just a fancy name for paths.

A graphics tablet speeds up the process and it has pen pressure, though.

There are cheap ones out there.

I doubt anyone looking at starter tutorials is ready to cash out anything over €50. I bought an Intuos Pro Large from 2015 for €150, but only because I got it for extremely cheap and it works perfectly.

I have an Intuos Pro small, it was just around 750 TRY.
Let’s not get off-topic.

I mentioned it because it just proves my point. Your tablet is still far beyond the price point for anyone willing to check if they are good at it, or just to make a UI set for one game. The cheapest tablet from Wacom that I would even consider working with is just above 70 EUR. Huion, being the next go-to brand still stands at 55 EUR for its cheaper tablets. Let’s not even mention the shipping prices. Anything cheaper than that and you are better off just using a mouse with line correction.