Advertisement
  1. Design & Illustration
  2. Scenery
Design

How to Create a Fantasy Game Background in Adobe Photoshop

Difficulty:IntermediateLength:MediumLanguages:
Final product image
What You'll Be Creating

Today let’s attack the wonderful topic of game background creating! While there are a multitude of game types and platforms, a good, immersive setting that creates just the right atmosphere is a very important part of any game. Let’s dive right into it!

1. First, a Wild Sketch Appeared!

Before anything else, as a general rule you must have a basic concept of what you’d like to obtain. A vision. Allow yourself some time to flesh the idea out, testing out different shapes, colors, light sources and focus points. Don’t rush—make sure that deep in your heart you feel that sketch is the one.

Once you've got that part down, the rest is a piece of cake. Here is the sketch we are going to start from today:

Sketch

2. Laying Down the Basics

Step 1

Create a document sized 1024 by 768, RGB Color and Transparent Background, and fill it with #21291b. Then, set your foreground color to #4c5116. Take the Radial Gradient Tool (G), set it to Color to Transparent mode, and drag from center-right outwards as pictured below:

Direction

Step 2

Next, set your foreground color to #f1b007 and your background color to #ffdab6, and again drag from the same point outwards. Switch your foreground and background colors using the X key and repeat the process, each time dragging less than the previous. Now you should have something like the picture below:

Base gradient

3. Foliage Base

Create a new layer, name it “Foliage”, and set your foreground color to #444e0f, with your background one as #222c14. Take the Brush Tool (B), and select the “Foliage 1” brush from the brush set provided (you can download them by clicking Download Attachment in the sidebar of this tutorial).

On your “Foliage” layer, drag around to create a bunch of soft, far-away leaves. Don’t be afraid to change the size of your brush constantly or rotate it around its own axis—that gives us diversity!

When you feel you are done with the first layer of leaves (lighter in color), press X to switch your background and foreground colors and repeat the step to create darker leaves closer to us in perspective. Again, rotate and change the size of your brush—nature is filled with diversity, and this is what we're trying to emulate here.

Foliage

4. Foliage Detail

This was just a foundation. Now let’s do the real deal!

Step 1

Let’s start by creating a leaf. Take the Pen Tool (P), set it to Shape Layers mode, and then draw the shape of a leaf using a medium green color of your choice.

Leaf base

Step 2

Create a new layer above the base leaf shape layer. Right-click on it and choose Create Clipping Mask. Using the Eyedropper Tool (I), sample various light and dark shades from the background already created, and with a hand, round brush with Pressure Sensitivity on, paint a few details on this new layer, until you have a similar result to the one below: 

Leaf 2

Step 3

Now let’s add even more detail to this leaf, by smoothing out the colors—you can use the Smudge Brush set on soft round for this—and adding more shading detail. Notice the direction where the ambient light is coming from? 

As our leaf is a bit curved, and not straight and flat like a sheet of steel, and our light source is coming from a 0 degrees back angle, that bent portion will create a soft, light shadow at the crease. And of course, a highlight area on the opposite side of the crease.

Light sources

Step 4

Moving on with our leaf, let’s take a hard, round brush with Pressure Sensitivity on, and draw the leaf’s veins. You can use a darker green for this. 

Veins

Step 5

Add a few lighter colored strokes around the veins to create the illusion of depth, and use the Dodge Tool (O) set to a round, soft brush with Pressure Sensitivity on and mode Highlights to brush lightly and enhance the highlights that are already there.

Leaf dodging

Step 6

Next, for the finishing touches, let us add some reflective color to the leaf. Since our leaf has a waxy texture, it reflects secondary colors in the ambient light just as well as primary ones. Therefore, take a soft, round Brush Tool (B) and set its Mode to Linear Dodge, its Opacity to 50% and its Flow to 10%. Then brush lightly on the leaf using #00aeef for shadows and #f65b0e for highlight areas.

Optionally, to add more personality to your leaf, you can take a 2px hard round brush with Pressure Sensitivity on, and brush a few delicate veins around the leaf.

The end result should be similar to the leaf below:

Leaf final

5. Foreground Bushes

