Saturday, November 11, 2006

Day 47: Back to Black and Alpha Channels



"I think, therefore I shop!" thats what Decartes would have said if he were a girl in Second Life. :) What I love about SL is the variety of activities available. Its not just about dating and gambling. And here is a case-in-point.

Im here in front of the Villa Bilboa Art Gallery. On Tuesdays and Thursdays, there is an ethics discussion here. The topics change on a daily basis, and there is usually a dilemma to consider. ***Update: Unfortunately, this event is no longer going on; however, there are many other quality discussions going on. Check Search/Events/Discussion for a listing***



Today, Ive abandoned my blonde streak and went back to black. Today's outfit is an experiment with the Alpha channel. The skirt is a basic black prim skirt with some texture to simulate wool. The boots are just a black version of the dino boots I made earlier.



Whats interesting is the top. I wanted to create a black patterned see-through top. Only the gaps between the patterns should be partially transparent. The pattern itself should be opaque.

The top consists of an undershirt and a shirt. The undershirt is a pure black undershirt created entirely in the Appearance menu (thats the black bra you see underneath).

The shirt is created in Photoshop using a pattern to fill a large canvas (2048 x 2048 in this case). I then used the Magic Wand to select the black portion of the pattern, cut, and paste into new layer. This basically removes the white areas. Next, I overlay a layer underneath with 50% grey (which fills in the previous white areas with a 50% grey). I merge the layers and reduced the image size to 512 x 512, effectively shrinking the size of the pattern.

Next, I overlay the pattern on the shirt template I created yesterday (for the pokadot outfit top). I cut out the V-shape for the neck. Also, the pattern is turned sideways for the sleeves. I also drew in the edge seams around the collar and the bottom of the shirt.

Now comes the fun part, the Alpha channel.

Alpha channel controls the transparency of a texture. Alpha Channel is in the Channels menu tab. You need to create the Alpha Channel manually in Photoshop.

For the other outfits I made so far, the Alpha Channel is simple. It is either all white (completely opaque), or created out of the major shape of the clothing pieces. To create an Alpha Channel based on clothing pieces, first select all the pieces (Ctrl-Shift click the layers with the major pieces). Then go to the Channels menu and click the button at the bottom with a white circle in a grey box (second from left). Photoshop will create the "Alpha 1" layer based on your current selection. Then just save the file as a Targa (.tga) format file, with 32 bits/pixel.

New Citizens runs a class on Mondays that cover the above procedure. This class is called "NCI Class: Advanced Clothing Creation". Highly recommended if you have never worked with the Alpha Channel.



The NCI Class even provide these cool clothing template undershirt, long johns, and skirts that you can wear. This enables you to see how the clothing texture would stretch according to the shape of your avatar. (OK stop staring at the stretch areas on my undershirt! :P) I used them all the time to see where to place edges on a piece of clothing.

But today's outfit involves a more complicated Alpha Channel. I only wanted the area outside the pattern to be 50% transparent. The patterned area should be 100% opaque. So I could not use a simple Alpha Channel, since this would make the entire shirt opaque.

Heres how I built the Alpha Channel for the shirt: I merged all visible layers and copied it to clipboard. Then I pasted that to a blank layer. If we used this as the Alpha Channel, it would be backwards: the patterned area would be 100% transparent because it is black. To fix that, use Image/Adjustments/Invert to flip the blacks and whites around. Next, merge the above layer with a 100% black layer (this provides the transparency for the V-neck area and the bottom areas of the shirt). Lastly, copy and paste this to the Channels tab as the "Alpha 1" channel. You can make direct edits to the "Alpha 1" channel, but there is no need here.

Finally, just do "Save As..." a Targa file and upload the texture.

See, I would never have figured that out as a blonde! :P

18 comments:

Anonymous said...

Hi Nathalia, i do not know but how i tried it doesn't work
i see a black and white shirt everytime...what do i do wrong?

SLNatalia said...

Dear Anonymous, creating the Alpha channel is kinda tricky the first time (but its real easy once you get the hang of it).

I wrote 2 step-by-step tutorials (one for Photoshop and one for GIMP). Click on the "Build" page on the Site Index, and look for the Creating Clothes with GIMP/Photoshop tutorials. They should get your started.

Also, NCI has a great class on Mon at 6pm SL (Clothing Creation).

Hope this helps!

Swimmie said...

Hi Natalia...your blog has been like an SL textbook to me! Thanks again for all your help for us followers :) I hope you forgive me keep asking questions. I am trying to make a roundtop table for my friend using Photoshop CS2. I could make alpha channel (with a tabletop white and corners black), but when I try to save it as .tga file, Photoshop does not show that option. I have made many t-shirts using Robin's template and had no problem saving it as .tga file. I am lost.. do you have any suggestions??? I want to attend NCI class you suggested, but it conflicts with my RL schedule. Any advice will be appreciated!

