User Interface Designer Video Game

Read Time: 7 mins Languages:

One of the most important aspects of playing a video game is how information is presented. How the graphics are presented makes a major difference in how the players will perceive the game during play. In today's tutorial we will demonstrate how to design a video game interface window. During the process we will show how to manually draw certain aspects, apply layer styles, textures, and even how to incorporate Adobe Illustrator. Let's get started!

Tutorial Assets

The following assets were used during the production of this tutorial.

Paper Textures from Vandelay Premier
Vintage Book Textures from Lost and Taken
old Paper Textures from WeGraphics
Scratched Metallic Textures from WeGraphics
Rust textures from WeGraphics
Carivan Set png from mysticmorning

Step 1: Background

Create new file with size 1152 px x 864 px. Our first step is creating background for our interface. This process is simply is just experimenting with texture. Basically, I just threw some textures I found and experiment with its blend mode. My first try is a paper textures.

Step 2

Add a paper textures again, this time change its blend mode with Multiply.

Step 3

Add adjustment layer Hue/Saturation to darken it.

Step 4

Add a vintage book textures with blend mode Multiply and Opacity 48%.

Step 5

Add old paper textures. This time use Blend Mode Overlay with Opacity 58%.

Step 6

Add adjustment layer Black & White.

Step 7

Create new layer. Hit D to set foreground and background color to black and white. Click Filter > Render > Clouds.

Step 8

Set its blend mode to Multiply and reduce its opacity to 8%.

Step 9

Create new layer. Fill it with white to black radial gradient.

Step 10

Set its blend mode to Screen with Opacity 67%.

Step 11

Add adjustment layer Hue/Saturation. Select Colorize to give it a color.

Step 12

Finally, add a nice scratched metallic textures. Set its blend mode to Multiply and reduce its Opacity to 20%.

Step 13: Industrial Line

Open Adobe Illustrator. Draw a yellow rectangle.

Step 14

On top of the rectangle, draw a smaller black rectangle. Select top points with Direct Selection Tool and move them.

Step 15

Select the shape and Alt-drag to duplicate it.

Step 16

Hit Command/Ctrl + D to repeat the duplication process.

Step 17

Select all the shapes. Hit Command/Ctrl + C. Paste it in Photoshop, Command/Ctrl + V. Select Smart Object in Paste dialog box.

Step 18

Double click layer to give open Layer Style dialog box. Add Pattern Overlay, load Color Paper and select a dirty pattern.

Step 19

Add rectangle shape on top and bottom of the stripe.

Step 20

Add following layer styles.

Step 21: Basic Window Interface

We'll start by creating base of the Window. Create a rectangle shape with Color: # #313029, Opacity: 100%, and Fill: 50%. Add following layer style.

Step 22

The layer style we have just added is too flat. We will use a simple technique to fix it. In Layer Style dialog box activate Layer Mask Hides Effects.

Step 23

Add layer mask. Command/Ctrl-click path to create selection. Invert selection by pressing Command/Ctrl + Shift + I. Add a soft dark gradient on top and paint black on the industrial line to hide shadow.

Step 24

You can see the difference before and after modifying the shadow in the image below.

Step 25

Draw another rectangle. This time smaller than the previous.

Step 26

Add rust textures on top of it. Use layer mask to hide unneeded areas. Set its blend mode to Multiply and reduce its Opacity to 10%.

Step 27

Create new rectangle covering all the shape. Add smaller rectangle inside the shape, set it to subtract.

Step 28

Duplicate previous shape. Resize inner path.

Step 29

Add following layer styles.

Step 30

There's too much shadow on top part of window. In layer style dialog box activate Layer Mask Hides Effects.

Step 31

Command/Ctrl-click path. Invert selection (Command/Ctrl + Shift + I) and paint shadows on upper part of the window with gray.

Step 32

Below, you can see the difference before and after the shadow is partially hidden.

Step 33

Draw a rectangle covering all the window interface. Set its Fill to 0% and add following layer styles.

Step 34

Our last step just add subtle highlight onto the window interface.

Step 35: Holes

Draw a dark circle and place on corner. Add drop shadow.

Step 36

Use soft brush to paint some white on top of the hole.

Step 37

Here's the result in 100% view.

Step 38

Put all layers that create the hole onto a layer group. Duplicate the group and put it on each corners.

Step 39: Window Title

In Illustrator, create half of Window's title shape.

Step 40

Right click shape and select Transform > Reflect. Select Axis: Vertical and click Copy.

Step 41

Move duplicated shape.

Step 42

Select points that are overlapping. Right click and choose Join.

Step 43

Paste the path onto Photoshop as a Shape Layer.

Step 44

Paint highlight and shadow on the shape. You can see the progress I made below. I use very soft brush (Hardness: 0%, Opacity: 5-10%) and about 10 layers.

Step 45

Add game title and add following layer styles. Font used here is Celtic Garamond the 2nd.

Step 46: Accessorize

Draw a rounded rectangle on left side of the interface. Use color: #605847. Add subtle Gradient Overlay from gray to white.

Step 47

Duplicate previous shape and resize it. See picture below for reference.

Step 48

Draw another rectangle. This time use lighter color. Add Gradient Overlay. Duplicate and place it on lower part of the bigger rectangle.

Step 49

Draw 1 px line for its highlight and shadow. We are going to convert this shape into a 3D shape. In the end, you will see that this small 1 px detail is needed to get a realistic result.

Step 50

Draw shape below to add 3D perspective onto the shape. Add following Gradient Overlay.

Step 51

Draw shadow under the shape.

Step 52

Draw shape below and complete the shadow. Add Gradient Overlay onto the shape.

Step 53

Here's the result in 100% view.

Step 54

Select all layers and put it on a group layer. Duplicate the group, flip it horizontally, and put it on the opposite side.

Step 55: Accessorize

Draw shape as seen below. Paint highlight and shadow on top of it. Don't forget to add soft shadow of the shape on the interface window.

Step 56

Below you can see the result in 100% view. Duplicate the shape twice.

Step 57

Create new layer under the shape and paint some black pixel using small soft brush.

Step 58

Duplicate all the shape. Flip it horizontally and move it to the other side of the interface.

Step 59: Add Rust Texture

Add rust textures covering the whole interface. Command/Ctrl-click interface border and window title to create a selection based on their shape. Add new layer mask. Paint black title shape with low opacity brush because we don't want to see too much rust texture on it. Below, you can see the mask I created.