Sidd's 5 minute easy guide to transparancies and .PNG files

I see a lot of people on here really struggling with the concept of alpha channels, and using transparent targas to make clothing and other transparent textures for Second Life. So I thought I would put together a really quick step by step to creating a shirt for Second life without using ANY alpha channels, or the flaming pear plugin, or any actions to create the channels.

It's simple, using 24 bit PNG files to create transparent files. SL now supports them and they couldn't be easier to create!

First of all, open Chip Midnight, or Robin Sojourners wonderful avatar templates. I have opened the upper template and turned on ONLY the template layer. A bit later, I also turn on the seam layer.

Next create a NEW layer above the template layer for your clothing to go onto. The clothing layers can be one layer, or as many as you need to put detail into your clothing. I usually have one for the base colour, one for the shading and one for the details like buttons and zips. Makes for very easy recolouring if required.


Then, draw on your shirt however you please. You can place graphics, draw buttons and other details, put a texture pattern on. Whatever you want. I have gone for a very simple racing style top. It's a bit messy because I wasn't taking the usual care, but normally I would be a lot neater than this.


Now, make sure your seams match up perfectly according to the seam guides on the templates. They really work very well.


Now, and here is the bit where you would normally create the alpha channel.. Turn off every layer except the ones your clothing is on. I have turned off the template, the seams and the background. If you are working in photoshop, you should have the little square pattern indicating the transparancy. If not, you still have a layer on, or you have painted on the background layer. Be careful of not doing that!


Then save your file as a PNG-24 using the save for web menu option.


Aah grr. Too many images. Read on next post!!

Create a new shirt in Second life, after you have uploaded your shirt texture.


In appearance, in the shirt properties tab, select the fabric and choose your texture. Save it as "great new red racing shirt" or whatever you want.


And as you can see, this is the result once you have saved it. This took me about 15 minutes from go to woe. Seriously, anyone with a graphics program, and some imagination can do this!


Enjoy!


wow this board has some weird rules! 20 seconds post limit? Wha?????

Thanks, Siddean. The transparency guide is out of date now that PNG is an option for SL, so it's good that you added this. When I have time I'll update the guide. Hopefully your post will help as many people as possible in the mean time.

I would request though that you take a minute to edit your opening comments and some of your additional remarks throughout. While you're absolutely right that people who are brand new to graphics do tend to struggle a little with learning the concept of alpha channels in the beginning, your description of the difficulties involved with learning and using them was pretty over-blown. Alpha channels take literally less than a second to make, and they always work, which is why they've been in use for decades. There are only a few very simple (but not immediately obvious) concepts people need to learn, and then it's all good.

Phrases like "usually a problem with alpha channels" should absolutely be removed. Nothing is "usually a problem" unless the user has chosen not to learn, which of course is a problem with the person, not with the tool. For those who do take the short time required to learn how alphas work, there's really no such thing as a "usual problem". There are some FAQ's and common temporary pitfalls in the beginning, of course, but once people know what they're doing, there are no lingering problems.

The simple transparency you covered in your tutorial has the advantage of being fast and entirely intuitive for under-complicated images like your nice 5-minute shirt. But for something with more complexity in the transparency levels, like, say, an intricate stained glass window, using simple transparency would actually take longer than using an alpha channel, and it would be harder to control. Even something as easy as a transparent-to-opaque gradient takes a bit longer when using any WYSIWYG method than when using an alpha map. It would be wise for any tutorial on the subject to pay mind to these comparisons.

In other words, be careful not to present simple transparency as if it is somehow superior to alpha transparency. It's a nice alternative in certain situations, but I would never recommend adopting it as a reason not to learn to make alpha channels. Alpha mapping is the foundation of how a lot of things work in graphics, besides just transparency. Don't fall into the trap of suggesting to other people that they sell themselves short.

Overall though, great tutorial. Thanks for sharing it.




P.S. The "weird rules" keep people from spamming the boards. Call them whatever you want, but they work.

I agree Chosen, I'll edit a few things from the original post. It was late when I wrote that and I had quite a headache so I wrote it in a bit of a hurry The reason I chose simple transparancy was that most of the beginner posts here are concerned with making items like tattoos, and clothing and that is where a few seem to come unstuck. Alpha channels are easy to make, but I have to admit, even though I am very familiar with various graphics programs and digital art, they took me a little to get my head around which is why I am so thrilled that PNG's work for SL, because you don't have to think about that extra step, nor do you have to flatten your image to make it work, which does make recolouring very easy. I can understand why someone totally new to graphics programs like photoshop or PSP, and just wanting to make a t shirt or a simple tattoo would find alphas confusing. They are a cinch when you are a bit more versed in the area.

If I have say, a bodice with a ribbon around the neckline, and another texture for the main body of the bodice, (and I did encounter this) I puzzled and puzzled about how to make an alpha channel which would encompass the outlines of both of these parts, without having to flatten the image in order to make a selection to make a channel. I need to be able to apply colour differently to both sections, and even to the shading and highlighting to the sections which I also like to keep on separate layers. Using PNG removed that altogether for me.

People making textures for SL still need to learn how to use alphas, as they are very useful when combining transparent and non transparent areas like your stained glass window, but I would think that that can also be done with PNG, considering if you make the glass area semi-opaque, it would do the same thing as having a grey section in your alpha channel. Not sure because I don't have time to experiment, but I'll have a lookee a bit later

