How to edit photos for bgs similar to Katawa Shoujo?

[tigersmurf]

Hi! I'm really hoping someone here can help me.

So, I have been using placeholder bgs in my game, and it's time to replace them. I really have no interest (or time, or skill) for hand drawing all of my bgs. I'm good with making character sprites, but my paint.net skills are lacking when it comes to photo editing.

So, can anyone give me some simple, possible step-by-step tips for transforming real photos into bgs that look like (or very close to) the ones in Katawa Shoujo?

I included some samples of what I mean. Also, I included one of my current placeholder bgs for comparison.

I obviously have tried a few methods, (oil painting effect, pencil sketch layered with low opacity on top of image, brightness/contrast adjustments, unsharp mask,) and haven't found that perfect mix yet.

Any photoshop or paint.net experts out there know how to approximate this background effect? I'd greatly appreciate it.

[natsumachi]

um, I've definitely no expert, but one thing I've found is that one set of editing steps won't look good for every type of photograph. The level of detail and lighting in a photo makes quite a difference to the end result.

For example, to get the smooth paint-like effect of the 3rd photo they might've used something like Filter > Artistic > Paint Daubs > Sharpness = 0
Or Watercolor or Sponge layered with various opacity and layer modes. That image has mostly smooth surfaces and little color variation, so it's easier.

Really you need to tinker with duplicated layers and try which combination of Filters work best for each photograph.

In your 1st image there is a lot of tiny detail in the plants and building, so it's going to be more difficult to smooth it out.

In the classroom example the steps I used were basically:
1. duplicate image layer 2x
2. the top layer >> Gaussian blur
3. set layer transparency to 50%
4. on bottom layer filter > pixelate > crystal
5. set layer transparency to 50%
6. set middle layer to mode darker colour
7. merge layers and duplicate 1x. Top layer > sponge > set to screen
7. duplicate sponge layer. Top layer > set to darker or lighten

As a quick example of your 1st image, adding a Gaussian Blur layer set to Screen or Lighten over all the other layers can reduce the sharp photographic detail quite a bit. In that example I also used Paint Daubs filter to reduce the photo-ness. It's a rough example, but maybe it helps a little?

[Fawn]

I have a really simple recipe to get the effect in the art classroom. It gives the blurry effect and also a nice lineart effect!

These instructions are for Photoshop CS5, but, I bet you can find similar effects with a similar program:

1. Duplicate the original photo layer one time. DO NOT delete the original photo layer, keep it incase you need to more layers without effects.

2. While on the new duplicated layer, go to the "Blur" effects and choose "Smart Blur". Adjust the Smart Blur how you like, but make sure that it's not too blurry.

3. Duplicate the Smart Blur'd layer twice, so there are two Smart Blur'd layers on top of the original Smart Blur'd layer.

4. Hide the 3rd Smart Blur'd layer and select the 2nd one. Go down to the "Stylize" effects and choose "Find Edges". You should now have some pseudo-line art traced from the photo with a white background.

5. While staying on this layer, go to the Layer Effects drop down menu above the layers in the layers pallet and choose "Multiply". The line art will blend into the photo. Adjust the transparency as needed.

6. Make the top Smart Blur'd layer visible again. Choose "Gaussian Blur" from the "Blur" effects and adjust it how you like.

7. Lower the transparency of the Gaussian Blur'd layer to 40% (Or higher or lower as you like it).

Ta-da! You should have something that looks similar

[tigersmurf]

Thank you both so much for responding!

Fawn, thankyouthankyouthankyou. That is VERY close to the look I was going for. You have helped me out immensely. I draw my sprites with paint.net, but I downloaded the Photoshop trial specifically for this, and I can see that, for photo editing, it has far more tools available.

You method will work very well. That flat, smooth look works perfectly with my sprites. Everything else I've been able to do looks too distracting and draws attention to itself. Thanks you guys

[Abeiramar]

Just use this:
http://fav.me/d39b959

Photoshop. Window > Actions. Use them and voilà ! It looks like a painting instead of a photo!

[natsumachi]

@Fawn

wow Smart Blur + Find Edges is a great combination. Thanks for sharing that technique!

[tigersmurf]

So, the game I'm developing is a period piece/1930s. It takes place at an orphanage and small town in rural Maine and revolves around a group of teenagers who grew up together and never got adopted. It's a somber, more maturely themed style love story at heart.

So what do you think of these samples?

More specifically, would anyone be interested in a game with this art style?

[Sapphi]

So, the game I'm developing is a period piece/1930s. It takes place at an orphanage and small town in rural Maine and revolves around a group of teenagers who grew up together and never got adopted. It's a somber, more maturely themed style love story at heart.

So what do you think of these samples?

More specifically, would anyone be interested in a game with this art style?

OF COURSE!

One thing I would suggest is that you try to take/find pictures without large objects in the immediate foreground, like that seat on the train, for instance. It makes it kind of awkward when you have to put a sprite there, since the perspectives clash. It's not a major issue, but it can be distracting.

[tigersmurf]

That's true. I had not intended to use the train bg for putting sprites on, as it's only supposed to be a brief transitional screen, i.e. when the character travels from the orphanage to the town.

I hope it works for that purpose. What do you guys think?