Introduction
Hello everybody! 
Today’s tutorial is about making a heightmap & colourmap easily using a few resources I found useful.
Hopefully they help you too!
Content
Step 1: Gathering the handy things!
Before we dive into this, I thought it’d be wise to recommend a few softwares / websites I’ve used.
1: Azgaar’s Fantasy Map Generator
Azgaar’s Fantasy Map generator is great for designing & generating worldmaps, region names and much more, but it also allows you to transform your worldmap into both a height and colourmap!
Once you’re on the website, you’ll see a worldmap pre-generated. If it’s a map you think you’ll start using, then perfect! Otherwise, make sure to check their tutorial.
After you’ve found your perfect map, let’s proceed!More info: Azgaar's Fantasy Map Generator
2: Blender 3D
In this scenario, we’ll use Blender to smooth & preview our heightmap live!
I’ll guide you through using this tutorial so don’t worry about having to know stuff!
Otherwise, make sure to check this handy youtube channel.
After you’ve set that up, let’s proceed!More info: Release Notes — blender.org
3: Adobe Photoshop
The reason I’d highly recommend getting at least Photoshop is because it’s a great software and allows maximum editing strength! Though if you’d prefer not spending a dime, try to translate the stuff in this tutorial into your software because I’m only familiar with Photoshop at the moment.
Feel free to post a reply with your translations!More info: https://www.adobe.com/creativecloud/plans.html?promoid=P3KMQYMW&mv=other
3: Alternative
4: ShareX
While ShareX is probably known for its powerful screenshotting, it also contains tools such as a colour picker which could come in handy while making the colourmap.
More info: https://getsharex.com/
Other information
There’s one thing that is good to know before you start!
- Heightmaps are usually seen as a grayscale image whereas the uttermost white is the peak and the uttermost black is the very bottom.
Now that you should have all the softwares and knowledge ready to use, let’s hop into the details!
Step 2: Creating the world-, height- and colourmap!
Open this to proceed!
Step 2.1: Worldmap (Using Azgaar’s Fantasy Map Generator)
Let’s start creating a map!
This is the map I’ll use for this tutorial.
Step 2.1: Heightmap (Using Azgaar’s Fantasy Map Generator)
Now let’s disable all the effects except for the Heightmap.
This looks great, but it’s not exactly grey yet! Let’s set the Heightmap colour-scheme to ‘Monochrome’.
Perfect! Now all that’s left is making it blend better.
Step 2.2: Refining the Heightmap (Using Azgaar’s Fantasy Map Generator)
So in this generator, you can apply a filter of choice.
Note: due to a bug or something, exporting this worldmap will drastically decrease the filter we just applied. We will fix this later, don’t worry!Since we finished our heightmap, let’s export it as a .png AND .map as backup!
This can be done by pressingCTRL + Pin your browser for the .png andCTRL+Mfor the .map.
Note: For .png and .svg it’ll solely capture what you have on-screen. As of now this can’t be turned off. So make sure that your map fits your screen somehow!
Step 2.3: Colourmap (Using Azgaar’s Fantasy Map Generator)
For optimal generation in Studio, it’s best to have a colourmap too! So let’s make one. Start off by disabling the Heightmap and enabling the Biomes.
Step 2.4: Refining the Colourmap (Using Azgaar’s Fantasy Map Generator & ShareX)
Now all that’s left is changing the biomes to the right colours provided by Roblox as shown below!
This can be done by following the steps below:
Once you’re in the editor, hover over any of the existing biomes. It’ll highlight which one you’re currently hovering on on the worldmap with a red outline.
Now click on the colour-box at the very left.
After you have finished your colourmap, export it as a .png AND .map as backup!
This can be done by pressingCTRL + Pin your browser for the .png andCTRL+Mfor the .map.
Note: For .png and .svg it’ll solely capture what you have on-screen. As of now this can’t be turned off. So make sure that your map fits your screen somehow!
Step 3: Editing the height- and colormap!
Open this to proceed!
Step 3.1: Start to Editing (Using Photoshop)
Now let’s open up both the height- and colourmap in Photoshop.
I made sure I layered them so that I can easily check back and forth.
So what we need to do now is: make sure the texture is emphasized, decrease the terracing on the heightmap and remove the water to prevent issues.
Step 3.2: Decrease Terracing & Adding Detail (Using Photoshop)
To decrease terracing, grab the Brush tool (press B or find the right icon). Then pick the colours (press Alt while using the Brush) between the most light and most dark colour like so:
Put the Opacity at a value around 30% so that you can blend the borders to your liking! Then keep on brushing until you’re satisfied.
Note: The image above was edited quickly with the mouse for efficiency: it’s best to use a drawing tablet for both the result and the wrist!
Step 3.3: Removing Water (Using Photoshop)
Removing the water surrounding the islands can be done using the ‘Magic Wand’ tool. Press
Wor click on the magic wand icon. Then change the ‘Tolerance’ to about 12 and click on every layer of water like so:
Make a small check to make sure you only selected the water. Then press ‘Backspace’ to delete the selection.
Once that’s all gone, you’d want to create a new solid coloured layer and put this underneath the heightmap. This will be the sea-depth. Remember: the darker the colour, the lower the result!
Voila! Now we have a usable heightmap! All that’s left is a bit more detail.
Step 3.4: Adding a Texture (Using Photoshop)
To give it more details, it’s nice to have a texture on it just so you won’t have to use the Terrain tools in-game to make them. It’s an optional step though, because it depends on what your preference is.
Find a texture or make one yourself. Make it a pattern and then create a new layer. Put it on top of your heightmap.
Then get the Bucket tool and fill the entire layer with a Pattern like so:
Once you filled the layer, it’ll cover everything. That’s now what we want! So let’s make a quick mask.
This can be done using either of the two options: make the layer a mask, or add a layer mask. If done right they both give the same result, the only difference is how it’s done. I’ll go with option 2 for the ease.
Ta-daah! Now it should look like this:
Let’s make this blend using the blend option ‘Multiply’. This should show a result like so:
If you want to decrease the texture’s effect, make sure to change the Opacity of the layer. I have put it on 75% now (it was 100%):
Step 4: Polishing the heightmap!
Open this to proceed!
Step 4.1: Setting it all up (Using Blender)
When you’ve opened Blender, create a ‘Grid’ (Shift + A > ‘Mesh’ > Grid) and give it a subdivision of 256 - 512 (depending on your device’s power). The higher the subdivision, the more details!
It should look like this, right? Now, you may notice: yours is scaled!
That is true! Make sure to scale your grid to whatever your heightmap image is! For example: if it’s 1080 x 1920 then make sure to keep the same ratio! Mine was 4020 x 2017 though I divided it by 2 and then once again by 1000 to make sure it won’t be ginormous.
Step 4.2: Applying the Heightmap (Using Blender)
Now that we have our Grid prepared, let’s go ahead and add two modifiers to it:
- The Displacement Modifier
- The Corrective Smooth Modifier
Both modifiers are found here:
Once you’ve added those, make sure to set the properties as follows:
Now we should select your texture!
Go to the Displacement modifier and click on the ‘New’ button.
Once you’ve done that, click on the sliders icon to the right.
Now click on the ‘Folder’ icon in the new window underImage > Settings.
Find your file and open it up!
Step 4.3: Editing the Heightmap (Using Blender)
There, there!
Now things should look more like it.
I’m using a different heightmap since I had this one prepared and I’m short on time! But it should not matter.
All that’s left is adding a material & baking it!
Step 4.4: Adding the ‘height’ material (Using Blender)
Alright! Now we need to create a material with nodes.
Don’t worry, take my set-up:
The Sigmoid unfolded:
For more details and a sample file, check this out!
Step 4.5: Baking the ‘height’ material (Using Blender)
Alright! Let’s do this! Make sure to Switch to the Cycles renderer first. Then set up the settings like so:
Followed by hitting the ‘Bake’ button!
It’ll take some time and boom! You’ll have your texture. Just make sure to save it in the end!
Troubleshooting
Open this to proceed!
1: After generation, the wrong materials were assigned!
This is because the image used on this post used the wrong colours!
So colour-picking is the issue.
Use this colour-corrected image instead:
Or this table:
RGB Value Material RGB Value Material [115,123,107] Asphalt [206,173,148] Limestone [30,30,37] Basalt [58,46,36] Mud [138,86,62] Brick [148,148,140] Pavement [132,123,90] Cobblestone [102,108,111] Rock [127,102,63] Concrete [198,189,181] Salt [232,156,74] CrackedLava [143,126,95] Sand [101,176,234] Glacier [137,90,71] Sandstone [106,127,63] Grass [63,127,107] Slate [102,92,59] Ground [195,199,218] Snow [129,194,224] Ice [139,109,79] WoodPlanks [115,132,74] LeafyGrass [12,84,92] Water
2: After generation, there are areas which have various incorrect materials assigned!
I believe this is because of the colour-map having anti-aliasing. It must be drawn without anti-aliasing!
If you still encounter any similar issues, please reply to this thread especially if you have found a solution!
Conclusion
The Result
The result is based on the new heightmap I used in Step 4!
I did make a few mistakes since there’s a few artifacts along the edge of each biome.
That’s about it! Hopefully this tutorial was useful.
If you have any questions or suggestions feel free to let me know! 
Contact
Discord:
TheEldritchDreamerRBX#7515
Twitter: @EldritchDreamRB
DevForums: @TheEldritchDreamer or in the replies below!
