Request for help creating custom civ icons in Photoshop (not Gimp)

Eltoshan

Chieftain
Joined
Jul 21, 2012
Messages
14
Hi, I read Kael's tutorial and everything. It's great. But it doesn't really help me troubleshoot issues I'm having with the game recognizing my icons. I'm fairly certain I am doing something in the icon creation/saving process that is incorrect.

I have seen a bunch of the tutorials here too, but they all focus on Gimp. And although I tried to follow, the settings are not quite the same.

I really just need help using Photoshop to create working icons for a custom Civilization. Any help would be appreciated.

Moderator Action: Moved to the main forum.
Because the tutorials subforum is only for tutorials, not for questions ;).
 
I use Photoshop, perhaps I can help.

Explain what you're doing and how far you've gotten. Any specific questions? Also, are you experienced with Photoshop and know how to use it?

EDIT: Even though GIMP is used in this tutorial, it's still filled with lots of useful information that applies to all: http://forums.civfanatics.com/showthread.php?t=459392
 
Sorry it took me a bit to respond and thank you for your time.

Yes I am fairly experienced in Photoshop. Not in a technical basis but in that I know virtually the entire program by "if I hit this little button and draw it around this, I can hit that other button there and do what I want to do."

The first problem I ran into was that I literally copied the settings exactly like the picture in Kael's tutorial (I believe the specifics were "DXT1, ARGB, 4bpp, 1 bit alpha")and when I loaded the mod, for every image it tried to load, I got an error message saying "It could not load 'xxx' image". Needless to say, when starting a game, this message was unavoidable and made it unplayable.

So I went back after viewing a different guide on a forum and changed it to DXT3, ARGB, 8bpp, explicit alpha. I have no idea what these mean, but I no longer got the error messages. However, all I got was a large white icon over everything where my custom icon should have shown.

I have a few questions that may or may not immediately help to identify my error:
1. Is it important to merge all the layers before the save? I was not doing this, but it apparently merges the layers anyway.
2. In kael's tutorial, there is an 8x8 grid of circles. I was just placing my icon in the first column, first row and otherwise leaving everything else white. I was under the impression the XML sheet has code that specifies where to look, but I'm not sure that is what is actually going on.
3. Is it possible that me not setting "Import into VFF?" (or whatever) to "True" was the initial problem?

Thanks again for your help.
 
Well a couple of notes.
* You must save the textures as DXT3 or DXT5, there may be additional requirements.
* Compatible encoding is definitely possible through Photoshop (with Nvidia plugin) and Paint.net.
* To work on old GPU (or ones with bad drivers), both textures's dimensions must be powers of two (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, ...)
 
Okay, I'm the same way. I'm not too technical either; I just know what works for what I have to use the software for most often, otherwise I experiment to fulfill goals related to other advanced/personal things. :lol: Always learning something new.

1) I don't believe it's necessary to merge the layers, just have whatever you want shown "visible". I think it just utilizes the channels.

2) Yeah, you place as much art as you want and just leave the rest of the circles blank. It's just an atlas of images for the game to find art in specific locations within it.

3) Yes, that would be one of the problems. For all the DDS atlases you include in your mod, make sure you set the setting to True. You can actually highlight all the atlases as once and set them to True within the Properties menu. Also, make sure you're giving your atlases nice, unique names so that it doesn't override the default game ones and also to decrease the chance of conflicting with other mods that include art atlases.

Sorry, if I overlooked it, but what exactly is the art for? Most often, you're going to need multiple sizes for each kind of icon art, so you need to create multiple DDS atlas files.

