Lemma Soft Forums

Yeah, sure, go ahead and use it. It'd be great too if you could point me to a few tutorials about gradients and airbrushing I'm not very familiar with Photoshop yet.

I resurface.

I wonder if you're still around, bardmanship?
Because I'm still writing the project, in case anyone is wondering...
Last time I believe I still sent you info on more BGs...you still around?

Hey there, new around here ^^
I've tried turning photos into VN backgrounds for the last few days. I see someone found a very similar way already but just for the sake of it I'll post my results. All source pictures are from stock.xchng, see authors for commercial uses . (they're not all 4:3 format but a crop would do the trick)


My first try, I went for a cartoon background style and used some blur effect to help.


Rather loaded picture so I tried to simplify as much as possible.




First try at interior pics.


Used a slightly different technic here.

I really like the first three- especially the third one- it looks awesome! So, care to share your technique?

The details, the details.
I wouldn't suggest using this technique if the other (character) artwork is fine. I would rather suggest that you add splines to make it "look drawn", but degrading the amount of shadows and value...nah.

Not that these photos are degraded TOO much, but it's degraded nonetheless. Doesn't make them unusable, so...uhh...

Hey, the first picture looks like my University! (Hart House, U of Toronto?)

Finally, about the crop...DON'T. Program the game engine to select where to display instead. This may even allow room for a few flexible tricks.

It looks like *everybody's* university. Or at least, a lot of them.

Yang Sei Fu wrote:Finally, about the crop...DON'T. Program the game engine to select where to display instead. This may even allow room for a few flexible tricks.

A better idea is to work with the images at full resolution, and then crop or rescale them as the final step in the process. You don't want to ship images with portions that aren't being used, as that will make the download bigger and consume ram at runtime.

Of course, if you are going to show the entire image (say, because you're moving the image around), then it does make sense to ship the whole thing. But that's a directoral decision.

Yang Sei Fu wrote:The details, the details.
I wouldn't suggest using this technique if the other (character) artwork is fine. I would rather suggest that you add splines to make it "look drawn", but degrading the amount of shadows and value...nah.

Well my idea was that photos used in games just scream "photooo!" a bit too much compared to hand/vector drawn characters. Hence why I tried to simplify the bg too. Adding splines.... you mean having some contours in there mh ? Like this ?



I don't think I've tried having contours yet not simplifying content. I'll do that tonight probably.

Not that these photos are degraded TOO much, but it's degraded nonetheless. Doesn't make them unusable, so...uhh...

I take it it's mostly a matter of taste too

Hey, the first picture looks like my University! (Hart House, U of Toronto?)

Supposed to be some abbey hosting a school... Don't know much else (but checking stock.xchng and looking for "school" should help

Finally, about the crop...DON'T. Program the game engine to select where to display instead. This may even allow room for a few flexible tricks.

Well this has been answered and again, it's up to the author. I worked with high res stock photos so I could make it into 800x600 or even 1024x768 actually.

Ok, very quick tuto, I might go in-depth later tonight :

I'm using Photoshop, so... sorry but I'm not sure how to get it right using another program.
Get your pic, duplicate your main layer three times.

For the first copy, use Filter > Artistic > Cutout. For the first pics I used a 6, 0, 2 setting most of the time. Test it out and change to 5, 0, 2 or 8, 0, 2 as needed (depends how many dominant colors there are). It should give you a very simplified version with large patch of plain colors.

For the second copy, use Filter > Blur > Smart blur. 25, 40, high settings give a picture where all simple parts (patch of grass, sky) get all fuzzy blurry. Looks like cutout but it keeps color details.

Third copy, use Filter > Blur > Gaussian Blur. Here it depends on the size of your source and how much haze effect you want. I used "5.0" for all pics except the first one (which settings I lost ;_; ).

The order of layers should be (from top to bottom) : gaussian blur, smart blur, cutout.
Put the gblur layer in Darken mode, the smart blur layer in Lighten mode and play with each opacity level (usually 50% for both in above examples).
Smart blur layer will add light colors and some "gradients". Gaussian blur layer will bring back shadows and give the blurry dreamy effect.
If you want shadows/lights without blurs, replace these layers with a copy of the source layer without any effect applied, just Lighten/Darken mode and a lower opacity.

Alright, that's for the main cartoony effect, but there's still a color step :

Add an effect layer (the black/white cookie button in the layer panel) and choose "Levels". I use 20, 1.30, 235 settings but it's up to you. Goal : lighten up the picture yet keep some contrast.
Add another effect layer of type "Hue/Saturation". Here's the most free and case by case part : you'll have to spot dominant colors, or at least those you deem the most important, then select this range (for grass, select green, for sky select cyan...) and up the saturation (I tend to use 30). You can also play with the Hue setting to make grass greener, or turn green leaves into red ones for autumn settings .
And finally add a "Brightness/Contrast" effect layer. I tend to lower contrast so all the harsh colors don't kill my eyes, but then also lower brightness so it doesn't look too washed out.

Great work, monele!

Just expressing my encouragement. Those BGs will work very well with vectors.

I'm definitely still around, sorry for the long hiatus - I was studying for and taking exams these past few weeks. sorry about that. in any case, for that school gate picture, i've removed the chimney, but i'm new to photoshop so i don't really have confidence in altering that particular picture too much. just wondering, so you happen to have other bgs you need? i think i'll hopefully be able to finish them faster than that one, since i'm currently stuck. if you want, i can post it here.

monele: great work, I'm loving that third picture as well. looks awfully authentic. i'll be trying out your technique on some of my stock photos as well, hope you don't mind.

Mikey : I suspect Flash's vectorize function is very similar to the cutout filter in Photoshop actually . Thanks for the cheers, makes us keep rolling

bardsmanship : Sure, I wouldn't reveal the trick if I wanted to keep it to myself

The strange thing is that a lot of people like the third one whereas it's the one I thought worked the worst XD... I guess I'm not looking for the same "feeling" in the backgrounds .

Monele: Good start, but the contours only cover about 1/2 (or even only 1/3) of the "splines" I mentioned...it should trace out the details even more...say, leaves from the branches.

Leaves from the branches too, hm... Kinda as if it was a 3D pic with celshading enabled eh? Well I guess it could be done but the source picture to be very crispy and some pre-treatment will have to be applied to make all color zones very distinct. I'll probably give this a try a bit later

The pictures are very impressive, especially to me since I have never gotten that far. Is there a known set of techniques to do similar things on the GIMP program thing?


Sometimes I wonder what would happen if the entire forum united their most prized talents into an enormous collaborative ren'ai project...Heh...

Glasskitten wrote:Sometimes I wonder what would happen if the entire forum united their most prized talents into an enormous collaborative ren'ai project...Heh...

Ever heard the phrase "Too many cooks spoil the broth"? It would be an organisational nightmare