Designing Maps

How to make beautiful and compelling maps for your games

Technique: Water

Wherein I share some simple techniques for different styles of water.

At some point or another you’re going to need to make some water in a battlemap. Water can be tricky to pull off because it can come in several forms.

Water - Seamless
Water – Seamless

Is the water running or mostly still? Is it in a fountain or pool, or is it free-standing? Is it murky or can you see what’s beneath the surface? Are there things floating in it? Each of these things can add complexity to how you create it.

We’ll discuss a couple of ways to do this but the magic nearly always lies in the blending mode of the Water layer.

I’m going to use the same water pattern (Water – Seamless).

Sewer Water

Sewer
Sewer

This style is super-simple and is made with two layers: a Base layer and the Water layer. These layers look like this:

  • Water: 0% fill opacity, Normal blend mode, and a pattern overlay of “Water – Seamless” set to Multiply at 100% opacity.
  • Base: A tan-brown color (#a67c52) and that’s it.

Changing the color of the Base layer will change the color of the water itself. The color switches aren’t intuitive, however, given the Multiply mode for the Water pattern.

Beach and Shorelines

Beach Water
Beach Water

This one is a bit more complex, if only because the water is a shape and the application of the sea foam. This one is three layers: a Foam layer, a Water layer, and a Base layer.

  • Foam: Normal blend mode with a pattern of “Sea Foam – Seamless” set at Normal. You paint the foam in with a brush, using increasing opacity, like how I explained in the moss tutorial.
  • Water: 0% fill opacity, Normal blend mode, and a pattern overlay of “Water – Seamless” set to Multiply at 100% opacity.
  • Base: any color with the “Sand – Seamless” pattern applied to it in Normal mode.
Sand - Seamless
Sand – Seamless
Sea Foam - Seamless
Sea Foam – Seamless

A Pool of Water

Pool
Pool

This is the most complicated example, but only because of the strokes. There are three layers, two circle shapes (Base and Water) and a pixel layer that is the kraken image (Kraken).

  • Water: 0% fill opacity, Normal blend mode, and a pattern overlay of “Water – Seamless” set to Multiply at 100% opacity.
  • Kraken: Set in Linear Burn mode with a color overlay of #222222 set in Color mode at 100% and a pattern overlay of “Tiles – Seamless” set in Color Burn mode (“link with layer” is unchecked).
  • Base: a blue #0072bc circle, Normal blend mode with 100% opacity values, an inner glow (color #222222, 60% opacity, Multiply Mode, choke 0, size 250), a color overlay of #3cb878 set to Color Burn mode, a pattern overlay of “Tiles – Seamless” set to Normal mode, and an outer glow to provide depth (color #222222 at 75% opacity, Multiply, and 250 size). It also has the following strokes:
    • 1 px outside, Multiply blend mode at 70%, overprint, color: #222222
    • 9 px outside, Normal blend mode at 100%, overprint, pattern: Brass – Seamless
    • 10 px outside, Multiply blend mode at 70%, overprint, color: #222222
    • 75 px outside, Normal blend mode at 100%, overprint, pattern: Light Marble – Seamless
    • 76 px outside, Multiply blend mode at 70%, overprint, color: #222222
    • 81 px outside, Normal blend mode at 100%, overprint, pattern: Brass – Seamless
    • 82 px outside, Multiply blend mode at 70%, overprint, color: #222222
Tiles - Seamless
Tiles – Seamless
Brass - Seamless
Brass – Seamless
Light Marble - Seamless
Light Marble – Seamless

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.