Alpha textures: add transparency (or fake rips) to clothes

Guides Alpha textures: add transparency (or fake rips) to clothes

cover

Add transparency (or fake rips) to clothes


Alpha textures are greyscale images that say how transparent things are:
  • White (#FFFFFF or 255,255,255) is 0% transparent;
  • Black (#000000 or 0,0,0) is 100% transparent;
  • Values in between have equivalent transparency.
Transparency in clothing can be used for all kinds of reasons. For example, you can take a t-shirt and add transparency to the lower torso half, now it's a short t-shirt with the stomach showing. You can hide parts you don't want, you can mimic a rip, etc.
Many clothing items come already with alpha textures applied or with presets that use alpha textures to give more options to the clothes. In this tutorial I will show you how you can make your own version.


Alphas for "accessibility"
A popular interest is to add transparency to clothing over certain body parts. I created several alpha textures for various clothing items to give that extra "accessibility", you know what I mean. This collection of textures is called Alphas, and the description page lists what files correspond to what clothing:


Important note about collision/rips
A alpha handles transparency but it does not change the clothes "fabric".
Luckily penis and clothing colliders are not super tough and penetration can happen reasonably well. If that's what you're worried about, you're good ?



Enough bla bla bla, it's tutorial time now!

I'm using the excellent Catsuit from Cloudcover for this tutorial with photos


Clothes in VaM

Clothes.png


I loaded Cloudcover's catsuit for this example. Hit customize to enter the clothes options.


Textures.png


Some clothing have layers, like this one with Catsuit and Zip, others only have one called combined (default) or something else. Each layer has its own textures, so you need to pay attention to that.
In this example the Catsuit layer is what I want, in it you're seeing the Textures tab which is where the file information is set. Mind the _AlphasTex area which is where the alpha textures are loaded by using "Select".

If you don't have textures in the clothing VAR, maybe only a .vab compiled file in there, you can create a UV map by pressing the button in the top left red colored area. The other button opens the file manager in the location the UV map was created (/Custom/Clothing/name_of_clothes/); you can move the UV map somewhere else that is easier for you to use.


UV map or existing textures

The UV map for the catsuit above looks like this:

UVMap.png


If you have texture files in the clothes VAR you can also use those to see where the parts you want to make the alpha for are located. The _MainTex would likely be the nice and colored textures for the catsuit, and they would fit in the same place as the UV map above.

From this image we can see a two-dimensional representation of the three-dimensional catsuit, which is enough to make simple alphas from. There's some trial and error to get things right as the material in VaM will stretch.


Making the alpha texture in a image editor

You can use any image editor you want that can handle layers and a paintbrush. I use paint.net, it's free and good for simple jobs. One that handles layers is very useful because you can overlap this UV map with the new alpha you're making, but do whatever works for you.

The image above comes as 4K, which is overkill for what you need. I resize it to 1024px and it's usually enough unless you need a lot of precision for that alpha texture.
After resizing I duplicate the layer (layer A) and paint it all white (no transparency). I leave the UV map as a top layer (layer UV) and set a opacity to half.
Now on layer A I paint in black (transparency) the areas I want based on the faded UV map.


Saving and testing the results in VaM

You end up with a png with 2 layers, but you can't save a PNG with layers like that. You also want to see if you got it right, so some testing in VaM is useful.

Remove the layer UV from the file you have open in the image editor and save the single layered masterpiece of yours ? as a PNG. Don't close your image editor, you likely will want to undo the removal of the layer UV for tweaking your alpha while testing it in VaM.

Now that you have a PNG with only your black and white splatters, load VaM and the clothes you want to apply the alpha to. Add to _AlphaTex (Textures tab, see screenshot above) the file you created. Hopefully it worked well and something's transparent now in the right place.

If you want to tweak it a little, that's the reason I said to not close the image editor. You can undo the previous removal of the layer UV to serve as a guide to your alpha tweaking, don't forget to remove it every time you want to save as a PNG.
In VaM, if you kept the same file name or path, hitting "reload" will bring the changes you made to the alpha file, you don't need to select the file again.
You can keep doing these things back and forth until you get it right.


Catsuit alpha example

Alpha.png


Here is a alpha texture present in the Alphas VAR being used in Cloudcover's catsuit.
Reminder again, the material is still there, it's just transparent now. Penetration wise it will work well enough for most cases.


UVMap.png
AlphaTex.png


Here is the UV map for the catsuit (left) and the alpha texture (right) for the crotch area only.

You can notice the black areas overlap the UV map crotch areas and what's outside the UV mapping in white is ignored, you don't need to be super accurate.


Saving and presets

Now you have a texture and you can manage it in different ways. You can add it to the clothes VAR, but if you get a new version and delete the old one you'll lose the texture alongside. If you don't you might not be able to access it from within VaM as it ignores earlier VARs if the checkbox is ticked for "latest only".
Leaving it in your Custom folder is also a option, but don't forget about and delete it by accident in the future.
If you plan on making many perhaps making a VAR, like I did with Alphas, could be a good option too.

You may also want to make a clothing preset - under the Clothes tab - for the clothing item you made a alpha for so that it loads alongside too.


That's it I guess.
Any questions, remarks, errors, please write them in the Discussion area of this resource.
Have fun...

Thank you Cloudcover for the catsuit, used in this guide as a example, and all the people sharing their knowledge and experiences with all this VaM stuff.


Extra on Decals

Decal textures add layers on top of something, you can use the UV map placement part of this guide to add them on clothing. In Alphas I added a Star Trek badge, perhaps you want a picture on a t-shirt, whatever you can think of. It's the last option in Textures, _DecalTex.
Don't forget the clothing stretches and deforms.


Optimising textures
thank you @Sally Whitemane
  • VAM alpha textures are by definition black and white images, saving in RGB mode is suboptimal. Save as grey instead to cut the uncompressed image data to a third. Stores 1 channel instead of 3 for RGB colors, smaller file size.
  • Never save VAM alpha textures with alpha aka transparency channel. It use useless. No alpha channel, smaller file size.
  • VAM can load VERY small 1 bit images. Keep in mind with only 2 colors there is no more translucent transition (grey) between opaque and transparent. That makes 4 bit a very good balanced choice for when you need soft transitions with a small file size.
  • These are file- and download- size optimizations. They will not reduce RAM / VRAM usage. While VAM loads textures the pixel format is converted for the GPU with 8 bits per red/green/blue - effectively making it large in memory.
  • While possible, using JPEG is bad for alpha precision/quality with it's lossy compression. Use PNG.
Example for the 2048 x 2048 image 'Lola - shorts - Alpha.png' from 'Atani.Alphas.8.var':
  • 190.224 bytes 8bit RGB 256 indexed colors
  • 85.166 bytes 8 bit GREY (100% lossless)
  • 13.336 bytes 1 bit GREY 2 indexed colors (lossy for transitions)
Image > Mode > Indexed... > [x] Use black and white (1-bit) palette
File > Export As... > file.png > export > 8 pbc GRAY > export

With right settings other tools should give similar results. Irfan View converts to greyscale with Ctrl & G and seems to save slightly smaller files than GIMP. Smallest I got was 9.423 Bytes with special PNG tools.


More guides you should check out:


Author
atani
Views
10,127
Favorites
1
First release
Last update
Rating
5.00 star(s) 5 ratings

More resources from atani

Latest updates

  1. Added texture optimisation section

    Section content courtesy of @Sally Whitemane

Latest reviews

Great explanation and walk through. I initially looked at this guide and went "nope" because it had been about 20 years since I last messed with photoshop. Today I figured I would finally take a stab at it (using paint.net as mentioned in the tutorial) and was surprised at just how easy this is. Thank you for the great explanation and now I'm gonna make a ton of alpha textures!
atani
atani
I also thought it was more complicated than it is ;)
If you're making Sim or Alpha textures and want to share them as FC in my Alphas resource, do let me know. You can of course create your own VAR with those, the more the merrier.
Upvote 0
This is a really great guide, thank you for creating it!
atani
atani
Cheers. Hope it's useful to you.
Upvote 0
Another excellent and useful guide.
atani
atani
Thank you. Let me know if there's anything that could be added or improved.
Upvote 0
Thx, that was ... actually comprehensible!
atani
atani
Damn it. Now I can't write any more insanities as people know I can do better.
Darn it that lucid moment I had when writing the guide ?
Upvote 0
Thank you! Very helpful and easy to follow.
atani
atani
Thanks for reviewing. Any tips on how to improve it do let me know in the Discussion area.
Upvote 0
Back
Top Bottom