Artificer's Guild - Altering Artwork

Design Tips Index

Scenario League

Apolyton Civ2

Altering Scenario Artwork by Serge Walters, Artificer's Guild - Edited by Blackclove

Altering graphics for scenario development - bypassing the Fantastic Worlds' editors. Requires suitable graphics software.

Editor's Introductory Note

This article was originally written by Serge Walters and has been reproduced courtesy of the author and the Electric Ferret Online Cafe. Some editing has been done to make the file work with the scenario editing tools now available. Where changes have been made by the editor, they are set in blue text. You may wonder why we would need an article on editing art directly instead of using Fantastic Worlds' art import utility. The main reason is that most of the artwork available on the internet is NOT easy to import into Fantastic Worlds. A lot of it also requires touching up because it is saved in the wrong format. Plus, there are things that are easier to do with a paint program than using the Fantastic Worlds utility. Interested? Then read on!

- Blackclove

The Possibilities

You can change the icons in the Civ 2 game which represent Units and Cities. Also, the Terrain and... well just about everything graphical, really.

What is written here will probably not make much sense if you do not have a program which will allow you to view the file. If you have a graphics program... simply get into "Exploring Windows" or the "File Manager" and double click on any of the game's " .GIF" files or " .BMP" files if you are using Fantastic Worlds. For most designers, these are located in your scenario's folder. If a file is missing, you can just copy it from your main Civ2 folder using Windows Explorer, or open Fantastic Worlds and make a trivial change to your units pictures, perhaps importing something to fill one of the extra icon slots.

You may make changes to:

units.gif
cities.gif
city.gif
icons.gif
people.gif
terrain1.gif and terrain2.gif

The game icons that you find in the .GIF files are lined up in rows. Notice that the icons are all within borders. Sometimes green, sometimes black. Leave the borders well alone! Do NOT break the borders. The game needs them intact.

Here are a few examples:

This is a unit icon that comes straight from the default game. Notice the pink and plumb-colored areas surrounding the icon. They are transparent and do not show up on the game board.

This is a custom unit. Notice that this icon does not have the plumb-colored areas, only pink. The pink is transparent and will not appear on the game board. You must match this shade of pink exactly.

This is a city icon from the game. You may also alter city and terrain images to suit the feel of your scenario. These icons are contained in a specially formatted .GIF or .BMP file that the game reads from. Custom playing pieces can really add to your scenario.

In order to manipulate these files, you will need a graphics program. Good icon graphics can be a lot of work, but it is very rewarding to think that someone will enjoy playing your game with good artwork!

Note that if you are using Fantastic Worlds, you must leave the pink and gray triangular areas alone. If they are misplaced, your icon may get an ugly looking flashing gray box around it.

View the full .GIF file in some sort of graphics editor and you will see where the icons representing different game pieces are located.

Selecting a graphics program

There are many good programs you can purchase to alter and create these icons. I [Serge] use Corel PhotoPaint and believe it is a very versatile program. They can be expensive however.

Note that with Fantastic Worlds, PhotoPaint and many other paint programs will damage the file by changing the format, including PhotoPaint. The best icon editor is JASC's Paint Shop Pro. Not only is it less expensive than most others, it is Shareware, so you can try before you buy.

Most importantly, though, it does not modify the format of the GIF file by adding any headers, meaning Civ2 won't choke on the files it creates.

Making 'killer' graphics

If you are here then you have experimented a bit with the .Gif or .Bmp files.

What makes a good looking icon or unit? You have noticed that the icons are very small, and yet many... (just look at the ones that came with the game!) ...still seem to retain a lot of detail. Just by messing around and trying to draw one, you see it is very hit-and-miss for quality.

Step-by-step instructions

First off: Graphics programs have many options for image size measurements. Make sure you are always working and thinking in Pixels.

The area of a unit graphic is 48 pixels high x 64 pixels wide - .gif format of 256-colors.

