Terrain and Interface Graphics Creation Templates

tom2050

Deity
Joined
Oct 12, 2005
Messages
5,516
Terrain and Interface Graphics Creation Templates

Here is where I place the files for various Terrain and Interface Graphics Creation Templates. These templates will be provided for Photoshop, PSP, and Gimp eventually.

They are easy to run, can be modified, and will be provided with tuturial and all files required.

Templates with download links:

Tuturial: Interface Button Creator
Download... PSD Photoshop files

Tuturial: Terrain Creator Template
Download 1... TerrainTemplatesV1.1_1.rar
Download 2... TerrainTemplatesV1.1_2.rar


* First link goes to information page.

Tom
 
Interface Button Creator v1.0

NOTE: Follow the tuturial closely to avoid any issues you may have with this template! It is very easy to use and to setup, but please only ask a question if you have a problem after following the instructions.

Download: PSD Photoshop Template
* Files included with Photoshop Template are: atn Action file and PSD file.

Example buttons that were created in minutes:

Sample icon downloaded online (no graphic is necessary to use this template):
ButtonCreatorSampleOrig.jpg

Sample Output files created by this template:
ButtonCreatorSample1.jpgButtonCreatorSample2.jpgButtonCreatorSample3.jpg

Interface Button Creator Tuturial:

1. Extract the InterfaceButtonCreator.rar file (filename has Version number also, V1.0 e.g.), which contains the InterfaceButtonCreator.atn and ButtonTemplate.psd file.

2. Place the file 'InterfaceButtonCreator.atn' into your Photoshop/Presets/Photoshop Actions directory.

3. Restart Photoshop if Photoshop is running.

4. In Photoshop, select Window -> Actions.

5. On the Actions tab, you should see an entry called InterfaceButtonCreator.atn. Hit the arrow to drop down the action, and you will see the entry called ButtonCreator.
Button-Tuturial5.jpg

6. Open the file called ButtonTemplate.psd into Photoshop.

7. Once open, open up the Layers window by clicking Window -> Layers.

8. This will show the layers of the ButtonTemplate.psd file which are from bottom to top 'Max Graphic Area', 'NormButtons', 'rolloverbuttons', and 'highlightedbuttons'.
Button-Tuturial8.jpg

9. All of these have their layer invisibility turned off. Leave all of these off before running the action script!

Note: The layer 'Max Graphic Area' consists of a circle (the inner portion of the circle is transparent, the outer portion is colored red). Anything in the red portion will not be used since it is outside the Firaxsis Button graphic.

Creating the buttons:
---------------------

1. All you need to do is simply create a selection, and the template will produce the graphic onto the button. You can use the selection tools (such as the Rectangular Marquee, Polygonal Lasso, etc) to draw the selection. Or you can use a pre-existing graphic to quickly get a selection of a graphic (using the Magic Wand Tool for instance).
Shown on the Tools Window: Rectangular Marquee, Polygonal Lasso, and Magic Wand.
Button-TuturialSelTools.jpg

You can paste graphics into the template, in order to get your selection (using Magic Wand e.g.), just make sure you turn off all layer visibility before running the action!

These tools can be accessed by clicking on Window -> Tools.

2. Once you have your selection, turn off all layer invisibility in the Layers tab!

3. On the Actions Window, select the ButtonCreator Action, and hit the play button.
* Make sure no other windows (images) are open in Photoshop before hitting the action play button!
Button-TuturialPlay.jpg

4. The action will commence, and you will end up with 3 new windows, each with your new button! These buttons have no need to be indexed, therefore are left in RGB mode. You can copy and paste these graphics into their Civ3 graphics PCX files.

The graphics PCX files for buttons are:
NormButtons.PCX
rolloverbuttons.PCX
highlightedbuttons.PCX

These files are located in the Art/interface folder of the Civilization III, PTW, or Conquests directory.

EXAMPLES of creating a selection:
---------------------------------

Here is an example of using an icon image downloaded online of an uzi to create a selection. The size of an image will likely need to be shrunk to fit the button. Image size of 25x25 or smaller is recommended.

