Saturday, September 22, 2007

Day 363: Creating Goth Avatar Skin Part 1



Have you seen my husband... Victor?

Heehee...my all time favorite movie is the Corpse Bride. So what better way to start the series on Avatar Skins than to make Emily, the Corpse Bride :)

I get requests for a skin tutorial almost every week. Ive been avoiding it, cause its really not something Im good at. But Ill give it a try here just for fun :)

In this Part 1 of the Avatar Skin series, we will work on a Goth-type skin (specifically, the Corpse Bride :D). My goal is to describe all the general steps involved in creating an Avatar Skin. We will create a base set of skin textures and apply it to our avatar.

I chose a Goth-type skin to start because I want to focus on the process of creating Avatar Skin, not on all the texture work. A Goth-type skin is usually less complex than a realistic-looking "normal" skin. If I dont pull out all my prim hair, I will try to do "normal" skins in the future :)

Because there is a lot of texture work involved, I cannot provide step-by-step instructions. Instead, I will describe the texture work as best as I can. At the end of this tutorial, you may not have a usable Avatar Skin. However you should get a better understand of all the steps involved in creating one.

Creating Avatar Skins is a challenging and time-consuming process. And since the best way to view a texture is to upload it, you will probably spend a couple hundred L$ in uploads to make your first skin. Think of it as the cost of a cup of coffee :P

This tutorial assumes that you are very familiar with Photoshop (or another paint program). Also, you should be familiar with creating clothing for Second Life (including how to create Alpha channels). Trust me, the first thing you create in SL should not be an Avatar Skin! ;P

***Update: I received a comment from Misae pointing to a wonderful resource: Eloh Eliot has free skin files in PSD format for people to use as a learning tool. The only stipulation is that anything created with these files be also free. Here are a couple links to the files: Vint Falken's blog and Eloh's files.


Overview



Second Life Avatar Skins consists of 3 texture file: Head, Upper Body, and Lower Body. Theres a matching texture template file for each of these textures.

You are probably familiary with the Upper Body and Lower Body templates. The Upper Body template is the same one used to make tops and shirts. The Lower Body template is the same one used to make pants and socks.



These 3 texture files are placed in the Tattoo layer of an avatar. If you open the Appearance window, the Tattoo layer is in the "Skin" tab.

Creating Avatar Skin uses exactly the same process as creating clothing. It just happens to be a piece of clothing that completely covers your avatar from head to toe. But the process is the same: you create a texture in a paint program, create Alpha channels as needed, upload the texture, then apply it to your avatar.

The big difference is the time it takes to create the texture. The professional SL skin designers often take weeks, even months, to develop a complete line of skins. So you can spend as little or as much time as you like in developing Avatar Skins.


Getting the Texture Templates



You probably have texture templates that you use for making clothes or other designs. For the purposes of this tutorial, you will need the SL Avatar UV templates from Robin Wood. Robin Wood's Head template has a shading layer that saves a lot of time for creating simple Avatar Skins.

You can download the templates from here. For this tutorial, you will need the "layered Photoshop (.psd) Files". You should download the "All (7.6 MB)" file, which contains all 3 texture templates.

Once you have downloaded the "Layered-UVs-PSD.zip" file, go ahead and uncompress the file.


Preparing the Avatar

Ideally, we would create one set of textures in Photoshop, upload the textures, apply it to the avatar, and thats it.

Realistically, we will be tweaking the textures many times, uploading after some major changes, apply it to the avatar so we can see how it looks, and go back to tweaking. Creating a decent Avatar Skin is a repetitive process, each time adding more things until you achieve the desired look.

So before we can start working on making textures, we need to prepare our avatar to use our new textures.



Open your Inventory window. Click on the "Create" option from the top menu bar. Select "New Body Parts >" and "New Skin".













This will create a "New Skin" object under your "Body Parts" folder.

Right-click on the "New Skin" object, select "Rename", and change the Name to "Tutorial Skin".

Right-click on "Tutorial Skin" and select "Wear".






And heres our inner newbie...Pretty scary, isnt it? :P

Right-click on your avatar and select "Appearance..."



At the Appearance window, select the "Skin" tab.

Notice the Head Tattoo, Upper Tattoo, and Lower Tattoo texture boxes are empty. We will be creating textures for each of these boxes.



In my case, I have created a special shape and a set of eyes for Emily. Depending on the Avatar Skin you are making, you can just use your "normal" shape and eyes.

I also have a prim hair (a modified LeAnn with a custom texture). Hey, I gotta have hair ;P

If you have a specific shape or eyes you would like to use, you should "Wear" them now so you have a more realistic view of the skin.


Creating the Base Head Texture

Because there are 3 templates involved, I prefer to create a quick set of base textures. We can then upload these and apply them immediately to the avatar. Then, we can go back, do the detail work on the textures, and have a decent avatar to preview with.



Lets start with the Head. Open the "SL Avatar Head Layers.psd" file in Photoshop (or your preferred paint program).

Select "File/Save As..." and save it as "Tutorial Head.psd".












Go to the "Layers" palette. Click on the "eye" next to ALL layers to hide them. Then click on the "eye" next to the "Eyebrows & Eyelashes" and "Shading" layers to show just those 2 layers.











