On Drawing Backgrounds

[Misj']

Instead of painting with a translucent brush, draw each background building on a separate layer with 100% opacity brush, then you can change each layer's opacity individually.

I hate the transparency problems with shading. What Ryan suggested earlier works if you only have one shade (or maybe 1 shade and 1 highlight) per thing, but yours is better if ben's want to fine-tune the shading, or want inbetween stuff, etc.

I wanted to write something down on this matter, and I ended up creating a single (big) image. I happen to like working on with layers...so hence the abundant use of layers in the approach outlined. The examples were done in Photoshop CS2. But most of it should be possible in Elements as well. Oh, and I ruined Ben's image as an example (sorry, the windows turned dark when I separated the layers).

-- click image to enlarge --

-- click image to enlarge --

Approach 1 shows Ryan's approach, which works well in certain cases. Approach 2 is an alternative approach (you can also do similar things with effect-layers, but they are not available in Elements (I think), so I presented an approach more generally applicable) that gives the user a bit more control. Also, it should work - with some tweaks - for all 'painted' images (independent of the amount of highlights and shadows).

Although there are some things (like linking layers together) that I think is not possible in Elements, but I couldn't test it here because I've only got PScs2 installed on this computer.

[Snarky]

You guys have some really complicated workarounds for the transparency! Why not just paint it with a 100% brush on a separate layer and then turn down the opacity of the whole layer? In Photoshop, you can even use several layers, put them all in a folder and turn down the opacity of the folder, which is easier than Misj's method for avoiding bleed-through.

[Jakerpot]

I was talking about the highlights, i'm confuised because i don't know if i should use totally opaque collors that fit well in the highlights, or you use a darker collor and change the opacity to look like it is brighter and do the same in other layers that are upon it. It doesn't works for me in either ways! If you could show us a step-by-step guide of doing the highlights, i would pleased, because this is my biggest problem 

PS: I don't know, i have a feeling that i killed English language right now...

[ThreeOhFour]

Markbilly: Yeah, that works. Glad to hear it's interesting

Kaioshin: Nice to hear that, thanks.

Misj': Cool, interesting ideas. I've used some of these other techniques before (and have been playing around with them a bit lately as well) but there's some new ideas in there as well, so thanks.

I'm not really that "anti layers", but I know some people who use like 30-80 layers to make the backgrounds for their games... which I consider totally insane

Snarky: Yeah, that does work, and it is something I use a fair bit. Folders are something I never use (I actually think that Elements might not support them), but if I do the buildings this way I simply adjust the opacity of each building in the background individually, then flatten them all into a single layer. There's no "right" way of doing it, I don't think, but depending on how much detail you're planning to add (one can often get away with using very little detail on elements like these) you can often get away with doing this quite basically.

Jakerpot: The opacity to use depends totally on the situation - there's no magical "right" opacity to use, you need to adjust it depending on what you're painting. If you're at step 3 and looking to move to step 4, try this: Select the sky colour as your brush colour, set your brush opacity to somewhere between 25% and 50% and draw with that brush on top of the silhouette, where you want it highlighted. I colour pick all the time while shading, so I often start out with the highlight colour quite bright, and then colour pick the area I've painted to get a darkened tone.

If that confuses you, post a picture for us to look at

If anyone else wants to edit the image, I've included the final .psd here - and I even refrained from flattening the layers while drawing it, just to make your lives easier (usually I'd flatten this down to just a few layers - but I thought it might be handy to have the "everything on a seperate layer" version)

And just to confuse everyone and to show that there are as many exceptions as there are rules, you can get away with doing your background scenery without any transparency at all:



Hooray for exceptions to the rule 

[Theme]

Very smooth lighting. Very nice.
When I paint with transparency the gradients are very patchy
So I end up taking a lot of time to get them to look good and smooth
But some times its good to have some not too smoothed lights too.
o/

[Jakerpot]

Yeah, i know that is no 'magical opacity' but i mean, how you selected the opacity in this bg 

Also, don't you have a "everything on a seperate layer" version?  Oh my gosh, i'm so boring 

[Revan]

Thanks for the tutorial.

