Custom Icons

From NWN2Wiki

Icons are 40 x 40 pixels, TGA files with an alpha channel to determine transparency. Please note that you must save TGA files with alpha channels as 32 bit. I also use the RLE compression option to lower file size.

Icons are used to denote classes, items, spells, feats and domains.

Some icons have a version with and without a border, classes are an example of this.

I use photoshop to edit icons, but i am sure this applies to other programs as well. I am using Photoshop CS2 on a mac, but i will translate the shortcuts for windows users who are more likely to read this.

[edit] Setting up a working area

• I start off with a file from the game, mainly to ensure the border or frame matches. You can find the icons in the c:\Program Files\Atari\Neverwinter Nights 2\UI\Default\images\icons and c:\Program Files\Atari\Neverwinter Nights 2\UI\Default\images\icons_x1. The file names make it pretty clear which icons are for what. After i find one i want to use as a starting point i open it in photoshop.

• The alpha channel is hard to work with as it is, so i want to change it to photoshops version. I go to the "Layers" Menu and select "New..." -> "Layer from Background" and hit ok.

• I then open up the "Channels Palette" usually found in the same set of tabs as the layers palette or from the "window" menu. I then Ctrl-Click the alpha channel to make it a selection, by doing this the whiter something is the more selected it is. Then i go to the selection menu and choose select inverse. Then ensure you are back on the combined RGB channels, go to the layers palette and make sure the layer is selected and hit delete. Now the image is transparent just like the alpha channel is.

• 40x40 pixels is too small an image to really do illustration in, so i upsample the image to 400x400 pixels in size.

• The finished Working Area File, the white and gray grid indicates transparent portions of the image.

[edit] A Class Icon and how to save it

This is the Icon for the Triadic Knight i am working on. Class icons are unique in that they include 2 files, one with a border, and one with just the icon and no border. You can get a starting border from any of the class icon files, and when i have a border i always designate it as layer 0. I generally work with a lot of layers, layer styles and the other features of photoshop. Remember that i work 10 times normal size, and the finished icon is only going to be 40 x 40. You have to do the following twice, once for the Bordered file, and once for the UnBordered.

• 1. Save the photoshop file. Make sure you don't save it again after this.

• 2. Hide the border layer. Then go to the layer palette and choose merge visible. This makes the icon a single layer and gives you 2 layers in your file.

• 3. Set up the alpha channel. Go to the channel palette. If you started with an icon file like i suggested there should be a layer called "Alpha 1", if not choose new layer. Select this channel and then "Select All" and fill it with black. ( Easiest way is to set the foreground and background colors to black and white, hitting X flip flops which is which, and hitting alt-delete to fill with the foreground color, or delete to fill with the background color. Play with this a bit as you'll be doing it a lot. )

• 4. Make a selection based on the transparency. Do this in the layers palette.

Bordered: Make the Border "Layer 0" Visible and Ctrl Click it which selects almost everything ( except a single pixel in each corner).

UnBordered:Ctrl-Click the actual class artwork layer, which results in a selection of just the artwork.

• 5. Go back to the channels palette, click the alpha channel, and fill with white. Your alpha channel is now set up.

• 6. With the layers palette, Make a layer and fill it with black, and put it at the bottom.

• 7. Image Sizing...

Bordered: Image Size 40 x 40 pixels.

UnBordered: Canvas Size - 358 pixels by 358 pixels to zoom in on the image. Then Image Size 40 x 40 pixels.

• 8. Unsharp Mask- Select the class icon layer and then go to the filters menu and select unsharp mask. 73%, Radius 2 pixels, Threshold 1.

• 9. Flatten Image

• 10. Save as TGA, 32 bit, RLE compression, with alpha channel.

• 11. Close the file, making sure not to save over the original photoshop file.