Creating GUI Icons

From WiCWiki

Jump to: navigation, search

Creating GUI Icons

The engine gets all these small icon graphics from a large image (texture map) where all the icon art is placed with about 1-3 pixels apart. The GUI editor will then be used to specify where all these small images will be placed.


This is the GUI texture map for World In Conflict:

Image:ui_01.jpg


This image size is 800 x 800 pixels. The real size used in the game is 2048 x 2048 pixels.


To make a new icon, we will need to first make the art for that icon and then put it in the texture map. Let us make a new Request Icon.

Image:New_Icon.jpg


This is the icon art we want to put in the game. It does not matter what this graphic looks like. The only limitation is your subjective taste.


Next thing we do is add a new alpha layer. It is important to paint the Alpha 100% black where you want the image to be transparent, or else you will get all the black in the graphic to show in-game.

Image:New_Icon_alpha.jpg


This is our Alpha for this image. This will be put in the big Texture maps Alpha layer at the same spot as the actual graphic.

Lets put the graphic here:

Image:Here.jpg


And the alpha in the alpha layer:

Image:Here_Alpha.jpg


Now we have the art in place, lets save the texture map.


We will make 3 separate files for this to work and the name for this Texture Map is Ui_01


Ui_01.tga – (used by GUI editor) 32bit

Ui_01.dds - (high-end ui) 8,8,8,8 ARGB no mipmaps

Ui_01_v2.dds - (low-end ui) DXT5, no mipmaps


Get the .dds compression plug-in for Photoshop at www.nvidia.com


This is the basic step to make a new icon graphic in World In Conflict.

Personal tools
User Created Content