Jump to content
  • Advertisement
Sign in to follow this  
Jaime Gonzalez Bonorino

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

This topic is 1020 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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!
 

Share this post


Link to post
Share on other sites
Advertisement

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Edited by Scouting Ninja

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!