Glass Lion Design - a THERE fansite

Skinning Tutorial
Recently, I was asked for some advice on skinning for There. I thought that the information I provided could be helpful, so I am decided to share it here.

I have not used the stylemaker product at all I can help with some basic skinning tutorial advice. Forgive me if I go into too much detail, but I don't know your current level of skill, and I want to be able to reproduce this work for others. I do assume basic knowledge of Photoshop's selection tools and layers pallet – if you are unfamiliar with these, I recommend the Photoshop 7 WOW book – as it is an excellent learning tool for both beginners and intermediate users of Photoshop (best $50 photoshop dollars I ever spent.)

How Skins Work
A skin is like the peel of an orange – if you peel and orange (neatly, not like I do, ripping it into shreds) you would have a flattened shape that could be rewrapped around the mesh that is the orange. When you work on a skin, you are basically painting a 3D object that has been squashed down into the 2D world.

The 3D program is going to do what is called UV mapping, and place different parts of the object into the smallest 2D area possible (this is mostly true of games and low poly applications) even if they make absolutely no sense to your eyes. I use the buggy as an example here to make it easier to understand.

Here, I roughly labeled the majority of parts to the buggy skin. As you can see they are scattered everywhere and many parts are used more than once in the final mesh (I.E. the tires, the seats, the floorboards, the running boards… etc) also some items are larger/smaller to allow for more or less detail (I.E. the hood ornament)

The first step I take when designing for there is to create a BETTER base skin to work with than the one provided… this is how I do it in Photoshop 7.

First, I find the example skin for my product provided by there, and then create a base from that. I do this by first opening the file in Photoshop and saving it with a new name in . psd format allowing me to make use of layers – layers are your best friend in this process.

Then once I have that done, create a duplicate of the base layer and hide the “background” layer. To do this drag the “background layer” in the layers pallet to the “new layer” icon:

Then click the “eyeball” icon next to the locked background layer that will be on the bottom of the layer pallet. Then I de-saturate the new layer I have created by pressing cntl+alt+U . You should now have something that looks like this:

From there I adjust the contrast and brightness a bit to lighten my base layer – this is found in the Image Menu: Image>Adjustments>Brightness and Contrast – this is optional, but it is what I use because it fits my style.

This is a good approximation of the look I go for as a starting point:

From there, I want to remove the racing strip included in the sample (why they included a “non-plain example is beyond me”)

I do this by copying and pasting a bit of the image next to the stripe and moving it with the selection tools.

You can easily stretch the copied section on the buggy skin because it will match up perfectly. These images are a very close view of the hood.

Once I have done this to all the offending “stripe” portions, I now have a base on which to build. I use a wacom graphire 2 tablet when painting, but you can just as well use a mouse for the technique I am going to use.

First merge the new layer you have of copied “stripe” areas onto the background copy layer ( ctrl+e while “layer 1” is selected) make a new layer by clicking the new layer button or pressing ctrl+shift+n . and select this new layer as the active layer. For simplicities sake, I'm going to make a fairly simple but colorful new buggy. Select the brush tool, and using a medium sized brush, select a base color for the “body” of your buggy, I'm going to use a nice golden color because that's the mood I'm in.

Paint over the areas of the buggy that make up the body. Don't worry about being too perfect here, you can clean up the places that you go “outside the lines” later in the project.

Doesn't look too pretty does it… now we learn why we use that black and white base layer. In the layers pallet, where you see the drop down menu that says “NORMAL” play with a few of the choices there… I like to use one of the following depending on the tone it provides… Multiply, Linear Burn, Overlay, Color Dodge… go through the list see what you like best here… I'm going to use Linear Burn on this one, because I really like the rich tone it gave to the layer below's shadows.

From here, zoom in and clean up some of the rough edges where the colors over lap areas, or don't fully cover areas they should. Use the selection tools as well as the eraser tool.

Notice the clean edge not bleeding onto the dash itself.

I usually repeat this process with different sections of the vehicle such as the dash etc. using different layers when changing the colors scheme… remember you can also play with the opacity as well as the layer style in the drop down to achieve different effects without having to paint every single detail.

You should end up with something like this:

As you can tell, I pretty much ignore the bottoms of the vehicle – because in there – the bottoms never receive light – so you hardly see them. But you have a fully shaded, semi-realistic skin – now get in there and add those little details like flames on the hood, Logos, etc… and save your file as a jpg… load up your model viewer and you can see the skin in action by importing it onto the buggy… tweak as needed, and have fun with it!

Remember to make use of layers – obviously this skin is very simple, and probably wouldn't sell well , but it should be able to give you a basic idea of how to skin. One thing I didn't cover is how people do the lovely folds that make things look so realistic on clothing… let's look at my jacket design ( http://glassliondesign.com/jacket.htm ) the folds on that jacket are what gives it the realistic look.

This is achieved with the dodge and burn tools. Let's take a new image that is similar to the jacket's skin.

Obviously this wouldn't look very realistic, but with a little applying of the dodge and burn brushes with a large-medium sized soft brush in PhotoShop give it a much more life-like look.

(This is some dodge work – with my dodge brush and a bit of smoothing with the smudge tool at about 16% strength)

This has had some burn tools added (highlights) and then some more smoothing with the smudge tool at about 16% strength)

As you can see this has a bit more life and realism to it in about 2 minutes of work. Look at photos of the folds on clothes to help you get the idea of where to put shadows and highlights.

Remember to check your work as you go with the model viewer. There and most other low poly programs look best with minor details. Too much detail looks odd in There because of the low poly count.

This site is not affilited or approved by There, Inc.
Glass Lion Design is an UNOFFICIAL Fan Site Maintained by Paul Couture (Avatar Name: Bonk)
Some images are outright stolen from www.there.com in an effort to promote and encourage use of There Inc.'s software
and enhance my own enjoyment of being a member of the There Community. I hope that the lawyers like free advertising
more than arguing in court and don't hunt me down like the copyright infringing fool that I am.