Using the same technique that we created the first leaf with, go ahead and draw a few more leaf shapes. After you have a few done, simply duplicate, rotate, resize and flip them to obtain an entire small bush! To obtain the darker leaves that help us with the impression of depth, simply paint over some of the leaves in your “bush” with a soft, round, 50% Flow and 50% Opacity Brush (B) set on a darker green.

Leaves

6. Adding More Depth

Step 1

Next we need to add even more depth to our background. To do that, take the Brush (B) named “Background Bush” and choose a darker green color as the foreground color.

Create a new layer and move it between your “Background” layer and your “Basic Foliage” layer. Name it “Background Bush 1”. With the brush you just selected, brush lightly around the edges of the light source. Lower Opacity as needed—I lowered mine to 50%—until your image is similar to the one below:

Bushes

Step 2

Then, create a new layer again and place it above your “Background Bush 1” layer and name it “Background Bush 2”. Taking a darker green color, brush again lightly, until your result is similar to the one below:

More bushes

7. Vines Bases

Step 1

Create a new layer and place it between your "Foliage" and "Leaves" ones, and name it "Vines".

Step 2

Set your Foreground color to #444e0f and select the Brush Tool (B). Make it a 7‑8 px, hard round brush, and drag to create a couple of vine bases. Then change your brush size to a 4, and setting your foreground color to #918429, draw thinner, more distant vines on your “Vines” layer.

Feel free to vary the size of your brush as you see fit.

In the end, you should have something like below:

Vines base

8. Fleshing Out the Vines

Step 1

Now, to give the vines a more appealing look, create a new layer above them and Clip Mask it to the “Vines” layer by right-clicking on it and selecting Create Clipping Mask.

Then set your foreground color to #d3a60d and your Background one to #29330b. Taking a soft, round brush with Pressure Sensitivity turned on, brush lightly with your lighter (highlights) and darker (shadow) colors to create a 3D look.

Vines shading

Step 2

When you are finished with that, you can merge the main “Vines” layer with its clipping mask (or not, it’s your choice), and double-click on your “Vines” to assign it the following layer style:

Vines layer style

9. Summary

Alright, here is what we’ve done so far:

Imge so far

And here is how the layers palette looks:

10. Adding Magic

To give the setting a magic feel, let’s add some glowbugs.

To do that, create a new layer above every other one, name it “Glowbugs”, and simply take a soft, round Brush (B) with NO pressure sensitivity on and brush around a few random dots using a vibrant green such as #7dad3c.

After that, switch your foreground color to white (#ffffff) and your Brush (B) to a smaller size and higher hardness (try around 70% Hardness), and zoom it to create a speck of light in the middle of each glowbug.

Magic lights

11. More Magic

Step 1

Create a new layer above everything else and name it “Dangling Strings”. Set your foreground color to #ffa800 and select the Brush Tool (B). Set it to a small (2 px), hard, round brush, with pen pressure turned on. Then draw several strands of gold thread hanging down from the top of the canvas, like this:

Dangling strings

Step 2

Once that is done, give your ”Dangling Strings” layer the following layer style:

Style

Step 3

Then, create a new layer above the “Dangling Strings” one, and name it “Dangling Lights”. Take a hard, round Brush (B) and set your foreground color to #ffffff. Then brush around small specks of magic dust, like below:

Strings detail

Step 4

Once you have that down, give the “Dangling Lights” layer the following layer style:

Style

Which should leave you with some nice magic light strings similar to these:

Lights sample

12. Mushroom Base

Create a new layer, and sketch out a random ‘shroom shape so you have a guide. Once that is down, make yet another new layer, name it “Mushroom Dark Base” and move it between the “Vines” and the “Basic Foliage” ones. Then create a new layer yet again, name it “Mushroom Light Base” and move it under the dark base one. Set your foreground color to #4c3f05 and your background one to #ea5501.

We will create a mushroom type that has magic, glowing spores—therefore all the light source and glow will come from beneath the cap. So use the dark, desaturated green to paint the cap and foot, and the bright orange for the undercap and frills areas.

Mushroom base

13. Mushroom Shading: The Base

Now that we have our two base color layers, it’s time to start shading them.

Start with the cap. Make a new layer, place it above the “Mushroom Dark Base”, and right-click on it and choose Create Clipping Mask.

Set your foreground color to #a19014 and your background one to #2a2901. Grab the Gradient Tool (G) and set it to a radial gradient, color to transparent mode.

Drag gently on the right side to create a highlight, then press X to switch your foreground and background colors and repeat the gentle dragging on the opposite side, to make a shadow.

After that, take the Brush Tool (B) set to a hard, round, pressure sensitivity brush. Press X to switch swatches again, and with the lighter color brush gently on the edge of the shadowy side, to create the 3D impression.

Repeat the process for the mushroom’s foot.

Mushroon cap lighting

14. Mushroom Shading: The Highlights

Step 1

Next, create a new layer and clip-mask it to the “Mushroom Dark Base” one. This new layer should be above the gradients layer we just made in the previous step. Using the same brush from before, pick the #2a2901 color and brush around the base of the cap.

Mushroom cap shadow

Step 2

Having done that, repeat the process, only this time using #ffdeb3 as your working color and making the outline thinner and a few pixels above the edge of the cap’s bottom.

Cap detail

Step 3

Next, take the Eraser Tool (E), set it to a soft, round brush, make sure its pressure sensitivity is turned on, and adjust the size as needed to erase a few spots here and there in the bright outline we just made.

Set the layer to Color Dodge mode and lower its Opacity to 80 and its Fill to 90, and you should have something similar to this:

Cap detail2

15. Mushroom Shading: The Details

Step 1

Next, let’s make some holes in the mushroom!

Make a new layer, clip-mask it to the “Mushroom Dark Base”, and make sure it’s above all the other clip masks it has right now.

Set your foreground color to a dark green, such as #554806. Using the Brush Tool (B), paint a few dots and ovals on the cap. Set the layer to Multiply and lower its Fill to around 60%.

Cap holes base

Step 2

To give the holes a less flat look, create a new clipping mask layer above the dots one and set your foreground color to a lighter green such as #5e4b0d.

Then brush lightly around the edges, further away from our main light source. Set this layer to Linear Dodge and lower its Fill to 60%.

Cap holes highlights

16. Mushroom Shading: The Style

Step 1

We'll add texture in this step, to bring our ‘shroom out of the smooth, boring realm!

First let’s start with a layer style.

Select your “Mushroom Dark Base” layer and double-click on it to open up the Layer Styles dialog window. There, give it the following settings:

Mushroom base style

Step 2

Next, take a soft, round brush of around 60 px, and set your foreground color to #3a3801.

Open up the Brush Settings panel (F5) and give your brush these settings:

Mushroom texture brush 1
Mushroom texture brush 2

Step 3

Then on a new clipping mask layer set on top of all the other clipping masks we have for “Mushroom Dark Base”, paint a few strokes to create a grainy texture as you see in the images above, to the left of the Brush Palette.

Set this layer to Multiply and lower its fill to 20% to 30% depending on need and taste.

You can use Filter > Sharpen on this layer if you wish, to enhance the graininess.

Next, set your foreground color to #5e4b0d and create a new clipping mask layer and drag it on top of the clipping masks stack. Control-click (Command-click on Mac) on the dark grain layer’s thumbnail in the layers palette to obtain its selection, and then on the new layer we just made, use the Bucket Tool (G) to fill the selection.

Set the layer to Color Dodge and lower its Fill to about 30%, and then use the arrow keys to move it 1 px to the right and 1 to the top.

Mushroom highlights

17. Mushroom Shading: The Glow

Now let's wrap up the cap with a few finishing touches that make a lot of difference.

Step 1

Create a new clipping mask layer and move on top of the stack. Set your foreground color to #e3b13b and using the Brush Tool (B) set to a soft, round brush, paint around the two outer edges. Paint more on the side the light source is coming from and less on the shadowy side, to create the ambient light. Set the layer to Color Dodge and lower the fill to your liking.

Mushroom detail light

Step 2

Now for the final touch to the cap, let’s give it bumps. Make a new layer but do not clip mask it like the previous ones. Name it “Blobs”. Set your foreground color to #e25501 and take a hard, round brush. Draw several blobs here and there on the cap—make sure the blobs are thick enough, or else the bead effect won’t be visible.

Mushroom blobs base

Step 3

Then give that layer the following layer style (color is #FAA800):

Blob style 1
Mushroom blobs style 2

Which should leave you with this:

Mushroom blobs final

18. Mushroom Shading: Wrapping Up the Cap

Step 1

Next, add some glow and magic dust around the blobs.

Add the glow by making a new layer and moving it under your “Blobs” layer. Paint on it using a soft, round Brush (B) to create a halo around the blobs.

Blobs glow

Step 2

Set the layer to Color Dodge and lower its Fill to around 55%.

Next, take the same brush and set its blending mode to Dissolve. Make a new layer, and call it “Fairy Dust”. Set it to Color Dodge and lower its Fill to 80%, and brush lightly on top of the blobs, so that you end up with something similar to this:

Mushroom cap final

The ‘shroom cap is ready! Congratulations!

19. Mushroom Shading: The Magic

Step 1

Time to shade the undercap and frills now! We’ll be coming back to the foot of the ‘shroom in a bit, don’t worry.

We’ll be working with two main colors: #f1a033 as foreground and #852900 as background. Also, we will use a hard, round brush with Pressure Sensitivity turned on.

Go to your “Mushroom Light Base” layer, and make a new layer on top of it. Clip-mask the new layer to the “Mushroom Light Base” one by right-clicking on it and choosing Create Clipping Mask.

Using the brush, paint the creases on the undercap and frills. You can switch your foreground and background swatches by pressing X. Aim for something like this:

Undercap shading

Step 2

Now create a new clipping mask layer, drag it on top of the stack and set it to Color Dodge mode, with 60% Fill. Take the same brush as before but set it to Dissolve mode. Brush lightly around to create a dusty texture, like so:

Undercap details

Step 3

To enhance the magic glow, you can optionally take a soft, round Brush (B), set the working color to #f1a033, and make a new layer which you won’t clip-mask. Set it to Color Dodge and lower Fill to around 60%, and then brush lightly over the mushroom undercap for an effect like this:

Undercap final

20. Mushroom Shading: The Brushing

Moving back to the mushroom’s foot now, set your foreground color to #ec6501 and your background one to #323402. Select a hard, round brush and open up the Brushes panel (F5) to give it these settings:

Mushroom foot brush 1
Mushroom foot brush 2

Brush around to obtain a result similar to the one you can see to the left of the Brushes panel in the pictures above.

Next, create a new clipping mask layer and set it to Color Dodge with Fill lowered to 40%. Grab the Brush Tool (B) again, set it to a soft, round brush and Dissolve mode, and brush around as before, to create a magic dust texture.

The mushroom is finished! Now you can make more using the same technique—feel free to try other shapes and experiment with color combinations! Or you can simply duplicate this and move it around.

Mushrooms final

21. Lighting and Sunshine

Time for some sun!

Step 1

Create a new layer on top of all the others. Name it “Burst”, set it to Color Dodge and lower its Fill to around 30%. Take the Brush Tool (B) and set it to the Burst brush. Adjust the size as needed.

Set the foreground color to #ffd066 and using the Burst brush, paint a single lightburst in the center of our light source area, to obtain the effect of sun rays.

Light burst

Step 2

Once that is done, make a new layer once again, name it “Bokeh”, and move it on top of any other layers you have. Set it to Color Dodge mode and lower Fill to 50%.

Take the Brush Tool (B) and set it to the Bokeh brush. Paint around to your liking, but don’t overdo it. Something like this:

Bokeh

22. The Berries

The whole thing is too green right now, and we need a splash of color. Let’s do that by adding more plants to it—this time some berries of sorts!

Step 1

We’ll be using a hard, round brush with Pressure Sensitivity on for this. Create a new layer and move it between your Vines and your Mushroom layers. Set your foreground color to #ee6602 and make a large, roundish blob, like the one below:

Berries base

Step 2

Then set your foreground color to #532000 and your background one to #fbf857. Using the darker color, paint a hole in the berry, and then paint highlights with the brighter yellow.

Berries shading

Step 3

Next, double-click on the berry layer to enter its blending options, where you can give it this glowing layer style—color is #FAA800:

Style

Step 4

Finally, on a new layer placed above the berry one, add a thin, curved stem to the said berry so that it’s not just hanging there in mid-air.

Berries final

Paint more berries here and there, or simply duplicate the one just made.

23. Background Moss: Base

Step 1

Create a new layer, and move it right under your “Berries” one.

Set your foreground color to #333408 and your background one to #414e09. Grab the Brush Tool (B), set it to the “Background Moss 1” shape, and brush lightly around the bottom third of the canvas with the darker green color.

Background moss base

Step 2

Then switch your colors by pressing X and brush a few details with the lighter green. Feel free to vary the size of your brush in the process.

Background moss detail 1

24. Background Moss: Shading

Step 1

Create a new clipping mask layer for the “Background Moss” one by making a new layer above “Background Moss” and then right-clicking it and choosing Create Clipping Mask.

Take a dark green (#202607) and the Brush Tool (B) set to the “Background Moss 2” shape, and brush some dark moss around.

Then switch your working color to #494c0b, make a new layer and clip-mask it to “Background Moss” as well, and paint a few lighter moss strands. To emphasize the 3D effect, grab the Dodge Tool set to a soft, round brush with Highlights, 35% Exposure and no Protect Tones, and dodge the tips of the lighter-colored moss to achieve an effect similar to the one below:

Background moss detail 2

Step 2

Finally, for a good transition to the light in the background, make a third clipping mask layer assigned to the “Background Moss” and set your foreground color to #ffdd6a. Using the Gradient Tool (G) set to color to transparent, radial gradient, drag lightly to blend the top leaves into the light, like this:

Background moss detail 3

25. Background Moss: Middle Grass

Step 1

Next, set your foreground color to #353a0b and create a new layer above your Berries.

Take the Brush Tool(B) and set it to the “Middle Grass” shape, and brush around, like so:

Middle grass base

Step 2

Then double-click on it to give it the following layer style:

Middle grass style

26. Background Moss: Detail Grass

Step 1

New layer again, name it “Detail Grass”, and place it right above the “Middle Grass” one. Set your foreground color to #3a3d0e and grab the Brush Tool (B) again, choosing the Detail Grass brush shape. Brush to obtain this:

Detail grass base

Step 2

Then give your layer the following style—color is #FAA800:

Detail grass style 1
Detail grass style 2

For the following final effect:

Detail grass final

27. Water

Time for a watery end! Bet you have been waiting for this, right?

Alright. Now we could paint this by hand, but that would mean several hours spent and a not so sharp effect. So create a new layer on top of every other layer that you have in your Layers Palette. Go to Image > Apply Image. It will create a flattened version of your canvas. Name this layer “Water”. Go to Edit > Transform > Flip Vertical.

Now, make sure you saved your work. Close your Photoshop and go to the Redfield Plugins website.

Look for and download the “RedfieldPlugins.exe 9 filters package”. Install this, and restart Photoshop. You should have a new plugin in your Filters, named “Redfield”.

Open up your work file again, and on your “Water” layer, go to Filter > Redfield > Water Ripples. Choose the “Sunset” preset. Then confirm the filter, and resize the layer vertically to about one third of the canvas size. Then go to Layer > Layer Mask > Reveal All and using the Gradient Tool (G) set to color to transparent, linear gradient, drag from top to bottom lightly to fade out the top edge of the water, which should give you the following result:

Water base

28. First Distance Fog

Step 1

All nice and shiny, but if you look closely, our new water has a gray, ugly ending at the top. Therefore let’s fix that by creating two new layers. Name the first one “Fog 1” and the second one “Fog 2”. Like so:

Fog 1

Step 2

Select “Fog 1” as your working layer. Then set your foreground color to #fe9962 and use a soft, round brush, to paint around until you get something like this:

Fog 1 shape

Step 3

Set the first fog to Color Dodge, and lower its Fill to about 65% to get a result similar to this:

Fog 1 final

29. Second Distance Fog

Step 1

Moving on to the “Fog 2” layer, set your foreground color to #fed861 and take the same soft, round Brush Tool (B) from before, painting around to obtain a similar shape to this:

Fog 2 base

Step 2

Then, set your layer to Color Dodge and lower its Fill to around 44%, which should leave you with the following result:

Fog 2 final

Step Into the Light

Here we are. At the end of a pretty long and might I say epic journey!

Of course, there is much, so much more that can be added to the picture still, and you are free to be as creative as you wish—give it animals, give it fairies, give it insects, give it a sleeping cat with thick glasses on… whatever you dream of. This is just a base for you to build on further.

I sincerely hope you enjoyed the journey, and if you try this out and wish to share your result and/or hit bumps along the way, feel free to drop a comment below about it.

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.