Here is the sample image.
ButtonCreatorSampleOrig.jpg

I resized the image to a smaller size (25x19) so it will fit into the button graphic.

I then pasted this image into the ButtonTemplate.psd file (it will automatically create a new layer for the image).

Using the Magic Wand selection tool I clicked on the uzi and it created a selection of it.
Button-TuturialSelection1.jpg

Tip: When using the Magic Wand, you can adjust the Tolerance of the selection (which will let the Magic Wand select similar colors). The Tolerance setting is located below the main toolbar (where File, Edit, Image, etc are located). 0 Tolerance gets only the color you select, higher numbers will select a broader range of colors.

Tip: You can adjust the selection by using other tools such as the rectangular marquee tool. Holding down shift will add to an existing selection, while holding down alt will subtract from an existing selection.

Once you have your selection, you are done... just make sure all layers are made invisible before running the action! See below:
Button-TuturialSelection2.jpg
** Make sure all layers are not visible, as shown above before you run the template.


Tom
 
Terrain Creator Template v1.1

BASIC Tuturial complete

NOTE: Follow the tuturial closely to avoid any issues you may have with this template! It is very easy to use and to setup, but please only ask a question if you have a problem after following the instructions.

SIMPLE example terrains were included in each template. So you can just run the Terrain Creator, then the Terrain Blend actions right away to see it work. I grabbed these samples quickly off the internet, so don't expect them to look great.

Download:
Download 1... TerrainTemplatesV1.1_1.rar
Download 2... TerrainTemplatesV1.1_2.rar
* Files included with Photoshop Template are:
_TEMPLATES ReadMe.txt, BlendingDefaults.txt, fur2.8bf, fur2-ReadMe.txt, GridNumbers- XTGC Layers Info.txt, melt1-1.8bf, melt1-1ReadMe.txt, XDGC-TEMPLATE.psd, XDGP-PlainsCreator.psd, XDGP-PlainsCreator2.psd, XDGP-TEMPLATE.psd, XDPC-TEMPLATE.psd, XGGC-TEMPLATE.psd, XPGC-TEMPLATE.psd, XTGC-TEMPLATE.psd, TerrainActions.atn

IMPORTANT: AS A GENERAL RULE, DO NOT CHANGE ANY OF THE LAYER NAMES, the actions use the names they are given. If they are changed, the template will not work.

QUICK TUTURIAL - Go through the below tuturial if doing for the first time.
For all templates except for XDGP-TEMPLATE (must do below steps first)
1. Paste the image of terrain into the appropriate layer (1st or 2nd layer)
2. Make sure all layers are invisible, and no other images are open in Photoshop.
3. Run the Terrain Creator action, then the Terrain Blend action.
4. Save the completed and brand new terrain file.

For XDGP-TEMPLATE only, do this first, then do above steps
1. Open XDGP-PlainsCreator.psd and the XDGP-PlainsCreator2.psd file.
2. Paste the image of terrain into the layer '3rd'.
3. Make sure all layers are invisible, and no other images are open in Photoshop.
4. Run the PlainsCreator action. Once done close both PlainsCreator images.
5. Paste the created image into the XDGP-TEMPLATE layer called 'Grid Beach'.
6. Run the CoastPlacer action on the XDGP-TEMPLATE. Save the XDGP-TEMPLATE file if you wish to keep your changes.
7. Follow the 4 steps listed in the top of the quick tuturial section to finish.



Terrain Creator Template Tuturial:

Photoshop Setup:

1. Copy the fur2.8bf and melt1-1.8bf filter files into your ..\Adobe\Photoshop\Plug-Ins\Filters directory. Your Photoshop directory may be different than this one.

2. If Photoshop is running, close Photoshop and restart it. The new filters will now be available to you.

If your Layers window is not open, go to Windows->Layers to open it.
If your Actions window is not open, go to Windows->Actions to open it.

