Monday, November 13, 2006

Day 50: Tan Leather and Creating Clothes Part 1



Hello from New York! Behind me is a living tribute to the World Trade Center in Second Life. These 2 giants are an example of what can be done in SL. I dont know exactly how tall they are or if they are exact replica, but they are a pretty amazing sight.



Just to give you an idea, Im the little spec in the center of this picture!

The buildings and surrounding structures are currently empty except for a lounge/casino on the 108th Floor. But I have a feeling this will develop into another SL landmark. ***Update: This did not develop into another SL landmark...it is no longer there***



Anyways, what do you think of my outfit today? :) I decided to try making a leather outfit today. No, not the biker kind of leather! I wanted a cute little tan leather skirt and boots. OK, I saw them in a store, but cant afford it in RL. So Im making them in SL! :)

The leather texture is created using the cloud and other filter effects in Photoshop. The skirt and boot uses the same texture, but the skirt has been tinted to a darker shade. The shirt is from Pixel Dolls. Part of my shopping spree. Theres more to come :)



BTW, like my boots? Yep, you guessed it, these are re-textured versions of my dino boots!

I have had several people ask me about how to make cloths in SL. Since I am doing a blog, I thought I can write it up once and just point people here :)

There are 3 major ways to make normal AV clothing in SL: Using the Appearance Menu only, using textured prims, and using texture maps. Of course, you can combine all 3 to create different effects, as I tend to do on most of the outfits I wear. For extra small or large AV's (like tinies or large furries), they may be limited to using textured prims only (Im not an expert on this topic :P).

Most of you are familiar with using the Appearance Menu. Just right click on yourself, select Appearance..., and go through the tabs under Clothes. Theres even a tutorial of this on Orientation Island, when you first entered SL. This method enables you to create basic outfits with a single color. You can edit the length of the outfits and features like collar height and poof on the skirt.

In addition, you can add a basic texture to enhance the look of your fabrics. There are a number of fabric textures already in your Inventory, under Library/Textures. You can also upload textures from outside SL, or purchase textures from texture stores. Also, freebie places like Yadni's have some $1L boxes of textures.

However, the downside of applying texture in this way without building them using a texture map is that the textures tend to appear out-of-focus or stretched. Also, there are some limitations on the shape of your clothing. For example, you cannot put a slit exactly where you want on a sleeve or a skirt.

The second method is using textured prims. These are based on objects created in-world (such as boxes, cylinders, spheres, toruses [tori?]) with textures applied to them. Most items that stick out from your avatar are examples of textured prims. This includes prim hair, prim shoes, prim jewelry, to prim clothing (like the poof on prim skirts, for instance).

But unless you are making special dance silks for belly dancing, you would rarely use textured prims alone to create clothing. For one thing, textured prims are difficult to fit, since avatar body sizes vary tremendously. Something as simple as a necklace may require significant adjustments to get that "fitted" look. But it is possible to build entire outfits out of textured prims. In fact, many of the specialized AV's are composed mainly of textured prims (such as robots, dragons, and many furries).

Creating textured prim clothing is no different than building a house or any other prim-based object. Just link a bunch of shaped prims together, apply some textures, then attach the object to your avatar. To get started, try one of the many free classes offered on SL, from building water fountains to fireplaces. There are even special classes on jewelry-making and working with small prims.

But when it comes to making clothes, I think most people are thinking of clothing based on texture maps. These are textures specially "drawn" to fit onto an avatar as a clothing item. These are typically the clothing you purchase in most SL stores.

If you purchased one of these texture map clothing items from a store, you can just "wear" it. These items are basically a texture applied to a clothing item, same as those created above using the Appearance Menu. The difference is that the texture is created around a texture map. The same texture map used by the Second Life software to rez the clothing around your avatar. So you have precise control over the shape of the clothing, special effects (like highlights and wrinkles), and how your design would "stretch" on your avatar.

To use texture maps, you will need a software that supports layers. I use Photoshop, although I understand that Paintshop Pro and GIMP also support layers or their equivalent. The steps below are for Photoshop because...well..thats all I know...barely :P