SLNatalia said...

Swimmie, when you save the texture in Photoshop, are you using File/Save As...? All the formats you can create should be in the "Format" list...

Do you see a different "Format" list when you create a new file versus using Robin's template?

BTW, as a quickie solution, you can just use Robin's template and turn off all her layers :P That doesnt fix the actual problem, but it might work :)

Shayna said...

BTW I love your tutorials. I'm having trouble understanding how to create semi-transparent clothing. I'm just confused.... can ya help me? :-) Thanks

SLNatalia said...

Shayna, its easy to do semi-transparent textures in Photoshop. Try this: Create a texture with some transparency (an Alpha Channel). Then go to the Channel tab and click on the Alpha Channel ("Alpha 1") to edit it. The Alpha Channel should be completely black and white (the white part is your shape).

Now, grab a brush and change the foreground color to 50% grey. Then just brush over some of the white area in the Alpha Channel. When you are done, the Alpha Channel for your shape should be part white and part grey.

When you create a TGA file and upload this to SL, the grey area will be 50% transparent :)

Anonymous said...

I am haveing a bit of trouble with uploading transparency into second life.. everytime i try to it turns white.... i have used photoshop elements 4.0 elements and photoshop 6 .. still get the same result ... tried to flatten it , like Some one said above .. Nope ..lol .. need help ? :)
Kiley!

Natalia Zelmanov said...

Kiley, I heard that its kinda hard to do with Photoshop Elements (it takes completely diff steps). There is a Clothing Creations class at NCI which might help you (they teach Photoshop Elements). Unfortunately, Im not familiar with Photoshop 6 (Ive only seen CS2 :P). But have you tried GIMP?

Anonymous said...

This is giving me problems in Paint Shop Pro X (I miss my old version 8). I assume the alpha channels in that are called "mask". When I have finished my texture and go to save it, it merges the file and colors the part I want transparent white. Not cool. Any advice?

Natalia Zelmanov said...

Dear Anonymous, lol Im sorry but I cant be of much help there...Ive never seen Paint Shop :( New Citizens Plaza (NCI) has a Clothing Creations class that covers Paint Shop. You might want to give them a try..

Mauve Binder said...

Hi Natalia,

love your tutorials, was wondering... would you please post a tutorial for "Day 47: Back to black and alpha channels" laid out in the same manner (with all the detail) given in Day 475:creating clothes with photoshop.

I have a problem (brain damage) and have trouble learning new things unless they are laid out step by step. Your tutorials have never failed me... but I cant follow Day 47 for the life of me.

best regards,Mauve

Natalia Zelmanov said...

Mauve, lol you dont need to create Alpha Channels anymore if you use the new PNG format :) So the Day 475 stuff is all you need to create clothes (even semi-transparent stuff)

Tikaf said...

Descartes wasn't a girl though ... but he went to Ireland, did you know that?
He went to this pub and ordered a beer, that he drank sitting at the bar.
Then, half an hour maybe after having finished his pint, the bartender noticed Descartes was still there, probably brooding over some new concept ...
The nice bartender then asked him:
"Do you want another beer French man?"
Descartes replied:
"I think not"
and vanished ...

I just now realize it is not in the least bit related to your article, which I liked though ...
But well, you know ... we French people are definitely strange people!

Natalia Zelmanov said...

Tikaf, heehee that's OK, I don't remember what this blog entry was all about anyway. I do know this place isn't there anymore (it went away like Descartes :( )

Anonymous said...

Hi natalia i love your tutorials,..I have a question, I am a designer and i was making flipflops..my question to u is,where would i find flip flop walk sound script..lol i have been looking everywhere!!! :))

Natalia Zelmanov said...

Dear Anonymous, hmm...not sure if there is a specific flipflop sound script. If you have the sound file uploaded to SL, you can play it inside a script. Check at Yadni's (they have a free box of scripts, so there should be something there with sound :D)

Mercy said...

Ohai!
I am currently working with some sculptie neko ears and would like to add some tufts of fur to them.
Since I am new to the Gimp, I'm not clear on how to export these little bits of fur so I end with them on a transparent prim to apply to the ears. Can you help
please?
Thanks,

Natalia Zelmanov said...

Mercy, you are def on the right track! Use a transparent prim, then select 1 side of the prim (click the Select Texture button) and apply the fur to it. Be sure you save the fur texture as PNG. Thats the easiest way to do it.

This tutorial has the steps in editing a single face of a transparent prim: http://www.mermaiddiaries.com/2007/07/day-293-flexifying-your-wings.html