Go to the bottom of the "Layers" palette. Click on the "Create a new layer" button on the bottom of the "Layers" palette to create a new "Layer 1" layer.

Move "Layer 1" to the bottom, below the "mouth" layer.

Click on the "eye" next to the "mouth" layer to make it visible.






Change the foreground color square and pick a base color for your skin. If its a Goth skin, you might want to choose a very light beige. In Emily's case, shes more cyan :) If its a "normal" skin, then pick a desired skin-tone.

Hint: You can use the "eyedrop" tool to sample colors from a picture. This helps a great deal in picking base colors.

Click on "Paint Bucket" button. Make sure that the new "Layer 1" is selected. Click on the drawing to fill the drawing with the base color.

Notice the drawing already has shading for major facial features (from the "Shading" layer). This gives our skin instant definition without having to draw it in by hand! (thanks Robin, you are awesome :D)

Thats it! We are read to save and export the Head template.

Click "File/Save" to save your changes.

Click "File/Save for Web...".



At the "Save For Web" window, change the Preset to "JPEG High". Click the "Save" button.

Note that the drawing is at 1024x1024 resolution. You normally want to use this level of resolution while working on the skin. But for final output, you may want to reduce the resolution to 512x512 so it would load faster.

Also, using "Save For Web" reduces the quality of the color but creates much smaller files. If exact color is very important, you should use "File/Save As..." and select "JPEG" instead.


Creating the Base Upper Body Texture



Next is the Upper Body template. The Upper Body (and Lower Body) templates are a lot easier than the Head. We just want to fill it with a color that matches the Head.

However, the Head template uses a combination of 2 colors: the base color you chose, and the shading. The shading at the neck seam is a grey color (Red = 90, Green = 90, Blue = 90). So we need to create 2 layers and put these 2 colors onto those layers.

Open the "SL Avatar Top Layers.psd" file.

Select "File/Save As..." and save it as "Tutorial Upper.psd".





Go to the "Layers" palette. Click on the "eye" next to ALL layers to hide them.

Go to the very bottom of the "Layers" palette. Click twice on the "Create a new layer" button on the bottom of the palette to create 2 new layers.

Click and drag both of these 2 new layers to the bottom of the "Layers" palette.







Make sure that the bottom-most layer is active ("Layer 1" in this example).

Click on the foreground color square. Select the same base color you used in the Head template.

Click on "Paint Bucket" button. Click on the drawing to fill the drawing with the base color.




Select the layer just above the bottom-most layer ("Layer 2" in this case).













Click on the foreground color square. Enter the color values for a grey: Red = 90, Green = 90, Blue = 90.







Make sure the layer above the bottom-most layer is active ("Layer 2" in this example).

Click on the "Paint Bucket" button. Click on the drawing to fill the drawing with the grey color.



Make sure the layer above the bottom-most layer is active ("Layer 2" in this example).

Change the Opacity to 30%.


Thats it for the Upper Body template!

Click "File/Save" to save your changes.

Click "File/Save for Web...".

At the "Save For Web" window, change the Preset to "JPEG High". Click the "Save" button.


Creating the Base Lower Body Texture



The last one is the Lower Body template. We need to do the exact same thing as the Upper Body template: turn all the layers off, create 2 new layers, fill 1 with the base color, and fill the other with the shading color.

Open the "SL Avatar Bottom Layers.psd" file.

Select "File/Save As..." and save it as "Tutorial Lower.psd".

Go ahead and repeat the steps in the "Creating the Base Upper Body Texture" section above.


Applying the Base Textures

Now that we have the 3 texture files, its time to upload them and try it on our avatar :) Note that this step will cost L$30 (L$20 if you just use the same texture for Upper and Lower Body).

Go ahead and upload the 3 textures files: "Tutorial-Head.jpg", "Tutorial-Upper.jpg", and "Tutorial-Lower.jpg".



Right-click on your avatar and select "Appearance...".

At the Appearance window, select the "Skin" tab. Click on each of the 3 Tattoo textures and select the corresponding texture you just uploaded.



Tada! You just made you first complete set of Avatar Skins :)

You may notice a slight gap between the Head texture and the Upper Body texture at the neck. We will fix that in Part 2.

Now we are all set to start tweaking those texture files...




Victor darling, WHERE ARE YOU?




numly esn 43962-071006-356758-14

© 2007 All Rights Reserved.

30 comments:

Aberystwyth Lane said...

This.. is... AWESOME. And Corpse Bride rocks! Thanks, Natalia!

gabriella said...

Natalia -- I am writing a magazine feature on adventuring in SL, and could use your help. If your interested in chatting more, send me an email to scienceline.info@gmail.com, and we start talking (I don't want to post my detail!). Am on a tight deadline, however, so will need to hear from you -- hopefully today!

Cheers,
Gabriella

Ollie Shelford said...

:O *speechless*

Moran Singh said...

That's a great avatar Natalia! Once again, you find a way to help us learn all the ins and outs of SL. Thank you!

Anonymous said...

If the TEST grid ever comes back online, you can upload textures there until you like the way they look, then upload the one you like onto the main grid.

It saves Lindens! But you have to download and install theviewer (the ADITI viewer) for that grid. You will start with $5,000L to play with, and nothing counts there except the experience.

Ekio Locatiare said...

hooray for corpse bride! I'm a big fan. he he.

Good job on the tut as always hun. I've been working on my own custom skins for a while now but its soo much easier to make a furry skin than a human! *lol*

SLNatalia said...

Aberystwyth, I LOVE Emily...totally going to work on her AV :)