1). In Windows Explorer ('95) or File Manager (3.whatever) create a new folder to contain nothing but your images.

2). Scour the internet looking for a real life photo image or quality screenshot of the subject you wish to make an icon for. Let's say you want to make a World War I Sopwith Camel Bi-Plane unit. Find the most bitchin' Sopwith Camel image you can - which may well be on 'the Web'. Click on and save all cool images you find to your new folder.

3). Open the file you choose to make a Civ2 image with in your graphics program.

4). Go up to "File" and select "New". (Almost all graphics programs have some variant of File and New. Anyway, the point is to open a new, blank image field to work on).

5). Go back to the original image still open in the graphics program. Use whatever tool your program supports to carefully trace around the image and cut it out. Then paste it onto the new clean work surface.

6). Detail the image! Sharpen it. Brighten it. Increase contrast. Play with it.

7). When the image looks brighter and sharper and better to you, begin the shrinking process.

Shrink the image about 100 pixels, then sharpen it a bit. Shrink and sharpen a bit. Etc. Get it down to the final size... see above.

8). The Image you got off the 'net is probably a .JPG image which is 16 million colors. Use the "Convert" feature in your graphics program to make the image a .gif.

9). Use your program's "Flood Fill" feature to fill in all the space around your image with the necessary shade of pink, so it will be rendered transparent by the game.

10). Can't figure out which "pink" to use? It is color value Red: 255 Green: 0 Blue: 255

11). Voila! Killer graphic. Paste it into the slot in the Civ2 units.gif or units.bmp where you want it to go. If using Paintshop Pro, take advantage of the copy and paste with transparent background to put the icon into an empty frame. The blue dots on the sides of the square are important; they tell the program where to put the shield. We've appended an empty frame you can paste into your designs. To use it, just copy it and paste it into whatever units.gif or units.bmp file you're working with, and then paste the new graphic into it where you think it belongs.

12). With Fantastic Worlds, it is extremely important to make sure that the frame is intact beneath your unit. Just using pink alone where it expects gray or vice versa will result in a weird "aura" around your unit that is extremely ugly and which can crash Fantastic Worlds.

Have a Civ2 scenario development tip you want to submit? E-mail us!

Return to the Scenario League's main page.

Go to the Apolyton's Civilization II main page.

Editor's Introductory Note

	This article was originally written by Serge Walters and has been reproduced courtesy of the author and the Electric Ferret Online Cafe. Some editing has been done to make the file work with the scenario editing tools now available. Where changes have been made by the editor, they are set in blue text. You may wonder why we would need an article on editing art directly instead of using Fantastic Worlds' art import utility. The main reason is that most of the artwork available on the internet is NOT easy to import into Fantastic Worlds. A lot of it also requires touching up because it is saved in the wrong format. Plus, there are things that are easier to do with a paint program than using the Fantastic Worlds utility. Interested? Then read on! - Blackclove

The Possibilities
	You can change the icons in the Civ 2 game which represent Units and Cities. Also, the Terrain and... well just about everything graphical, really. What is written here will probably not make much sense if you do not have a program which will allow you to view the file. If you have a graphics program... simply get into "Exploring Windows" or the "File Manager" and double click on any of the game's " .GIF" files or " .BMP" files if you are using Fantastic Worlds. For most designers, these are located in your scenario's folder. If a file is missing, you can just copy it from your main Civ2 folder using Windows Explorer, or open Fantastic Worlds and make a trivial change to your units pictures, perhaps importing something to fill one of the extra icon slots. You may make changes to: units.gif cities.gif city.gif icons.gif people.gif terrain1.gif and terrain2.gif The game icons that you find in the .GIF files are lined up in rows. Notice that the icons are all within borders. Sometimes green, sometimes black. Leave the borders well alone! Do NOT break the borders. The game needs them intact. Here are a few examples:
		This is a unit icon that comes straight from the default game. Notice the pink and plumb-colored areas surrounding the icon. They are transparent and do not show up on the game board.

		This is a custom unit. Notice that this icon does not have the plumb-colored areas, only pink. The pink is transparent and will not appear on the game board. You must match this shade of pink exactly.

		This is a city icon from the game. You may also alter city and terrain images to suit the feel of your scenario. These icons are contained in a specially formatted .GIF or .BMP file that the game reads from. Custom playing pieces can really add to your scenario.
	In order to manipulate these files, you will need a graphics program. Good icon graphics can be a lot of work, but it is very rewarding to think that someone will enjoy playing your game with good artwork! Note that if you are using Fantastic Worlds, you must leave the pink and gray triangular areas alone. If they are misplaced, your icon may get an ugly looking flashing gray box around it. View the full .GIF file in some sort of graphics editor and you will see where the icons representing different game pieces are located.
