How to edit photos for bgs similar to Katawa Shoujo?

Use this forum to help develop your game-making skills, and get feedback on writing, art, music, or anything else you've created that isn't attached to a game in progress.
Locked
Message
Author
User avatar
tigersmurf
Regular
Posts: 79
Joined: Sun May 15, 2011 11:50 pm
Projects: From Innocence
Location: The Evergreen State
Contact:

How to edit photos for bgs similar to Katawa Shoujo?

#1 Post by tigersmurf » Mon Nov 21, 2011 5:06 pm

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.
Attachments
Friday Orphanage.jpg
This is the best I've been able to do at reproducing the effect. It's not good enough. Can someone help?
Snow.jpg
This is exactly the kind of effect I'm looking for.
school_classroomart.jpg
Beautiful, clean and flat. No clutter. Nice oil paint effect. How?

User avatar
natsumachi
Regular
Posts: 32
Joined: Sat Oct 29, 2011 8:52 pm
Completed: Re∞Birth [BL]
Projects: Ferfecir [BL]
Organization: Milky Cherry
Location: NZ
Contact:

Re: How to edit photos for bgs similar to Katawa Shoujo?

#2 Post by natsumachi » Tue Nov 22, 2011 8:38 pm

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?
Attachments
classroom.jpg
file.jpg

Fawn
Moe Imouto
Posts: 911
Joined: Sat Nov 06, 2010 10:38 pm
Contact:

Re: How to edit photos for bgs similar to Katawa Shoujo?

#3 Post by Fawn » Wed Nov 23, 2011 3:15 am

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 :D

User avatar
tigersmurf
Regular
Posts: 79
Joined: Sun May 15, 2011 11:50 pm
Projects: From Innocence
Location: The Evergreen State
Contact:

Re: How to edit photos for bgs similar to Katawa Shoujo?

#4 Post by tigersmurf » Wed Nov 23, 2011 12:27 pm

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 :)

User avatar
Abeiramar
Regular
Posts: 198
Joined: Wed Jul 28, 2010 10:37 am
Location: Portugal
Contact:

Re: How to edit photos for bgs similar to Katawa Shoujo?

#5 Post by Abeiramar » Wed Nov 23, 2011 12:54 pm

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

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

User avatar
natsumachi
Regular
Posts: 32
Joined: Sat Oct 29, 2011 8:52 pm
Completed: Re∞Birth [BL]
Projects: Ferfecir [BL]
Organization: Milky Cherry
Location: NZ
Contact:

Re: How to edit photos for bgs similar to Katawa Shoujo?

#6 Post by natsumachi » Wed Nov 23, 2011 10:37 pm

@Fawn

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

User avatar
tigersmurf
Regular
Posts: 79
Joined: Sun May 15, 2011 11:50 pm
Projects: From Innocence
Location: The Evergreen State
Contact:

Re: How to edit photos for bgs similar to Katawa Shoujo?

#7 Post by tigersmurf » Thu Nov 24, 2011 11:37 am

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?
Attachments
screenshot3.jpg
screenshot2.jpg
screenshot1.jpg

User avatar
Sapphi
Eileen-Class Veteran
Posts: 1685
Joined: Fri Jun 05, 2009 3:31 am
Completed: Boku no Taisetsu na Yumeko
Projects: Twelve, PAW ★ PRINTS
Organization: Kitsch-soft
Location: Illinois, USA
Contact:

Re: How to edit photos for bgs similar to Katawa Shoujo?

#8 Post by Sapphi » Thu Nov 24, 2011 2:01 pm

tigersmurf wrote: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! :o

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.
"It is [the writer's] privilege to help man endure by lifting his heart,
by reminding him of the courage and honor and hope and pride
and compassion and pity and sacrifice which have been the glory of his past."
— William Faulkner
▬▬▬▬▬▬▬▬▬▬..+X+..▬▬▬▬▬▬▬▬▬▬
Image

User avatar
tigersmurf
Regular
Posts: 79
Joined: Sun May 15, 2011 11:50 pm
Projects: From Innocence
Location: The Evergreen State
Contact:

Re: How to edit photos for bgs similar to Katawa Shoujo?

#9 Post by tigersmurf » Thu Nov 24, 2011 2:32 pm

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?

Locked

Who is online

Users browsing this forum: No registered users