Images are disabled for this forum you can click on the links at the end of each step or look http://www.thenexusforums.com/index.php?/topic/224954-height-map-creation-and-editing-tutorial/ for the original post with images.

Hello, I am Vorlondark / Phaedin Please excuse any possible untidiness this is my first post of this kind on any forum.

This tutorial will show you step-by-step how to capture, edit, size/scale, import/export, and finally use a finalized height map for Fallout 3.

This tutorial does not cover 'worldmaps' (the map that you see when you look at your PIPBOY in Fallout 3) I will post a tutorial explaining that soon.

This tutorial is also for beginners who may not understand how photo editing software or any of the other (3) programs I use work.

Programs you will need (all are free or have a trial. I personally didn't pay a dime for any of the following programs)
1. http://www.gimp.org/
2. http://www.geocontrol2.com/e_index.htm
3. http://www.projectmanager.f2s.com/morrowind/TESAnnwyn.html
4. The paint program that comes built-in windows.
5. The Fallout 3 G.E.C.K. (Of course)

Table of Contents:

Part 1: Covers how to get an image from your browser to its own image file on your computer. If you already know how to do this you can skip to part 2. (However, make sure your image is square and has no shadows)
Part 2: Covers using GIMP to alter the image so that Geo-control will recognize it properly.
Part 3. Covers using Geo-control to simply create a gray scale height map image for use in TESAnnwyn.
Part 4. Covers using TESAnnwyn to export the gray scale image as a .esm file that the G.E.C.K. can use.
Part 5. Covers seeing the finished result inside Fallout 3 G.E.C.K.

Height Map Tutorial Part 1

1. First we need to get an image from a source such as google maps. I suggest using a map from google maps terrain view as it does not have shadows from mountains on it like the below image. Almost any map image will work as long as it does NOT have shadows. I will show you and example of why it cannot have shadows below (See Part 2.)

2. To get an image like the one above do the following. Find the image you like and have it displaying in your web browser. Now hit the [PrtScn] button.

3. Open up Paint and hit [Ctrl+V] you will now see your entire screen pasted into paint. http://img194.imageshack.us/i/tutimage1.png/

4. Now we need to get the area from the image that we want as a height map. To do so we will pay close attention to the bottom of the screen while dragging out a selection box as square as possible. If you are having troubles with this look at the very bottom of the screen (I've circled in red) it displays the X,Y size of the selection your dragging out when the numbers are even the image is square http://img33.imageshack.us/i/tutimage2.png/

5. Now that the selection is made hit [Ctrl-C] to copy that selection then go to File -> New. Once done hit [Ctrl-V] to paste the selection. http://img833.imageshack.us/i/tutimage3.png/

6. All thats left to with part 1 is to save the image. So go to File-> Save as... give the file a name and keep the format as .png or .bmp (depending on the version of windows you are using)

Height Map Tutorial Part 2: GIMP

Now that we have a square image of an area we would like to use; we will use gimp to alter the image to something that Geo-control will make good use of. Before we do so I will explain some things about Geo-control and a few examples of what happens when an unaltered image is used.

Geo-control is a program that detects the gradients (shift in color) in an image and displays it as high (white) and low (black) points. The reason we need to use GIMP to alter the image is because Geo-control only see's the color in black and white. Thus if a shadow or shaded colors are used (see below) they look obviously wrong and mostly unusable for maps.

First example is the image unaltered see how the very light inside area becomes a tall plateau even though it should be a valley...
http://img827.imageshack.us/i/slc.png/ http://img809.imageshack.us/i/tutimage4.png/
Second example is an image with shadows... see how the shadow areas became lakes... (I tried many things to make the shadows not be shadows but nothing worked that was usable.)
http://img819.imageshack.us/i/slcrelief.png/ http://img826.imageshack.us/i/tutimage5.png/

1. To make sure the above doesn't happen to our height maps we will use GIMP to alter ourd image into a usable height map. Load your image in GIMP. http://img811.imageshack.us/i/tutimage6.png/

2. Now we need to change the color of the entire image to do so we will go to Colors -> Hue-Saturation... now we need to change the value under hue to -105. http://img340.imageshack.us/i/tutimage7.png/

3. Now that we have it set to this value we need to inverse the colors Colors-> Inverse... so that they contrast better. http://img441.imageshack.us/i/tutimage8.png/

4. Now we have run into a problem, we know that the darker the color the closer to water it is... and the image looks pretty much black where land should be so we need to lighten it up a bit. To do so we go to Colors -> Hue-Saturation... and change the Lightness to 40. http://img716.imageshack.us/i/tutimage9.png/

5. Now comes the most time consuming part of the entire process... If we leave the image as it is it still wont look good because of the names, interstate markers, and roads. So we need to go through and cover over those areas with a color that looks best when Geo-Control reads it as land. You can use pretty much any color on the image that is in the valley area. I choose a green color that was a good medium of all the colors in the valley and blocked in the whole valley with that color. It is up to you to cover the watered areas or not. I decided to cover everything but the Salt Lake. I also used the green color to path out valleys in the mountains. As for the names on mountains, I suggest getting a color closest to the name (a color in between the letters) and covering the name over with it. http://img697.imageshack.us/i/tutimage11.png/

6. As you can see the Salt Lake and the Kennecott Copper Pit has a gray color in it. That is because they will be the lowest points on the map, which is also where the water will be. The water color needs to be a shade very slightly lower then the one used for your landmass. This is because when we use TESAnnwyn we will be scaling the heights in the image, so a huge shade difference now will result in a couple of hundred feet in G.E.C.K.. I used a shade 2 units lower then the green of the valley. To check this look at the 'V' row in the color selection screen. http://img7.imageshack.us/i/tutimage10.png/

(As far as rivers go the ones in my image were very small and when the image was placed in Geo-control the rivers would show up as just random dips here and there in the land, so depending on the size you will have to do those manually in G.E.C.K.'s Heightmap Editor)

7. Once all this is finished we need to scale the image to the appropriate size. This depends on how large you want your land to be, but for this tutorial we want ours to be 2048x2048 so we will use the scale function and type in 2048 into the height box then click scale. (As long as your image is square it will set both the Height and Width to 2048)

8. All that is left is to save the image. Now onto Geo-Control!

Height Map Tutorial Part 3: GeoControl
(NOTE: I will not be going into detail about the workings of Geocontrol and how to use it to EDIT or CREATE landscapes.)

1. Load up Geocontrol and go to Terrain -> Terrain Import -> Image Import. Locate your image and hit open. Geocontrol will render the image on your screen. http://img64.imageshack.us/i/tutimage13.png/

2. Now we need to select generate and when it is finished you will see your image transformed into a landscape. http://img823.imageshack.us/i/tutimage14.png/

3. Now I suggest hitting the 3D button in Geocontrol to get a better view of what the landscape looks like, if you see anything out of place go back into gimp and touch it up as needed.

4. Once you are satisfied with the results go to Terrain -> Terrain Export -> Heightfield Grayscale... type a name and hit save. http://img808.imageshack.us/i/tutimage15.png/

Height Map Tutorial Part 4: TESAnnwyn
(NOTE: I will not be going into detail on how to use this wonderful tool. The set of instructions it comes with is very easy to understand.)

1. Now that we have a grayscaled image we need to start up TESAnnwyn which is as simple as double click on the 'CommandConsole' shortcut inside your TESAnnwyn folder. http://img517.imageshack.us/i/tutimage16.png/

2. We need to tell TESAnnwyn to turn the grayscale image into a .esm we can use in G.E.C.K. For that we type in "TESAnnwyn -i 5 -s 20 -w SLCWastes -x -32 -y -32 SLCgrayfinal01.bmp" (Without quotes. The SLCWastes is the name of the 'Worldspace' inside of G.E.C.K. and 'SLCgrayfinal01.bmp' is the name of the image we made with Geocontrol.) http://img413.imageshack.us/i/tutimage17.png/

3: It will process the grayscale image into a .esp file called TESAnnwyn.esp you will know when its finished when it says Finished! http://img64.imageshack.us/i/tutimage18.png/

Height Map Tutorial Part 5: Seeing the Results in G.E.C.K.

1. We now need to move the TESAnnwyn.esp file we created in part 4 to the Data folder of Fallout 3. http://img256.imageshack.us/i/tutimage19.png/

2. Now we need to load up G.E.C.K. and set 'TESAnnwyn' as active plugin. http://img251.imageshack.us/i/tutimage20.png/

3. Once it has loaded up go to World -> Heightmap Editing... A box will come up choose SLCWastes (or whatever you called your worldspace from Part 4)

4. It will load up the heightmap data for our world space! We have successfully found, edited, exported, and converted an image into a heightmap. http://img21.imageshack.us/i/tutimage21.png/

So there you have it from start to finish.

This looks really good, Phaedin. You should add it to the http://geck.gamesas.com/index.php/Main_Page.

I second, thank you very much for developing this! Very good stuff.

I would but I've never honestly used wiki before I wouldn't know where to put it or formatting etc... if someone could make a dummy page for me that I could copy and paste into that would be fantastic

I will be adding more tutorials soon.