Hi, Doomfest here. I am the lead artist for Dischan. In this tutorial, I will run through the process of how a backdrop is created. It deals mostly with workflow and assumes you are fluent in Photoshop, but I imagine bits and pieces are easily applied to most digital drawing programs. The background used is the room from Juniper’s Knot, and it has day / late afternoon / night variations, as well as plenty of bleed so the image slide around in-engine. Since it’s a visual novel backdrop, there are some steps that are only relevant to visual novels. This tutorial is quite lengthy (and I didn’t want to flood the blog’s index page), so hit the jump to get started!
Part One: Setup
First, set a canvas and use guides to indicate where the bleed starts. There are many ways to do this, but one way is to:
- make a 16:9 inch background (if the visual novel is 16:9),
- set view > snap > on and view > snap > document bounds
- set horizontal / vertical guides at the edges
- expand the canvas
The guides give a general idea of the picture plane of the game window without panning, which helps with making it look good without the bleed. Sometimes a composition looks wonky without seeing the bleed as well, and when I realize that it looks wonky with the crop, it’s too late. And not all of the image can be shown at once because the it has to slide around.
On a new layer, select the picture plane, select the inverse from that, then fill it with a color so that you can see how it looks without the bleed.
Next, draw the rectangle that will encompass the edges of the picture plane. I either brush it or draw it with the rectangle tool then give the layer a stroke and 0% fill, as shown here.
Next, scale down the rectangle proportionately.* I did: edit > free transform and checked the chain links between the width/height fields near the top of the Photoshop window to keep it the same ratio. The smaller resolution makes it faster to work with (more efficient for the beginning stages of an image), and a bigger surface helps with drawing stuff near the edges of the picture plane or outside of it. It will be scaled up again later before finishing to add detail and make it not look blurry at full resolution.
*This might not be an option depending on the backdrop, so in that case, extending the canvas further and zooming out is preferred.
Part Two: Drawing
(Tip: Shift+Drag makes straight horizontal or vertical lines with brush tools in Photoshop.) On a new layer, Set the horizon line for the image. Since it’s for a visual novel, placing the horizon line too far from the center would make it look like the camera is looking up or down too much, which looks weird.
Set the main vanishing points with intersecting vertical lines, then using the vanishing points, draw the basic shape of a big element or two that will help align everything else later.
Diagonals have their own vanishing points. Sometimes it’s easier to use the pen tool to figure these out.
Keep using the vanishing points to draw more and more details, going from big -> small generally. I also slid the entire drawing around a bit to try to get a better composition, a luxury not available to traditional media.
Time to color the image. For this backdrop, I used something similar to a first values (under line drawing) and then color pass method. In addition, I:
- selected the small picture plane
- inverted the selection
- filled the new selection in a new layer to make the area around the picture plane a neutral color.
Doing so helps remove color bias from the strong white background color and helps ensure the visible part of the image in-engine looks good without the rest of the backdrop. Also, the lines from before are now set to multiply and with the pixel transparency locked, filled with a medium color.
Scale up the image back to its’ original size proportionately.
I decided to extend the bleed area more here. To do this:
- Make sure the background color in the color picker is the same color of the background layer
- Either:
- image > canvas size or
- drag across the entire canvas with the crop tool, then extend past the current canvas.
Paint in the rest of the values in the bleed.
I did some color tweaking with Curves and Hue/Saturation here. Basically, I just boosted the contrast a little and made the lighter pixels warmer and the darker colors cooler. The same can be achieved with a Brightness / Contrast adjustment in conjunction with a Color Balance adjustment, but Curves gives me a lot more control. Hue / Saturation was placed under Curves because adjusting color channels in Curves or Color Balance tends to over saturate some pixels when there is some color on it already.
Here, I paint in some colors on an Overlay layer above the values. Colors chosen will not look exactly like the color once it’s painted on the layer. Overlay does something similar to Screen or Dodge for lighter pixels and Burn or Multiply for darker pixels, but I like the way it looks. Somewhere in the middle of the color picker, it does something similar to the Hue or Color blending mode.
Next, finish up the image with an overpainting on a layer above the lineart to clean up things and add details. I also toggled the bleed hiding layer to focus on the picture plane first – this part is visible for much longer than the other areas, so it makes sense that it gets a little more polish than the surrounding areas. Everything could just be polished to every single dead leaf in the ground, but that would take too long.
Then, turn off the bleed hiding layer and overpaint the rest of the image.
Part 3: Post-Process for Time-of-Day Variations
Usually, adjustments alone will get 50%-90% to a satisfying result for a variation. The rest might need to be painted over with blending modes and/or overpainting. This part differs wildly depending on the image, but in this particular case, the following adjustments worked for me. Don’t forget to make new layers and/or files for these!
To make a late afternoon variation, use a Hue / Saturation adjustment to drop down the saturation a bit and raise the contrast with Levels, Brightness / Contrast, or Curves (my preferred adjustment). In addition, use a Photo Filter adjustment with a Warming Filter preset.
To make a night variation, use a Curves, Levels or Brightness / Contrast to drop the brighter parts of the image to darker levels, lower the contrast if necessary, and add a Photo Filter adjustment with a Cooling Filter preset. In addition, I had to use a Hue / Saturation adjustment because the previous two adjustments oversaturated the image.
In this case, the sky and its’ light cast on the ground was too bright even with the adjustments, so I painted on a Multiply layer above with some blue-purplish tone to drop the brightness of the sky down, then overpainted the sky to give it the same texture and tweak little things, like the highlight on the broken wood panels. Stars were also added on a separate layer.
And that’s it, all the variations are done. (Preferably on new layers and/or files.) Of course, this isn’t the only way to do things, but it’s one of my favorite ways to draw a backdrop. Now go draw some environments!
Finished Backdrop
aurorafall
During this week both good and bad things happened:
mugenjohncelscreenshot0010screenshot0001screenshot0002screenshot0012screenshot0007screenshot0006Uncle Mugen Seal of Approval