3. Load the action files into Photoshop. To do this, in the top right corner of the Actions Window, there are 2 small arrows that bring up the menu when clicked. From this menu, click Load Actions. Then load the TerrainActions.atn file that was included in the downloaded TerrainTemplates folder. You will then see the Actions called 'TerrainActions' in the Actions Window. In this action list are 4 actions: Terrain Creator, Terrain Blend, CoastPlacer, and PlainsCreator.
__1LoadActions.jpg

Creating terrain with the templates:
All terrain templates follow these steps right here, EXCEPT for the XDGP files (see below).

1. Open up the XDGC-TEMPLATE.psd file into Photoshop.

2. In the Layers Window, you will see a layer called '1st' and one called '2nd'. These are the layers that hold the Terrain graphics which are used to create the terrain.
Terrain files are labeled like this:

Terrain (1st, 2nd, 3rd)
---------------------
XDGC (Desert, Grass, Coast)
XDGP (Desert, Grass, Plains)
XDPC (Desert, Plains, Coast)
XGGC (Grass, Grass, Coast)
XPGC (Plains, Grass, Coast)
XTGC (Tundra, Grass, Coast)
EXAMPLE: In XDGC, the '1st' Layer is Desert, and the '2nd' is Grass. There is no 3rd (will be explained later).

3. So we are working with the XDGC template, so in the '1st' Layer is an example Desert graphic, and the '2nd' Layer contains an example Grass graphic.
__2Layers.jpg

If you wish to change what graphic the template is going to use, just paste a new graphic into the 1st and 2nd layer. NOTE: When you paste a graphic in, Photoshop usually automatically creates a new layer, so delete the old 1st or 2nd layer and rename the new layer 1st or 2nd.

4. Your graphic must cover the area shown in the layer called 'Grid Numbers'. Make sure the graphic is big enough to cover all of these numbers. The layer beneath 'Grid Numbers' called 'Image Area and 00 Main Tile' also shows the absolute minimum area the graphic must cover.

The 00 Tile in the 'Image Area and 00 Main Tile' is the inland terrain graphic spot that should contain a portion of graphic that is as uniform as possible! Otherwise you very easily notice it in game. You can move around your graphic in the 1st and 2nd layer to align them with the Image Area layer as you wish.
__3ImageArea.jpg

Information about the included layers:
XTGC00 through XTGC88 - holds the 3rd terrain types, and has a variety of other uses. Should not be altered.

Grid Numbers/Image Area and 00 Main Tile - Shows the area that your terrain graphics must cover.

Grid Grey/Grid Magenta - used for reference

Original - shows the original terrain PCX graphic for reference