You can download the texture map templates for free from the secondlife.com website. In addition, there are 2 other sets of templates created by other designers: Robin Wood's and Chip Midnight's. The 2 templates created by Robin and Chip are higher resolution with more details, enabling finer control and better seam matching. Personally, I use Robin's templates because I started with a class that taught with Robin's templates. I use the "Layered Photoshop (.psd) Files", without Vector Smart Objects (dont know what those are for :P).

As you can see, there are several different clothing template files. Theres one for the head (mainly for creating skins), top part of the body (for shirts, jackets, undershirts, and gloves), bottom part of the body (for pants, underpants, socks, and shoes), and skirt (my favorite :) !). BTW, upper and lower body tattoos are just mostly-transparent clothing items (see my entry on Alpha Channels).

SL supports a maximum resolution of 512x512 for textures. You can upload higher resolution textures, but the resolution would be wasted and it would take significantly longer to download the textures (increasing lag). So make sure that your final textures are no larger than 512x512.

Both Robin and Midnight's templates come in 1024x1024 resolution. This enables you to work on your design in higher resolution. But be sure that you reduce the resolution to 512x512 before creating your output file (in most cases, this would be a Targa or .tga file).



So to get started, just open up your graphics SW, and load one of these template files. Here is the "top" template for shirts, jackets, etc.

Notice the template breaks the body into separate pieces. The front (or chest) is on the left, the back is on the right, and the top/bottom parts of the arm are at the bottom. Note that the ENTIRE map is only 512x512, so thats not a lot of pixels for the clothing details! Thats why a generic texture tends to look out-of-focus. A large part of making high quality SL cloths is to make something look good with a limited number of pixels.

Note that the same texture maps are used for both male and female avatars. However, the texture maps stretch differently depending on body shape. For example, the top body texture map contains a lot of...um...details for the female chest. These areas stretch quite a bit on the female avatar (depending on how far you've pushed certain sliders ;P). However, there is (or should be :P) far less stretching on a male avatar.

The best way to see how these texture maps apply to the avatar is to make a piece of clothing out of it and wear it. This will show you which points on the texture maps correspond to which points on your avatar. This is great for trying to figure out where to cut the openings and how the seams join together.

To create a piece of clothing from a texture map, first reduce an original texture map to 512x512 pixels. In Photoshop, go to Image/Image Size... and change the Width/Height to 512 pixels. Next save the map by selecting File/Save As... Under "Format:", select "Targa (*.TGA;*.VDA;*.ICB;*.VST)". Be sure you *CHANGE* the file name! The press "Save". When the "Targa Options" box comes up, select "32 bits/pixel" and click "OK". Congratulations, you have just created your first SL texture map!

Next, go into Second Life. Go to File/Upload Image (L$10)... Select the file you just created above, and click "Open" to preview the file. Dont be afraid: it wont cost you any money...yet :P

The preview window is really cool. Notice the drop down box called "Preview image as:"? This gives you a local preview of how the texture will map to the specific part of the avatar. If you are working with the "top" texture map, select "Female Upper Body" or "Male Upper Body". You can then use the "Alt" key and regular camera control movements to zoom in and out of the preview figure. You can also use the "Ctrl" key to rotate the preview figure. A lot of times I create a texture and come this far just to see how things would look, particular in checking seam joints and edges. Its a tiny window, but it can save a lot of upload fees if you use it well.

Once you are happy with the preview window, click "Upload (L$10)". Notice the L$10 part. Yep, this step will cost you 10 lindens, or about 4 cents US. If you want to create cloths, Im afraid you will spend a linden fortune on upload fees. But you are paying for storage space. When the upload is complete, the texture file will be in your Textures folder.

Finally, you need to create the piece of clothing. Right click on your avatar and select "Appearance...". Next, select the appropriate piece of clothing to create. For the "top" texture map, you would probably use "Shirt" or "Gloves", depending on what you are making. For the "bottom" texture map, pick either "Pants" or "Socks". Assuming you are working with the "top" texture map, go ahead and select "Shirt". If you are wearing a shirt, click the "Take Off" button at the bottom of the screen. (Dont do this in a Sandbox if you are a girl! :P)

Then, click the "Create New Shirt" button. Click in the square labeled "Fabric". When the box comes up, go to the Textures folder and find the texture file you just uploaded. Click "Select". At the Appearance screen, click "Save All". And that's it! You've created your first piece of clothing based on a texture map.

BTW, there is a really good, free SL class that covers the above steps and more. Its called "NCI Class: Advanced Clothing Creation" and typically runs on Mondays at 18:00 Linden time. As an extra bonus, you get ALL of the texture maps as clothing items in class, so you dont have to pay upload fees.

I'll cover the steps used to actually create a piece of clothing in Creating Cloths Part 2.



So how do I look covered by clothing templates? :)

