Hey, thanks for taking a look at this guide or just coming to check out what's up! Here I'll be going into a (hopefully) in-depth explanation on how I go about creating the VGUI elements I use in my survivor add-ons; The latest of which being my Ace Trainer add-on, which makes good use of these techniques with a few personal twists. This will just cover how to get things looking as passable as possible, anything different to get a closer-to-vanilla look or changes you may want is entirely up to you! Now, without further ado, let's get started, shall we?

If you wish to watch the alternative video tutorials I've posted, simply go to them from the sidebar of the guide.

To get started, you'll need an image editor/manipulator, such as GIMP or Adobe Photoshop, though this tutorial is suited for GIMP users & may produce slightly varied results for Photoshop users. GIMP can be found online for free, while Photoshop can be found & obtained however suits your needs, I don't judge.

You'll also need the XCF/PSD files[puu.sh] I use for these, as they'll make your life a little easier. If you don't have access to this guide for whatever reason or so, some layers contain instructions as their names to help you out a little. There will also be alternative video guides available to watch, but they may be slightly outdated in comparison to the written guide.

(This is referred to as lobbyicon.xcf / psd.)

You'll have these 5 layers when you open up this file;
Border Layer, which is self-explanatory; This will not be moved.
Coloring, which contains instructions on how it's used & what color it uses; This tints the character image a bit to yellow/beige.
Character Layer, which is where your character's image should be. Often you'll only use this layer as a placement reference.
Outline, which also contains instructions on how to use it; Self-explanatory.
Background, which you can move around as you please to get some variety amongst a group of survivors or such.







To start off, grab your desired image of choice. Whether it be official art, fanart, or just a screenshot of the model, make sure the background is transparent. Throw it into the image & resize it as needed to fit nicely into the panel, usually portraying the character from the waist upwards.


From here, we'll merge it down into the Character Layer. Afterwards, we'll right click the layer & select "Alpha to selection". Afterwards, select the Coloring layer & open the color selection dialog.