Gabriella, thanks for contacting me. I will try to get in touch :)

Ollie, thanks! :)

Moran, hope you find this tutorial helpful :)

Dear Anonymous, thats right! I keep forgetting about the Test grid (although Ive never been on it :P). Lol Im too scared to load a different SL program. But thats a great idea for saving some L$ with all the texture uploads! :)

BTW, L$5000 may not be enough for upload fees if you are seriously working on skins ;P

Ekio, Ive wanted to make an Emily AV for a year now! :) Hopefully, I can finish her in time for Halloween.

And congrats on your skin! Isnt it amazing how much work is involved?

Ekio Locatiare said...

crazy how much work is involved. But I find the same thing with making clothes. ^-^ I think its my eyes. I tend to get curves wrong. he he.

SLNatalia said...

Ekio, lol the lines are all crazy on those templates :P I can never draw a straight line on those things and have them come out. Thankfully, skins arent suppose to have lines :)

asia said...

hey nat!... UM I.. dont have photoshop so can you explain to me what to do with.. this tutorial i only have GIMP...:( sorry

SLNatalia said...

Asia, Im sorry, but I dont know GIMP well enough to make the skin with it :( Unfortunately, I used a LOT of Photoshop-specific effects, brushes, etc. The next part gets even worse :P

However, the steps are the same: you create the 3 texture files using your paint program, upload, and apply them to your avatar. I was trying to show how these steps worked. So you can actually use any paint program to create the textures...

21firewire said...

Natalie, you are awesome. Your SL tutorials are the best on the web by far. Thank you for generously donating your time to helping others. Your creativity is amazing!

SLNatalia said...

21firewire, thank you so much :)

cairo dabu said...

AVPainter would be a good option for trying skins on an avitar without having to upload them to SL. It's not cheap but uploads add up.

SLNatalia said...

Cairo, thanks for the tip! Ive been meaning to try SLCP. So AVPainter is definitely something worth looking into :)

ajzialheara said...

Where did you get that that template? i have the whole set of templates but they didnt come with a "shadow" "Eyebrows" or "eyelashes" layer :o wtf

ajzialheara said...

Never mind! lol I found it online :3

Natalia Zelmanov said...

Ajzialheara, heehee Im glad you got it! Good luck ;)

MissSkin. said...

Wow Natalia! Great job, most tutorials are often boring and I do not understand them but yours was fun to read and I never got bored of it. This really helped be out and The Corpse Bride is amazing :) Great job!

Natalia Zelmanov said...

MissSkin, heehee thank you so much! Have fun with your creations ;)

lilia verne said...

Hi Natalie

thanks fpor your turotials but i ve got a problem with the skin

when i fill the layer 1 with the base color i want it doesnt appear on the face only on the background!

what can I do? is there a setting i have to do before?

cheers lil

Natalia Zelmanov said...

Lilia, do you have a layer above Layer 1? Try this: click on the little "eye" thing to the left of each layer above Layer 1. This "hides" the layer. It will show you which one is covering Layer 1.

Natalia Zelmanov said...

Lilia, do you have a layer above Layer 1? Try this: click on the little "eye" thing to the left of each layer above Layer 1. This "hides" the layer. It will show you which one is covering Layer 1.

Anonymous said...

Um mine dident work when i clicked layer 1 nothing came up so,i tried draging it to the template and it said it wouldent work :(.

Sonagirl Solo said...

srry that the annomys thing but yahh mine dident work

Taylor Swift said...

Hey well when i tried to change the foreground color it did not work what do i do to fix it????

Natalia Zelmanov said...

Sonagirl, be sure you are using the .PSD version of the template (not the JPEG).

Taylor, not sure if this is what you need, but you can change the foreground color by clicking on the color square on the palette. Then you draw, brush, or fill that color onto the canvas.

Misae Silverfall said...

Got another notice to add, and just adding it here...

The Emerald viewer has a "Temporary Upload" feature. This allows you to upload an image that stays there for as long as you're logged in so you can make tweaks to get the image right.

The best part? Temporary uploads are free, so you don't waste money to upload, only to find your seams don't match. :) It made customizing my AVentity avatar so much easier.

Anonymous said...

This is a very helpful tutorial. Thank you. I have a question, though. I want to make a very specific skin and I want it to be photo-realistic. I found this video of how to make an Angelina Jolie skin, http://www.youtube.com/watch?v=cyRGg-9SRvU&playnext=1&list=PL844404B0652579F2&index=36 but he doesn;t narrate it so I don;t know what tools he is using. Can you help explain how to make photorealistic skins?

Anonymous said...

parabens gostei muito e obrigada por ajudar .

Strelhinha allen