32 comments:

Scoot said...

Thanks for the very clear description of how all the clothing works. I'm designing an unusal character for a performance art work, and got really confused as to how make new skins and shoes. Your post really helped.

SLNatalia said...

Scoot, you are very welcome! Let me know if I can help answer any questions! :)

Melanie said...

Thank you! I was looking everywhere for a step by step of how to make clothing using GIMP. This is wonderful! lol. Again thanks so much

SLNatalia said...

Melanie, Im glad you found it useful! GIMP is really a wonderful program!

Anonymous said...

Hi Natalia

Your post was very helpful in teaching me how to make clothes, but I have a problem: every time I upload a clothing item it doesnt have a transparent background, it has a white background or other color. This is really annoying especially when I am trying to make cool bikinis and things like that. It happens even when I save it to .tga. How do I get rid of it?

Thanks, Leelah Beltran (My Avatar name)

SLNatalia said...

Leelah, you need to create an Alpha Channel. This tells the graphics program which areas of the drawing is transparent (and how transparent).

I wrote a couple of tutorials on how to do this in Photoshop and GIMP. http://slnatalia.blogspot.com/2007/04/day-195-creating-clothes-with-photoshop.html

http://slnatalia.blogspot.com/2007/03/day-181-creating-clothes-with-gimp.html

Good luck :)

Anonymous said...

THANK YOU!

SLNatalia said...

Dear Anonymous, you are welcome. Hope this helps :)

Anonymous said...

Hi Natalia,

Thank you so much for the great tutorials on how to make clothing ... my only question is ... how do you create flexi skirts? LOL.

Do you have a tutorial on that or know where I could find one?

Thanks so much again, I love your blog I read as much as I can whenever I'm online!

-Shardae

SLNatalia said...

Shardae, in fact I have just the thing for you :) http://slnatalia.blogspot.com/2006/12/day-97-making-flexi-prim-skirts-with.html

All my tutorials are here: http://slnatalia.blogspot.com/2006/11/build.html

Hope this helps!

Joey Macaroni said...

I have a question that I simply cannot find an answer to. Regarding clothes, why not save them as PNG files? They look fine, the transparency works much simpler and I don't get the halo.

SLNatalia said...

Joey, the PNG upload is a new feature...Most of these tutorials were written before PNG's were available.

Anonymous said...

Hey Natalia, I am trying to save my first top I created which is a bikini, when I try to open the fabric and save it, it just saves over a default white shirt (the bikini on top of it)..so obviously my question is how do I make the default white shirt no more?

SLNatalia said...

Dear Anonymous, if you are using either Photoshop or GIMP, you can turn the layer with the white shirt off.

Check out the Create Clothes with Photohop (or GIMP) tutorials in the Build page. They have step-by-step instructions on making a shirt :)

Snow Fairy said...

Thanks so much for providing this for beginner designers! Finally figured out what a "prim" is! *blush*
I wonder if there is an offline previewer for what your clothes will look like on your avatar though, that would be much more convenient than uploading one at a time onto SL ^^

SLNatalia said...

