Adapting Photographs for Background Art

by S.

Sometimes you have to cut corners to finish a project in time. Here's a quick step-by-step tutorial on adapting photographs for use in a visual novel.

1. Pick carefully, or shoot your own photographs

These photos came from a trip to the Painted Desert from a few years ago. I'm pretty sure at that time I only had a regular point-and-shoot. Anyway:

1. This photo doesn't have a very dramatic light scheme, nor a strange viewpoint. It wouldn't be difficult to put a sprite on this one.
2. The horizon line is too low.
3. There are too many dramatic lights and shadows, which might compete with the sprite art.
4. The light here is too extreme, and the perspective is strange and a little warped.
5. This one could work, but that fence at the bottom creates a big, high-contrast bar of shadow. If I really wanted to use this one, I could try lowering the contrast, but the vertical line in the middle of the composition could still be distracting.
6. I'm not sure why, but visual novels that use photographs often use pictures of the ground, or the ceiling, or looking down at a bed. This can break immersion because it usually creates such an extreme contrast between the perspective of the sprite art and the perspective of the background art.

Number 1 is selected. The soft lighting and location of the horizon makes it a practical choice; it's not likely to compete with the sprite art.

2. Crop and find the horizon.

When adapting photos to sprite art, it's useful to have sprite art or concept art as a frame of reference—something as a color and height guide. In this example, I'm taking Shiye's sprite from Sunrise and adapting the photo to work with his sprite. He is painted with a fairly limited, very warm color palette, so even a muted photo like this contrasts too much.

The grainy texture of the photograph isn't helping, either. However, the perspective of this photograph and the fact that the sprite is already pretty realistic makes this adaptation easier than if I happened to be using cartoon sprites.

3. Filter

To fix that contrasting texture, I apply a filter. Photoshop's default paint daubs will do, but for the sake of example, and because paint daubs isn't very overt, I've used an oil painting filter here. Ultimately, all you need to do is reduce some of the photographic texture. Surface blur might also work.

So, after applying a filter, you're done, right?

Nope. One of the most common mistakes I see is too heavy a reliance on filters. While having a nice painted look to the background art might help, it's not everything (it's not even the most important part).

4. Tying it All Together

To tie everything together with Sunrise, I made a texture using charcoal on a piece of sketch paper, then scanned it in. This is the texture in normal mode, 100% opacity, with the Sunrise color gradient applied (just to show you the colors; the texture should be applied grayscale). It was used with everything in Sunrise: the background, GUI, and and the sprite art. It helped tie things together with a consistent texture.

This is how the texture looks when applied to the photograph:

That already makes a big difference. When  applying the texture, I used a layer set to Soft Light at 45% opacity. Depending on the texture, you might want to use a different setting and level of opacity, but for this purpose, these settings are fine.

Next, I apply the Sunrise gradient map. It is set to Color mode at 35%. Here is how it looks:

Now it looks a bit like a vintage postcard, which happens to be exactly what I'm going for.

5. Finish

Text from Sunrise

The Sunrise backgrounds also had a retro charcoal border. This is how the above background and sprite would look in-game with both textbox and border applied.

6. Some Variations

Here, a variety of filters are used. Beginning at the top left, the first is filtered using Paint Pro 3, the second is the original photo without filters, the third is Photoshop's default paint daubs, the fourth is a watercolor filter, and the final is an impressionist filter.

The watercolor and impressionist filters might work a bit better with cartoon characters, but the simple paint daub filter is all you need for this style of character.

So, no fancy tools needed (you might even be able to do all this in the GIMP, in fact, but that's a tutorial for another time). However, you may want to check out Creative Market to find a filter that matches your sprites' art style in particular. (These were filters that came with some design bundles I had purchased).

Pros of Photo Backgrounds

1.  It's fast
2. It can be cheap (my $99 point-and-shoot, for instance; although many phones can take decent photographs, too)
3. The results can look good, when done well
4. It works really well with photorealistic/painterly sprites
5. It can be great for placeholders that convey the right mood before committing to paying for, or making background art

The Limitations of Using Photographs:

1. You have to visit the location, or purchase stock photography
2. Generally, it takes taking dozens of photographs to get one good one
3. Highly outlandish fantasy or sci-fi settings are out, unless you happen to live in Narnia or outer space. In fact, any extra or fantasy elements still have to be hand-painted or photo-manipulated
4. It still takes time to manipulate a photo to match cartoony or highly stylized sprites
5. There is less overall control of the composition, especially if you have limited photographic resources

This is one of the actual BG's that went into Sunrise. It would be impossible to find a real-life scene that resembled this image exactly, and that's one of the benefits of a custom composition.

This background...

1. tells the story through multiple layers that can be added or removed to fit different scenes
2. reveals the personality of its occupant through the items and decor
3. is compatible with cutout style animation
4. has custom colors that are designed to work with the sprite art
5. however, took much more time (and it would take even more time if I went for a painted or photorealistic look)

Finally, it is absolutely possible to take photographic images and rearrange and manipulate them to tell a story much like you might with a hand drawn background, but at that point it becomes an artistic medium in its own right, and no longer a time-saver.

Story text by Hazel-Bun of Cherubim Scribes. Screenshot from the visual novel, Sunrise.