Paintshop Pro: Creating Inventory Icons

Overview

This tutorial will show you the steps involved to create custom menu icons for your mods that display in the inventory screen.

Required Tools

• Paint Shop Pro 9
• DDS Converter 2
• NIFSkope 0.9.8

Step 1 - Plan Your Screenshot

• The manner in which you capture the screenshot determines how easy and how well the icon looks later on.
• If you take an in-game screenshot of a weapon in the grass, you're going to have trouble erasing all image data other than the sword later.
• If you take an screenshot of a weapon at an odd angle or only partially visible, the icon might not represent the actual object very well. Look at how others show similar items as icons and figure out what you like best.
• I like to use NIFSkope because I can scale the image to the size needed, rotate to the best angle and easily remove the background.
• The end-result will be a graphic image in the size of 64x64 pixels.
• That's pretty small so you'll need to make some choices.
• For this example, I'll use the Dragonbone sword that is included in the Dragonbone Armor Set that I uploaded.
• It is a long and slender object. It wouldn't be wise to display this vertically since we can fit more of the object at a 45 degree angle.
• It would be better to get more detail at the hilt rather than trying to fit the entire object inside the 64x64 frame.
• Therefore, we will need a screenshot of the sword at a 45 degree angle and sized to fit about 1/2 of the sword in a 64x64 frame.

Step 2 - Take Screenshot of Your Object

1. Open NIFSkope, load the NIF file and position the item according to plan.
2. From the menu, click Render and make sure everything but Perspective is unchecked.
3. It would also be a good idea to set the background color to something that isn't in the object or at least on the outer edges (such as bright green/red/blue). From the menu click Render, Settings and select a background color and close the dialog box.
4. Use your wheel button on your mouse to set the correct zoom level. You're trying to get the object correctly sized to fit in 64 pixels without resizing too much to avoid distortion problems.
5. Start Paint Shop Pro, press Shift + C to begin screen capture. Once the NIFSkope window is visible, right-click somewhere and the left-click and drag a box around the object to capture the area. An alternative is to simply press Print Screen to capture the entire desktop into memory and then just paste the image in the graphics editor.
6. Save your image as a Paint Shop Pro Image (.pspimage)

Step 3 - Prep Your Screenshot

1. Open Paint Shop Pro and then open your screenshot.
2. In the layer window, right click the layer called Background and select Promote Background Layer.
3. Select the Magic Wand Tool and set tolerance to 0, click anywhere on the background color and press the Delete button to remove the color. Repeat process for any remaining background until only the object remains.
4. Use the Crop Tool (R) and make it into a perfect square. If the image is smaller than 64x64 or larger than 100x100, you're not zoomed in properly, adjust in NIFSkope and try again.
5. If your image is close enough to 64x64, click Image, Resize and set it to 64x64 and make sure the image did not distort too badly.
6. Use the Magic Wand Tool and select the background, if you have to, hold the Shift key down to select all background pieces.
7. From the menu, click Selections, Invert. This basically changes the selection to the image and not the background.
8. From the menu, click Selections, Load/Save Selection, Save Selection to Alpha Channel.
9. Change Selection #1 to Alpha and click Save.
10. From the menu, click File, Save As and save the image as a Paint Shop Pro (.pspimage). This is your Original Source that you can go back to and make changes.
11. From the menu, click File, Save Copy As and save the image as a Photoshop (.psd).

Step 4 - Convert Image to DDS Texture

1. Start DDS Converter 2
   
2. Change Input Format to Photoshop (*.psd)
   
3. Change Output Format to DirectDraw Surface (*.dds)
   
4. Click the Options button, set the following and click OK:
   
   • DXTc format: DXT3
     
   • Uncheck: Build mipmaps
     
   • Check: Save alpha (if any)
     
5. Browse to your image folder and double-click the .psd file. It will take about 1 or 2 seconds to convert the file to .DDS format.
   
6. The .DDS file should have been created in the same directory where the .psd file resides.
   

Step 5 - Attach Icon to Your Object

1. Start the Construction Set and load your mod.
   
2. Find your object and double-click on it.
   
3. Click the Icon button and browse to the new .DDS icon and select it.
   
4. The icon should now display perfectly in the editor without any error messages (unlike other .DDS creation methods).>

See Also

• Icons

Similar tutorials using different tools:
How To Create Menu Icons using GIMP
How To Create Menu Icons using Adobe Photoshop

Source: LHammonds Web Site