Saturday, December 15, 2007

Day 447: Semi-Transparent Clothing Textures



Theres been several questions and requests recently about creating semi-transparent clothing with Photoshop (such as hoisery or a see-through top).

I wrote briefly about Transparency and Alpha Channel on Day 47. Back then, I wasnt a blonde. Now I need much better directions ;P

So heres a detailed tutorial on how to create semi-transparent clothing with Photoshop. If you are not familiar with creating clothing for SL, you should look at the Creating Clothes with Photoshop tutorial first. We will be using the top from the Creating Clothes with Photoshop tutorial as an example below.

In SL, transparency refers to how "see-through" a particular texture is. A texture is 0% transparent (completely opaque) if it doesnt let anything behind/under it show through.

A texture is 50% transparent if it lets half of the colors behind/under it show through. Think of it as a 50% sheer "see-through" blouse: you will see 50% of your skin tone under the blouse.

A texture is 100% transparent if it lets everything behind/under it show through. In fact, you wont be able to see a 100% transparent texture as a result.


A Quick Word About GIMP

If you are using GIMP, the process is very different (but much easier). You do not use a separate Alpha channel layer in GIMP. The transparency is part of the main drawing itself! Just keep a couple things in mind if you want to create semi-transparent clothing textures using GIMP:



Whenever you create a new drawing in GIMP (using something like File/New option), be sure to select a Transparent background.

At the "Create a New Image" window, click on the "+" button next to "Advanced Option" to expand the window.

Change "Fill with:" to "Transparency".






When you want an area to be semi-transparent, use either the paintbrush or paint bucket tool. Set the "Opacity" below 100%, then paint or fill in the area. Thats it! :)

But make sure there are no opaque layers below the one you are work on; otherwise, the opaque layer will show thru the transparent layer on top. (You might want to do this deliberately for effect...)

When you prepare the Targa (.TGA) file for upload to SL, it should have a semi-transparent area :)




Transparency in Photoshop



In Photoshop, transparency is controled by the "Alpha 1" layer under the Channels tab.

There should only be a single "Alpha 1" layer. Transparency will not work properly if there is more than a single Alpha Channel layer.

In the Creating Clothes with Photoshop tutorial we created the "Alpha 1" layer towards the end of the tutorial. The "Alpha 1" layer should look something like the drawing here.

The "Alpha 1" layer is a black-and-white only layer. The white areas are completely opaque (0% transparent). The black areas are completely transparent (100% transparent).



If you picked the "50% Gray" color from the Swatches palette (Red=128, Green=128, Blue=128) and filled the white areas of "Alpha 1" with the 50% Gray color, then your Little Black Top will be 50% transparent! It will become a black "see-through" top :)



And heres the black "see-through" top if you uploaded it to SL.

Im wearing a black bra underneath (cause Im a PG mermaid), but you get the idea ;P





Mixing Transparency



Since "Alpha 1" is a layer, you can mix different levels of transparency in the layer. Basically, it means mixing black, white, and different levels of gray in a single layer.

So in this example "Alpha 1" layer, we have "50% Gray" for the base (50% transparent), and stripes of white (0% transparent) running down the top.



And this is what the top would look like if you uploaded it to SL.

Pretty neat, isnt it? :)

Remember that the "Alpha 1" layer only controls the amount of transparency in the texture. It has nothing to do with the color of the texture. The color is determined by what you draw in the "normal" layers, under the Layers tab (in this case, the top is solid black in color).


Creating a Semi-Transparent Top



OK, lets make a semi-transparent top! We are going to create a red top with a complex Alpha Channel that includes some mixed transparency :)



First lets start with the top we created in the Creating Clothes with Photoshop tutorial.

This is what the top should look like if you hide "Layer 1" (click on the "eye" next to "Layer 1" until the "eye" disappears).

We will be using the normal Layers tab to build our complex Alpha Channel. When we are done, we will Copy the Alpha Channel to the "Alpha 1" layer under the Channels tab.

