Welcome to the Second Life Forums Archive

These forums are CLOSED. Please visit the new forums HERE

Making Transparent Holes in Clothing

Robin Sojourner
Registered User
Join date: 16 Sep 2004
Posts: 1,080
07-28-2006 04:46
Hi everyone!

This is an answer to a question I was asking in a PM. I thought the answer might be helpful to more than one person, so I'm posting it here.

The question was how to "cut a hole" (make a transparency) in my free T-Shirt Template.

This is how. :D

If you just want a simple cut-out, it's easy.

Click here for fig 1. (showing the first 2 steps.)

1. Just draw your design in black on a transparent layer. In this case, I drew a design of butterflies using the shape tool. You can see that the layer is transparent when you look at the thumbnail in the Layer Palette. (You can also see a copy of the "Put Color Here" layer below the original. That's set to the Color blending mode, and 40% opacity, to keep the shadows on this very light shirt from being too gray.) I used a Stroke Style to provide some binding for the butterflies, and add to the realism of the shirt.

2. Once you are happy with the design, hold down the Command/ctrl key, and click on the Layer Thumbnail to select all the black pixels.

Click here for fig. 2, (showing steps 3 and 4)

3. Change to the Channels palette by clicking on the Channels tab (next to the Layers tab, by default.) You'll see 5 lines there; RGB which is (surprise!) a combination of the Red, Green, and Blue channels, each of those channels individually, and, at the bottom, the Alpha channel that I made so you wouldn't have to worry about it. But if you want insets, you do. (Yeah, I know, I accidentally left the name as Alpha 2; but it's not important. It can be called anything, really. Any channel that's not Red, Green or Blue is an Alpha channel, no matter what it's named.)

4. Click on the Alpha Channel thumbnail to select it. You should now have a black and white image, with just the alpha channel, on your screen, with the Marching Ants, showing you where your selection is. Any pixels that are white here will be opaque in Second Life. Any that are black will be transparent. Any gray pixels will be semi-transparent.

click here for Fig. 3 (steps 5 & 6)

5. Make sure you'll be filling the area with pure black (which will give you total transparency) by tapping the D key to get the default colors (white foreground, black background,) and then the X key to swap them (black foreground, white background.) Yeah, that's reversed from what you might be used to; but you're working with a Channel now, not a layer.

6. Fill the selection with the foreground color (black) by holding down the Option/alt key and then tapping the Delete button. (Not to confuse you, but if you want to skip the step where you reverse the colors in Step 5, you can hold down Command/ctrl and hit delete to fill with the Background color.)

7. Click on the RGB Channel Thumbnail to return to normal viewing, and then on the layers tab, to get back to layers.


And that's it! Just resize to 512x512, save as a 32 bit .tga (Targa) file, and make your shirt in SL in the normal way. (Upload the image, checking in the Preview to make sure it's okay before you pay your L$10, go into Appearances, remove your shirt or undershirt (whichever you want to make this one,) Create a New one, and apply this texture.

Save your shirt with a name, and there you go! You'll have cutouts where the black design is, and the black will keep that area from having any "halo" problems.

Here's what the finished shirt looks like.

Next, we'll see what to do if you want to have a slightly more complex design. But it's very late, so I might not post that until this afternoon. :D
_____________________
Robin (Sojourner) Wood
www.robinwood.com

"Second Life ... is an Internet-based virtual world ... and a libertarian anarchy..." Wikipedia
Robin Sojourner
Registered User
Join date: 16 Sep 2004
Posts: 1,080
07-28-2006 18:24
Well, I've heard from the person who asked the original question, and he's got ti working now. But, because I said I would, I'm going to go ahead and post the other two section of this tutorial thing. (Even though no one has commented at all. :D )

In Real Life, of course, the t-shirt material would tend to curl away from the center of each butterfly, where the material comes to a point. To prevent that, we'd use thread to make the design more stable.

So let's see how to add those threads to our design now. We'll begin with the butterflies we made last time.

Click here for Fig. 1, to see step 1.

1. Make a new transparent layer, above the cut-out layer, and draw your stitching. You can make this as simple or as complex as you wish. (I added a bevel using a third-party plug-in, masked parts of it so it would look more like stitches, then merged the layers for clarity here. But then, I tend to be compulsive. :) )

Click here for Fig. 2, which illustrates the next step.

2. Hold down the Command/ctrl key, and click in the Layer Thumbnail, to select the stitching, pretty much as we did in the last section.

Click here for Fig. 3, which shows the steps 3, 4, and 5.

3. Click on the Channels tab, and then on the Alpha Channel thumbnail, as before.

4. Make sure that you're using pure 100% Black and White by tapping the D key again. But this time, no need to swap the paint chips. :D

5. Hold the Option/alt key and tap the Delete key to fill your selection with the White foreground color.
[/b] That will make the threads opaque when you upload the shirt. Remember, anything that's white in the Alpha Channel is opaque, anything that's black is transparent, and grey pixels are semi-transparent.

And that's it! Return to to normal viewing (click the RGB Thumbnail) go back to the Layers palette, shrink the image to 512x512, save as a 32 bit .tga (Targa) file, upload, and make your shirt in Appearances, as always.

If you want to see the finished shirt this time, click here. (By the way, if you take a look you'll see that I was working when I was overtired last night, and got the butterflies too high up on the collar, so that they stretch. Remember that, and learn from my mistakes! :D )

Next post, we'll see what to do if you already have a fairly complex design on a transparent layer, and just want to put it on a shirt, cutting out any "holes" in the design.
_____________________
Robin (Sojourner) Wood
www.robinwood.com

"Second Life ... is an Internet-based virtual world ... and a libertarian anarchy..." Wikipedia
Robin Sojourner
Registered User
Join date: 16 Sep 2004
Posts: 1,080
07-28-2006 19:10
This time, we have a fairly complex celtic knotwork triangle design, and want to put it on a shirt, creating holes in the shirt where there are holes in the knotwork. You would use this same technique for lace insets, or any other complex designs.

The only requirement is that you start with a design that is already transparent where you need transparency.

Click here for Fig. 1, which illustrates steps 1 and 2.

1. Place the design on its own transparent layer, position, and resize to taste, as you normally would.

2. Hold down the Command/ctrl key, and click the Layer Thumbnail Image. This will select all the non-transparent pixels, as we've done twice before

Click here for Fig 2, which shows the next step.

3. Go to Select > Inverse (or tap Shift Command I (Shift ctrl I on a PC)) to Invert the Selection. Now you have selected all the transparent pixels. It'll look the same, except there will be Marching Ants around the outside of the image, as well as around the design. That's the only way to tell the difference, so watch for it. :D

Click here for Fig. 3, to see Step 4.

4. Get the Magic Wand tool (W) Hold down the Option/alt key (a little minus sign will appear next to the Wand cursor) and click anywhere outside the design, to deselect those pixels. Now the transparent area inside the design, and only the transparent area inside the design, is selected.

Click here to see Fig. 4, which illustrates the next two steps.

5. Switch to the Channels palette, as you've done before, and click on the Alpha Channel Thumbnail, as you've done before. Once again, you'll have the black and white image with the marching ants showing you where your selection is.

6. Once again, tap the D key to make sure that you'll be working with pure, 100% black and white, and the X key to swap the foreground and background colors. You should have Black for the Foreground, and White for the Background.

Click here For Fig. 5, which shows steps 7 & 8.

7. Fill the selection with black, (Option/alt and Delete) as you've done before, to make the corresponding pixels transparent.

8. If there are left over lines, drop the selection (Command/ctrl D), swap the foreground and background colors again (X), and paint over them with white. (P will get you the Paintbrush. Hold down Control and click on a Mac with a one button mouse, or click with the right mouse button, to get a menu so you can pick the brush you want. Use the left bracket [ to make it smaller, or the right ] to make it larger.)

Click here for Fig. 6, which shows steps 9 and 10.

9. Switch back to the Layers palette, and click on the layer labeled "Cover - Hides White Halo" to select it. When you do this, you'll switch back to normal viewing, as always, and you'll be looking at a combination of the Red, Green and Blue channels (full color.) (We don't need to select the RGB combo first this time, because we're going to continue working on the file. I found, in testing these steps, that if you did it this way and then ran the Action I provided to copy, flatten, and shrink the file so you could upload it, it showed the Channels palette, and appeared to be uploading a B&W Image. I was afraid that some people might find that confusing, so I added a step to make sure it didn't happen.)

10. Choose Select > Load Selection from the menu, and choose "Alpha 2" as the Channel. (Yeah, I know. I should have renamed it Alpha 1, but it doesn't really matter what it's called, so just go with it.) Enable "Invert" by choosing it from the menu, and click OK.

Click here to see Fig. 7, which shows step 11.

11. Tap the D key again, to change the color chips to their Default colors (Black foreground, White background, because you're working with Layers now.) Then hold down Option/alt and tap the Delete key to fill that portion of the image with black. This will mask the white halo, of course. We didn't have to do it in the first two sections because the transparency had already been drawn in black.


And there you go. Resize the image to 512x512, as usual, and upload it as a 32 bit Targa file, as always.

In Second Life, check in the Preview to make sure it's okay, import it (pay your L$10), go into Appearances, remove your shirt or undershirt (whichever you want to make this one,) Create a New one, and apply this texture. Save your shirt with a name, and it's done.

Mine looks like this.

I hope that you find these tutorials helpful!

I put the necessary steps in bold, and the explanations for them in normal weight, so that people who just want a "cookbook" approach can do that, and those who want to understand why that's what I'm doing can have that information.

The Images are links, instead of being embedded, to save load time for those who don't need them, and allow people to see nice large pictures if they want to see. :D

Please let me know if you like this format. :D

Hope this helps!
_____________________
Robin (Sojourner) Wood
www.robinwood.com

"Second Life ... is an Internet-based virtual world ... and a libertarian anarchy..." Wikipedia
Gelob Magpie
Registered User
Join date: 16 Apr 2005
Posts: 18
07-28-2006 20:40
Very nice tutorials!
equilor Pan
Registered User
Join date: 23 Jun 2006
Posts: 21
07-30-2006 04:28
thank you this is what ive been searching for!

*hugs!*
Raindrop Drinkwater
Globally Creative
Join date: 28 Jun 2006
Posts: 240
07-30-2006 15:30
That's just fantastic! Thanks!
Robin Sojourner
Registered User
Join date: 16 Sep 2004
Posts: 1,080
07-31-2006 15:23
Thanks, everyone. :D Glad that you found this helpful.
_____________________
Robin (Sojourner) Wood
www.robinwood.com

"Second Life ... is an Internet-based virtual world ... and a libertarian anarchy..." Wikipedia
xCarrerax Savard
Registered User
Join date: 1 Jul 2006
Posts: 11
08-01-2006 12:05
-bows lots n smiles-..thank you SO MUCH for these two..bookmarked them. Once I get some things off the shelf I will definately post a couple screen shots here for u. or find you in sl..
Jennifer McLuhan
Smiles and Hugs are Free
Join date: 22 Aug 2005
Posts: 441
08-21-2006 16:11
Bump