Numbered - shows what each terrain tile number is (referring to the XTGC## layers)

Blending Selection - is the selection that the Terrain Blend Action will use.

1st and 2nd - Is the graphic the template uses to create the terrain.

Grid Beach - Contains the coast graphics, and in the case of the XDGP template contains the plains graphics. The CoastPlacer action will update the template with the graphics from this Grid Beach layer.

Before running the template
1. Make sure ALL layers are invisible! Some layers are not used, such as Grid Grey, so it's a good idea to have this layer selected (but invisible) before running the template.
2. Make sure NO other images are opened in Photoshop. The only thing opened should be the current template.

Running the Template
1. In the Actions Window, in the Terrain Actions, select Terrain Creator, and hit play.
2. After a few minutes, the process will be complete. Now select Terrain Blend (while the Template is selected, not the created TEMP-FILE), and hit play.
3. During the Blend, the filters will pop up allowing you to enter the values you wish to apply. Here are the default values I use currently.

For the Fur 2 filter -
Shape: Line
Mode: Solid
select Transparent BG
Density: 100
Thickness: 2
Length: 3

For the Melt 1.1 filter -
Size: 2
Amount: 2
Ratio: 0

You can change the values to anything you like, but these are an all-around good blend method. Any filter can be used by adjusting the actions to use a different one of your choice.

4. Once the terrain blend action is complete, you can save the TEMP-FILE, which is already indexed and ready to go, as the proper terrain file (in this case xdgc.pcx).

You are done with the first.

-------------------------

Make sure once you find the terrain picture you wish to use, to copy it in to all templates that use it. So for Desert, copy the image into all Templates that use Desert (XDGC, XDGP, and XDPC). Also it is a good idea to make sure the images are aligned exactly the same way in each template.


USING THE XDGP TEMPLATE

The xdgp template is done the exact same way as explained in the above process, with one difference. You must make the 3rd terrain type here, which is the P (Plains).

1. To do so, there are 2 files to open in Photoshop, the XDGP-PlainsCreator.psd and the XDGP-PlainsCreator2.psd.
2. The XDGP-PlainsCreator.psd file has a '3rd' Layer, this is where you will place the graphic image for Plains that you wish to use.
3. Once this is done, make sure all the layers are invisible, and make sure the XDGP-PlainsCreator image is the selected image.
4. Under the Actions Window, select the PlainsCreator Action, and hit play.
5. In under a minute, a new untitled image will be created for the Plains.

Close both the XDGP-PlainsCreator psd files. Open the XDGP-Template.psd file.

6. Copy the untitled image that was created into the XDGP-TEMPLATE layer called 'Grid Beach'. Photoshop will usually put it into a new layer, so delete the old 'Grid Beach' and rename the new one 'Grid Beach'.
7. Now go to Actions Window, and select the CoastPlacer Action. Make sure all layers are invisible in the XDGP-TEMPLATE! Hit play. This places the newly made Plains into the appropriate spots of the template.

When finished you can save the template if you wish. Now you can follow the other instructions above to finish making the xdgp.pcx file, which are:
Make sure the 1st and 2nd layers have the appropriate Desert and Grass images.
Run the Terrain Creator action.
Run the Terrain Blend action.
Save the TEMP-FILE as xdgp.pcx.



REPLACING THE COASTS that are used in all the templates
If you wish to use different coasts, you can. When a template that uses Coast is open in Photoshop, use the action CoastPlacer to automatically put in the new coast into the template. The action gets the coasts to use from the layer called 'Grid Beach'.

Grid Beach layer must be set up in the same way it is in the templates. That is the Magenta Grid must be in there. The Coasts should be in there also, but the remainder of the terrain must be cut out and transparent.




Tom
 

Attachments

  • TerrainActionsPatch.rar
    6.7 KB · Views: 348
Thanks a million Tom! I got Photoshop, so I can start using your wonderful tutorials on graphics creation/conversion sooner. I still love GIMP, but really want to start following your tutorials without any delays figuring out how to do things in GIMP. These tutorials and templates should prove very helpful to me. For my fantasy scenario I want to create both new terrain and new interface buttons. This will make that job much quicker.

Cheers

Nick
 
Can't wait for a GIMP version of this...
 
I started to try to make a GIMP version, but it's completely different from what I'm used to... didn't want to spend that much time learning it. PSP my 30 day trial ran out back then, so I couldn't finish that either. I still have the PS version; but used Ares de Borg Water with them, and when I made it, I forgot that he asked for others not to modify the terrain etc.

IIRC, it's not easy to change the water out of the template. I can PM you the file though if you like.

I honestly don't know if it can be done manually.. it would take days or weeks. Because it took weeks to make it. The PSD is like 100 layers and the action script I recorded is extremely long (around 1,500 recorded actions I think for the main script; maybe a max of 1,000 recorded actions for the other scripts). It was difficult to fix some of the initial issues with it.

It's like a huge puzzle.. every layer holds a specific tile; it takes the graphic(s) you paste (into the correct named layer), and copies and pastes certain individual pre-set selections into certain layers. It then 'builds' the final terrain piece, by putting those layers together like a puzzle. I had a hard time understanding the idea I came up with while I was doing it. If I knew how to code a program, it could be made so easy to do for a user... this is the best I can do though with what I know.


It's won't make as good of terrain as could be done manually (it will not be as varied), because it uses similar graphics in many different spots. It was the only way I figured out how to have it work automatically and as seamlessly as possible.
 
Top Bottom