Snow, there is an offline clothing viewer called SLCP. Its free! The latest Windows version is here: http://www.fileden.com/files/2006/10/8/271989/slcp_win.zip

If you are a premium member, here is the discussion thread in the SL Forums: http://forums.secondlife.com/showthread.php?t=141938&page=1&pp=15

Snow Fairy said...

Thanks for the link ^.^
Just gotta digest all this information before I start creating clothes hehe.

SLNatalia said...

Snow, try the Creating Clothes with Photoshop (or GIMP) tutorial on the Build page :) Its a good way to start...

Juanita said...

Thank you for your helping Natalia! It was really helpfull what you wrote in your blog :). Today I made my own clothes with your help within 30 minutes!!! Soo..happy for that. I didn't have so much texture in file, so I used one of my picture for the clothes material and guess what? It was nice anyway hahaha..a bit narcism but I love it! Thank you..I will read more your blog.. Have a nice time!

XXXXXX
Juanita

SLNatalia said...

Juanita, isnt it cool to make your own stuff? :) I hope you are having fun with your designing career! Good luck with your projects :)

Juanita said...

Yes, it's really cool to do that :). Nat, I wouldlike to know how you make clothes from the the real picture? Have you post abou that before? Can I add you in my contact list pls? Thanks Nat ;)

SLNatalia said...

Juanita, making clothes from RL textures (photosourcing) is a bit controversial. Especially for sale.

Some designers dont mind, while others have problems with it.

I personally use photosourcing sometimes for personal use items, but I never sell them. This is just a personal thing for me (not meant to suggest its the right or wrong thing to do!)

I never wrote about it because its controversial. Lol Im sure there will be all kinds of screaming if I even raised the topic ;P

Photosourcing is about cleaning up a RL photo and stretching it to fit the clothing templates. Theres no great secret: its just about knowing how the templates work, then making a RL image fit in the templates. A lot of it has to do with having a good RL image (against a good background) to begin with :)

Anonymous said...

http://slurl.com/secondlife/Chromex/191/137/30

I dont know if u have been to this place, but here u can buy a box of 10000+ textures for 5L$

Good tutorial btw, thanks.
Sola Skinstad

SLNatalia said...

Sola, thanks I will check it out :)

Oh my goodness, thats a lot of textures to go thru ;P

jasmine lumet said...

ummmm..hiya. i was wondering-one do you know any good photosourcing websites, asuka told me a site, but it cost..alot. lol
and also, how to make clothes look more realistic, i know the basics of clothing designing pretty well i guess, but i was wondering is there a way to make the texture look different and shading? if u could help it would b great!

Natalia Zelmanov said...

Jasmine, I dont know any specific photosourcing website (I saw a tutorial once, but dont remember where any more). Most of what I do is drawing new textures from scratch, so photosourcing really isnt my thing :P You might want to try the SL Forums though :)

Anonymous said...

Hi Natalia!

Congats on the store! I have been reading your blog on and off for over a year now and it's wonderful. One silly question I have is why do you need to upload the plain template to sl? Does this help with making clothes or is it unnessisary? Do you do this just to see where the seams land on your av?

Anyway, keep building, your the best!

xoxoxo Judy

Natalia Zelmanov said...

Judy, thank you ;) And yes, I recommend uploading the plain template to see how the seams and color lines match up with your avatar. You would be surprised how the template stretches ;P

Deja Tuqiri said...

Natalie your a blessing from above! Thank you so much for the step-by-step guide to making SL clothes using GIMP. It is very helpful as is your entire site. Keep up the good work!!

Natalia Zelmanov said...

Deja, heehee you are very welcome! Good luck on your project :)

Sherri said...

Blackdots Garfunkle (SL Name)

Your store is absolutely great. I own at least 5 or 6 hairstyles that you designed. I teach interior design students and they are interested in building items in SL. Your tutorials are great and easy. I'm a big fan and using your store to teach my class with.

Natalia Zelmanov said...

Sherri, thank you so much! Lol oh dear, Im a terrible at building big things in SL (like the store :P)