We draw in Photoshop interface for playing checkers

In this tutorial, I will show you how to create a mobile checkers interface. For a start, I will show how to set the grid, then explain how to create the design components using vector shapes and the snapping function. In the final, I’ll show you how to add shadow, light, and texture using layer styles.

Final image:

Lesson resources:

Part 1. Create a new document and set the grid.

Create a new document (Ctrl + N). In the window that opens, set the parameters as in the screenshot and click OK. Turn on the grid (View – Show – Grid / View> Show> Grid) and also turn on Snap to Grid (View – Snap To – Grid / View> Snap To> Grid).
First, set the grid every 5 pixels (Editing – Settings – Guides, Grid, and Fragments / Edit> Preferences> Guides, Grid Slices) and focus on the Grid. In point Line every (Gridline Every) set 5, and in paragraph Internal division set to (Subdivision) 1. Set the grid color to # a7a7a7 and click OK.

Open the palette Info (Window – Info) (Window> Info) to view the location of the figures.

Part 2. Background and the first two wooden figures

Step 1

Choose a tool Rectangle (Rectangle Tool) (M). In the properties panel, set the color for it to # 925016 and click on the document. In the window that appears in the field Width (Width) set 640, and in the field Height (Height) set to 1136. Click OK to create a brown shape.

Double click the mouse to unlock the background layer and name it “background”.

Step 2

Load a selection around the entire document (Ctrl + A), select the tool Move (V) and in the properties bar at the top of the screen click on the icons. Align centers vertically (Align Vertical Centers) and Align centers horizontally (Align Horizontal Centers). Deselect (Ctrl + D).

Step 3

Make sure the grid is turned on and select the tool. Rectangle (Rectangle Tool). In the color palette, set the color to # e2a066 and draw a rectangle measuring 15 x 940px. The included binding will allow objects to stick to the grid, as this will make it easier to align them on the grid.

Step 4