[edit]I understand why the rules are there, but I never encountered them being so strict in other forums. Maybe spamming was a real problem here before the rules were in place? I wasn't around then and I find 5 images, considering how visual SL is, and considering it also counts emoticons, is a little restrictive.

Oh just an addendum, I don't mean for png's to sound like the be all and end all for all textures uploaded to SL. For example. using png-24 to upload a solid texture to SL will give you problems if you then try and put that texture on a poster against a semi- transparent wall, such as I found when putting up an advertisement in my shop. I used a png and it had the same problem with all transparent textures that it didn't know whether the wall or the poster was in front - solved by using a .tga 24 file. Perhaps solved also by using png-8 I didn't experiment.

Also, your example using gradients should certainly be done with an alpha channel. But for areas of opaque and semi opaque, and transparent, a PNG can be used. What I am trying to do is show that there are options and while it is a good idea to learn alphas and how they work if you want to be serious about texturing for SL, you don't *have* to use alpha channels in every transparent texture you create.

[edit] Here is that stained glass window. This took me literally minutes. I found the image (it is not my image, hence the words over the sample below) separated the black lines from the colour on another layer using the magic wand tool and a few modifications to the selection, cleaned up the black lines a little (a LOT less than if say, I were going to use this texture) and then set the colour layer to about 80% opacity. Saved as PNG-24, uploaded, and applied it to the prim. This can be done by someone with intermediate skills and knowledge of the graphics program they are using. I'm sorry Chosen, but I must respectfully disagree with you that more complicated transparent images still require alpha maps. I could see png's being used for the most intricate tattoos or lacework.

Thanks for sharing that.
I have been bit overwhelmed with all I want to learn and only so much time, energy to learn it.
Issue is for me when learning something I hit walls. Like for example I discovered this tool that suppose to make png files in Photoshop. Everything went wrong and I had no clue why. SL wouldn't let me upload it either.
Image kept turning solid.
I then decided it was time to do something else for while so I did.
Not everyone gets things right away, some get discouraged and give up.
I have been struggling with different tools for years. I just haven't given up but I have needed to take breaks and go back to other things later.
When I hit a problem I often I don't know what I did wrong but everything seem to fail with it.
It often takes numerous attempts of figuring things out personally for me before I get it.
I know I will go back to it. Like I will probably go back this tutorial. So I am bookmarking it for when I got few more basics down.
Finally figured out how to paint on grids to make texture maps, next step after will be most like clothing and skins once I figure out how to do the basics.

Thanks for making the changes. The tutorial reads much better now.


Selecting both layers actually is really, really easy. I assume you're aware that ctrl-clicking a layer's thumbnail will select everything on the layer. To add an additional layer to the selection, simply hold shift and ctrl-click another thumbnail. No need to flatten.

This same technique of ctrl-clicking also makes it very quickly possible to give each image component its own transparency value on the alpha. So, for example, let's say you wanted your shirt to be fully opaque and the ribbon to be semi-transparent. Just ctrl-click the shirt's thumbnail and fill its selected area of the alpha with white. Then ctrl-click the ribbon's thumbnail and fill its area of the alpha with gray. If the ribbon has a knot or a bow in it, you'll want the areas where the cloth is bunched or overlapping to be a lighter gray so that those parts appear more opaque With a few daps of the paint brush, or with additional creative selecting, this is easily done in a few more seconds.





First, forgive me for combining posts to make the above quote, but since these two paragraphs were on the same topic, I figured it would be worthwhile to address them both at once.

I think you missed the point of why I chose a stained glass window as an example. Perhaps I didn't explain well enough what I meant.

When I said "complicated levels of transparency", I was referring to the fact that in a RL stained glass composition, each panel has its own unique level and pattern of transparency. This is because making compelling stained glass imagery is all about mixing impurities into the glass to block light in interesting ways, and about varying the thickness of the glass to further add to the effect.

The stained glass texture that you put together does not match this behavior at all. By your own words, you put an 80% opacity setting across all the glass. So, instead of stained glass, you've got what essentially amounts to colored glass. There's a big difference there.

If you examine critically the source image you chose, it's pretty easy to see that there originally had been huge transparency variances. Note the streaks in the red areas and the dancing swirls in the orange and yellow parts. In RL, that effect could only have been created by variance. The darker parts only appear darker because they allow less light through them than the lighter parts. However, your version has uniform transparency across the whole thing, which is not at all realistic. It should be harder to see through the darker parts than the lighter parts, but its not.

To do stained glass realistically with your level transparency technique, you'd need hundreds of layers, and it could take many hours just to set all their individual transparency sliders. With an alpha channel though, you could pretty quickly just paint in your desired transparency effects in a few minutes. That's the difference I was talking about.




Yeah, if you've got any level of transparency in your image at all, even if that level is 1 (fully opaque), you're going to end up with sorting problems. It doesn't matter if your source image was a PNG with simple transparency or a TGA with alpha transparency. Sorting is sorting is sorting. To avoid the issue, you have to use a format that has no transparency data whatsoever, such as 24-bit TGA or 24-bit BMP.

Also, even if a PNG with transparency could somehow behave differently in 3D space than a TGA with transparency (which, I repeat, it can't), it wouldn't matter anyway. None of the images you see in SL are your actual PNG's or TGA's. SL copies everything to JPEG2000 at the time of upload. Your source file never goes any further than your own hard drive.



Anyway, thanks again for making those changes. It's good for people to have options, and even better to for them to know what the strengths and weaknesses of those options are before proceeding.