Guide for converting SMAC icons to Civ4 buttons

Maniac · Nov 5, 2008

Using the latest GIMP 2.6. A DDS plug-in should be downloaded here.

File/Open... some SMAC icon
Select/By Colour : the icon
Edit/Copy
Edit/Paste as New Image

If you intend to use this icon in the future as a part of other self-assembled icons, it can be handy to save this new image as an xcf file, so you don't need to repeat the previous steps all the time.

Civ4 buttons are 64x64 pixels. But Civ4 automatically places a curved-angle frame over buttons in for instance the city screen. As a consequence the effective space you have for a button is 56x56. And if you have an icon with transparent background, one which doesn't fill the whole 56x56, you don't want your icon to touch the frame, so you need to make the final icon even a little smaller, say 52x52 at most.

Therefore, look at the size of the new image you just pasted. Take a calculator and do "length of largest side of new image * 64 / 52" (or 56, see above). Round up. I'll call this value 'x'.

Image/Canvas size: Width and Height x, Offset:center, Resize: All layers

Now please save your image as xcf. This draft is a good starting point in case you ever need to repeat the next steps. For instance if you want to change the colour.

Select/By Colour : the icon
Toolbox/Bucket Fill/Pattern Fill/Marble #1 (+shift for whole selection)
Toolbox/Change Foreground Color: to what colour the icon should have

list of HTML notations:

Spoiler :

The next steps vary depending on what your foreground colour is.

For Build, Explore, Discover, Genetics/PK, Terraform/Believer, Enclosed & Civic colours:

Spoiler :

For the Conquer colour:

Spoiler :

File/Save as... : Name: ButtonX.dds; Save
Save as DDS: Compression: BC2/DXT3; no mipmaps!!!

Depending what the button is used for, an optional step is adding a frame around the button.
Download the files attached to this post.
Download DXTBmp

If you have an icon with transparent background, open ButtonBorderTransparent.xcf
If you have an icon which fills the whole 56x56 and no transparency, open ButtonBorderNonTransparent.xcf

Switch to the ButtonX.dds window
Select/All
Edit/Copy
Switch to the ButtonBorder(Non)Transparent.xcf window
Edit/Paste
Layer/New Layer...
Windows/Dockable Dialogs/Layers: make sure the ButtonBorder layer is above the icon layer
Layer/Merge Down (when buttonborder layer selected)
File/Save as... : Name: button.dds; Save
Save as DDS: Compression: BC2/DXT3; no mipmaps!!!

Another step, only if you had to use ButtonBorderNonTransparent.xcf:

Open DXTBmp
File/Open ButtonX.dds
Import Alpha Channel: alpha channel button.bmp
File/Save As DDS Texture. Same name & compression, no mipmaps...

Maniac · Mar 8, 2009

bumped for my own ease...

Teodosio · Apr 28, 2009

Filters/Decor/Add Bevel... : Thickness 5

It would be useful to modify that line in:

Filters/Decor/Add Bevel... : Thickness 5; uncheck 'Work on copy'

Teodosio · Apr 28, 2009

For Build, Explore, Peacekeeper, Enclosed & Civic colours:

Filters/Light and Shadow/Lighting Effects/Material: Bright: 0,80; rest 0,00

Is the 'polished' setting set at 27.00 (default value)?

For the Conquer colour:

Toolbox/Alignment Tool/Align middle of target, Offset 2

What is the use/effect of this step?

Maniac · Apr 29, 2009

Teodosio said:
Is the 'polished' setting set at 27.00 (default value)?

Nope, set at zero?

What is the use/effect of this step?

It moves the 'shadow' created in the steps before two thingies (don't think it's pixels) down, on top of the icon. The point of that shadow layer is to add something bevel-like to the icon.

Teodosio · May 10, 2009

IMPORTANT ISSUE THAT SHOULD BE CORRECTED

Maniac said:
Make sure you still have your icon itself (not the while image) selected at this point. Else Bevel and Drop Shadow won't work. If you lost your selection somehow, you can get it back at this point by 'Select/By Colour : the transparency' and 'Select/Invert'.

Filters/Decor/Add Bevel... : Thickness 5; uncheck 'Work on copy'
Filters/Light and Shadow/Drop Shadow: Offset X: 0; Offset Y: 0, Blur Radius: 45: 80% opacity; uncheck 'Allow resizing'
Windows/Dockable Dialogs/Layers: select the shadow layer
Layer/Layer to Image Size
Layer/Merge Down
Image/Scale Image...: WidthxHeight = 64x64; Interpolation: Cubic

That should be the very contrary!
Make sure you have nothing (not even the colored icon) selected at this point. You can empty your selection by 'Select/None'.
(Put this above the light effect too)

