Team Fortress 2

Team Fortress 2

411 ratings
How To Make 1024x1020 Sprays (Web Converter)
By GreenSwede
This guide will show you how to make high definition 1024x1020 resolution sprays for use in TF2 (and other Source games) with the help of a handy online VTF converter, without going above the 512 KB file size limit!
4
   
Award
Favorite
Favorited
Unfavorite
"This shouldn't be possible..."
You might be asking yourself how a VTF spray can go beyond a 512x512 resolution while still being less than 512 KB big. Well to put it simply, Mishcatt[github.com] made an online converter that allows you to do just that. How? I'm not an expert, but thanks to clever JavaScript coding it's possible to forcefully save any texture file (.VTF file) with any given resolution. In addition to that, this converter makes use of "DXT1 (One-bit alpha)" compression to cleverly reduce the file size.

You might also be asking yourself why the resolution only goes up to 1024x1020 instead of 1024x1024. Shouldn't textures always have to be a power of 2 (128x128, 256x256, 512x512)?
Well, this online converter as mentioned above somehow breaks that rule. VTF files which are made with this online converter will have a file size of approximately 510 KB. If you're a JavaScript freak then you can inspect the source code of the JavaScript file used in the website for a better understanding.

TL;DR let's just say magic is involved.
"but i want to do this manually using tools!"
You're in luck as I have also made a NEW guide which guides you through how to make sprays using some mod tools. Be advised that the color may have more artifacts when using the webpage, so handling the conversion manually is usually recommended if you care about those things. The exact cause for this is unknown, but converting the image from a DDS file to VTF manually generally gives better results based on my own testing. Don't take my word for it though, your results may vary depending on source image used.
https://steamhost.cn/steamcommunity_com/sharedfiles/filedetails/?id=1733409182
How To Use The Converter
Using the online converter is simple.



Is the website down? You can then download the website files from the Internet Archive. I have downloaded the website using the Wayback Machine Downloader[github.com] and you can access the files here: https://cdn.discordapp.com/attachments/919704624234106912/1030834642712014928/sprays.tk_2019-09-30.zip


Simply open index.html in a web browser and you will be able to make sprays just fine.


    2. Click on the "Choose File" button and upload an image of your choice
You will see that the website says "Works best with same size images (with transparency or not)." This means you should have a resized/cropped image already in the same size. I have imported 1024x1024 resolution images in the past, but 1024x1020/1020x1024 also works. The difference is not visible.

If you have a bigger image and need to downscale it to fit the resolution, use an image editing tool such as GIMP[www.gimp.org] or Paint(dot)NET[www.getpaint.net] (they're both free software).

Resizing and cropping images should be working similarly in both applications.
Do you need help with resizing and cropping images to fit the resolution? Check out my other guide at the bottom of this guide which shows the steps for GIMP as well as Photoshop.

    3. Once the file has been uploaded, click on "Convert" and then click on "Save as VTF"
Leaving the settings as default should be fine. This will download a "spray.vtf" file in your Downloads location. This is the spray you will be using.
Importing The Spray
Now that you have the VTF texture file, it's time to import it to TF2. The VTF filename can of course be changed. If you already know how to import sprays to TF2 manually then you can ignore this section of the guide.

Importing is done very easily. You have two options:

Option 1
  1. Open up TF2 and head down to Options > Multiplayer
  2. Click on Import Spray
  3. Browse to the VTF file and import it

Option 2
You can also download the VMT file and place both files (VTF and VMT) in the following folder:
...\Steam\steamapps\common\Team Fortress 2\tf\materials\vgui\logos
If you take this approach, be advised that the VTF and VMT file names have to be the same. Also make sure to update the "$basetexture" name written inside the VMT file. If you for an example have a .vtf file named "bob" then it should look like this:
"$basetexture" "vgui/logos/bob"


After that is done, the spray should now be in the list of selectable sprays in the options menu.
You're All Done!
Congratulations, you now have a 1024x1020 resolution spray! Be sure to spray it everywhere and show off how good your new spray looks. As a special bonus the spray does not include mipmaps or any level of detail, which makes it look extra crisp (the spray will look the same for all players, even for those who are running TF2 on toasters with texture quality set to low).

And before anyone asks, yes transparency does magically work (not on Linux though).



Special thanks goes to the kind soul who made the online converter.


Check out my other guide if you want to learn how to make animated sprays using VTFEdit.
https://steamhost.cn/steamcommunity_com/sharedfiles/filedetails/?id=1288408087
124 Comments
GreenSwede  [author] 4 Dec, 2024 @ 10:37pm 
It will probably be black if your image uses semi-transparency because that isn't supported, meaning it either needs visible non-alpha pixels or 100% transparent alpha pixels. If you plan on using image transparency for the background as an example then try a different image without transparent pixels to confirm if that's the issue.
Token 4 Dec, 2024 @ 6:24pm 
my image is black..
您🛰 29 Nov, 2024 @ 6:51am 
*imported the spray from /scripts/spray_mainfest.txt
您🛰 29 Nov, 2024 @ 6:49am 
I commented all the parameters (except shader) in the .vmt file and found that it seems that the .vmt file (including the basetexture parameter) does nothing in L4D2, it just provides a thumbnail for the in-game settings GUI.
the shader parameter may not work as UnlitGeneric does nothing either.
anyway, the guide works.
GreenSwede  [author] 8 Nov, 2024 @ 3:10pm 
By edges, do you mean the very end of the image in the X and Y coordinates? This might be possible to fix by using both the "Clamp" and "Clamp T" flags. With that said, this should already be the default flags set by the web converter. You could try setting the resolution to Custom if you haven't tried that for DX1, though I suspect you have since you tried 720x720 already.
dx151 8 Nov, 2024 @ 2:59pm 
My problem with it is when DXT1 format - yes, it makes the resolution great, but the edges of the picture piexelate. So, I'm forced to go for DXT5, but with 720x720 instead. So it's either super good resolution or worse resolution, but sharp edges.
NotChris03 4 Oct, 2024 @ 3:13am 
I having some problems the image I'm trying to use is still low quality
E 18 Jun, 2024 @ 12:02pm 
still works, thanks!
< blank > 2 May, 2023 @ 8:51am 
Спасибо друг
lightwo 10 Jul, 2022 @ 4:49pm 
For some reason, the GitHub Pages instance is out of date by a little (project's been abandoned 2 years ago anyway) which causes problems with animations, so I host the newer version here:

sprays.lightwo.net