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 photoshopso 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:
