Background art for Bubble Witch Saga 2

This tutorial is designed to show you how the Bubble Witch Saga 2 team makes a new background image for a scene.

We mix the 3D technique with 2D art to shorten the process in production while still producing very high quality results. All the 3D work described here is done in Maya, and the rest is done in Photoshop.
 In this case, we want to make a new background for the Hallowe’en season.

1. First, we need a quick concept art of the desired background. Ideally, we need it to be as similar as possible to the arrangement, composition, and colour we want for the final background.

2. We have to think of the composition because the elements in the background have to coexist with game elements.

– For example, we must ensure that no important element is placed behind the main characters or user interface elements. The game area also needs to be clear enough and have visibility (at least in a schematical way at this point).

3. Now, we can start modelling the background in 3D. We need to use the concept art as a guide as we model the basic forms and basic volumes.

– We start modelling the different assets of the scene. This is useful in replicating the objects in the scene and allows us to work faster. If necessary, we can also reuse these assets in the future in other scenes.

– We work on the general volumes at first, and when we have the desired shape, we add the final details.

– We model the terrain surface and place the asset properly, following the concept.

– We can often cheat with the camera perspective. What matters is how backgrounds look from the final viewing angle.

– Using the colours in the concept as a reference, we add different materials and colours to the different objects.

– Finally, we add lights to complete the scene and to give it details.

4. When we’re done, we need to make render passes of the different image layers we want to use for the final background and store them in a Photoshop layers file.
 Ideally, we should have at least Shadows, Direct Light, Indirect Light, and Occlusion passes, as well as a layer where the different elements are represented using flat colours to be able to easily select and isolate them.

– Shadows

This render layer applies the direct shadow projected by the light.

– Direct light

This render layer is all about the brightness of the light on the objects.

– Indirect light

This is the light hitting the objects that has first been reflected from other objects.

– Occlusion

With this render pass, we obtain an occlusion shadow that creates the volume of the different elements.

– Flat colours

We make a render pass with flat colours, keeping the colours of the concept. This allows us to isolate particular objects in the scene, so we can deal with them individually as needed later on.

5. Once we are in Photoshop, we use different Blending modes for the render layers. In general, we use the subtractive category in Blending modes for the shadows and the additive category for the light.

– This way, we get an image that we can start to tweak:

6. The major problem we have now is that combining the render layers using Blending modes has made the image too dark. This is because they are mainly based on blacks and greys. At King, however, we always use sharp and saturated colours, rather than blacks or greys, to make our games more fun and engaging.

If we want a full colour background, we must eliminate everything that darkens the image, and we have to create shadows using bright colours whenever we can.

To achieve this, we modify our render layers, saturating the colours to the fullest, and use the layer with flat and bright colours to play with the other layers. This helps us create the colours that we want.

We also play with the opacity and tint blacks using Hue/Saturation > Colorize to get them just right.

– The image below is an example of a simple Shadows layer. It’s got black shadows that we no longer want!

– After making the changes described above, this is a typical result:

– Then, when we apply this process to all the layers, the end result is an image like this:

– Remember that we still have the plain colour base in another layer:

– When we combine the grouped render layers and the plain colour base, we get a final image like this:

7. When working with each illustration, we must try colours, adjust opacity, duplicate render layers, apply different Blending Modes, and cut some areas to make a concrete lighting or shading changes in order to achieve our desired colour environment.

– In the next image, you can observe more details in the highlights and shadows than in the previous one. To increase this quality, we can duplicate some render layers and work to combine them.
For example, you can make one render layer with blue shadows and another one with pink. Then, you can select and erase areas in each layer to give some areas warm shadows (pink) and leave others with cooler tones (blue).

8. Now, we get to the most fun part — Overpainting!
 — We start by painting the sky and the faraway background. As you can see in the below image, the sky and the moon have more details than before. Overpainting is a very useful step in achieving the total environment.

We’ll paint on some details to increase the quality of the illustration. These include wood details, pumpkins, stones, the imperfections on the elements, and so on.

-Pumpkin faces

– By painting funny faces and creating final details, we add texture and lighting to the pumpkins.

-Details and highlights on trees

– Here, you can see how we add highlights and texture to the trees.

-Scarecrow faces, clothes, and details

-We paint wrinkles onto the scarecrows’ clothes using more highlights and shadows. We also add details to their hats and faces.

-Details on the windmill

We add imperfections and details to the windmill blades and the facade.

-Details on the cart and pumpkins

– In addition to the faces on the pumpkins, we have also changed the base colour to emphasise the difference between the pumpkins and the wooden cart.

-Overpainting on the ground

-On the ground, we add a lot more details, textures, and colours between the objects.

-Other details

-We continue this way, adding more details to our background until we’re happy with it!

9. Finally, we create more depth and atmosphere by taking the below image and placing it on top of the final illustration (in other words, all the other layers), using the Overlay Blending mode.

10. At the end, you get this result:

The overpainting process really brings the background to life!

Thanks for reading!

Originally published by Irene Membrives at on March 9, 2016.