Advertisement
Interface

How to Design a Video Game Interface Window in Photoshop

by

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.


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.


Step 60

Reduce its opacity to 15%.


Step 61: Vehicle Preview

Create a frame inside the window interface. This is made from two path with the inner path is set to Subtract. Add following layer styles.


Step 62

Paste PNG image of a vehicle inside the frame.


Step 63

Behind the frame add a new layer and fill it with a gray to white gradient.


Step 64

Paint some shadows under the vehicle.


Step 65: Vehicle Data

Add another frame under the vehicle preview. Use similar technique in previous steps.


Step 66

Add some information onto the frame.


Step 67: Research and Upgrade Data

Draw another frame, this time bigger.


Step 68

Draw a simple rectangle inside the frame. Add following layer style.


Step 69

Add some text onto the rectangle.


Step 70

Duplicate the rectangle for another data. Remove layer style Outer Glow and reduce its opacity to 30% from inactive level.


Step 71

Duplicate all the shape to create another data set.


Step 72: Drawing Buttons

Return to Illustrator, create this shape.


Step 73

Paste the shape to Photoshop as a Shape Layer. Add following layer styles.


Step 74

Paint highlight and shadow manually using soft brush, Hardness 0% and Opacity 5-10%.


Step 75

Duplicate the shape and flip it horizontally.


Step 76

Draw a light blue rectangle and put it behind the shapes. Add following layer styles.


Step 77

Draw some highlights inside the shape. Add button's title. Paint light glow on top of the button.


Step 78

Duplicate the button and change its title.


Final Image

Related Posts