Lemma Soft Forums

Supporting creators of visual novels and story-based games since 2003.


Visit our new games list, blog aggregator, IRC, and wiki.
Activation problem? Email [email protected]
It is currently Wed May 22, 2013 6:46 pm

All times are UTC - 5 hours [ DST ]




Forum locked This topic is locked, you cannot edit posts or make further replies.  [ 9 posts ] 
Author Message
PostPosted: Mon Nov 21, 2011 5:06 pm 
Regular
User avatar

Joined: Sun May 15, 2011 11:50 pm
Posts: 57
Location: The Evergreen State
Projects: From Innocence
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:
File comment: This is the best I've been able to do at reproducing the effect. It's not good enough. Can someone help?
Friday Orphanage.jpg
Friday Orphanage.jpg [ 219.98 KiB | Viewed 624 times ]
File comment: This is exactly the kind of effect I'm looking for.
Snow.jpg
Snow.jpg [ 88.15 KiB | Viewed 624 times ]
File comment: Beautiful, clean and flat. No clutter. Nice oil paint effect. How?
school_classroomart.jpg
school_classroomart.jpg [ 170.65 KiB | Viewed 624 times ]
Top
 Profile Send private message  
 
PostPosted: Tue Nov 22, 2011 8:38 pm 
Regular
User avatar

Joined: Sat Oct 29, 2011 8:52 pm
Posts: 26
Location: NZ
Projects: Re∞Birth
Organization: Milky Cherry
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
classroom.jpg [ 65.26 KiB | Viewed 514 times ]
file.jpg
file.jpg [ 72.95 KiB | Viewed 514 times ]
Top
 Profile Send private message  
 
PostPosted: Wed Nov 23, 2011 3:15 am 
Moe Imouto

Joined: Sat Nov 06, 2010 10:38 pm
Posts: 911
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


Top
 Profile Send private message  
 
PostPosted: Wed Nov 23, 2011 12:27 pm 
Regular
User avatar

Joined: Sun May 15, 2011 11:50 pm
Posts: 57
Location: The Evergreen State
Projects: From Innocence
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 :)


Top
 Profile Send private message  
 
PostPosted: Wed Nov 23, 2011 12:54 pm 
Regular
User avatar

Joined: Wed Jul 28, 2010 10:37 am
Posts: 198
Location: Portugal
Projects: Cadência (??%)
Just use this:
http://fav.me/d39b959

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


Top
 Profile Send private message  
 
PostPosted: Wed Nov 23, 2011 10:37 pm 
Regular
User avatar

Joined: Sat Oct 29, 2011 8:52 pm
Posts: 26
Location: NZ
Projects: Re∞Birth
Organization: Milky Cherry
@Fawn

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


Top
 Profile Send private message  
 
PostPosted: Thu Nov 24, 2011 11:37 am 
Regular
User avatar

Joined: Sun May 15, 2011 11:50 pm
Posts: 57
Location: The Evergreen State
Projects: From Innocence
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
screenshot3.jpg [ 163.4 KiB | Viewed 359 times ]
screenshot2.jpg
screenshot2.jpg [ 109.63 KiB | Viewed 359 times ]
screenshot1.jpg
screenshot1.jpg [ 94.01 KiB | Viewed 359 times ]
Top
 Profile Send private message  
 
PostPosted: Thu Nov 24, 2011 2:01 pm 
Eileen-Class Veteran
User avatar

Joined: Fri Jun 05, 2009 3:31 am
Posts: 1596
Location: Illinois, USA
Projects: Twelve
Organization: Kitsch-soft
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.

_________________
“When I stand before God at the end of my life,
Aspiring writer-artist.

I would hope that I would not have a single bit of talent left,
and could say, 'I used everything you gave me.'”
— Erma Bombeck

▬▬▬▬▬▬▬▬▬▬ஜ۩۞۩ஜ▬▬▬▬▬▬▬▬▬
Works in Progress
Twelve - love story of an A.I. and her programmer
PAW ★ PRINTS - Laika in the Space with Tetris


Top
 Profile Send private message  
 
PostPosted: Thu Nov 24, 2011 2:32 pm 
Regular
User avatar

Joined: Sun May 15, 2011 11:50 pm
Posts: 57
Location: The Evergreen State
Projects: From Innocence
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?


Top
 Profile Send private message  
 
Display posts from previous:  Sort by  
Forum locked This topic is locked, you cannot edit posts or make further replies.  [ 9 posts ] 

All times are UTC - 5 hours [ DST ]


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Protected by Anti-Spam ACP
Powered by phpBB® Forum Software © phpBB Group