Post tutorial RSS Changing the crosshair and portalgun effects to match your newly colored portals

So you've gone and recolored your portals in Portal. How nice. Here's the real question: Can you change the crosshair and the glowing effects on the portalgun to match them? That's where this tutorial comes in.

Posted by on - Intermediate UI/HUD

Note: For all I know, this is only compatible for DX9 and above. It may or may not work with DX8, I have no guaruntee.
Note: If you haven't already changed one or both of your portal colors and wish to, WinstonSmith has an amazing tutorial for this, I recommend checking it out.

This tutorial is actually very simple, it only requires you to edit a few files. I marked it as Intermediate just in case this seems harder to some of you (which it shouldn't, but I'm taking precautions).

First you will need GCFScape and VTFEdit. These tools are a must-have for every modder out there as they provide a very simple solution to the most basic problems which trouble us all. This tutorial assumes you are using Steam to run Portal or a mod for Portal and some image editing software like The GIMP.

Ok, let's begin. Open up GCFScape and open the portal_contect.gcf file. It should be located in your C:\Program Files (x86)\Steam\steamapps folder (Windows 7). Here you will extract three files. These files are:


These are .vtf files, which are image files specially made for VALVe games. You can extract these to your Desktop, we will put them in the correct folders AFTER we edit them. Do not worry about the .vmt files, we will make our own as it is more efficient.

Alright, open up all three of your extracted .vtf files using VTFEdit. For each one, click File->Export and export as a .png file with the same name as before. Make sure to export them to your Desktop! Next, open your three new .png files using GIMP (Any image editing program will do, but this tutorial explains how to do it in GIMP). For the orangelight.png and the bluelight.png, just change the entire Hue of each image via Colors->Hue-Saturation to whatever your two portal colors are. Please note that the bluelight.png will correspond to the primary portal being fired, and the orangelight.png will correspond to the secondary portal being fired. Just save those, we'll deal with them in a second.

Now open your portal_crosshairs.png with GIMP. It should have 6 boxes in it. The 3rd and 4th boxes should look exactly the same as the 1st and 2nd boxes EXCEPT that they are filled in. Change these filled-in parts to the colors of your portals. The 3rd box corresponds to your primary portal, and the 4th box corresponds to your secondary portal. Save this afterwards.

Open up VTFEdit and import your newly-edited .png files. Only import one at a time, or else VTFEdit will save them as one .vtf file with multple frames!!! When a window pops up called "VTF Options", uncheck "Generate Mipmaps" under the "General" tab, then hit OK. Wait a few seconds for your picture to show up, then save these files over your old ones.

Now it is time to make some .vmt files! VMT files are what manipulate the .vtf files and make them usable materials for VALVe games. You can make these in Notepad OR VTFEdit, but VTFEdit is more efficient to use for this, as Notepad can make .vmt files, but not edit them again.
Open up VTFEdit and go to File->New. Erase anything that comes up and replace it with:

"$spriteorientation" "vp_parallel"
"$spriteorigin" "[ 0.50 0.50 ]"
"$baseTexture" "sprites\hud/portal_crosshairs"
"$vertexcolor" "0"
"$vertexalpha" "0"
"$translucent" "1"
"$ignorez" "1"

Save this to your Desktop as portal_crosshairs.vmt.Now make another new .vmt file, delete everything that comes up and replace it with:

"$basetexture" "sprites/portalgun_effects"
"$additive" 1
"$vertexcolor" 0
"$vertexalpha" 0

Save this one to your Desktop as portalgun_effects.vmt.
Note: The portalgun_effects.vmt is the material for the light on the inside of the portalgun tube. So far, I don't know how to change the colors for this, so this .vmt replacement makes it stay glowing white, no matter what.

Now, finally, to put these files in their proper places! Go to your steamapps folder and find Portal OR your mod (Portal should be under your user directory folder and your mod would be under the sourcemods folder, but you should know that already). Inside the Portal (or mod) folder, make a folder called materials if there isn't one already. Inside there, make another folder called sprites. Put all your .vtf and .vmt files that you just made in there (you can delete those .png files you made earlier, you won't need them again). Then make another folder called hud inside the sprites folder. Place your portal_crosshairs.vmt and portal_crosshairs.vtf files inside the hud folder.

Now Portal or you Portal mod is all set! Run the game and see how your new effects look!
Thanks for reading my tutorial! ^-^ I hope it was helpful!

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.