Difference between revisions of "Paintshop Pro: Creating Inventory Icons"

Jump to navigation Jump to search
m
Formatting updates
imported>Qazaaq
m (changed links to internal)
imported>Lhammonds
m (Formatting updates)
Line 1: Line 1:
==Overview==
==Overview==
This tutorial will show you the steps involved to create custom menu icons for your mods that display in the inventory screen.
This tutorial will show you the steps involved to create custom menu icons for your mods that display in the inventory screen.


This tutorial uses the following software:
'''Created by''': LHammonds<br>
'''Date Last Modified''': 02:05, 28 July 2007 (EDT)<br>
'''Last Modified by''': [[User:Lhammonds|LHammonds]]<br>


==Required Tools==
* Paint Shop Pro 9
* Paint Shop Pro 9
* DDS Converter 2
* DDS Converter 2
Line 10: Line 12:


==Step 1 - Plan Your Screenshot==
==Step 1 - Plan Your Screenshot==
* The manner in which you capture the screenshot determines how easy and how well the icon looks later on.
* 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 in-game screenshot of a weapon in the grass, you're going to have trouble erasing all image data other than the sword later.
Line 23: Line 24:


==Step 2 - Take Screenshot of Your Object==
==Step 2 - Take Screenshot of Your Object==
 
# Open NIFSkope, load the NIF file and position the item according to plan.
1. Open NIFSkope, load the NIF file and position the item according to plan.<br>
# From the menu, click Render and make sure everything but '''Perspective''' is unchecked.
2. From the menu, click Render and make sure everything but '''Perspective''' is unchecked.<br>
# 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.
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.<br>
# 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.
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.<br>
# 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.
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.<br>
# Save your image as a Paint Shop Pro Image (.pspimage)
6. Save your image as a Paint Shop Pro Image (.pspimage)<br>


==Step 3 - Prep Your Screenshot==
==Step 3 - Prep Your Screenshot==
 
# Open Paint Shop Pro and then open your screenshot.
1. Open Paint Shop Pro and then open your screenshot.<br>
# In the layer window, right click the layer called '''Background''' and select '''Promote Background Layer'''.
2. In the layer window, right click the layer called '''Background''' and select '''Promote Background Layer'''.<br>
# 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.
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.<br>
# 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.
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.<br>
# 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.
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.<br>
# Use the Magic Wand Tool and select the background, if you have to, hold the '''Shift''' key down to select all background pieces.
6. Use the Magic Wand Tool and select the background, if you have to, hold the '''Shift''' key down to select all background pieces.<br>
# From the menu, click Selections, Invert. This basically changes the selection to the image and not the background.
7. From the menu, click Selections, Invert. This basically changes the selection to the image and not the background.<br>
# From the menu, click Selections, Load/Save Selection, Save Selection to Alpha Channel.
8. From the menu, click Selections, Load/Save Selection, Save Selection to Alpha Channel.<br>
# Change '''Selection #1''' to '''Alpha''' and click '''Save'''.
9. Change '''Selection #1''' to '''Alpha''' and click '''Save'''.<br>
# 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.
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.<br>
# From the menu, click File, Save Copy As and save the image as a '''Photoshop (.psd)'''.
11. From the menu, click File, Save Copy As and save the image as a '''Photoshop (.psd)'''.<br>


==Step 4 - Convert Image to DDS Texture==
==Step 4 - Convert Image to DDS Texture==
 
# Start DDS Converter 2<br>
1. Start DDS Converter 2<br>
# Change Input Format to '''Photoshop (*.psd)'''<br>
2. Change Input Format to '''Photoshop (*.psd)'''<br>
# Change Output Format to '''DirectDraw Surface (*.dds)'''<br>
3. Change Output Format to '''DirectDraw Surface (*.dds)'''<br>
# Click the Options button, set the following and click '''OK''':<br>
4. Click the Options button, set the following and click '''OK''':<br>
#* DXTc format: '''DXT3'''<br>
 
#* '''Uncheck''': Build mipmaps<br>
DXTc format: '''DXT3'''<br>
#* '''Check''': Save alpha (if any)<br>
'''Uncheck''': Build mipmaps<br>
# 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.<br>
'''Check''': Save alpha (if any)<br>
# The .DDS file should have been created in the same directory where the .psd file resides.<br>
 
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.<br>
6. The .DDS file should have been created in the same directory where the .psd file resides.<br>


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


Similar tutorials using different tools:<br>
Similar tutorials using different tools:<br>
Anonymous user

Navigation menu