The Alpha Channel will be built using 2 layers: a background layer based on the current "Alpha 1" layer, and a new pattern layer.



Go to the Channels tab.

Click on the "Alpha 1" layer to select it.

Click "Select" from the top menu bar and choose the "All" option (or just press Ctrl-A).

Click "Edit" from the top menu bar and choose the "Copy" option (or just press Ctrl-C).



Next, go to the Layers tab.

Click on the "Shirt" layer to select it.



Click "Edit" from the top menu bar and choose the "Paste" option (or just press Ctrl-P).

This will create a new layer called "Layer 2".








Change the name of "Layer 2" to "Alpha-back".
















Make sure that the "Alpha-back" layer is selected.

Click the "Create a new layer" button at the bottom of the Layers tab. This will create a new layer called "Layer 2".

Change the name of "Layer 2" to "Alpha-pattern".

Now, let's create a Fill Pattern for our new "Alpha-pattern" layer.





Click "File" from the top menu bar, and select the "New" option.

At the "New" window, enter 16 for "Width:" and "Height:".

For the "Background Contents:", select "Transparent".

Click the "OK" button.



Zoom in all the way (to 1600%) and stretch the window open so you can see just outside the drawing area.



Select the Brush tool.

Choose the 3 point hard brush (the 3 point brush with 100% Hardness).

Change the Foreground color to 50% Gray.



Draw a simple design using the Brush tool. It can be any design you like.

This design will be repeated across the fabric of the top. It will be 50% transparent (because we are using 50% gray color).



Click "Edit" from the top menu bar, and select the "Define Pattern..." option.

At the Pattern Name window, leave the name as "Pattern 1" (or whatever it might be) and click "OK".



OK, the next few steps are a bit tricky. Basically, we want to fill the area of the shirt with the pattern we just created.

Select the "Shirt" layer of the Little Black Top.

Right-click on the small picture of the "Shirt" layer in the Layers tab, and choose the "Select Layer Transparency" option. This will create a selection around the outline of the shirt.



Select the "Alpha-pattern" layer in the Layers tab.



Click "Edit" from the top menu bar and selec the "Fill..." option.

At the "Fill" window, select "Pattern" for "Use:".

Under "Custom Pattern:", select the pattern we created above (should be the last one on the list).

Click the OK button.



This will repeat the pattern in the shirt area. Pretty cool, isnt it? ;P
















Now lets copy the new layers to "Alpha 1".

Press and hold the Ctrl key and click on "Alpha-pattern" and "Alpha-back" to select these 2 layers. Make sure that only these 2 layers are selected.












Right-click on the "Alpha-pattern" layer and select "Merge Layers". This will combine both the "Alpha-pattern" and "Alpha-back" layers into a single layer. This new combined layer is our new Alpha Channel :)












With our combined layer selected, click "Select" from the top menu bar and select the "All" option (or just press Ctrl-A).

Click "Edit" from the top menu bar and select the "Copy" option (or just press Ctrl-C).



Click on the Channels tab.

Click on the "Alpha 1" channel to select it.



Finally, click "Edit" from the top menu bar and select the "Paste" option (or just press Ctrl-P). This will paste our new Alpha Channel into the "Alpha 1" layer.

Thats it! Our new Alpha Channel is ready :)



We have a little bit of cleaning up before we can upload our texture.

First, go back to the "Layers" tab.

Click on the "eye" next to the "Alpha-pattern" and "Shirt" layers to hide them. At this point, all layers should be hidden.



Click on "Layer 1" to select it.

Click on the "eye" next to "Layer 1" to show this layer.




Select the Paint Bucket tool.

Change the Foreground color to a color of your choice. I used a dark red here.

Click on the drawing with the Paint Bucket to fill the drawing with the Foreground color.



Thats it! Just save our drawing as a Targa (.TGA) file and upload it to SL.