In the HTML notation, paste the following [ bfc38d ], then click OK. (This will also be in the layer's name at the end.
After that's done, just fill in the selection with the paint bucket to achieve the desired effect. (You can also choose not to do this if you desire!)


Now, we'll repeat the "Alpha to selection" step on the Character Layer; This time, we'll select the Outline layer. From the toolbar at the top, go to Select > Grow; Grow by 2 or 3, whichever looks better to you. After, simply fill in with black. If you did things right, you should be done with the following look!


From here, you can move the Background layer wherever you want until you're satisifed. Afterwards, export the file & it's ready for conversion to VTF for use!

(This is referred to as lobbyiconl4d1.xcf / psd.)

You'll have these 5 layers when you open up this file;
Character Layer, which is where your character's image should be. Often you'll only use this layer as a placement reference.
Outline, which contains instructions on how to use it; Self-explanatory.
Background Overlay (+#1), Just overlays for the background that wouldn't work as intended if all merged together; Don't move these.
Background, which you can move around as you please to get some variety amongst a group of survivors or such.










To start off this much more simple icon, you'll use your desired choice of image & move/resize it as need be. Once done, merge it into the Character Layer.


Afterwards, right click the Character Layer & select "Alpha to selection". Move to the Outline layer; Then, in the top toolbar, choose Select > Grow. Then, grow the selection by 2 or 3, your choice.
Afterwards, fill in the selection with the following: [ 80a4b0 ] (This is also in the layer name if needed.)


Once you're done, you should have the following look:

From here, you can move the Background layer as you so desire!

(This is referred to as survivorpanel.xcf / psd.)

This icon has a bit more of a complex setup to it, but it's nothing too bad. I mean, that's what this guide is here for, isn't it?

You'll have these 6 layers when you open up this file;
Border, which is self-explanatory; This will not be moved.
Character Color, which contains instructions on how it's used; This tints the character image a bit to yellow/beige.
Character Contrast, which contains more instructions on how it's used; This gives the character image a better contrasted look
Character, which is where your character's image should be. Often you'll only use this layer as a placement reference.
Outline, which also contains instructions on how to use it; Self-explanatory.
Background, which is self-explanatory; Also not to be moved.









Before we do anything here, you'll want to open up your model in Half-Life Model Viewer(HLMV). If everything's good, the model should load with no problems. Firstly, in the top toolbar, choose Options > Background Color, Then change the color to something that SEVERELY contrasts with your model, if possible. In Segamin's case, I chose green.


For the L4D2 survivors, I personally go into the Sequence tab, & change the first sequence, typically your reference, to the calm frying pan idle animation, as the shoulders are relaxed & mostly out of the way, which is what we're aiming for.


From here, you can zoom in by holding down RMB, MOUSE2, Right Click, etc to get up & personal with the character's face. Try to get a good angle by rotating the model so that the shoulders are mostly out of the way, the character is facing you, & their head is upright. (You can also mess around with these sliders[puu.sh] to try & pose them better!)
Once you have a satisfactory screencap, go back to GIMP. In a new image, or this image, crop out most of the body, leaving the head & neck visible. This is all we'll need. Then, use Select by Color () to remove the background.
Using this image, paste it in on a new layer, then resize & move it as desirable. You typically just want the head visible, perhaps with a little of the neck showing. Once done, merge it into the Character layer.


With the Character layer selected, go to the top toolbar, then Colors > Hue-Saturation, then bring the Saturation slider down to the farthest left it can go, or to a value of -100.


This'll make the image itself monochrome, while our layers above it keep a yellow tint on it.


From here, right click the Character layer & select "Alpha to Selection". Then, move to the Character Contrast layer. Invert your selection with CTRL+i, then erase everything within the selection. With this selection still active, move to the Character Color layer, & erase again. Now, the Character Color/Contrast layers should only be on top of the character image, rather than going onto the background.


Moving to the Outline layer, press CTRL+i once more to invert your selection again, then go to the top toolbar & choose Select > Grow to grow the selection by 1. Afterwards, fill in the selection twice with pure black. Once you're all finished, your final product should look something like so!

(This is referred to as survivorpanell4d1.xcf / psd.)


You'll have these 3 layers when you open up this file;
Character, which is where your character's image should be. Often you'll only use this layer as a placement reference.
Outline, which contains instructions on how to use it; Self-explanatory.
Background, which is also self-explanatory; Can be moved as desired.















Before anything in GIMP, we'll be visiting Half-Life Model Viewer(HLMV) with the custom model being used to get the image we need for this icon. If everything's fine & dandy, the model should load with no problems. Firstly, in the top toolbar, choose Options > Background Color, Then change the color to something that SEVERELY contrasts with your model's colors, if possible. In Segami's case, I chose green.


For the L4D1 survivors, I always personally go into the Sequence tab, & change the first sequence, typically your reference, to the calm frying pan idle animation, as the shoulders are relaxed & mostly out of the way, which is what we're aiming for.


From here, you can zoom in by holding down RMB, MOUSE2, Right Click, etc to get up & personal with the character's face. Try to get a good angle by rotating the model so that the shoulders are mostly out of the way, the character is facing to the left of the screen, & that their head is upright. (You can also mess around with these sliders[puu.sh] to try get a better pose to use!)
Once you have a satisfactory screencap, go back to GIMP. In a new image, or this image, crop out most of the body, leaving the head & neck visible. This is all we'll need. Then, use Select by Color () to remove the background.
Using this image, paste it in on a new layer, then resize & move it as desirable. Typically, you want the head visible, but not taking up all of the image space, possibly with the neck slightly in view, too. Once done, merge it into the Character layer.


With the Character layer selected, go to the top toolbar, then Colors > Hue-Saturation, then bring the Saturation slider down to the farthest left it can go, or to a value of -100.


This'll make the image itself monochrome, as we need it. From here, you'll then go to Colors > Brightness-Contrast, then mess around freely with the two sliders until you get a nice contrast effect, varying from model to model. (Or image to image!)


From this point, right click the Character layer & select "Alpha to Selection". Then, move to the Outline layer & choose Select > Grow to grow the selection by 1. Once you've done that, fill in the selection twice with pure white. Once you've done that, you should have a finished product; move the Background layer as you see fit after!

(This is referred to as incap_panel.xcf / psd.)


You'll have these 3 layers when you open up this file;
Character, which is where your character's image should be. Often you'll only use this layer as a placement reference.
Outline, which contains instructions on how to use it; Self-explanatory.
Panel, which is the actual panel shown when downed. Do not move.















Before we do anything at all in GIMP, we'll be going over to Half-Life Model Viewer(HLMV) with our custom model to get them in an incapacitated state. If your model was done correctly, then everything should load up fine. In the top toolbar, choose Options > Background Color, Then change the color to something that SEVERELY contrasts with your model's colors, if manageable. In Hatsumi's case, I chose green.


For the incapacitation image, you'll need to go to the Sequence tab, then change the first sequence box to Idle_Incap_Elites. (You can find this sequence around the Ladder animations.) This'll put your model into the downed animation they display when equipped with two pistols. If you want to, you can use the single-handed animation, but for the sake of fitting in as much as possible with Vanilla/Official L4D2, we'll use this.
From here, go to the top toolbar & choose File > Load Weapon; You should be greeted with a box asking you to open a model file. Navigate to w_models/weapons/w_pistol_a_dual.mdl. (w_models/weapons/w_pistol_a.mdl for those using the single-handed animation.) This should equip our survivor with the twin pistols, completing the look we need. (You can also mess around with these sliders[puu.sh] to help you get a better pose.)


From here, rotate the survivor in a practical way that'll allow for ease of use in the panel itself; Hatsumi's long ponytail will create problems later on, so I've posed her in a way that mostly obscures it, for example. Once you're all set, take a screencap & move into GIMP. In a new image, or in the same image, paste the screencap & remove the background with the Select by Color tool.() With your image ready, go to the top toolbar as usual, then Layer > Transform > Flip Horizontally. With asymmetrical designs, this may look odd, but this is the direction valve decided on, despite the way they animated the sequence...


Now, with our image ready, we can move on. Resize, position, & rotate the image as needed, keeping most of the image away from the healthbars if possible. The ideal size & position for this looks something like so:


After you're done with that, merge the image down into the Character layer. Afterwards, go to the top toolbar, then Colors > Hue-Saturation. Bring the Saturation slider down to the farthest left it can go, or to a value of -100.


From here, you'll then go to Colors > Brightness-Contrast, then mess around freely with the two sliders until you get a nice contrast effect, varying from model to model.


From this point, right click the Character layer & select "Alpha to Selection". Then, move to the Outline layer & choose Select > Grow to grow the selection by 1. Once you've done that, fill in the selection once or twice, depending on your tastes, with the same color as the panel, typically [ 832900 ]. After that, right click the Panel layer & select "Alpha to Selection". Move back to the Outline layer, then erase. After that, you should be all set to go!


Be careful not to crop the image at all, this is the resolution it should be at!

I hope that this guide has served you well enough to be on your way to making some snazzy looking images/icons yourself; These methods have served me well overtime & I've still got some improvements to make myself!

With everything in this guide done right, you should have results such as these!

• With the Lobby & Team Panel icons, I've always used Normal & Alpha formats DXT1 at High compression.
  
• With the Incapacitated image, I always use Normal & Alpha formats DXT3, also at High compression.
  
• The backgrounds for everything were done from scratch, with the only thing not done by me are the general grunge templates. (Exception is the L4D1 panel's background, which is just a template anyway)
  
• This is my first time making a guide, sorry if there's too many/too few images, confusing wording/explanations, or things I may have forgotten to address!
  
• The icon for this guide, as well as the icon (& to an extent, the backdrop) for my Pokémon collection, were made using these very methods!

Lastly, I'm open to all comments, criticisms, or any suggested additions that anyone may have to offer me in regards to this guide; I'm all ears!

For those who don't like reading too much. Do excuse my voice.


Lobby icons:

In-game HUD (Team panel/incapacitated icons):
(If the embed isn't working, here's a link to the video instead.)
(Background Music)