How to Recolor Portals (DX9 and Above) tutorial

How do you change the color of portals?

This is a question that has been asked of me a few times recently, so to provide not only an answer but a guide for future reference, I thought I'd write up a tutorial about it. In addition to explaining how to modify the portals themselves, I'll be giving a little bit of information about some of the under-the-hood workings of the Source engine. Please feel free to add comments, PM me, etc.; all feedback is welcome!

What are Portals?

Whenever you're modifying something--especially with the Source engine--it helps to understand what you're modifying. Portals are made of a few different components. There is the code aspect of the portal, which handles the movement of the player from one location to the other, the physics surrounding the portal, etc. Without the next two components, however, portals would simply be a hole in the wall. What surrounds the portal and produces the swirly effect (with the help of the last component) is a regular model, basically similar to a prop that you'd place. In fact, the name of the entity to place an AI-controlled portal is prop_portal. The model, however, would be invisible if it weren't for the texture that covers it. The final item that makes up a portal is a particle system. This generates the "swirling mist" effect in front of the portal and also handles the various "fizzle" effects. In this tutorial, we'll be modifying the texture and the particle system.

Step 1: Editing the Textures

Alright, a little more background on the textures first. There are two sets of textures for portals: one is used on machines that are running DirectX 8 or below graphics, and one (more detailed) is used on machines running DirectX 9 or higher. If you're simply changing your portals for your own enjoyment, you only have to modify the textures for your system. However, if you're distributing the modified portals in a mappack (see note at bottom of tutorial) or a Sourcemod, you should edit both sets to ensure everyone sees your fine work. Since I'm still trying to figure out how to modify the DX8 textures, we'll only cover the DX9 textures in this tutorial.
Down to business. Download a copy of VTFEdit if you don't already have it installed and navigate to "portal content.gcf" this file will reside, most often, in C:/Program Files/Steam/steamapps/. Once you've opened the GCF, find /portal/materials/models/portals/ and extract the files

--portal-blue-color.vtf
--portal-orange-color.vtf

to the same directory for your project. By this I mean extract it to C:/Program Files/Steam/steamapps//portal/portal/materials/models/portals/ if you're making a mappack and C:/Program Files/Steam/steamapps/sourcemods/{mod_name_here}/materials/models/portals/ if you're making a mod. Now open up the textures in your favorite image editing application. Look at the textures. They're 1 pixel tall and 256 pixels wide. The left side appears black (or possibly transparent), and the right side appears blue (or orange). You can do pretty much whatever you want, as long as the texture stays 256x1 pixels, but there are a few rules to keep in mind if you want your portals to look like VALVE's. First, the texture isn't actually black; the black represents transparency. So to change the color of the portals and have them look similar to VALVE's, create a 256px wide by 1px tall gradient that is completely transparent on the far left side and completely opaqe with whatever color you desire on the far right side. Save these as VTFs using whatever method you choose. If you've worked with the Source engine already, you will already have done this, because the first thing you learn in Source work is that you must save every twenty seconds to be safe.

Step 2: Editing the Particles

Now we're going to work a bit with particle systems (the mist and such around portals). First, extract "portals.pcf" from "portal content.gcf/portal/particles/" into the particles directory of Portal or your mod. To run the built-in particle editor that comes with Source games, add "-tools"--without the quotes-- to the end of the target of the shortcut for either Portal or your mod. Now run the shortcut, and when the game launches, you'll see something like

Now click File-->Open--> and navigate to the place where you extracted portals.pfc. Open it. There are several particle subsystems. Click on one of them, and it will open; it will look something like this.

Basically, go through all of the subsystems and find color values that are either blue or orange. They're green in the above screenshot because I've opened the edited particle system for Portal: Stay Inside. These correspond to the blue/orange mists surrounding the portals, and you can change them to whatever you want. Once you're done, click File-->Save and you can close the editor.

Finished Results

Here's an example of finished results; these are the portals being used in Portal:Stay Inside.

Wrapping Up

Well, that's just about it! I'll explain a bit about why I haven't done anything for DX8 portals. First, I apologize to those who are running DX8 systems for not covering it, but I'm still working on figuring out the textures. They're harder to modify than the DX9 ones, because they appear to have two different facets. In any case, the good news is that the process of modifying the DX8 particles is identical to the DX9 ones; just use portals_dx80.pcf instead of portals.pcf. If I can solve the DX8 texture issue, I'll certainly edit this tutorial. Good luck with modding and thanks for reading!

Best regards,
WinstonSmith