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!
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.
Add a paper textures again, this time change its blend mode with Multiply.
Add adjustment layer Hue/Saturation to darken it.
Add a vintage book textures with blend mode Multiply and Opacity 48%.
Add old paper textures. This time use Blend Mode Overlay with Opacity 58%.
Add adjustment layer Black & White.
Create new layer. Hit D to set foreground and background color to black and white. Click Filter > Render > Clouds.
Set its blend mode to Multiply and reduce its opacity to 8%.
Create new layer. Fill it with white to black radial gradient.
Set its blend mode to Screen with Opacity 67%.
Add adjustment layer Hue/Saturation. Select Colorize to give it a color.
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.
On top of the rectangle, draw a smaller black rectangle. Select top points with Direct Selection Tool and move them.
Select the shape and Alt-drag to duplicate it.
Hit Command/Ctrl + D to repeat the duplication process.
Select all the shapes. Hit Command/Ctrl + C. Paste it in Photoshop, Command/Ctrl + V. Select Smart Object in Paste dialog box.
Double click layer to give open Layer Style dialog box. Add Pattern Overlay, load Color Paper and select a dirty pattern.
Add rectangle shape on top and bottom of the stripe.
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.
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.
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.
You can see the difference before and after modifying the shadow in the image below.
Draw another rectangle. This time smaller than the previous.
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%.
Create new rectangle covering all the shape. Add smaller rectangle inside the shape, set it to subtract.
Duplicate previous shape. Resize inner path.
Add following layer styles.
There's too much shadow on top part of window. In layer style dialog box activate Layer Mask Hides Effects.
Command/Ctrl-click path. Invert selection (Command/Ctrl + Shift + I) and paint shadows on upper part of the window with gray.
Below, you can see the difference before and after the shadow is partially hidden.
Draw a rectangle covering all the window interface. Set its Fill to 0% and add following layer styles.
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.
Use soft brush to paint some white on top of the hole.
Here's the result in 100% view.
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.
Right click shape and select Transform > Reflect. Select Axis: Vertical and click Copy.
Move duplicated shape.
Select points that are overlapping. Right click and choose Join.
Paste the path onto Photoshop as a Shape Layer.
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.
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.
Duplicate previous shape and resize it. See picture below for reference.
Draw another rectangle. This time use lighter color. Add Gradient Overlay. Duplicate and place it on lower part of the bigger rectangle.
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.
Draw shape below to add 3D perspective onto the shape. Add following Gradient Overlay.
Draw shadow under the shape.
Draw shape below and complete the shadow. Add Gradient Overlay onto the shape.
Here's the result in 100% view.
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.
Below you can see the result in 100% view. Duplicate the shape twice.
Create new layer under the shape and paint some black pixel using small soft brush.
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.
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.
Paste PNG image of a vehicle inside the frame.
Behind the frame add a new layer and fill it with a gray to white gradient.
Paint some shadows under the vehicle.
Step 65: Vehicle Data
Add another frame under the vehicle preview. Use similar technique in previous steps.
Add some information onto the frame.
Step 67: Research and Upgrade Data
Draw another frame, this time bigger.
Draw a simple rectangle inside the frame. Add following layer style.
Add some text onto the rectangle.
Duplicate the rectangle for another data. Remove layer style Outer Glow and reduce its opacity to 30% from inactive level.
Duplicate all the shape to create another data set.
Step 72: Drawing Buttons
Return to Illustrator, create this shape.
Paste the shape to Photoshop as a Shape Layer. Add following layer styles.
Paint highlight and shadow manually using soft brush, Hardness 0% and Opacity 5-10%.
Duplicate the shape and flip it horizontally.
Draw a light blue rectangle and put it behind the shapes. Add following layer styles.
Draw some highlights inside the shape. Add button's title. Paint light glow on top of the button.
Duplicate the button and change its title.