For any unit, building, tech, etc. with new icon art, these two XML columns are important (I wrote "etc.", but just make sure you look-up an example entry or the appropriate schema to make sure you're using the correct column names):

<IconAtlas> tells it which atlas to use, specify your custom atlas here (not the file name, the name you assigned to it under the Atlas column). It finds the appropriate icon size needed itself.

<PortraitIndex> tells it which "circle" to use within the atlas. Top left corner starts at 0, directly under that would be 8, and so on.

You also want to include in your mod an XML file which assigns a name to all your different sized DDS atlas files. Just use the same name, again, the game will figure out what size it needs. The table name you want to use is <IconTextureAtlases>. Here's an example for an atlas of different sizes with 2 images included:

Code:
	<IconTextureAtlases>
		<Row>
			<Atlas>XXXX_ICON_ATLAS</Atlas>
			<IconSize>256</IconSize>
			<Filename>XXXXAtlas256.dds</Filename>
			<IconsPerRow>2</IconsPerRow>
			<IconsPerColumn>1</IconsPerColumn>
		</Row>
		<Row>
			<Atlas>XXXX_ICON_ATLAS</Atlas>
			<IconSize>128</IconSize>
			<Filename>XXXXAtlas128.dds</Filename>
			<IconsPerRow>2</IconsPerRow>
			<IconsPerColumn>1</IconsPerColumn>
		</Row>
		<Row>
			<Atlas>XXXX_ICON_ATLAS</Atlas>
			<IconSize>80</IconSize>
			<Filename>XXXXAtlas80.dds</Filename>
			<IconsPerRow>2</IconsPerRow>
			<IconsPerColumn>1</IconsPerColumn>
		</Row>
		<Row>
			<Atlas>XXXX_ICON_ATLAS</Atlas>
			<IconSize>64</IconSize>
			<Filename>XXXXAtlas64.dds</Filename>
			<IconsPerRow>2</IconsPerRow>
			<IconsPerColumn>1</IconsPerColumn>
		</Row>
		<Row>
			<Atlas>XXXX_ICON_ATLAS</Atlas>
			<IconSize>45</IconSize>
			<Filename>XXXXAtlas45.dds</Filename>
			<IconsPerRow>2</IconsPerRow>
			<IconsPerColumn>1</IconsPerColumn>
		</Row>
	</IconTextureAtlases>

If you only have a single image within the atlas, in circle 0, then you would just change <IconsPerRow> to 1. (I think Kael's guide just leaves these at the default values, though. I'm not sure if that causes any issues, or if it doesn't matter, or what.)

So, "part of" the data for a new unit that uses the first image would look like:

Code:
<IconAtlas>XXXX_ICON_ATLAS</IconAtlas>
<PortraitIndex>0</PortraitIndex>

-----

Also, when saving an image as a DDS file, make sure you utilize the Preview button within the plugin to see how the output will look.

Also, as a shortcut to creating multiple atlases of different sizes, instead of plopping the image onto each different sized template, just reduce the image size of the first one to equal the size you need. Just make sure you work your way down from the largest to the smallest.

So, an easy reduction would be the 256 atlas to the 128 atlas, just reduce by 50%.

For others less obvious, just reduce them by inputting the desired pixel count you need. Each atlas is an 8x8 grid of the named size. So, for the 80 atlas you would need an image size of 640x640 (640 = 80 x 8).

---

Also, for "fancy" icons that pop-out of the border (usually unit icons), here's one easy method to altering the alpha channel to allow this:

1) Select the background that the image is placed within then inverse the selection so that everything on the unit is selected (use the refine edge button if needed/desired to reduce pixelation).

2) Go up to the Selection tab and choose Load Selection. Load the alpha channel, but under Operation, make sure you change it to "Add to Selection" instead.

3) With your new selections, go to the Channels view under your Layers. Now, just press the 2nd button from the left that reads, "Save selection as a channel". You now have a new alpha layer and can delete the other one. Repeat for more "fancy" icons within the atlas.

Note: Photoshop is extremely flexible, and there's SO many ways to do something or different hotkeys to use; what I listed was just a single way. For example: in step 3, you can also just go to the same area as step 2 and choose "Save Selection" under "Load Selection". Then just type a name in for the new channel.

Another method one could use is to duplicate the image layer and using layer effects, add a white color overlay. Then just merge it with the circle template layer and create a new channel off of the selection you make there (probably easiest to just select the black first then inverse it. Refine the edge if needed).
 
Back
Top Bottom