[these are just some of my random thoughts and experiences while working with image files for CBE - if someone has anything to add or clarify, please do so, then this thread will contain many useful information for everyone's benefit]
This text discusses image files used for UI graphic in Civilization Beyond Earth game
(though some rules, tips & tricks may be helpful for other uses as well,
and in current state it's compillation of tips rather than complete and "smooth" tutorial/article)
FORMATS OF DDS FILE COMPRESSIONS (BRIEF SUMMARY):
There are many formats to which DDS files can be saved but I will focus only on those directly related to the game.
ARGB 8.8.8.8
(widely used in original game's files, recommended for overall use)
compression: lossless
transparency (alpha): full support
size on disk: big file size similar to uncompressed images; original images in this format have been even further compressed by some specific method, which we can't recreate now, so custom created images are roughly twice the size of originals
best use: for almost anything if the best possible quality is required
additional notes:
- the difference in quality loss between ARGB 8888 and files saved as DXT1/DXT3/DXT5 may be barely noticeable for some images, and saving them in one of the latter formats may reduce file sizes on disk and VRAM use considerably (8:1 ratio).
- size on disk of created images may increase significantly, especially if you do not pay any attention to good optimization practices (in particular: not including mip maps, and not using original big templates for one small icon)
restrictions: image dimensions can be of any size
DXT1 / DXT3 /DXT5
(not used in original game's files much, though can be used instead of ARBG 8888 files saving a lot of space on disk and VRAM usage, recommended as cosideration for more experienced modders)
compression: lossy (smaller color space than that of ARGB 8888) - for most images quality loss may be barely noticeable in comparison to originals, but for some, various display errors or artifacts may be introduced due to a compression - for instance, the images that use subtle color gradients extensively may loose some "smoothness" in colours when saved in these formats
transparency (alpha): DXT1 - none, DXT3 - explict (areas of image fully visible, or not visible at all), DXT5 - interpolated (various levels of transparency controlled by shades of gray)
size on disk: smallest size on disk (best quality/size ratio); DXT1 8x smaller than ARGB 8888 (DXT5 4x smaller)
best use: practically for everything if there's not much of a difference in quality in comaprison to ARGB 8888 compressed images; these formats are used mainly to reduce disk space and VRAM usage
restrictions (in PS): image dimensions must be divided by 4
Other formats:
There are many dds files in CBE which were saved in bunch of different formats: DXT1, DXT2, DXT4, ARGB 8888, L16, L8, R32F (at least that's how NVIDIA Windows Texture Viewer sees them). Though the most common format is ARGB 8888.
No matter what format the original file has, usually it can be replaced by file with DXT1/DXT5/8888 compression. In CBE exceptions to this rule while may exist, are still yet to be discovered as far as UI graphic is concerned
SOME SIMPLE TEST RESULTS:
Just for the sake of comparisons...
tested file: wonder_clawler (splash image for one of original wonders)
file dimensions: 875x656 (original), 880x660 (DXT1/DXT5 - slightly resized due to format restrictions)
comment:
The splash images for wonders do not require transparency, so if you value a file size, and if you can live with very small quality loss (mostly not noticeable for others but you) in comparison to original image then stick with DXT1. But if you are really an artist concerned above all about highest quality, anywhere, anytime, then choose ARGB 8888 here. Though bear in mind that in the best quality/file size ratio contest, DXT1 file takes the first spot by a great margin
The "worst" scenario is when an image is saved with mip maps as this feature is not needed here at all, and provide no benefits but drawbacks by increasing the file size.
MAPS (COLOR, ALPHA/TRANSPARENCY, GRADIENT, GLOW)
COLOR MAP -
your base image. It contains the actual graphic (all those colors, shapes, gradients, and glow-like effects). Without the color map as a base no other map works alone by itself.
ALPHA (overall info, and as alpha channel in color map file) -
In short, alpha means transparency. Alpha, most of the time is just a black and white image of the same dimensions as color map. Though sometimes it can contain shades of gray as well. It defines what parts of color map image will be visible/hidden in game, and/or what parts will be partially visible.
And reffering to alpha as channel, means that the alpha image is stored (saved) in the same file as color map.
To put it in the simplest way what each colour of alpha map does, we can say: "black conceals, white reveals".
This means that if you have color map:
1. with alpha channel all white, then the whole image will be fully visible in game;
2. with alpha channel all black, then the whole image will not be visible in game;
3. where some parts of alpha channel are black, and some are white, then those that are black won't be visible while those white will be;
4. where some portions of alpha are gray, then those parts will be partially visible (in other word transparent), and the background graphic may be noticeable under the image - the level of transparency is determined by the value of gray in alpha channel: darker gray = less image visible, more background; lighter gray = more image visible, less background.
Of course, while these are all possible variants, not every single one makes that much of a sense First one for example, means that alpha is not needed for such image at all, thus the image could be saved without alpha channel information (as DXT1). Second one, for instance, produces no visible image at all 
In the game third, and fourth variants are commonly used.
ALPHA (as separate dds file)
Actually these files are not technically different that normal color maps. They just were named like that by developers. The main difference is that base color map (called in game's code and in dds file names as Icon Atlas) is used everywhere in menus where such icon needs to be displayed, and Alpha Atlases are used in some particular places as equivalent of that color map. The reason being that Icon Atlases are presented in unaltered versions, while Alpha Atlases usually have some colour schemes applied on them by the game.
The best examples to explain how this all works are logos for sponsors.
As Icon Atlases files, those logos/icons are usually square images with simple shapes/symbols in the middle, simple background, and a thin frame, all painted in a few colours, and with white alpha channel with thin black frame to remove excessive pixels.
And as Alpha Atlases files they are usually represented by only the sponsor's logo (without background and frame). The logo is usually in solid white colour, and alpha channel all black with the shape of that logo in white, usually with gradient-like features (darker at top, lighter at bottom).
To make the long story short: Icon Atlases are used everywhere and for main instance of particular sponsor, but Alpha Atlases are used as icons for other remaining instances of the same sponsor (if you have such situation in your game) - and the game applies different colours on them.
GRADIENT & GLOW MAPS
Well, to make the long story short - I've carried out some tests and... these features just don't seem to work at all. While references to glow and gradient maps are present in the game's code, and while such dds files do exists in game's archives, the point is that no matter what content those map files have, the changes are not reflected in game at all.
I have no idea whether it's something that needs to be fixed in any patch, or rather some sort of leftover that wasn't properly removed. My advice for modders here is not to use these features at all for now - there's no point spending time on something that doesn't work
COMMON GOOD OPTIMIZATION PRACTICES FOR UI IMAGES:
1. Make sure to save your images as DDS files without MIP maps (saves some space on disk).
MIP maps are just smaller versions of your original image inside of the same file. Pregenerated MIP maps can be helpful for actual in-game objects (models, terrain, etc.) where you can zoom in/out. For UI images which are usually of the same "static" size these are not needed to be present in actual image files.
2. If your mod contains only a few icons (or just one), don't use original big template unmodified. Just simply crop it to the size which is enough for the number of icons you have. For instance: if you have one icon only, and you use original template (8 rows x 8 cols), when you save this, the actual file on disk will be 64 times larger that that with the proper cropping applied - just to put things into a certain perspective: one badly optimized mod that uses ARGB 8888 compression for images and which adds only one icon on 8x8 original template, can be larger in size on disk and use more VRAM, than many dozens of properly made mods
3. If you use DXT1/DXT5 compressions instead of ARGB 8888 in your workflow, then don't use DXT5 for images that don't require transparency (loading screens, wonder splashes). You save the size of such files by half this way.
OTHER RANDOM TIPS:
Photoshop #1
If you can't save those small images/icons with odd dimensions as DDS with DXT1/DXT5 compression then just resize canvas size 4 times:
- from menu: Image -> Canvas Size... and then:
- change pixels to percent
- in width/height type 400
- uncheck relative
- as anchor select top left square
- press OK and you can now save.
Photoshop #2
If you want to create wonder splash screen for you mod, and want to save it as DXT1, then use dimensions of 880x660 pixels instead of original 875x656.
Sponsor icons #1
To have all icons properly displayed in game make sure that you have present in your mod icons with following dimensions:
Icon Atlases - 128x128, 64x64, 45x45, 32x32
Alpha Atlases - 48x48, 32x32, 24x24
The other dimensions are very likely not used, but to be on the "safe side" you may want to include them. But focus mainly on these mentioned as these are definitely used.
DDS viewer #1
You can preview dds file here and there, but to me one of the best viewers is that which you can download from Nvidia's site - Windows Texture Viewer.
Useful keyboard shortcuts:
R, G, B - enables/disabled display of Red, Green, Blue channel
A - enables/disables alpha channel (useful when RGB channels are enabled, helps to see what should be visible and what not)
U - switches between composite RGB view and alpha channel map
This text discusses image files used for UI graphic in Civilization Beyond Earth game
(though some rules, tips & tricks may be helpful for other uses as well,
and in current state it's compillation of tips rather than complete and "smooth" tutorial/article)
FORMATS OF DDS FILE COMPRESSIONS (BRIEF SUMMARY):
There are many formats to which DDS files can be saved but I will focus only on those directly related to the game.
ARGB 8.8.8.8
(widely used in original game's files, recommended for overall use)
compression: lossless
transparency (alpha): full support
size on disk: big file size similar to uncompressed images; original images in this format have been even further compressed by some specific method, which we can't recreate now, so custom created images are roughly twice the size of originals
best use: for almost anything if the best possible quality is required
additional notes:
- the difference in quality loss between ARGB 8888 and files saved as DXT1/DXT3/DXT5 may be barely noticeable for some images, and saving them in one of the latter formats may reduce file sizes on disk and VRAM use considerably (8:1 ratio).
- size on disk of created images may increase significantly, especially if you do not pay any attention to good optimization practices (in particular: not including mip maps, and not using original big templates for one small icon)
restrictions: image dimensions can be of any size
DXT1 / DXT3 /DXT5
(not used in original game's files much, though can be used instead of ARBG 8888 files saving a lot of space on disk and VRAM usage, recommended as cosideration for more experienced modders)
compression: lossy (smaller color space than that of ARGB 8888) - for most images quality loss may be barely noticeable in comparison to originals, but for some, various display errors or artifacts may be introduced due to a compression - for instance, the images that use subtle color gradients extensively may loose some "smoothness" in colours when saved in these formats
transparency (alpha): DXT1 - none, DXT3 - explict (areas of image fully visible, or not visible at all), DXT5 - interpolated (various levels of transparency controlled by shades of gray)
size on disk: smallest size on disk (best quality/size ratio); DXT1 8x smaller than ARGB 8888 (DXT5 4x smaller)
best use: practically for everything if there's not much of a difference in quality in comaprison to ARGB 8888 compressed images; these formats are used mainly to reduce disk space and VRAM usage
restrictions (in PS): image dimensions must be divided by 4
Other formats:
There are many dds files in CBE which were saved in bunch of different formats: DXT1, DXT2, DXT4, ARGB 8888, L16, L8, R32F (at least that's how NVIDIA Windows Texture Viewer sees them). Though the most common format is ARGB 8888.
No matter what format the original file has, usually it can be replaced by file with DXT1/DXT5/8888 compression. In CBE exceptions to this rule while may exist, are still yet to be discovered as far as UI graphic is concerned
SOME SIMPLE TEST RESULTS:
Just for the sake of comparisons...
tested file: wonder_clawler (splash image for one of original wonders)
file dimensions: 875x656 (original), 880x660 (DXT1/DXT5 - slightly resized due to format restrictions)
Code:
[B]file format / compression size (windows properties)[/B]
DDS original specific compression
(2 files: ARGB 8888 + L16) 1.19 MB
BMP (uncompressed image) 1.64 MB
DDS ARGB 8888 (with alpha) 2.18 MB
[COLOR="Red"]DDS ARGB 8888 (with alpha and mip maps) 2.91 MB[/COLOR]
DDS DXT5 (with alpha) 567 KB
[COLOR="Green"]DDS DXT1 (no alpha) 283 KB[/COLOR]The splash images for wonders do not require transparency, so if you value a file size, and if you can live with very small quality loss (mostly not noticeable for others but you) in comparison to original image then stick with DXT1. But if you are really an artist concerned above all about highest quality, anywhere, anytime, then choose ARGB 8888 here. Though bear in mind that in the best quality/file size ratio contest, DXT1 file takes the first spot by a great margin
The "worst" scenario is when an image is saved with mip maps as this feature is not needed here at all, and provide no benefits but drawbacks by increasing the file size.
MAPS (COLOR, ALPHA/TRANSPARENCY, GRADIENT, GLOW)
COLOR MAP -
your base image. It contains the actual graphic (all those colors, shapes, gradients, and glow-like effects). Without the color map as a base no other map works alone by itself.
ALPHA (overall info, and as alpha channel in color map file) -
In short, alpha means transparency. Alpha, most of the time is just a black and white image of the same dimensions as color map. Though sometimes it can contain shades of gray as well. It defines what parts of color map image will be visible/hidden in game, and/or what parts will be partially visible.
And reffering to alpha as channel, means that the alpha image is stored (saved) in the same file as color map.
To put it in the simplest way what each colour of alpha map does, we can say: "black conceals, white reveals".
This means that if you have color map:
1. with alpha channel all white, then the whole image will be fully visible in game;
2. with alpha channel all black, then the whole image will not be visible in game;
3. where some parts of alpha channel are black, and some are white, then those that are black won't be visible while those white will be;
4. where some portions of alpha are gray, then those parts will be partially visible (in other word transparent), and the background graphic may be noticeable under the image - the level of transparency is determined by the value of gray in alpha channel: darker gray = less image visible, more background; lighter gray = more image visible, less background.
Of course, while these are all possible variants, not every single one makes that much of a sense
First one for example, means that alpha is not needed for such image at all, thus the image could be saved without alpha channel information (as DXT1). Second one, for instance, produces no visible image at all In the game third, and fourth variants are commonly used.ALPHA (as separate dds file)
Actually these files are not technically different that normal color maps. They just were named like that by developers. The main difference is that base color map (called in game's code and in dds file names as Icon Atlas) is used everywhere in menus where such icon needs to be displayed, and Alpha Atlases are used in some particular places as equivalent of that color map. The reason being that Icon Atlases are presented in unaltered versions, while Alpha Atlases usually have some colour schemes applied on them by the game.
The best examples to explain how this all works are logos for sponsors.
As Icon Atlases files, those logos/icons are usually square images with simple shapes/symbols in the middle, simple background, and a thin frame, all painted in a few colours, and with white alpha channel with thin black frame to remove excessive pixels.
And as Alpha Atlases files they are usually represented by only the sponsor's logo (without background and frame). The logo is usually in solid white colour, and alpha channel all black with the shape of that logo in white, usually with gradient-like features (darker at top, lighter at bottom).
To make the long story short: Icon Atlases are used everywhere and for main instance of particular sponsor, but Alpha Atlases are used as icons for other remaining instances of the same sponsor (if you have such situation in your game) - and the game applies different colours on them.
GRADIENT & GLOW MAPS
Well, to make the long story short - I've carried out some tests and... these features just don't seem to work at all. While references to glow and gradient maps are present in the game's code, and while such dds files do exists in game's archives, the point is that no matter what content those map files have, the changes are not reflected in game at all.
I have no idea whether it's something that needs to be fixed in any patch, or rather some sort of leftover that wasn't properly removed. My advice for modders here is not to use these features at all for now - there's no point spending time on something that doesn't work
COMMON GOOD OPTIMIZATION PRACTICES FOR UI IMAGES:
1. Make sure to save your images as DDS files without MIP maps (saves some space on disk).
MIP maps are just smaller versions of your original image inside of the same file. Pregenerated MIP maps can be helpful for actual in-game objects (models, terrain, etc.) where you can zoom in/out. For UI images which are usually of the same "static" size these are not needed to be present in actual image files.
2. If your mod contains only a few icons (or just one), don't use original big template unmodified. Just simply crop it to the size which is enough for the number of icons you have. For instance: if you have one icon only, and you use original template (8 rows x 8 cols), when you save this, the actual file on disk will be 64 times larger that that with the proper cropping applied - just to put things into a certain perspective: one badly optimized mod that uses ARGB 8888 compression for images and which adds only one icon on 8x8 original template, can be larger in size on disk and use more VRAM, than many dozens of properly made mods
3. If you use DXT1/DXT5 compressions instead of ARGB 8888 in your workflow, then don't use DXT5 for images that don't require transparency (loading screens, wonder splashes). You save the size of such files by half this way.
OTHER RANDOM TIPS:
Photoshop #1
If you can't save those small images/icons with odd dimensions as DDS with DXT1/DXT5 compression then just resize canvas size 4 times:
- from menu: Image -> Canvas Size... and then:
- change pixels to percent
- in width/height type 400
- uncheck relative
- as anchor select top left square
- press OK and you can now save.
Photoshop #2
If you want to create wonder splash screen for you mod, and want to save it as DXT1, then use dimensions of 880x660 pixels instead of original 875x656.
Sponsor icons #1
To have all icons properly displayed in game make sure that you have present in your mod icons with following dimensions:
Icon Atlases - 128x128, 64x64, 45x45, 32x32
Alpha Atlases - 48x48, 32x32, 24x24
The other dimensions are very likely not used, but to be on the "safe side" you may want to include them. But focus mainly on these mentioned as these are definitely used.
DDS viewer #1
You can preview dds file here and there, but to me one of the best viewers is that which you can download from Nvidia's site - Windows Texture Viewer.
Useful keyboard shortcuts:
R, G, B - enables/disabled display of Red, Green, Blue channel
A - enables/disables alpha channel (useful when RGB channels are enabled, helps to see what should be visible and what not)
U - switches between composite RGB view and alpha channel map