Selecting a graphics program
	There are many good programs you can purchase to alter and create these icons. I [Serge] use Corel PhotoPaint and believe it is a very versatile program. They can be expensive however. Note that with Fantastic Worlds, PhotoPaint and many other paint programs will damage the file by changing the format, including PhotoPaint. The best icon editor is JASC's Paint Shop Pro. Not only is it less expensive than most others, it is Shareware, so you can try before you buy. Most importantly, though, it does not modify the format of the GIF file by adding any headers, meaning Civ2 won't choke on the files it creates.
Making 'killer' graphics
	If you are here then you have experimented a bit with the .Gif or .Bmp files. What makes a good looking icon or unit? You have noticed that the icons are very small, and yet many... (just look at the ones that came with the game!) ...still seem to retain a lot of detail. Just by messing around and trying to draw one, you see it is very hit-and-miss for quality.
Step-by-step instructions
	First off: Graphics programs have many options for image size measurements. Make sure you are always working and thinking in Pixels. The area of a unit graphic is 48 pixels high x 64 pixels wide - .gif format of 256-colors. 1). In Windows Explorer ('95) or File Manager (3.whatever) create a new folder to contain nothing but your images. 2). Scour the internet looking for a real life photo image or quality screenshot of the subject you wish to make an icon for. Let's say you want to make a World War I Sopwith Camel Bi-Plane unit. Find the most bitchin' Sopwith Camel image you can - which may well be on 'the Web'. Click on and save all cool images you find to your new folder. 3). Open the file you choose to make a Civ2 image with in your graphics program. 4). Go up to "File" and select "New". (Almost all graphics programs have some variant of File and New. Anyway, the point is to open a new, blank image field to work on). 5). Go back to the original image still open in the graphics program. Use whatever tool your program supports to carefully trace around the image and cut it out. Then paste it onto the new clean work surface. 6). Detail the image! Sharpen it. Brighten it. Increase contrast. Play with it. 7). When the image looks brighter and sharper and better to you, begin the shrinking process. Shrink the image about 100 pixels, then sharpen it a bit. Shrink and sharpen a bit. Etc. Get it down to the final size... see above. 8). The Image you got off the 'net is probably a .JPG image which is 16 million colors. Use the "Convert" feature in your graphics program to make the image a .gif. 9). Use your program's "Flood Fill" feature to fill in all the space around your image with the necessary shade of pink, so it will be rendered transparent by the game. 10). Can't figure out which "pink" to use? It is color value Red: 255 Green: 0 Blue: 255 11). Voila! Killer graphic. Paste it into the slot in the Civ2 units.gif or units.bmp where you want it to go. If using Paintshop Pro, take advantage of the copy and paste with transparent background to put the icon into an empty frame. The blue dots on the sides of the square are important; they tell the program where to put the shield. We've appended an empty frame you can paste into your designs. To use it, just copy it and paste it into whatever units.gif or units.bmp file you're working with, and then paste the new graphic into it where you think it belongs. 12). With Fantastic Worlds, it is extremely important to make sure that the frame is intact beneath your unit. Just using pink alone where it expects gray or vice versa will result in a weird "aura" around your unit that is extremely ugly and which can crash Fantastic Worlds.