★ TouchArcade needs your help. Click here to support us on Patreon.

Artwork Help for Making Night Levels

04-24-2010, 12:24 AM
#1
Joined: Sep 2009
Location: Alabama
Posts: 76
Send a message via Skype™ to bossman696
Artwork Help for Making Night Levels

I wanted to pick the brains of the fellow graphic artists out there and see if they knew of any tutorials on making "Night Level" graphics for games. I have severals things in the works and would like to say.... convert an existing daytime photo or game graphic to nighttime complete with lighting effects etc.

I'm pretty confident I have the lighting and lens glare effect down, but would appreciate any help on that as well. But the main thing I was wondering if maybe someone knew of a technique I could use to maybe make a overlay layer to "darken" the current elements.

Any help would be greatly appreciated!

Things tend to go better when you help them along…..
Developer of Flight Deck
04-24-2010, 02:02 AM
#2
Joined: Aug 2009
Location: San Francisco
Posts: 362
Send a message via Skype™ to micah
Lighting effect is a good idea. It completely depends on your graphics style for the game, but a lot of times night-time graphics are only slightly darker, but very much more blue and purple and grey. This way your sprites can still be fairly bright but they look like they're in low-light.

--=] Insurgent Games website | twitter [=-
Cryptose (TA) - Skeleton Key (TA) - Skeleton Key HD (TA link) - Aeropack (TA)

04-24-2010, 11:30 AM
#3
As micah said, colors tend to shift to blue in darkness. However, changing a daylight photo or image to night is not an easy task. Light sources are completely different, shadows are cast differently.

A skilled artist would simply stylize the entire set of graphics, so that the effects would appear to be on purpose, rather than a gimped up half-assed attempt.

If you post an image, it would be easier to tell you what needs to be done.

A ragdoll physics platformer:Flickitty
The artist: randall schleufer
Twitter: @FlickittyiPhone
04-24-2010, 01:29 PM
#4
Joined: Sep 2009
Location: Alabama
Posts: 76
Send a message via Skype™ to bossman696
Desert Level Sample Pics..

Here is a quick sample of what I'm trying to do. I tried this overlay on the original graphics a couple of weeks ago and wasn't quite sure this is the look I was going for. I read a few tutorials and looked at a few night pics and noticed the colors were muted and in a blueish purple tint.

I have included a quick before and after shot.


Day Time Original..


Night Time with Overlay...

The backgrounds are the main things I'm working on. I wanted to get the base work correct before I started adding things like runway lights, building lighting etc....

Any point in the right direction would be greatly appreciated!

Things tend to go better when you help them along…..
Developer of Flight Deck
04-24-2010, 02:23 PM
#5
It looks like you have everything under control. This isn't a photograph and you are working with a topographical viewpoint, so this makes the task much easier.

I think your color is suitable for night- I had no trouble seeing it as a night view. It doesn't look out of place and it doesn't look wrong (this is what I meant by stylized).

In some cases you can turn down the contrast and drop the saturation, then shift to blue using an overlay. But I don't think that is necessary for your art. The details look nice in the night view.

A ragdoll physics platformer:Flickitty
The artist: randall schleufer
Twitter: @FlickittyiPhone

Last edited by Flickitty; 04-24-2010 at 02:27 PM.
04-25-2010, 05:47 AM
#6
Joined: Sep 2009
Location: UK / Toronto
Posts: 602
I like the initial dark effect you've done in the image above, but it's likely to be difficult to see on the iPhone screen at certain angles.

I've studied lighting for film and cinematographers can't actually shoot it in darkness or else nothing would show up on the camera. As mentioned by micah and Flickitty, they'll use blue light. If you find the correct bluish hue you might be surprised how bright you can make the scene while keeping it looking dark.

Taken from Halo Wars, I think this is a good example of night vs day:




Another thing you can do is use a few highly accentuated, high contrast light sources:



In your example image, I notice the runway lights. What you should do is make a lit area around each of those dots of light and casting strong shadows on the surrounding rocks.

Last edited by EssentialParadox; 04-25-2010 at 05:52 AM.
04-25-2010, 10:41 AM
#7
Joined: Sep 2009
Location: Alabama
Posts: 76
Send a message via Skype™ to bossman696
Thanks for all the great suggestions.... I think I have a good direction to go in now and will try and put together a few more samples soon.

Things tend to go better when you help them along…..
Developer of Flight Deck
04-25-2010, 05:10 PM
#8
Joined: Aug 2009
Location: Ukraine, Kiev
Posts: 560
Send a message via ICQ to Ler Send a message via AIM to Ler Send a message via Skype™ to Ler
try to make glow light something like this (it is quick variant)



may be try to make lights blinking
04-25-2010, 06:23 PM
#9
Joined: Sep 2009
Location: UK / Toronto
Posts: 602
Blinking lights would be a cool effect. Especially if you can make them blink in a row, like a real runway in a flight sim. You even have the potential to go a bit further and add blinking lights to the planes too!

But when I said have the lights glow, I kinda meant like this:

04-25-2010, 11:41 PM
#10
My suggestion is to divide your background sprite into layers--try separating the mountain range from the ground so you can adjust the brightness and contrast for each sprite separately. At night, try putting some more "white" or "highlight" on the mountain tips and more shadows below each mountain. Also, a transparent top-view moving fog (or smoke) across the screen would be great for a night scene.