Compare the couples of images in attachment to see why.
ParkFINISHED.xcf was made using the standard guide
ParkFINISHED2.xcf was made using the correction I am suggesting.
The buttons that have already been done would look better in this way, perhaps I will re-submit some of the ones I made.

Maniac · May 11, 2009

Teodosio, I don't see any difference whatsoever between those Park buttons. What am I supposed to see? :confused:

I seem to remember that sometimes when the icon was not selected, Adding Bevel didn't have any effect. I just tried again though adding a bevel to an icon with and without having a selection, and there's no difference. So I guess I must have remembered wrong.

As for the shadow, look at the attachment.
Here too it seems - as long as the icon layer is placed above the shadow layer (which doesn't happen automatically!) - there is no difference whatsoever between having a selection or not.

For Conquer-themed buttons you must have a selection of the icon though. Otherwise I believe the saturation shadow won't work as intended.

Maniac · May 11, 2009

Ah, with the Infirmary buttons I seem to notice that by selecting an icon, anti-aliasing is not used. If you don't select anything, anti-aliasing is used.

Maniac · May 11, 2009

But when I resize those buttons to 64*64, the differences between the two mostly get lost again, except for the occasional pixel in a slightly different colour.

Teodosio · May 12, 2009

Maniac said:
I seem to remember that sometimes when the icon was not selected, Adding Bevel didn't have any effect.

Perhaps this happened with some previous version of Gimp. I can't rememeber.

Maniac said:
Ah, with the Infirmary buttons I seem to notice that by selecting an icon, anti-aliasing is not used. If you don't select anything, anti-aliasing is used.

Yes, with the Infirmary button the problem is much more noticeable. But there are issues with all the buttons: I have attached a 400% zoomed comparison where you will see the problem with the Park icon.
The problem indeed is about anti-aliasing, and presents itself first in the "bevel" step. The "bevel effect" needs to go a bit outside the borders of the icon to create complete anti-aliasing: if you have a selection active the bevel is forbidden to work outside your selection so it cannot make good anti-aliasing. The problem is with all the icons but it is particularly acute where there are a lot of details, as it is the case with the "Infirmary".
When you add the shadow the problem gets worse, since the bevel adds transparency to some pixels. Transparent pixels create issues with shadows: if you don't include them in the selection they do not create their own shadow; if you include them the shadow is not created ON them. Look at the image attached, this is exactly what happened with the park. Some border pixels are very transparent (they appear almost white) and the shadow is placed after them, creating a weird border-effect.
If you place the shadow when nothing is selected then the shadows adds itself to the transparent pixels too, obtaining the best result. Look at the Park button after-correction.
I hope this was intellegible

Maniac said:
But when I resize those buttons to 64*64, the differences between the two mostly get lost again, except for the occasional pixel in a slightly different colour.

Yes indeed, when you resize to 64*64 the differences are hard to notice. But I think that a small improvement is better than no improvement!

Furthermore, since this suggestion involves no additional work in button-making and provides a small but positive enanchement, I argue that the guide should be modified in this effect. Please modify the guide and add that part before the lighting effect too, I am not sure if the ligth effect is restricted from selection too, but better safe than surprised! I am applying the light without selection in all the new buttons.
I have already re-made all the buttons done by me with this correction and I will post the entire pack in the buttons thread.

Maniac · May 12, 2009

I've changed the guide as you suggest.

Teodosio · May 13, 2009

In the settings about the "Conquer/Physics" theme, in the following part:

Filters/Light and Shadow/Lighting Effects/Light: Point type light; X-Pos: 0,50; Y-Pos: -0,60; Z-Pos: 1,00; Intensity: 0,90
Filters/Light and Shadow/Lighting Effects/Material: Glowing: 0; Bright: 0,90; Shiny: 0,10; Polished: 4.00

Please change "Bright" to 0.80. I have noticed working on the "perimeter defence" and the "command center" that using bright=0.90 makes the buttons too light, 0.80 is much better. I will soon upload a new group of icons in the related thread.

After some experimenting I can confirm that having the icon selected is bad for the light effect too. The light effect creates an antialiasing effect using transparencies that go outside the icons' own borders: if a selection is active the antialiasing is limited.

Maniac · Jul 26, 2009

bumped for personal convenience

Maniac · Mar 20, 2010

bumped for personal convenience

Guide for converting SMAC icons to Civ4 buttons

Maniac

Apolyton Sage

Maniac

Apolyton Sage

Teodosio

Warlord

Teodosio

Warlord

Maniac

Apolyton Sage

Teodosio

Warlord

Attachments

Maniac

Apolyton Sage

Attachments

Maniac

Apolyton Sage

Maniac

Apolyton Sage

Teodosio

Warlord

Attachments

Maniac

Apolyton Sage

Teodosio

Warlord

Maniac

Apolyton Sage

Maniac

Apolyton Sage

Similar threads