I have loved your background style for a while now.

Here is my attempt at a mountainous background.



I think there might be a flux of games with your art style soon lol

[ThreeOhFour]

Excratus: If you're doing highlighting or shading, often you can paint with a softer edged brush to get much smoother results. If you do this on a new layer, you can then erase around the edges (as softer edged brushes sometimes are a bit harder to draw accurately with)

Jakerpot: I selected it by guessing

As for a version of the background without everything on a different layer.. why? I drew it like this on purpose so that if people wanted to edit it they could. If you want elements merged, can't you do it yourself?

Revan: Cool, glad to hear it helped.

[Jakerpot]

I wanted the diferent shades of light in diferent layers to study them 

But it's ok, now i think i'm getting it, soon i will post a background done for shading test (almost exactly like your example).

[ThreeOhFour]

That would require painting each brushstroke on a different layer, which seems a bit excessive by anyone's standards.

Just keep experimenting, you'll find that it is not as hard as it looks.

[Layabout]

I generally approach digital painting the same way you would approach regular painting. Sometimes. Other times I have used 80+ layers. It really depends on what I am making. 4 Is a good amount for your backgrounds. Background, mid, fore and any overlapping details. Unless you are one of those people who draw in greyscale (something I have never understood) Then you will need far more layers to achieve the same effect.

[Dualnames]

Great tutorial Ben, it really shows an unimpressive way to draw your impressive backgrounds, also got me into thinking seriously of buying a graphics tablet! So cheers!

[GarageGothic]

Excellent tutorial, yes. I love your background style and am so impressed how you seem to get the palette right from the very beginning -  once I finish drawing a background I usually end up playing with the hue and saturation settings until it looks nothing like the original colors.

But my real reason for posting, was to recommend anyone who digs Ben's art style to play through IWWHIIWWHITOMIROTPG: The Game and download the bonus content (or did you have to cheat to get the link, I forget?). There are .psd files of Ben's backgrounds where you can see all the layers n stuff, really interesting to study.

[ThreeOhFour]

Actually I often up the contrast a little once I finish working on a background as I paint at low contrast all the time.

You do have to cheat to get the bonus content for the IWWHI stuff. Of all of those, the Caverns of Meat .psd file is probably the best to look at; because I was doing these in a rush I didn't spend time flattening layers and just kept sticking more and more layers on top. If you turn on the layers one by one in the caverns of meat bg in their numerical order it's almost like watching a step by step of how I painted the background. The green head one is the least instructive because photoshop froze up while I was working on it at one point, so I print screened the image, pasted it as a single layer and thankfully managed to save myself a lot of extra painting time.

Glad you folks enjoyed the tut

[Jakerpot]

So... How can i cheat??? 

...



I'm serious, how can i see the psd files?

[GarageGothic]

Same way as in SoMI:

Spoiler

Press CTRL+W. Don't worry about copying down the link on paper, it will be saved as bonusdisc.txt in the game's folder.

[close]

[Dualnames]

It was done in like 5 minutes. So mind that..I think it's just remniscent of the style that's all..



It's terribly rough, but I think I'm in the right direction. I'll start when I'm having a cool idea, but so far it has brought sort of fast results. This was done in like 2 minutes. I was just having fun.

EDIT: New attempt


I'm still forgetting to paint some parts, and I stupidily leave them as they are, but I really have my fun with lighting the place (though yellow lights didn't work as I wanted..

[Jakerpot]

i paint exactly like dualnames (If i try ben's style). I will post something when i go back home 

[Nemiant]

Hello! Nice tutorial!
I love Ben style too, so I tried something last night. This is what i got:



But the edges are really bad (espacially the tree-lamp on the left). I resized (with "Nearest neighbour") from the original, wich is that:
http://img28.imageshack.us/img28/1339/nembig.png

[tube]

The Sinc (Lanczos3) interpolation option in Gimp tends to preserve sharp edges better than the other algorithms. Although, depending on the type of the original, you might often prefer the smoother result of Cubic (or bicubic) interpolation.

This is mostly relevant to the earlier discussion on resizing and edge sharpness, but let's pretend I'm just "fashionably late", ok?