Textures For 3D Games - Part 2
This tutorial is a continuation from the previous blog, "Baking Textures for Video Games." Now that you're baking away textures yourself, we're going to enlighten you a little more on texturing by showing how to quickly convert daytime models to nighttime.

You will need your baked textures to follow along in this tutorial. We are using the baked textures because baking flattens and simplifies the many texture files into one workable image. It makes it easy to draw on, which is essentially the technique we're using to night-ify our model. We will adjust the texture images by changing opacity, blurring, using blending modes, and the paintbrush tool. You should have an intermediate knowledge of Photoshop to follow along in this tutorial.

1. Once the textures are baked, take the image and bring into Photoshop. I'm using the baked texture for London's famous clocktower, Big Ben, from our Esquire House flight simulation game.

Big Ben
Baked texture image of Big Ben.

2. In Layers, add a layer with a black fill on top. Change opacity of black layer to 75%. This overall darkens the whole model and already gives it a nighttime feel. Adjust the opacity depending on how dark you want your scene to look, but we found settings anywhere between 60% to 75% seem to work best.

3. Now we need to add lights by bringing back some of the brightness. Use the paint brush tool, marquee, pen or a combination of all to erase away from the black layer so that you begin to see the texture underneath. Choose areas of your model that should be lit up. Blur the edges of the blank areas using a combination of the blur tool and gaussian blur. Use photo references to guide you on where light bulbs are casting light onto your model, and how intense.

By the way, this whole technique in this tutorial is a trial and error process, so you'll have to save your image from Photoshop and view your 3D model with the new nighttime texture. Compare it to your photo references, go back into Photoshop and continue adjusting the texture.

Photoshop editing
Photoshop shading result

4. Add a new transparent layer, and paint in the "blank" areas where there isn't black fill with a yellow color. This layer gives that warm glow that comes natural from iridescent light bulbs. The effect gave our Big Ben that realistic creepy-old-building-at-night look.

5. Change the blending mode of that yellow layer to Vivid Light. Others might work also depending on your color: overlay, hard light, etc.

Photoshop blending modes

6. For areas that use a different color light bulb, create a new layer and paint over the area that should shine a different light. Going by our reference photo of Big Ben, we needed to light up the spire base with green light. So we painted that section of the texture in fluorescent green on a new layer. Easy enough?

Real big ben
Photos of the real Big Ben used as references.

Green area
Painting over the green lit area on texture.

7. Finally save the image and bring into your model viewer or video game. Admire your work.

Final texture
This is our final texture image for Big Ben at night.

Final scene
And here is the model, real-time rendered in our flight simulation game.

We used the same technique in texturing our Paris model for night.

Paris model in day and night.

Paris 1Paris 2
Paris 3Paris 4

Extra tip: To make office buildings lit up at night, such as the ones here, make rectangle marquees over windows of a building in random patterns and erase from the black texture.

Night building texture 1
Night building texture 2

Download our Photoshop files from this tutorial here. View the layers as guides but since these textures were baked to work with our game, you probably won't be able to use them. More the reason to make your own. Get cookin'!
Leave Us A Comment

Spread The Love