WisePSPTrans: Creating Source materials with transparency in PSP

From Valve Developer Community
Jump to navigation Jump to search


This tutorial was originally created by wisemx. It was originally posted on SDKnuts.net.

(Porter's note: Paint Shop Pro isn't free. I'm not about to buy it to verify that a tutorial from 2006 is still accurate to the software 12 years later.)

Example file

Notes:
1) Paint Shop Pro is a very popular product.

2) This article is intended for those who own PSP but don't own Photoshop.

3) The methods mentioned here work in JASC PSP versions 8 and 9, plus the outstanding new version 10 from Corel.
(Corel purchased PSP form JASC)

To simplify the entire process we need Nem’s VTF Plug-in.

Note: You should also install VTFLib but it isn’t absolutely needed for this.

Install the VTF Plug-in, make sure you use your plug-in folder for PSP, you can also add a new plug-in folder in the PSP options:
1) File, Preferences, File Locations.

2) File types: Plug-ins

3) Specify your folders on the right side, Plug-in file folders.

4) Make sure you have a checkmark in Enable Plug-ins.

5) Exit PSP and re-start it, your new Plug-ins should be loaded and ready for service.

The images and settings I show here will be taken form version 10 but they are similar in versions 8 and 9.

Having this plug-in installed allows you to save your image directly to Valve’s VTF image format.
With VTFLib installed you can easily create VMT files for your new images.

These two tools will save you a lot of time and are a very big help.

Note: Your Source image is the VTF and so the Source engine knows what properties you want for the image you need to create the VMT which is simply a text file with the image name and VMT file extension.
Image: imagename.vtf
Data: imagename.vmt

More detail.

You may notice the Creating Materials article above mentions creating Alpha Channels in TGA files to create your VTF with transparency.
We are going to skip that step because the VTF plug-in is going to create the new VTF directly from our new image.

For the rest of this article the methods used are for this specific example, you will need to experiment with other settings and properties, even image compression methods.

Step 1:
1) Create a new image in PSP, select black as the background color, make the image 512x512.

Note: Your image doesn't have to be 512x512 but it does have to be created to the power of 2, even dimensions.



2) Create a new Raster Layer. You can name it or let PSP name it, doesn’t mater.



3) Your 512x512 image looks the same but now has a new layer on the top of your original black layer, which is now the background and will be transparent.

4) Create your content on the new layer. You’ll need to select this content to create the Alpha Channel so keep that in mind.

5) The easiest way to illustrate this is with text, which can be converted to a Vector selection in PSP.

6) Use the Text tool to apply your text, doing it in a single text box will make the process easier because we can create the Vector object while the text is still selected, after you have created it.



7) The image above was created with the Text tool and as you can see it remains selected.
Now from the PSP File menu:
a. Click on Selections.



b. From Vector Object. (Ctrl+Shift+B)
c. Selections (again).
d. Load/Save Selection.
e. Save Selection to Alpha Channel.
f. Name this new Alpha Channel, alpha.



8) Now it’s time to create the VTF. Don’t worry about saving the layers, they’re going to be flattened but that’s fine, it’s the new Alpha Channel we created that will give us transparency.

9) From the PSP File menu, File, Save As. (F12)

10) Select VTF as the Save as type.

11) Give it a name, akgcredit.vtf, and click Save.
The file location doesn’t matter at this point but you should consider where your custom materials will be installed, for me it’s a folder named AKG so that’s where I’ll save the file to:
\half-life 2\hl2\materials\akg\ akgcredit.vtf

12) The options for the plug-in will show next but first PSP will give you a warning that your layers will be merged, this is fine, click Yes when you see the warning.

13) When the VTF Options dialog shows you have a lot of options to pick from, for this transparent image I’ll use these settings:
Template: Uncompressed Texture With Alpha
Format: BGRA8888 (Common Format)
Mipmap Filter: Box
Sharpen Filter: None (Leaven it on Soften if you want)
Flags to check, No Compression and Eight Bit Alpha.

14) Click OK.

Step 2:
1) Now that you’ve created the VTF its time to create the VMT for it.

2) If you’ve installed VTFLib go to the VTF file location and double-click on the file, it should open VTFEdit.
If not load VTFEdit and then load your VTF.

3) With your new VTF loaded into VTFEdit:
a. Click on Tools.
b. Create VMT File.
c. Make sure the folder is correct in Base Texture 1. akg/akgcredit



d. Under Options make sure Shader is LightmappedGeneric.
e. Add any keywords you want, i.e. akg will allow me to load all AKG materials in the Hammer Materials browser quickly.
f. Make sure Translucent is checked.



g. Click Create, Save then Close.

Step 3:
1) Close VTFEdit. Your VTF and VMT files should now be located in your custom materials folder and your VMT looks like this:
"LightmappedGeneric"
{
   "$basetexture" "akg/akgcredit"
   "%keywords" "akg"
   "$translucent" "1"
}

2) We need to add at least one line to that if the new material, with transparency, will be used as a Decal. "$decal" "1"
"LightmappedGeneric"
{
   "$basetexture" "akg/akgcredit"
   "%keywords" "akg"
   "$translucent" "1"
   "$decal" "1"
}

3) If your new material, with transparency, is meant to be used as a material instead of a decal add a Material Surface Property instead.
i.e. "$surfaceprop" "tile"

The default scale for your materials is 0.250, if you want you can change that scale by adding a line like this to your VMT: "$decalscale" "0.07"
This is handy for scaling a decal, such as a poster you place in a map.
Our final VMT looks like this:
"LightmappedGeneric"
{
   "$basetexture" "akg/akgcredit"
   "%keywords" "akg"
   "$translucent" "1"
   "$decal" "1"
   "$decalscale" "0.250"
}

You can edit this decal scale anytime you want, which is handy because you can preview the current scale in HL2, make a change to the VMT then reload the same test map in HL2 to see your new decal scale.

One of the things you’ll want to experiment with is image compression.
In this illustration the image I created without compression is 1.3 MB in size.
Using a generic compression method sacrificed some of the quality and did not result in a smaller file size.
You should experiment with your export options each time.

Shown below is the image created in PSP viewed from within HL2.



The AKG Credits decal is the file download below.
To use this in a map alter the material path in the VMT or simply place the two files in:
\materials\akg\
…For whichever HL2 mod you’re creating the map for.