Saturday, October 06, 2007

Day 377: Creating Goth Avatar Skin Part 2



Isn't the view beautiful? It takes my breath away. Well, it would if I had any...

In Part 1 of the Avatar Skin series, we started working on a Goth-type skin (specifically, the Corpse Bride :D). We created a base set of skin textures and applied it to our avatar.

In this Part 2 of the series, we are going to put some finishing touches on the skin textures and make them look more...err...presentable ;P We will be concentrating on the Head texture, since that is the most noticeable area for most skins (unless you are stripping ;P). Since there are numerous Photoshop tutorials and books, I will avoid going into Photoshop-specific techniques and concentrate on SL-specific things.


Overview



Thanks to the Shading layer in Robin Wood's head template, we already have some nicely defined facial features (like the nose, cheeks, and lips).



You may not notice the Shading layer, but heres what our texture would look like if we turned off the Shading layer! Quite a difference, isnt it?



But our Tutorial skin textures are still a bit...scary (and not in a good way :P). Theres a very noticeable gap between the head and the neck. The eyebrows and eyelashes doesnt quite match her...umm...complexion. And even though Emily is suppose to be a corpse, she still needs a bit of color :)

So we are going to fix these things up :)


Avatar Skins and Seams



Unlike clothing, Avatar Skins are not suppose to have seams. Unfortunately, there are many places where one part of a texture joins with another. When the colors dont match up at these joints, you will notice a seam.

Expensive 3D programs (like Lightwave, Modo, etc.) will let you draw directly on a 3D model (once you figure out how to use them :P). Then you can get as fancy as you like with the seams :)

But since I cant afford these 3D programs, I have to do the next best thing: make sure the colors match up at the joints using Photoshop.



To make good skin textures (or clothing textures), you need to know where these seams are and how they match up. The absolute best way to understand how these seams work is to Wear the texture templates.

Again, Robin Wood has kindly provided these texture templates for free in SL. Heres my blog entry on where to get these texture templates and how to use them.

For making skin, you should Wear the template called "R(S)W UV Map Skin".


Cleaning up the Neck Joint

Go ahead and re-open the "Tutorial Head.psd" file we created in Part 1 of this tutorial series.



Go to the top of the Layers palette and select the "Shading" layer. Change the Opacity from 30% to 100% so we can work on it.











There are 3 areas in the Head Texture that joins up with the Upper Body Texture.

If you look at the bottom edges of these 3 areas, you can see that the shade of grey changes along the edge. Thats whats causing the seam! So we are going to use the same shade of grey along the edge.



Click on the foreground color square. Enter the color values for the same grey we used on the Upper Body Texture: Red = 90, Green = 90, Blue = 90.








Click on the Brush tool and select the 13 pixel brush.














Draw a line across the bottom edges of all 3 areas. Take care not to touch the top areas of the head.










Next, click on the Smudge Tool. Select a 13 pixel brush. Set the Strength to 25%.







Blend the 3 lines you drew into the rest of the layer using the Smudge Tool. Be sure that you smudge up from the lines (not down from the Shading layer). This helps to blend the lines into the rest of the Shading layer.










Finally, go back to the Layers palette. Make sure the Shading layer is selected. Change the Opacity from 100% back to 30%.












There! The neck looks much better now, doesnt it? :)












Eyebrows

The eyebrows and eyelashes on the template may look OK for a newbie human, but they just dont look right for Emily! So we are going to replace the eyebrows and fix the eyelashes.

First, lets do the Eyebrows...



Go to the Layers palette. Select the "Eyebrows & Eyelashes" layer near the top.

Change the Blend Mode from "Multiply" to "Normal". You should now see the eyelashes and eyebrows against a white background.



Click on the foreground color square and select white for the foreground.

Click on the Brush tool, and select a 19 pixel brush.

Then just simply erase both eyebrows using your brush.



Go back to the Layers palette. Change the Blend Mode from "Normal" back to "Multiply".



In the Layers palette, scroll down to the "UVs" layer. Click on the "eye" on the left side to make it visible. This makes the grid lines visible, so you can figure out where to place the eyebrows.




Remember the "R(S)W UV Map Skin" that you wore on your avatar above? Now is a good time to use it to find out where to put those eyebrows :)









Go to the bottom of the Layers palette.

Click on the "Create a new layer" button. Change the name of the new layer to "Eyebrow L".











Use the Brush Tool (or whatever Photoshop tools you prefer) to draw in the left eyebrow. You can even cut and paste an eyebrow from another picture.

For this example, I used the Pen Tool to create a Path (so I can tweak it as needed). I filled in the Path with a darker color. Then I used Filter/Noise/Add Noise to add some noise to the eyebrow.

Note that as you make some of these changes, you may want to upload them to SL to check it on your avatar. This is the only way to tell what it will actually look like.



Once you are happy with the left eyebrow, we will copy it to the right side.

Go to the Layers palette. Right-click on the "Eyebrow L" layer. Select "Duplicate Layer..." from the popup menu. Change the name of the new layer to "Eyebrow R".








Make sure that the "Eyebrow R" layer is selected.

Click on "Edit" from the top menu bar. Select "Transform", and "Flip Horizontal". This will flip the eyebrow to the correct orientation.

Click on the "Move Tool" and move the eyebrow into position.

Now we have a set of nice eyebrows :)



Eyelashes

Eyelashes are probably the most complicated part about making skin texture. Thats because eyelashes need to have a transparent background.

We want black eyelashes. So we will change the color of the eyelashes, and build an Alpha Channel.



Go to the Layers palette. Select the "Eyebrows & Eyelashes" layer near the top. (Note that you will not see the eyebrows you just drew, because they are on separate layers.)

Change the Blend Mode from "Multiply" to "Normal". You should now see the eyelashes against a white background on the upper right corner.



Click on the "Image" option from the top menu bar. Select "Adjustments" and "Desaturate". This will turn the eyelashes grey.

Click on the "Image" option from the top menu bar again. Select "Adjustments" and "Brightness/Contrast..."

At the "Brightness/Contrast" window, change the Contrast setting to +50.




The eyelashes should now be black :)

Next, we need to build the Alpha Channel...



Click on the "Magic Wand Tool". Make sure that the "New selection" square is selected on the upper left corner of the screen. Set the Tolerance to 50. Make sure that "Contiguous" is checked.

Then click in the white area between the eyelash and the black line border.

Click on the "Edit" option from the top menu bar. Select "Clear". This will make the white area transparent (and show the blue layer beneath).




Go to the Layers palette. Right-click in the little picture on the "Eyebrows & Eyelashes" layer (make sure its in the picture!). Select the "Select Layer Transparency" option from the popup menu.









Go to the Channels palette. Click on the "Save selection as channel" button at the bottom of the Channels palette. This will create the "Alpha 1" channel.



Go to the Layers palette. Make sure that the "Eyebrows & Eyelashes" layer is selected. Change the Blend Mode from "Normal" back to "Multiply".



And heres what our skin looks like so far :)


Finishing Touches

We are going to put on a few more finishing touches. In particular, we are going to add some color to the lips, to the eye area, and some dirt.



Use your favorite Tool to draw in the lips.

I used the Pen Tool to draw a Path around the lip area (so I can tweak it as needed). Refer to the "R(S)W UV Map Skin" to see how the texture fits on the avatar.

I filled the Path with a pink color. Then I stroked the Path with a darker pink color (hey, even a corpse can use a lip liner :D) I blended the lip liner into the lips using a low Strength Smudge Tool.



For the eye area, I used different tones for the shadow around the eye area, and an accent shadow for the eyelids.

I used the Gradient Tool set to Radial Gradient to create the main eye shadow. The Gradient is set to go from opaque to transparent. I pushed outward in small strokes around the eye to create the effect of color radiating outward.

I made the accent shadow on the eyelids using the Pen Tool to create a Path. I filled the Path with the accent color, and stroked it with a darker color to create a liner effect.

Finally, I used the Smudge Tool to blend the colors together.



Once the first eye is done, you can copy the layer, flip it, and move it to the other eye (just like the eyebrows).



And I added just a touch of grey for the nostrils...





Lastly, Emily has some discoloration on her forehead, and a scar/hole on her left cheek.

I drew these in using one of the standard Photoshop "Spatter" Brushes.

Thats it...our texture is finally done! Yay!!!


Prepare for Upload



We have to perform couple tasks before we can upload the texture...

First, we need to turn off the "UVs" layer.

Go to the Layers palette. Find the "UVs" layer. Click on the "eye" on the left side to hide the layer.



We have been working with a 1024x1024 texture. This is great for detail work. Unfortunately, we need to save this texture as a Targa file. And 1024x1024 Targa files are HUGE: they are 4 times larger than a 512x512 file!

So we are going to reduce the resolution to 512x512.

Click on the "Image" option from the top menu bar. Select the "Image Size..." option. Enter "512" for Width and Height.

Because we have an Alpha channel, we need to save the texture as a Targa (.TGA) file.

Click on the "File" option from the top menu bar. Select "Save As...".

At the "Save As" window, change the "Format:" to "Targa (*.TGA,*.VDA,*.ICB,*.VST)".

At the "Targa Options" window, be sure you choose "32 bits/pixel" for Resolution and "Compress (RLE)" is unchecked.



See what a little lip color and eye shadow does for a corpse? :P

Creating a skin is about putting these little details onto the texture files. You can spend as little or as much time as you like. But a really good skin can take days or even weeks to create!

Good luck, and have fun making your own Avatar Skins! :)




Guess what "[Ctrl]-[Shift]-H" stands for?

Hop-scotch! :)

Bye!!!




numly esn 76761-071006-684746-47

© 2007 All Rights Reserved.

17 comments:

Anonymous said...

Fantastic! Im surprised no one else has published a tutorial on skin making...it's certainly one of the most popular and difficult avatar accessories to make!

Shockwave Plasma said...

Oddly enough sometimes I look like that on Monday mornings

Tsu Dho Nimh said...

Thanks!

Are you sure you aren't a Linden in disguise?

Anonymous said...

All your tutorials are fantastics.
You are very generous to share your Knowledge.
Thanks Natalia.
Regards, Goldy

Anonymous said...

Wow - thought I could never get my head around Photoshop - let alone really put a skin together. Just done the first bit and had a quick look at the second bit - together they explain everything I need to know! I realise you just apply the 'painting' on principles for the whole of the body! GREAT tutorials - thank you so much :))

Elborath Gelfand

SLNatalia said...

Dear Anonymous, avatar skin is definitely challenging to do well! :) I hope this tutorial is helpful!

Shockwave, heehee...I feel that way too ;P

Tsu, lol I dont think Lindens are allowed to be mermaids and run around SL causing mischief ;P

Goldy, thank you so much! I do hope these tutorials are helpful!

Elborath, thank you! Good luck on your skin project :) Heehee Im still trying to get my head around Photoshop ;P

Anonymous said...

Natalia,

I love your blog and read it every day. I'm hoping you can hlep me.

I went to a pary in-wolrd and was givin a skin, "Lee".

Like an idiot noob, I put in on and now I cann't take it off. It's on even when I have my default skin on. The delete is also grayed out so I cann't deleat it.

What can you recommend.

SLNatalia said...

Dear Anonymous, your avatar always needs to wear a skin, so you cannot take a skin off. If you "Wear" a new skin, your AV will automatically switch skins :)

21firewire said...

Hi Natalia,

I love your tutorials! :) In this one you mentioned something about drawing on a 3d model in programs like Lightwave. Do you mean you can create a skin in Lightwave and bring it into Second Life? And is this also possible with Poser?
I know nothing about either Lightwave or Poser but if you can make skins on them I'm willing to give them a try!

SLNatalia said...

21firewire, Ive only heard that it is possible to draw directly on a 3D model in certain programs. Ive never seen then though...

You might want to check the SL Forums (or post a new question). There are experts there who know the more advanced programs :)

21firewire said...

Thanks Nat! :)

Cairo said...

Hi Natalia,
I can't get the eyelashes to show up on my avitar. any idea what I might be doing wrong?

SLNatalia said...

Cairo, be sure that your Shape has eyelashes showing (in the Appearance window, under Shape/Eyes/Eyelash Length). You can usually see them, even though they are usually kinda ugly ;P

Neo Gynoid said...

Hi Natalia,

Thanks again for ur inspiring tutorials!Do u happen to know if there's a way to wear facial tattoos in Sl? I been makin one but I cant wear it other than on the default skin...???

Natalia Zelmanov said...

Neo, no, there isn't an easy way to wear facial tattoos (unless you make a prim attachment or something). Unfortunately, there is only a single Tattoo layer, and it is used by the skin. So you cannot wear another texture on top of that :(

Neo Gynoid said...

Thanks Natalia!!! : )

Natalia Zelmanov said...

Neo, you are very welcome ;)