Advertisement
  1. Design & Illustration
  2. Interface
Design

Create a Mobile Checkers Game Interface in Photoshop

by
Difficulty:BeginnerLength:MediumLanguages:

In this tutorial, I will show you how to create an interface for a mobile checkers game in Photoshop. I will begin by showing you how to set up a simple grid. Then, I will explain how to create the main components of the interface using vector shapes and Photoshop's snap to grid functionality. Finally, I will show you how to add shading, highlights, and texture using Layer Styles. Let's get started!


1. Create a New Document & Setup a Grid

Open Photoshop and hit Command/Ctrl-N to create a new document. Enter all the data shown in the following image and click OK. Enable the Grid (View > Show > Grid) and the Snap to Grid (View > Snap To > Grid). For starters you will need a grid every 5px, so simply go to Edit > Preferences > Guides, Grid & Slices and focus on the Grid section. Enter 5 in the Gridline Every box and 1 in the Subdivision box. Also, set the color of the grid to #a7a7a7. Once you have set all these properties click OK. Don't get discouraged by all those grids. It will ease your work later. You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. You won't always need the gird, so keep in mind that you can easily disable/enable it using the Command/Ctrl- keyboard shortcut.

Checkers Mobile Game Interface

2. Background and First Two Wood Shapes

Step 1

Pick the Rectangle Tool (M) and focus on the control panel. Set the fill color at #925016 then simply click on your canvas. Enter 640 in the Width box and 1136 in the Height box then simply OK to create your brown vector shape. Move to the Layers panel, simply double click on the name of this shape and rename it background.

Checkers Mobile Game Interface

Step 2

Hit Command/Ctrl-A to load a selection around your entire canvas. Make sure that your brown vector shape is selected, grab the Selection Tool (V) and simply click the Align Vertical Centers and the Align Horizontal Centers from the control panel. In the end the vector shape should cover your entire canvas as shown in the second image. Once it does hit Command/Ctrl-D to get rid of that selection.

Checkers Mobile Game Interface

Step 3

Make sure that the grid is enabled and pick the Rectangle Tool. Set the fill color at #e2a066, create a 15 x 940px rectangle and place it exactly as shown in the following image. The grid and the Snap to Grid feature should ease your work.

Checkers Mobile Game Interface

Step 4

Focus on the Layers panel (Window > Layers) and simply double click on the thin vector shape made in the previous step to open the Layer Style window. Check the Pattern Overlay box and enter the properties shown in the following image. Here you can download the pattern used for this style. Make sure that your thin vector shape is still selected and duplicate it using the Command/Ctrl-J keyboard shortcut. Select the copy, drag it to the right and place it as shown in the second image. Once again, the grid and the Snap to Grid feature will come in handy.

Checkers Mobile Game Interface
Checkers Mobile Game Interface

3. Create the Side of the Board

Step 1

Pick the Rectangle Tool, set the fill color at #e2a066, create a 610 x 20px vector shape and place it as shown in the first image. Open the Layer Style window for this new shape, activate the Gradient Overlay and enter the properties shown in the following image (keep in mind that the white number stand for Location percentage). Move to the Layers panel, simply double click on the name of this new vector shape and rename it bottomSide.

Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 2

Focus on the Layers panel, make sure that your bottomSide vector shape is still selected and duplicate it (Command/Ctrl-J). Right click on this fresh copy and go to Clear Layer Style to remove the existing Layer Style attributes. Make sure that this copy stays selected, lower its Fill to 0% then open the Layers Style window. Activate the Pattern Overlay and simply enter the properties shown in the following image.

Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 3

Pick the Rectangle Tool, make sure that the fill color is set at #e2a066, create a 610 x 35px vector shape and place it as shown in the first image. Open the Layer Style window for this new shape, activate the Gradient Overlay and enter the properties shown in the following image. Move to the Layers panel, and simply rename this new vector shape topSide.

Checkers Mobile Game Interface

Step 4

Focus on the Layers panel, make sure that your topSide vector shape is still selected and duplicate it (Command/Ctrl-J). Right click on this fresh copy and go to Clear Layer Style. Make sure that this copy stays selected, lower its Fill to 0% then open the Layers Style window. Activate the Pattern Overlay and simply enter the properties shown in the following image.

Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 5

Disable the Grid (View > Show > Grid) and enable the Pixel Grid (View > Show > Pixel Grid). Pick the Rectangle Tool, set the fill color at #ba4715, create a 1 x 35px vector shape and place it as shown in the first image. Make sure that the Rectangle Tool remains active, set the fill color at #e0965f, create a second 1 x 35px vector shape and place it as shown in the second image.

Checkers Mobile Game Interface

Step 6

Reselect both vector shapes made in the previous step and Group them (Command/Ctrl-G). Move to the Layers panel, double click on the name of this fresh group and rename it separatorLong. Duplicate it (Command/Ctrl-J), select the copy and drag it several pixels to the left as shown in the second image. Make sure that your group copy is still selected and go to Edit > Transform > Flip Horizontal. Drag this flipped copy to the left and place it as shown in the fourth image.

Checkers Mobile Game Interface

Step 7

Pick the Rectangle Tool, set the fill color at #ba4715, create a 1 x 20px vector shape and place it as shown in the first image. Make sure that the Rectangle Tool remains active, set the fill color at #e0965f, create a second, 1 x 20px vector shape and place it as shown in the second image.

Checkers Mobile Game Interface

Step 8

Reselect both vector shapes made in the previous step and Group them (Command/Ctrl-G). Move to the Layers panel, double click on the name of this fresh group and rename it separatorShort. Duplicate it (Command/Ctrl-J), select the copy, flip it horizontally (Edit > Transform > Flip Horizontal), drag it to the left and place it as shown in the second image.

Checkers Mobile Game Interface

Step 9

Disable the Pixel Grid (View > Show > Pixel Grid) and enable the Grid (View > Show > Grid). Pick the Rectangle Tool, set the fill color at #ba783e, create a 610 x 110px vector shape and place it as shown in the first image. Open the Layer Style window for this new shape, activate the Pattern Overlay and simply enter the properties shown in the following image. Move to the Layers panel and simply rename this new vector shape middleSide.

Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 10

Focus on the Layers panel, make sure that your middleSide vector shape is still selected and duplicate it (Command/Ctrl-J). Clear the Layer Style attributes used for this copy, make sure that it stays selected, lower its Fill to 0% then open the Layers Style window. Activate the Inner Shadow, the Inner Glow, the Outer Glow and the Drop Shadow then simply enter the properties shown in the following images. Return to the Layers panel and rename the copy made in this step middleSideFront.

Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 11

Pick the Rectangle Tool, set the fill color at white (#ffffff), create a 10 x 110px vector shape and place it as shown in the first image. Focus on the right side of this new shape, make sure that it stays selected and switch to the Direct Selection Tool (A). Select the top anchor point and drag it 5px down then select the bottom anchor point and drag it 10px up. In the end things should look like in the second image. Open the Layers Style window for your white vector shape, activate the Inner Shadow and the Gradient Overlay then enter the properties shown in the following images. Make sure that you save the gradient used for the Gradient Overlay. Simply click the New button and your gradient will appear in the Presets window.

Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 12

Pick the Rectangle Tool, make sure that the fill color is set at white, create a 10 x 110px vector shape and place it as shown in the first image. Focus on the left side of this new shape, make sure that it stays selected and switch to the Direct Selection Tool (A). Select the top anchor point and drag it 5px down then select the bottom anchor point and drag it 10px up. In the end things should look like in the second image. Open the Layers Style window for your white vector shape, activate the Inner Shadow and the Gradient Overlay then enter the properties shown in the following images. For the Gradient Overlay section use your saved gradient.

Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 13

Pick the Rectangle Tool, set the fill color at black (#000000), create a 610 x 10px vector shape and place it as shown in the first image. Focus on the top side of this new shape, make sure that it stays selected and switch to the Direct Selection Tool (A). Select the left anchor point and drag it 10px to the right then select the right anchor point and drag it 10px to the left. In the end things should look like in the second image. Open the Layers Style window for this black vector shape, activate the Gradient Overlay then enter the properties shown in the following images. Again, use the saved gradient.

Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 14

Pick the Rectangle Tool, make sure that the fill color is set at black, create a 610 x 5px vector shape and place it as shown in the first image. Focus on the bottom side of this new shape, make sure that it stays selected and switch to the Direct Selection Tool (A). Select the left anchor point and drag it 10px to the right then select the right anchor point and drag it 10px to the left. In the end things should look like in the second image. Open the Layer Style window for this black vector shape, activate the Gradient Overlay then enter the properties shown in the following images.

Checkers Mobile Game Interface
Checkers Mobile Game Interface

4.Create the Top Wooden Side of the Board

Step 1

Focus on the Layers panel, reselect your bottomSide, topSide, middleSide, middleSideFront vector shapes and the four separator groups along with the four black and white vector shapes and Group them (Command/Ctrl-G). Keep focusing on the Layers panel and rename this new group Bottom. Duplicate your Bottom group (Command/Ctrl-J), select the copy, drag it up and place it as shown in the second image. Make sure that the copy is still selected and go to Edit > Transform > Flip Horizontal. In the end things should look like in the third image. Return to the Layers panel and simply rename your flipped group copy Top.

Checkers Mobile Game Interface

Step 2

Focus on the Layers panel and open your Top group. Open the Layer Style window for the existing topSide vector shape and simply inverse the Angle used for that Gradient Overlay.

Checkers Mobile Game Interface

Step 3

Keep focusing on your Top group. Open the Layer Style window for the existing middleSideFront vector shape and simply inverse the Angle used for the Inner Shadow and the Drop Shadow.

Checkers Mobile Game Interface

Step 4

Keep focusing on your Top group. Open the Layer Style window for the two, white vector shapes and simply inverse the Angle used for the Inner Shadow.

Checkers Mobile Game Interface

Step 5

Keep focusing on your Top group. Open the Layer Style window for the two, black vector shapes and simply inverse the Angle used for the Gradient Overlay.

Checkers Mobile Game Interface

5. Create the Black and White Squares

Step 1

Pick the Rectangle Tool, set the fill color at #e7d2bd, create a 610px square and place it as shown in the first image. Open the Layer Style window for this new vector shape and enter the properties shown in the following images.

Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 2

Pick the Rectangle Tool, set the fill color at #fff0db, create a 75px square and place it as shown in the first image.

Checkers Mobile Game Interface

Step 3

Multiply (Command/Ctrl-J) your 75px squares and spread the copies as shown in the following image. Move to the Layers panel, select all sixteen squares, right click on one of these vector shapes and simply go to Merge Shapes. Keep focusing on the Layers panel and rename the vector shape made in this step whiteSquares.

Checkers Mobile Game Interface

Step 4

Duplicate your whiteSquares vector shape (Command/Ctrl-J). Focus on this copy, rename it blackSquares and replace the existing fill color (#fff0db) with #282823. Make sure that your blackSquares vector shape is selected and simply go to Edit > Transform > Rotate 90° CW.

Checkers Mobile Game Interface

Step 5

Open the Layer Style window for your whiteSquares vector shape, activate the Inner Glow and enter the properties shown in the following image.

Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 6

Open the Layer Style window for your blackSquares vector shape, activate the Inner Glow and enter the properties shown in the following image.

Checkers Mobile Game Interface
Checkers Mobile Game Interface

6. Add Subtle Shading and Highlights for Your Board

Step 1

Pick the Rectangle Tool, set the fill color at white #000000, create a 640 x 940px vector shape and place it as shown in the first image.

Checkers Mobile Game Interface

Step 2

Duplicate (Command/Ctrl-J) the black vector shape made in the previous step . Select this copy and drag it in the bottom of the Layers panel, right above the background vector shape. Keep focusing on the Layers panel and rename the vector shape made in this step shadow. Open the Layer Style window for your shadow vector shape, activate the Outer Glow and enter the properties shown in the following image.

Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 3

Get back to the front, black vector shape. Lower its Fill to 0% then open the Layer Style window, activate the Inner Glow and enter the properties shown in the following image.

Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 4

Pick the Rectangle Tool, set the fill color at #000000, create a 640 x 5px vector shape and place it as shown in the first image. Make sure that this thin rectangle stays selected, focus on the Layers panel and lower its Opacity to 10%.

Checkers Mobile Game Interface

Step 5

Pick the Rectangle Tool, make sure that the fill color is set at #000000, create a new 640 x 5px vector shape and place it as shown in the first image. Make sure that this new rectangle stays selected, focus on the Layers panel and lower its Opacity to 10%.

Checkers Mobile Game Interface

7. Create the Checkers Pieces

Step 1

Pick the Ellipse Tool, set the fill color at #d11812, create a 55px circle and place it as shown in the first image. Open the Layer Style window for this new vector shape and enter the properties shown in the following images.

Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 2

Pick the Ellipse Tool, set the fill color at #bd0400, create a new, 55px circle and place it as shown in the first image. Make sure that this new vector shape and the Ellipse Tool remain selected, hold the Alt button from your keyboard and simply draw a 45px circle as shown in the second image. Open the Layer Style window for the resulting vector shape and enter the properties shown in the following images.

Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 3

Disable the Grid (View > Show > Grid) and enable the Pixel Grid (View > Show > Pixel Grid). Pick the Ellipse Tool, make sure that the fill color is set at #bd0400, create a 41px circle and place it as shown in the first image. Make sure that this new vector shape and the Ellipse Tool remain selected, hold the Alt button from your keyboard and simply draw a 37px circle as shown in the second image. Open the Layer Style window for the resulting vector shape and enter the properties shown in the following images. Return to the Layers panel, right click on the vector shape made in this step and simply go to Copy Layer Style.

Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 4

Pick the Ellipse Tool, make sure that the fill color is set at #bd0400, create a 33px circle and place it as shown in the first image. Make sure that this new vector shape and the Ellipse Tool remain selected, hold the Alt button from your keyboard and simply draw a 29px circle as shown in the second image. Move to the Layers panel, right click on this new vector shape and simply go to Paste Layer Style.

Checkers Mobile Game Interface

Step 5

Pick the Ellipse Tool, make sure that the fill color is set at #bd0400, create a 25px circle and place it as shown in the first image. Make sure that this new vector shape and the Ellipse Tool remain selected, hold the Alt button from your keyboard and simply draw a 21px circle as shown in the second image. Move to the Layers panel, right click on this new vector shape and simply go to Paste Layer Style.

Checkers Mobile Game Interface

Step 6

Pick the Ellipse Tool, make sure that the fill color is set at #bd0400, create a 17px circle and place it as shown in the first image. Make sure that this new vector shape and the Ellipse Tool remain selected, hold the Alt button from your keyboard and simply draw a 13px circle as shown in the second image. Move to the Layers panel, right click on this new vector shape and simply go to Paste Layer Style.

Checkers Mobile Game Interface

Step 7

Pick the Ellipse Tool, set the fill color at #bd0400, create a 7px circle and place it as shown in the first image. Open the Layer Style window for this new vector shape and enter the properties shown in the following images.

Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 8

Disable the Pixel Grid (View > Show > Pixel Grid) and enable the Grid (View > Show > Grid). Reselect all the shapes that make up your checkers piece and Group them (Command/Ctrl-G). Move to the Layers panel and rename this new group redPiece. Duplicate it (Command/Ctrl-J), select the copy and drag it several pixels down and to the right. Return to the Layers panel, rename this group copy blackPiece and open it. Select those vector shapes one by one and simply replace the existing fill colors with #1e1e1e.

Checkers Mobile Game Interface

Step 9

Multiply your redPiece and blackPiece groups and spread the copies roughly as shown in the following image. Select one of the pieces from outside the board and hit Command/Ctrl-T. Hold Shift and simply make your piece 50px wide. Repeat these simple techniques for the other pieces from outside the board. Finally, focus on the Layers panel, drag the red checkers pieces from outside the board between the middleSide and the middleSideFront vector shapes from your Top group and the black checkers pieces from outside the board between the middleSide and the middleSideFront vector shapes from your bottom group.

Checkers Mobile Game Interface

Step 10

Reselect one of your redPiece and blackPiece groups and duplicate them (Command/Ctrl-J). Resize these two copies and place them as shown in the following image.

Checkers Mobile Game Interface

8. Create the Buttons and the Score Board

Step 1

Pick the Rounded Rectangle Tool, set the fill color at #b06e34 and the radius at 5px. Create two, 155 x 55px rounded rectangles and two, 55px rounded squares. Place these vector shapes as shown in the first image then open the Layer Style window and enter the properties shown in the following images.

Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 2

Pick the Type Tool, simply click on your canvas, add the PLAYER 1 piece of text and place it as shown in the first image. Try the Tidal font, set the size at 35pt and the color at #6e2e0d. Using the same tool and text attributes add the other three piece of text shown in the first image. Focus on the Layers panel, open the Layer Style window for the pieces of text added in this step and add the properties shown in the following images.

Checkers Mobile Game Interface
Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 3

Pick the Rounded Rectangle Tool and make sure that the fill color is still set at #b06e34 and the radius at 5px. Create a 100 x 55px rounded rectangle, a 200 x 55px rounded rectangle, a 120 x 55px rounded rectangle and a 145 x 55 px rounded rectangle and place them as shown in the first image. Copy the layer style attributes used for the other four rounded rectangle and paste them onto these new vector shapes. In the end things should look like in the second image.

Checkers Mobile Game Interface

Step 4

Using the Type Tool add some new piece of text and place them as shown in the following image. Pick the same font attributes and color that you used for the other pieces of text. Copy the layer style attributes used for the top pieces of text and paste them onto these new pieces of text. In the end things should look like in the second image.

Checkers Mobile Game Interface

9. Add a Simple Pattern for the Background Shape

Step 1

Finally, open the Layer Style window for your background vector shape, activate the Pattern Overlay and enter the properties shown in the following image.

Checkers Mobile Game Interface
Checkers Mobile Game Interface

Step 2

You can also try this leather pattern instead of the wooden pattern.

Checkers Mobile Game Interface
Checkers Mobile Game Interface

Congratulations! You're Done!

Here is how it should look. I hope you've enjoyed this tutorial and can apply these techniques in your future projects.

Checkers Mobile Game Interface

Here is how it should look on a screen.

Checkers Mobile Game Interface
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.