Advertisement

[Tips/Help] Making terrain transitions in 2D Top-Down Tileset

Started by March 01, 2016 10:50 PM
3 comments, last by Scouting Ninja 8 years, 9 months ago

Hello gamedev community,

I Made it to the point i need to create the resources for my game, it's a old Zelda like RPG.

Im having troubles (because im a disaster in art, and photoshop) making the transitions from one terrain type to another.

Here is a picture of what i got:
wDwPLif.png

Im using this image as a reference(beside the art style, i want to make something similar to this transition):

wgLjQpA.jpg

I cant get it right, all the results in this transition are simply bad.

My question is:

Is there any tool in photoshop that can help me getting these transition right?. Im currently trying to achieve something with the pencil, but :/

Ty!

It's very simple. Have the ground texture on the lower layer and the grass texture on a layer above it. Use a unsymmetrical brush to erase parts of the top layer you don't want.

Now for the Complex way: Double click on a layer to get the Blending options, use Blend if to get a similar effect.

You will also want to lookup Blending and working with layers.

Advertisement

I cant get it right, all the results in this transition are simply bad.

Can you post any of them? Otherwise people won't have something to critique.

If you told me to paint a transition between grass and sand surfaces, I'd step outside and see how it happens in nature, take some reference pictures etc.
It's what you're trying to do, after all. To match the look of something that exists. The rest is just pixel-pushing until you get it.

EDIT: On what you did post, the dirt and grass tiles are too simple, they need more character. The only thing that says "this is a grass tile" is the use of green; they're lacking texture.
I want to demonstrate that you can get something that looks more like grass merely by placing pixels right, rather than the shades of green that you choose.
So if I pick 4 different shades only from your green tile, it's enough to do something like this:

pixel_Art_Grass1.png


Then you can use a Gradient Map adjustment with a custom gradient so it reads better:

pixel_Art_Grass2.png


PS: that is just an example, it doesn't tile that well actually. In order to test if a tile tiles well with Photoshop you can make a pattern out of the tile by following these steps.

Hi I was texturing when I realized I myself don't blend the way I told you. So I quickly made one to see how I would make a tile set.

So first I made the Dirt and Grass textures, I just used pieces of photos, making them tillable and scaled them small.

If you want better looking textures follow what Kryzon showed.

WbxX0fa.png

Next I made a black and white mask, this will decide how things blend.

In photoshop I had the grass layer above the Dirt. With the Grass layer selected I used the layer menu-> Layer Mask -> From Transparency.

This adds a white layer mask.

In the Channel tab(Lower right corner) Hide the RGB channels by clicking the eye. Paste the Mask into the Transparency channel, un-hide the RGB.

elLPN0s.png

This should result in the final image, by changing the mask you can easily fix the blending.

Hope this helps.

This topic is closed to new replies.

Advertisement