Background up for grabs

Ideas and games that are not yet publicly in production. This forum also contains the pre-2012 archives of the Works in Progress forum.
Message
Author
bardsmanship
Regular
Posts: 41
Joined: Sat Jun 04, 2005 7:47 pm
Location: Singapore
Contact:

#31 Post by bardsmanship »

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.

Yang Sei Fu
Regular
Posts: 114
Joined: Wed Jul 16, 2003 12:50 am
Location: Toronto, Canada
Contact:

#32 Post by Yang Sei Fu »

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?
=/| ClearWind Design Studios |\=
Image

monele
Lemma-Class Veteran
Posts: 4101
Joined: Sat Oct 08, 2005 7:57 am
Location: France
Contact:

#33 Post by monele »

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)

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

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

Image

Image
First try at interior pics.

Image
Used a slightly different technic here.

ShiraiJunichi
Miko-Class Veteran
Posts: 651
Joined: Sat May 21, 2005 12:28 pm
Location: University of Utah
Contact:

#34 Post by ShiraiJunichi »

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

Yang Sei Fu
Regular
Posts: 114
Joined: Wed Jul 16, 2003 12:50 am
Location: Toronto, Canada
Contact:

#35 Post by Yang Sei Fu »

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.
=/| ClearWind Design Studios |\=
Image

User avatar
papillon
Arbiter of the Internets
Posts: 4107
Joined: Tue Aug 26, 2003 4:37 am
Completed: lots; see website!
Projects: something mysterious involving yuri, usually
Organization: Hanako Games
Tumblr: hanakogames
Contact:

#36 Post by papillon »

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

User avatar
PyTom
Ren'Py Creator
Posts: 16088
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

#37 Post by PyTom »

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.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
Software > Drama • https://www.patreon.com/renpytom

monele
Lemma-Class Veteran
Posts: 4101
Joined: Sat Oct 08, 2005 7:57 am
Location: France
Contact:

#38 Post by monele »

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 ?

Image

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.

User avatar
mikey
Lemma-Class Veteran
Posts: 3249
Joined: Sat Jan 10, 2004 6:03 am
itch: atpprojects
Contact:

#39 Post by mikey »

Great work, monele!

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

bardsmanship
Regular
Posts: 41
Joined: Sat Jun 04, 2005 7:47 pm
Location: Singapore
Contact:

#40 Post by bardsmanship »

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

monele
Lemma-Class Veteran
Posts: 4101
Joined: Sat Oct 08, 2005 7:57 am
Location: France
Contact:

#41 Post by monele »

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

Yang Sei Fu
Regular
Posts: 114
Joined: Wed Jul 16, 2003 12:50 am
Location: Toronto, Canada
Contact:

#42 Post by Yang Sei Fu »

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.
=/| ClearWind Design Studios |\=
Image

monele
Lemma-Class Veteran
Posts: 4101
Joined: Sat Oct 08, 2005 7:57 am
Location: France
Contact:

#43 Post by monele »

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

User avatar
Glasskitten
Regular
Posts: 138
Joined: Fri Jul 22, 2005 6:19 pm
Completed: I confess to nothing! \(>o<)/
Location: Inside a parcel of air
Contact:

#44 Post by Glasskitten »

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...
Grand list of things not officially canceled:
Salt -- the heartwarming story of brain-eating space worms
Tangent -- an epic poem and/or novel about a borderline-autistic Martian imp and her relationship with God
Kittens of the Darned -- a grimdark soap opera about sexy catgirls (Indefinitely postponed until I learn to draw and color realistically)
The Other Mary -- the most perfect fic about the most perfect Mary Sue EVER
Rockheart -- a short story about a monster who kills everyone
Corrupted -- a completely different short story about a monster who kills everyone (late Worst Visual Novel Ever)
Checkpoint 36a -- the transcription of a short multi-ending dream about time travel and undead schoolgirls
In Which the Princess is Kidnapped -- an entry in the "ordinary girl ends up in an alien universe and tries to save it" genre
Pictogram Scramble: Magical Friendship Bunny Ivy -- a Flash game about a magical girl making friends (Indefinitely postponed until I learn how friendship works)

Grey
Veteran
Posts: 320
Joined: Thu Jan 01, 2004 8:08 am
Contact:

#45 Post by Grey »

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

Post Reply

Who is online

Users browsing this forum: No registered users