And remember, you can use filters and tools to add other fabric effects as well, such as gradients and noise.

These techniques work equally well on the lower body (particularly for hoisery) and prim surface textures.

Have fun creating those semi-transparent textures! Just dont forget to wear underwear ;P




numly esn 49617-071215-413307-20

© 2007 All Rights Reserved.

9 comments:

Peter Stindberg said...

The impact of transparencies in SL is severely limited by the notorious "transparency bug", which results in odd viewer behaviour when two transparencies are in your line of sight.

Everyone annoyed by this should cast their vote in JIRA (the Linden Labs bug tracking system) to gte this fixed. Follow this link http://jira.secondlife.com/browse/VWR-27 - log in with your SL username and PW, and vote for the issue to be fixed.

Ollie Shelford said...

I was about to leave a comment about when I was making something with transparent textures, it appeared strangely, with the wrong bits overlapping... but then peter posted about it, and its a bug :P I voted, please vote, its really anoyying :/ .

Anyway, nice tutorial :D

SLNatalia said...

Peter, heehee yes that is a very bad problem (I think its called "Alpha Sorting" or something). I spend most of my time trying to avoid it while making hair :P

BTW, the transparency problem only affects textures on prims. It does not have any affect on clothing textures. So you can have a transparent SL skirt right next to a transparent prim without any problems :)

Ollie, lol its definitely a challenge! I use to cry when I make a really pretty texture for a skirt and it gets all blinky :P

Rolig said...

Really nice tutorial, Natalia! Thanks.

Yeah, Alpha sorting can really ruin your day, even if you have been careful. Basically, when one object in the front of another one in SL, the program follows rules to figure out which one to show on your screen. (Duh! It's the one closer to you, right?) When the object in front is transparent, the rules tell the program how much of the object in back to show. Unfortunately, when two transparent objects overlap, the program's rules get messed up, so it can't tell which one is in front and should show on your screen. What you see is a flickery mess as it tries to show you both objects at once. It's a very tricky programming problem to solve, and there's not really much that you or I can do about it (except maybe say some unladylike words under our breath).

SnakeArsenic said...

Hey that's how I first started doing it!
Now in photoshop I use the calculations from the image menu(i think it's only in the cs versions) to make a new channel with the combined alpha or transparency.

Then I merge it into one layer and use the Solidify plugin from the free plugins at http://www.flamingpear.com/download.html to get rid of the white halos and any layer transparency that can make a washed out look.

Paint Shop Pro has a similar function to Calaculations and the solidify plugin works in PSP as well.

With the alpha problem, it's happening on non-transparent textures as well because the people who make them are leaving in an unneeded alpha channel making them render the same way as objects with semi-transparent textures would.
They really need to stop that and LL needs to look at the ways other people have fixed it.

Great tutorial!

SLNatalia said...

Rolig, heehee I use to come close to tears when things start getting blinky...cause you usually cant tell until youve done all the work and are testing/fitting a skirt. So Ive really learned to walk around with transparent textures first before doing all the work :P

SnakeArsenic, wow, thanks for the tip! Heehee I had no idea about the Calculation thing. Actually, i still have no idea about the Calculation thing, but it looks interesting ;P

Anonymous said...

Natalia,
I just wanted to say thank you for the easy to comprehend tutorials! My girlfriend and I have been using them since we found your site and they are the best I've come across.
Thanks again!

Isobel DeSantis said...

Natalia, great tutorial as usual :)

I just hope Chosen Few doesn't read it cos he will spank you and then tell you very sternly that "Alpha 1" is NOT a layer, it's a Channel and there is no such thing as an "alpha layer"! :P

You have been warned! lol

SLNatalia said...

Dear Anonymous, thank you so much for reading the blog! I hope you and your girlfriend are having fun making stuff in SL :) Have a Happy Holiday!

Isobel, lol thats what happens when blondes write tutorials! I almost called it "thingie" ;P