Learn how to create this mockup of a flash game title screen in Photoshop. You’ll learn how to draw the landscape, title, and each individual character.
Preview of Final Results

Create a Flash Game Mockup Photoshop Tutorial
Step 1 – Create a new image file
Open Photoshop and create a new image (Ctrl+N or File > New). Use your own settings. Fill the background with a light blue color (#addafd).
![1[4] 1[4]](https://cdn.photoshoptutorials.ws/images/stories/cb356ec438c2_14B98/14.jpg?strip=all&lossy=1&webp=82&avif=82&w=1920&ssl=1)
Step 2 – Adding the canyon layer
Create a new layer (C+Shift+N or Layer > New > Layer). Use the Pen tool (P) and make a canyon shape. Select it and fill it with dark brown (#1d0f00).
![2[4] 2[4]](https://cdn.photoshoptutorials.ws/images/stories/cb356ec438c2_14B98/24.jpg?strip=all&lossy=1&webp=82&avif=82&w=1920&ssl=1)
Step 3 – Adding depth to the canyon
Use the Pen tool and create random shapes on the canyon. These shapes are going to represent the highlights of the canyon. Select them and fill them with light brown (#261404).
![3[4] 3[4]](https://cdn.photoshoptutorials.ws/images/stories/cb356ec438c2_14B98/34.jpg?strip=all&lossy=1&webp=82&avif=82&w=1920&ssl=1)
Step 4 – Adding a glow to the background
Use the Brush tool (B) and select a basic brush with a soft edge. Select the background layer and draw a yellow (#ffbd30) spot behind the canyon.
![4[4] 4[4]](https://cdn.photoshoptutorials.ws/images/stories/cb356ec438c2_14B98/44.jpg?strip=all&lossy=1&webp=82&avif=82&w=1920&ssl=1)
Step 5 – Adding clouds
Create a new layer behind the canyon. Use the Pen tool to create some cloud shapes. Right click on the path then choose Make Selection. Fill the selection with white.
![5[4] 5[4]](https://cdn.photoshoptutorials.ws/images/stories/cb356ec438c2_14B98/54.jpg?strip=all&lossy=1&webp=82&avif=82&w=1920&ssl=1)
Set the opacity to about 32%.
![5a[4] 5a[4]](https://cdn.photoshoptutorials.ws/images/stories/cb356ec438c2_14B98/5a4.jpg?strip=all&lossy=1&webp=82&avif=82&w=1920&ssl=1)
Step 6 – Adding a sun
Create a new layer. Use the Pen tool to make a shape like the sun and its rays in the center of the image. Fill the shape with a pale yellow (#fbf496). Use the Brush tool and select a basic brush with a hard edge then paint the middle of the sun with a darker yellow (#f9e65a)
.
Step 7 – Adding cliffs
Use the Pen tool to make two shapes like the surface of two cliffs at the bottom of the image. These two shapes will be where the characters are going to be placed. Create a selection from the path (Right click on the path then choose Make Selection. Select the images and fill them with orange (#b76c0b). Use the Burn tool (O) around the corners to create some shadow and the Dodge tool (O) around the areas closer to the sun.
![7[4] 7[4]](https://cdn.photoshoptutorials.ws/images/stories/cb356ec438c2_14B98/74.jpg?strip=all&lossy=1&webp=82&avif=82&w=1920&ssl=1)
Create a selection of the two cliff surfaces. Create a new layer under the layer with the cliff surfaces. Expand the selection. (Select > Modify > Expand) the layer underneath by 3-4 pixels. Fill the section with black to create edges for the cliffs.
![7a[4] 7a[4]](https://cdn.photoshoptutorials.ws/images/stories/cb356ec438c2_14B98/7a4.jpg?strip=all&lossy=1&webp=82&avif=82&w=1920&ssl=1)
Create another layer under the layer with the cliff surfaces. Use the Pen tool to create shapes that would look like the body of the cliffs. Making sure each shape is closed off, fill each shape with a warm brown (#794602). Use the Burn tool to add shadows.
One response to “Create a Flash Game Mockup in Photoshop: “The Outlaws””
-
what a great tutorial.. all the concept is clear.. great job
Leave a Reply