If the Layers palette is not open for you, open it (Window – Layers (Window> Layers) and double click on the vector shape layer we created in the previous step to open the window with layer styles. In the window that opens, select the style Overlapping pattern (Pattern Overlay) and set the values ​​as shown in the screenshot. To overlay the pattern, use a wooden texture.

Duplicate the layer with the vector shape (Ctrl + J), move the duplicate to the right and place as shown in the second screenshot.

Step 1

Choose a tool Rectangle (Rectangle Tool) with color # e2a066. Create a 610 x 20px vector shape and place it as shown in the first screenshot. Apply layer style Gradient overlay (Gradient Overlay) and set the parameters as shown in the screenshot.

Double click on the layer with the vector shape and rename it to “bottomSide”.

Step 2

Duplicate the bottomSide layer (Ctrl + J), right-click on the duplicate and select Clear layer styles (Clear Layer Style). Decrease the parameter Fill (Fill) to 0% and apply a layer style. Overlapping pattern (Pattern Overlay).

Step 3

Choose a tool Rectangle (Rectangle Tool) with color # e2a066. Create a 610 x 35px vector shape and place it as shown in the first screenshot. Apply layer style Gradient overlay (Gradient Overlay) and set the parameters as in the second screenshot. Rename the vector shape layer to “topSide”.

Step 4

Duplicate the topSide layer (Ctrl + J), right-click on the duplicate and select the item Clear layer styles (Clear Layer Style). Decrease the parameter Fill (Fill) to 0% and apply style Overlapping pattern (Pattern Overlay).

Step 5

Turn on the grid (View – Show – Grid / View> Show> Grid) and turn on the pixel grid (View – Show – Pixel grid) (View> Show> Pixel Grid).

Choose a tool Rectangle (Rectangle Tool) with color # ba4715, create a 1 x 35px vector shape and place it as shown in the first screenshot. Now select the color # e0965f and without changing the tool draw the second vector shape 1 x 35px in size and place it as shown in the second screenshot.

Step 6

Place both vector shapes created in the previous step into the group (Ctrl + G). Rename the group to separatorLong. Duplicate the group (Ctrl + J) and move the duplicate a few pixels to the left, as shown in the second image.

Flip a copy of the group horizontally (Editing – Transform – Flip Horizontally (Edit> Transform> Flip Horizontal). Arrange the horizontally reflected group as shown in the fourth image.

Step 7

Choose a tool Rectangle (Rectangle Tool) with color # ba4715 and draw a 1 x 20px vector shape. Place the shape as shown in the first image.
Without changing the tool, select the color # e0965f and draw a second vector shape 1 x 20px in size and place it as shown in the second image.

Step 8

Place both shapes drawn in the previous step in the group (Ctrl + G). Rename the group to separatorShort. Duplicate this group (Ctrl + J) and flip the duplicate horizontally (Editing – Transform – Flip Horizontally (Edit> Transform> Flip Horizontal). Move the duplicate to the left and place as shown in the second image.

Step 9

Disable the pixel grid (View – Show – Pixel Grid / View> Show> Pixel Grid) and turn on the regular grid (View – Show – Grid) (View> Show> Grid). Choose a tool Rectangle (Rectangle Tool) and select the color # ba783e. Create a 610 x 110px vector shape and place it as shown in the first image.

Apply a layer style to this shape. Overlapping pattern (Pattern Overlay) and set the parameters that are shown in the screenshot. Rename the layer with this vector shape to “middleSide”.

Step 10

Duplicate the middleSide layer (Ctrl + J), remove all styles from this layer and set the Fill parameter to 0%.

Apply styles to this layer. Inner shadow (Inner Shadow), Internal glow (Inner Glow), External glow (Outer Glow) and Shadow (Drop Shadow). Duplicate the layer with the vector shape name “middleSideFront”.

Step 11

Choose a tool Rectangle (Rectangle Tool) with white color (#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 and select the tool. Arrow (Direct Selection Tool) (A).

Select the anchor point and move it 5 pixels down, then select the lower anchor point and move it 10 pixels up. Focus on the second image.

Apply styles to the white vector shape layer. Inner shadow (Inner Shadow) and Gradient overlay (Gradient Overlay) – the settings for these styles are shown in the second image. Save the gradient you used in the Gradient Overlay style (click on the button New (New) and your gradient will appear in the Presets window).

Step 12

Choose a tool Rectangle (Rectangle Tool) with white color, create a 10 x 110px vector shape and place it as shown in the first image.

Focus on the left side of the new shape and select the tool. Arrow (Direct Selection Tool) (A).

Select the upper control point and move it 5 pixels down, then select the lower anchor point and move it 10 pixels up. Add styles to this layer. Inner shadow (Inner Shadow) and Gradient overlay (Gradient Overlay). For the Gradient Overlay style, use the gradient saved in the previous step.

Step 13

Choose a tool Rectangle (Rectangle Tool) with black color (# 000000) and draw a vector shape sized 610 x 10px. Place the shape as shown in the first image.

Focus on the top of this shape and select the tool. Arrow (Direct Selection Tool) (A). Select the left anchor point and move it 10 pixels to the right. Then, select the right anchor point and move it 10 pixels to the left (orient to the second image).

Add a layer style to this black vector shape. Gradient overlay (Gradient Overlay) (remember to save this gradient as you did before).

Step 14

Choose a tool Rectangle (Rectangle Tool) and select black color. Draw a 610 x 5px vector shape and place it as shown in the first image.

Focus on the bottom of this shape and select the tool. Arrow (Direct Selection Tool) (A). Select the left anchor point and move it 10 pixels to the right. After, select the right anchor point and shift it 10 pixels to the left (orient to the second image).

Now add a layer style to the shape. Gradient overlay with the parameters that you see in the screenshot.

Step 1

Select the “bottomSide”, “topside”, “middleSide”, “middleSideFront” layers and four groups and groups with four black and white vector shapes and place them into the group (Ctrl + G). Rename the resulting group to “Bottom”.

Duplicate the “Bottom” group (Ctrl + G) and move the duplicate group up as shown in the second image. Flip the duplicate group horizontally (Editing – Transform – Flip Horizontally (Edit> Transform> Flip Horizontal). Rename the reflected group to “Top”.

Step 2

Open the “Top” group. Apply style to the topSide layer. Gradient overlay (Gradient Overlay) and change the value of the parameter Angle (Angle).

Step 3

In the “Top” group to the “middleSideFront” layer and in the layer styles Inner shadow (Inner Shadow) and Shadow (Drop Shadow) change the Angle parameter.

Step 4

Open the layer style settings window in the “Top” group for two white shapes and change the value Angle (Angle) in layer style Inner shadow (Inner Shadow).

Step 5

In the “Top” group, change the setting. Angle (Angle) layer style Gradient overlay (Gradient Overlay) in two black pieces.

Step 1

Choose a tool Rectangle (Rectangle Tool) with color # e7d2bd, draw a 610px square and position it as shown in the first image. To the drawn shape add layer styles that you see on the screenshot:

Step 2

Choose a tool Rectangle (Rectangle Tool), set the color to # fff0db and draw a 75px square.

Step 3

Duplicate the layer with the square drawn in the previous step (Ctrl + J) and place the copies as shown in the screenshot (it should turn out 16 copies).

Select all 16 layers-copies of the squares while holding the Shift key, click on one of them with the right mouse button and select the item Combine shapes (Merge Shapes). Rename the resulting layer to “whiteSquares”.

Step 4

Duplicate the “whiteSquares” layer (Ctrl + J), rename the duplicate to “blackSquares” and replace the existing fill color (# fff0db) with # 282823. Rotate this layer 90 ° (Editing – Transform – Rotate by 90 ° / Edit> Transform> Rotate 90 ° CW).

Step 5

Apply a layer style to the whiteSquares layer Internal glow (Inner Glow):

Step 6

Apply a style to the “blackSquares” layer. External glow (Inner Glow) with these values:

Step 1

Choose a tool Rectangle (Rectangle Tool) with black color (# 000000) and create a vector shape measuring 640 x 940px.

Step 2

Duplicate the black vector shape that you created in the previous step (Ctrl + J) and drag it to the bottom of the Layers palette, above the “background” layer. Rename this vector shape to “shadow” and add a layer style to it. External glow (Outer Glow):

Step 3

Reduce the Fill setting of the black shape in the foreground to 0% and add a style to it. Internal glow (Inner Glow):

Step 4

Choose a tool Rectangle (Rectangle Tool) with black color (# 000000), draw a 640 x 5px vector shape and position it as shown in the first image. Decrease opacity (Opacity) layer with this shape up to 10%.

Step 5

Choose a tool Rectangle (Rectangle Tool) with black color (# 000000) and create a new 640 x 5px vector shape. Place it as shown in the first image. Decrease opacity (Opacity) layer with this shape up to 10%.

Step 1

Choose a tool Ellipse (Ellipse Tool) with color # d11812 and draw a 55px circle as shown in the first image. Add some layer styles to this layer:

Step 2

Choose a tool Ellipse (Ellipse Tool) with color # bd0400, draw a new 55px circle and place it as shown in the first image. With the Ellipse Tool active, hold down the Alt key and draw a 45px circle as shown in the second image.

Add layer styles to this shape:

Step 3

Disable the normal grid (View – Show – Grid / View> Show> Grid) and turn on the pixel grid (View – Show – Pixel grid) (View> Show> Pixel Grid). Select the Ellipse Tool with the color # bd0400 and draw a 41px circle. Arrange the circle as shown in the first image.

With active tool Ellipse (Ellipse Tool) and holding the Alt key, draw another circle, only 37px in size, as in the second image. To this (second) vector shape, add layer styles, then right-click on the added styles and select Copy layer styles (Copy Layer Style).

Step 4

Choose a tool Ellipse (Ellipse Tool) with color # bd0400, draw a 33px circle and place it as shown in the first image. With active tool Ellipse (Ellipse Tool) Hold down the Alt key and draw another circle 29px in size. Click on this second shape with the right mouse button and select the item Paste style layer (Paste Layer Style).

Step 5

Choose a tool Ellipse (Ellipse Tool) with color # bd0400, draw a 25px circle and place it as shown in the first image. Without changing the tool, hold down the Alt key and draw another 21px circle and position it as in the second image. Right-click on this second shape and select Paste layer styles (Paste Layer Style).

Step 6

Choose a tool Ellipse (Ellipse Tool) with color # bd0400 and draw a 17px circle. Position it as shown in the first image. Without changing the tool, hold down the Alt key and draw another 13px circle, as shown in the second image.

Right-click on this second shape and select Paste the layer style (Paste Layer Style).

Step 7

Choose a tool Ellipse (Ellipse Tool) with color # bd0400, draw a 7px circle and place it as in the first image. Add some styles to the layer with this shape.

Step 8

Disable pixel grid (View – Show – Pixel Grid / View> Show> Pixel Grid) and turn on the regular grid (View – Show – Grid / View> Show> Grid). Select all the layers with the pieces of checkers and place them in the group (Ctrl + G). Name the group “redPiece”. Open this group, select all the layers with the pieces of checkers and change their color to # 1e1e1e.

Step 9

Duplicate the “redPiece” and “blackPiece” groups and place duplicates as shown in the screenshot. Select one of the checkers outside the board and press Ctrl + T. Hold down the Shift key and increase the size of this checker to 50px in width. Repeat the same with the remaining checkers outside the board.

Place all the newly edited checkers between the middleSide and middleSideFront layers from the Top group, and transfer all the black checkers from the outer part of the board and place them between the middleSide and middleSideFront layers from the bottom group.

Step 10

Duplicate the “redPiece” and “blackPiece” groups (Ctrl + J). Reduce these all copies (Ctrl + T) and position them as shown in the screenshot:

Step 1

Choose a tool Rounded Rectangle (Rounded Rectangle Tool) with color # b06e34 and with a radius of 5px. Create two rectangles with rounded corners sized 155 x 55px and two squares with rounded corners measuring 55px. Arrange these vector shapes as shown in the first image and add some layer styles to them:

Step 2

Choose a tool Text (Type Tool), click on the document and write the word “PLAYER 1”. Place this text layer as shown in the first image. I used the Tidal font, size 35pt and with color # 6e2e0d.

Using the same font and the same attributes, add the rest of the text, as shown in the second image. Apply styles to each text layer.

Step 3

Choose a tool Rounded Rectangle (Rounded Rectangle Tool) with color # b06e34 and 5px radius. Now draw one rectangle with rounded corners of 100 x 55px, the second 200 x 55px, the third 120 x 55px and the fourth 145 x 55 px, as shown in the first image.

Copy the layer styles that were applied to another rectangle with rounded corners and paste them on the layer with these new shapes (orient to the second image).

Step 4

With the tool Text (Type Tool) write the text on the first rectangle (use the same font and the same attributes that were used when creating the very first text layer). Copy the layer styles from the text layer on the first button, add text to the rest of the buttons and paste layer styles with layers onto it:

Part 9. Add texture to the background.

Step 1

Apply a layer style to the “background” layer. Overlapping pattern (Pattern Overlay) and use the settings shown in the screenshot:

Step 2

Instead of a wooden texture, you can use leather texture.

Final image:

Like this post? Please share to your friends: