Tutorial: Photoshop Tricks for Character Skins

[redrob41]

Original Thread

 

Well, I've been making quite a few skins and mods here now for over a year. Recently though, I was making some suggestions to a fellow modder, and he asked me to make a tutorial. I'll slowly add new posts for new tricks. The first one is fairly simple;

 

This is how I maintain shadows in newly textured areas:

 

Step 1: Open the file you want to work on (in this case P_BastilaBB01.tga). I usually save it right away as a Photoshop file, and rename it.

Show spoiler

(hidden content - requires Javascript to show)

 

Step 2: use the selection tools to outline the area you want to work on (see the dashed outline in the image above). Then create a new layer (for now it is called Layer 1 by default).

Show spoiler

(hidden content - requires Javascript to show)

 

Step 3: desaturate the new layer. This will make the layer appear as greyscale.

Show spoiler

(hidden content - requires Javascript to show)

 

Step 4: set layer 1’s Blend Mode to “Overlay”. This will make Layer 1 affect the layer directly below it. Now, the shadow areas will cause the layer below to become darker (aka “multiply”), and the highlight areas will cause the layer below to become lighter (aka “screen”). The closer to middle grey on this layer, the less the layer below is affected.

Show spoiler

(hidden content - requires Javascript to show)

 

Step 5: in order to increase the contrast, I usually use the Levels adjustment, so that I have a little more control.

Show spoiler

(hidden content - requires Javascript to show)

 

On the histogram in the middle, there are three sliders that control the Input Levels. By sliding the black one to the right, all the dark areas become darker. Sliding the white one to the left makes all the light areas whiter. When you slide the grey one to the left, more contrast. Slide it to the right, less contrast.

Show spoiler

(hidden content - requires Javascript to show)

 

Step 6: create any new texture you want on a new layer (in this case, a simple render clouds filter followed by the water paper filter). On its own, it looks fairly flat and lifeless. (I’ve also turned Layer 1 off for now.)

Show spoiler

(hidden content - requires Javascript to show)

 

Step 7: select the blank area of Layer 1.

Show spoiler

(hidden content - requires Javascript to show)

 

With this area selected, make Layer 2 active again. Then create a "Layer Mask". A layer mask controls layer transparency.

Show spoiler

(hidden content - requires Javascript to show)

 

Here you can see the layer mask as a little black & white picture next to the layer thumbnail. Basically, the white areas are 100% opaque (100% visible). The black areas are 0% opaque (0% visible). Any greys will be partially transparent. (Advanced: you can edit the mask by clicking on its thumbnail, and painting with white, or erasing with black.)

Show spoiler

(hidden content - requires Javascript to show)

 

Step 8: now that layer 1 is turned back on (renamed to Highlights & Shadows Layer) it will cause layer 2 (renamed to New Effect Layer) to have a little more three dimensionality instead of being relatively flat.

Show spoiler

(hidden content - requires Javascript to show)

 

Step 9: if the highlights and shadows seem too harsh or contrast, they can be readjusted using Levels again. Here, the bottom two sliders are used, and they change the Output Levels. As the black slider moves to the right, all the dark areas of the layer become more grey (lighter). Similarly, as the white slider moves to the left, all the white areas of the layer also become more grey (darker).

Show spoiler

(hidden content - requires Javascript to show)

[redrob41]

The great thing about Photoshop is that there is a hundred different ways to accomplish the same task. Here is another way of adding shadows, but a bit more advanced:

 

Step 1: create a New Effect Layer (step 6 above) and make a layer mask of the area you want to work on by using the selection tools.

 

Step 2: copy the entire background layer, move the new layer (background copy) above the Effects layer. Desaturate the layer, and change the Blend Mode to “Overlay”. (these methods were all covered in the post above)

 

Step 3: Create a “Clipping Mask”. What this does is makes the current layer visible ONLY in the same places that the layer below it is visible. In our case, the layer mask on the New Effect Layer is what controls the transparency of both these layers.

 

I’ve condensed these three steps into one image:

Show spoiler

(hidden content - requires Javascript to show)

 

Here is the result of the clipping mask. Note that the thumbnail now has a little arrow pointing down at the layer below it (the layer that it is clipped to).

Show spoiler

(hidden content - requires Javascript to show)

 

Step 4: Adjust the Levels. This time though, I used an Adjustment Layer.

Show spoiler

(hidden content - requires Javascript to show)

A box will pop up where you can change the name of the Adjustment Layer, and where you can choose to use the layer below it as a Clipping Mask.

Show spoiler

(hidden content - requires Javascript to show)

Using the Levels box is the same as before. The difference, however, is that it will affect all the layers that it is clipped to (in this case, both the Background Copy and the New Effect Layer).

Show spoiler

(hidden content - requires Javascript to show)

The advantage of using a layer for your adjustments is that any changes you make can be undone at any time. You can also go back into the Levels dialog box and make more adjustments at any time (just double click on the layer thumbnail). You can mask parts of the adjustment layer by clicking on the Mask thumbnail (then painting or erasing).