• Welcome to Freedom Reborn Archive.
 

Skinning Tutorial

Started by murs47, August 29, 2007, 05:51:49 PM

Previous topic - Next topic

murs47

Well, here's my attempt at a tutorial. It was suggested a couple times by other members for a face tutorial, but I create my faces with a tablet and the reality is very few people here have a tablet.

Everybody has their own way on how they got about skinning so I figured I'd walk through on how I create
a skin. This is done in Photoshop CS3 but I think any version should work.

This is of course, a work in progress. I'm 100% sure some parts will be unclear and need further explanation. Once this first draft is complete I'll go back and refine. Then go in-depth with each step. Please feel free to ask as many questions as you like, I'll be more then happy to answer all them. In detail if necessary.

Last Wednesday(2/20/08) was a bitter sweet moment for me. Cable & Deadpool came to an end. A highly entertaining and funny end. But, it was still an ending to something I loved. That said, the character we'll be skinning for this tutorial is Deadpool.

Deadpool _muscular mesh can be found herel: http://www.newpowerinc.com/paradoxpages/paradoxmain.htm

Skinning Tutorial

Step 1: Creating the black. What we're going to do first is create our back-up files and colors for the skin. Open the character tool and select the deadpool_muscular mesh. Then select the standard skin. Hit the 'copy..' button and name the file Deadpool. You can name it whatever you want really, but naming it Deadpool makes it less confusing. ;)

- First open up your "male_basic.tga" file from you Deadpool folder we just created.
- Paste whatever base skin you're using and merge it down. CTRL+E
- Now desaturate the file. SHIFT+CTRL+U
- Make sure that the "background" layer is selected and hit. CTRL+J

- This should duplicate the layer. Rename the layer "black" by double clicking on the name of the layer in the layer palatte.


- Now go to Image>Adjustments>De-saturate to de-saturate the layer or just press "CTRL+SHIFT+U."
- Now create a new layer above "black" by going to Layer>New>Layer... or just press "CTRL+SHIFT+N"

- Change the mode to Multiply and hit OK.



- Click on your foreground color and enter these coordinates into the RGB section: R=90 G=108 B =120



- Hit ALT+BACKSPACE to fill the layer with your newly selected foreground color which should be a diluted blue-ish gray color.
- Make sure this new layer is selected and merge it down to the layer named "black" by going Layer>Merge Down or just press CTRL+E.

- Go to Image>Adjustments>Levels or just press "CTRL+L" and change the number "255" to "235."  Change "1.00" to "0.80" then change "0" to "35" Now press OK.



- Open up the Hue/Saturation dialog box and set Saturation to -65

- Select the entire image by going to Select>Select All or just by pressing CTRL+A. The CTRL+C to copy the layer.
- Create a new file (CTRL+N) and name it "DP" Make sure the dimensions are 512 x 512. Hit OK.
- Paste (CTRL+V) into the new "DP" file. Save it to your desktop so you know where it is and have easy access to it. Close the file so it's not in your way.

You should have something similar to this:

murs47

Step 2: Creating the red. Here we'll be making our red, feel free to use any color of red you want if you don't like mine. ;)

- Back to the original file. Delete the layer named "black."
- Press "CTRL+J" to duplicate the background layer.
- Rename the duplicated layer to "red."
- Press CTRL+SHIFT+U to desaturate the layer "red."
- Create a new layer above "red." Name it "1" and change the mode to multiply and hit OK.
- Click the foreground color and enter these numbers into the RGB section: R=224 G=60 B=27 then press OK.
- Make sure layer "1" is selected and press "ALT+BACKSPACE" to fill it. Merge it down down to "red" by pressing "CTRL+E."
- Create a new layer above "red" and name it "2." Change the mode to Soft Light and the opacity to 75% and hit OK.
- Now press ALT+BACKSPACE to fill "2" with the same red color.

- Hit CTRL+E to merge "2" down to "red"
- Hit CTRL+L to bring up the Levels menu and change 255 to 245 and 0 to 25, hit OK.
- Press CTRL+A to select all then CTRL+C to copy the layer.
- Open up "DP" from your desktop and paste CTRL+V into, save and close it.
- Delete the layer "red." You should have only the original background layer there.

murs47

Step 3: Laying down the black part of Deadpool's costume The easiest step.

- Open up "DP"
- Make sure the black layer is selected and hit CTRL+A to select all, then hit CTRL+C to copy.
- Paste it in your skin file.
- Hit CTRL+E to merge the layer to the background.

See, easy. :)

murs47

Step 4: The red chest segment This is the first of the red parts we'll be skinning on.

- Grab the Polygonal Lasso Tool and make a selection that looks something like this:


- Hit CTRL+SHIFT+N to create a new layer, name it "shape" and hit OK. Make sure your lasso selection is still there.
- Press ALT+BACKSPACE to fill the selection you made in the new layer. The color is not important. Hit CTRL+D to de-select.
- Open up "DP" make sure the red layer is selected and hit CTRL+A copy it and paste it on top of your "shape" layer.
- Now, Press and hold the CTRL button on your keyboard and click on the thumbnail of your "shape" layer. It should have made a selection of the shape we created like so:


- Make sure that new red layer we pasted is the still selected and hit CTRL+J. There should be a brand new layer above the red layer. Rename it "chest"
- Delete all the layers except "chest" so you just have the background layer and "chest" layer. You should have something like this:

murs47

Step 5: The details We'll do the seam work of the upper torso red regions.

- Double click to the in the blank area to the right of the word "chest" The Layers Style menu should pop up.


- Apply these settings in Bevel & Emboss:
Size: 0
Un-check Use Global Light
Angle: -90 degrees
Highlight Mode: Color Dodge
Shadow Mode Opacity: 0%



- Hit OK
- Create a new layer underneath the "chest" layer and merge "chest" down on it. Rename the layer "chest"
- Double click in the blank area to the right of the word "chest" again. And copy these settings:
Size: 0
Un-check Use Global Light
Angle: 90 degrees
Highlight Mode: Color Dodge
Shadow Mode Opacity: 0%



- Click on the word Drop Shadow in the upper left hand corner and copy these settings:
Distance: 0
Opacity: 100%



murs47

Step 6: Pants Now we're going to create his leggings. Note: You'll be going back and forth frequently between Photoshop and the Character Tool to see if things are lining up correctly.

- Open up "DP" from your desktop. Copy and Paste the entire left leg in the upper left corner of the red layer into your skin file.
- Grab the Rectangular Marquee Tool and create a rectangular shape at the top the legs where the upper torso red segment would meet with the legs and press delete.

*You're going to be going back and forth between your skin file and CT to make sure things are lining up a lot. I recommend creating a smaller rectangle then what you may think you need. Then, start slowly chipping away with the eraser tool line by line until everything lines up. Keep in mind the vertical length can be how ever long you want it, you don't have to match mine. Just make sure the seams lined up.*

Should have something like this:



- Once you have it all lined up hit CTRL+J to duplicate your leg piece.
- Now go to Edit>Transform>Flip Horizontal
- Move the piece to the other leg. If the seams don't line up, which they won't for some odd reason. Chip away line by line with the eraser tool. Don't line it up by moving the entire leg. Unless you want Deadpool to have his knee where his hamstring is.  :P

*Make sure to delete the segment that overlaps the upper torso section of the skin. Otherwise you'll have a leg on DP's stomach.

- Open up Layer Styles by double clicking the blank area to the right of the word 'red' in the layers palette.
- Click Drop Shadows and put in these settings:
Distance: 0
Opacity 100%

- CTRL-E to merge the layers down.

Now the highlights.

- Grab your eyedropper tool. Grab it from the menu or hit i on your keyboard. Sample the bright red on the seams of the red torso segment we created earlier.
- Get your pencil tool, set the opacity of it to 75%
- Trace the edge of the red where it meets with the black in the legs to create your highlights/

Things should be looking like this:



murs47

Step 7 Arms

- Open up the "DP" file.
- Copy and Paste the red into your skin file.

- Grab the Polygonal Lasso Tool and make a selection for the arm piece. Have it go all the way up to about mid bicep. Hit CTRL+J to create a new layer and name it "arm." Delete the red layer. Things should look something like this:



- Grab your Polygonal Lasso Tool and create a small rectangle where the bicep meets the tricep. Make sure the selection is bleeding on to the black of the shoulder. Press delete.
- Open up layer Styles for "arms" and click on Bevel & Emboss. Input these settings:
Size: 0
Angle: -90
Uncheck Use Global Lighting
Highlight Mode: Color Dodge
HM Opacity: 50%
SM Opacity: 0%

- Create a new layer below "arms" and merge "arms" down onto it.
- Grab your Rectangular Marque Tool and create a rectangle on the back of the hand. It's ok if you go into the wrist because we'll be covering that up later.
- Press delete.
- Grab your eyedropper i and select that same highlight color we selected earlier from the red torso piece.
- Get the Pencil tool and follow along the edge of the square we just made on the wrist. Make sure you're doing this on the red, not the black.
- Open up Layer Styles and click Drop Shadow, enter these settings:
Opacity: 100%
Distance: 0

- Hit CTRL-E to merge it down to the background.
- You should have something similar to this:


murs47

Step 8 Wrist strap.

- You should still have that red highlight color we selected earlier. If not, re-select it with the eyedropper.

- Hit X on your keyboard and grab your eyedropper tool again. Now select a red from the torso that is 1 value lighter then the darkest red on there. Not the darkest value of red, but the 2nd or 3rd darkest value of red.
- Click and hold the paint bucket tool icon in the menu bar until you get a mini-menu. Select the Gradient Tool.
- Up at the top menu bar should be a group of gradients you can select from. Choose Linear Gradient.

Your set to create the strap. We just need to create the shape of it first.

- Get the Rectangular Marque Tool (m) and create a long narrow selection from one end of the wrist to the other like so:



- Create a new layer. SHIFT+CTRL+N
- Grab the Gradient Tool.
- Click and hold the mouse button at the top of the selection then scroll down to the bottom of the selection and let go of the mouse button. You should now have a nice smooth transitioning gradient.
- CTRL+D to de-select.
- Open up Layer Styles for our little wrist strap. Input these settings:

Bevel & Emboss:
Size: 0
Angle: -90
Un-check Use Global Lighting
Highlight Mode: Color Dodge
HM Opacity: 100%
SM Opacity: 50%

Drop Shadow:
Opacity: 45%
Distance: 0

- CTRL+E to merge down the layer to the background.

Your wrist should look like this:

the_ultimate_evil

great tut so far, whats the base by the way

murs47

Step 9 One thumb and one shoe.

- Open up "DP" and make sure you're on the red layer.
- Make a selection on the upper right foot and thumb, copy and paste into your skin.
- Merge it down. CTRL+E

- Go back to "DP" and make sure you're on the black layer.
- make a selection for the gum that goes all away around the sides of the shoe/boot/foot.
- Paste it into your skin file.



- Open up layers style and select Bevel & Emboss. Uncheck Use Global Lighting and set the angle to 180 degrees. I'm going to have you explore and try different things to get the desired effect you want for your highlights here. Play around with the size and softness. As well as with the highlight opacity and mode. Also, set SM to 0% opacity.

- When you're satisfied hit OK and merge the layer down.

Have fun, see you in the next step. ;)

UnkoMan

Interesting way to go about it. Bevel & Emboss eh? I haven't used that on seams in quite some time. I find I have more control if I just make the lines myself. Still, it looks alright here.

Anyhow, props to you for doing this!

murs47

Step 10 The other arm....foot and thumb.

- Make a selection of the arm, thumb, and foot we created. Use the Polygonal Lasso Tool.
- CTRL+J to turn our selection into a new layer.
- Now go to Edit>Transform>Flip Vertical.
- Line it up over the un-skinned arm, foot, and thumb and merge it down.

murs47

Step 11 The ankle strap.

- Create a long horizontal selection very close to bottom of the legs. It can go across both legs. This will actually make things go by faster.
- Get the eyedropper tool and sample the brightest value of gray on the black segment of our skin. Hit 'x' on your keyboard and sample a significant darker value. Make sure it's not black.
- CTRL+SHIFT+N to create a new layer.
- Now use the Gradient Tool and make a vertical gradient from top to bottom of the selection.
-Open up Layer Styles and again apply Bevel & Emboss. Play with the settings to get a desired effect. Just make sure Use Global Lighting is unchecked and Angle is set to 90 degrees. Add a drop shadow as well.
- When you're done merge the layer down.

-You should now have something like this:




Previsionary

Sir murs,

I'm glad that you're finally getting around to finishing your tutorial. It'll be very useful to the community and hopefully you'll add it to the wiki as well? Also, that wouldn't happen to be the deadpool skin I requested a while back would it? :P

murs47

Step 12 The mask.

- Scroll down to the face and zoom in.
- Pull out your trusty Polygonal Lasso Tool
- Make a selection of either the left or right eye. Make sure the selection is very precise and just selects the eyeball, or the whites of the eye.
- Select the color white from your color palette.
- CTRL+SHIFT+N to create a new layer.
- ALT+BACKSPACE to fill the selection.
- Deselect and hit CTRL+J to duplicate the layer.
- Go to Edit>Transform>Flip Horizontal then line it up on the other eye.
- Merge your layers down. CTRL+E



- Open up 'DP' and make a selection of the head on the 'red' layer. The left half of the face will do. No need to get the whole thing.
- Copy and paste into your skin file.
- Line it up over the head.
- Now grab the Elipse Tool. 'U' on your keyboard.
- Create a some what narrow, and vertical oval over the eye area. Using this tool should automatically create a new layer which contains the oval. If not, make a new layer and create the oval in it.
- Make sure the red face layer we pasted earlier is selected. CTRL+CLICK the thumbnail of the oval shaped layer in the Layer Palette to create a selection of it.
- Press delete, then throw away the oval layer. Your red mask should have a nice hole there.



- In the layers palette click the Lock Transparent Pixels button. This allows us to paint on the red without bleeding out onto the rest of the layer.



- Grab your eyedropper tool and select a medium value red. Not the darkest, or the brightest. But, something in between from the red on the face.
- Get the Paintbrush tool and set the opacity to 60%
- Start brushing out the nose and mouth slowly. You don't want a flat surface, but you also don't want a great amount of detail here. You want something of a bulge where the nose and mouth are.

- When you're done hit CTRL+J to duplicate. Then go to Edit>Transform>Flip Horizontal and line it on the other side of the face. Delete/erase anything bleeding over the underlying face layer, and also anything going over onto the arm.

- Open up Layer Styles and go to Bevel & Emboss. Make sure Use Global Lighting is unchecked. Play around with all other settings to get a desired effect. Add a drop shadow if you want as well.

- Once you're done, merge it down and save it.

murs47

That concludes this segment of the tutorial. What we've basically just done, is create a skin with the use of layer manipulation through commands, tools, and settings. No artistic ability was needed.

Eventually I'll start doing some detailed, and advanced techniques. But, until then practice and use the techniques shown here.

Also, if you have any questions don't be afraid to post them here. That's what this is pretty much for. I'll answer your questions to the best of my abilities. Let me know if anything's unclear too.

Good luck!

P.S. Expect more during the summer.

murs47

Quote from: Previsionary on February 29, 2008, 04:35:40 PM
Sir murs,

I'm glad that you're finally getting around to finishing your tutorial. It'll be very useful to the community and hopefully you'll add it to the wiki as well? Also, that wouldn't happen to be the deadpool skin I requested a while back would it? :P

I don't think it was me you requested a Deadpool skin from. Let's face it, requesting a Deadpool or Green Lantern skin from me is like shipping a package with FedEx....you'll get it overnight. ;)

Previsionary

*gasp*

don't toy with my memories! I'm pretty sure it was you. It may have been ultimate deadpool as I have it sitting in one of my exiles folders. But hey, that's off topic. Grats on finishing!

ElijahSnowFan

ok. i have long wanted a Supreme Power/Squadron Supreme version of Hyperion, the version in the fairly simplistic red suit.

therefore, i am going to try to make it myself. this tutorial is detailed enough, with clear examples, that i owe it to myself to try.

sooooo...thanks, Murs. guys like yourself have created many things for this community, and i hope you continue to do so -- i've got a ton of your skins.

but sometimes, as you've done here, it helps to teach people how to be self-sufficient, as well -- the Hyperion skin i'm going to try, the costume itself, is one of the more basic ones in comics. so i'm going to give it a shot. it won't be great, but i can use it as a learning experience.

miclee

 :thumbup:
Nice tutorial....

murs47

After seeing a few new "I'm new to skinning"-like threads popping up I figured I'd bump this. Maybe it'll help, who knows.

Can this be stickied or merged with the already stickie topic "Skinning Tips & Tuts?"

Lionheart

Nice tutorial. This is very similar to they way I skin as well. Probably the main difference is that I use wireframes quite a bit to make sure the details get lined up correctly. I'm not as good at straight eyeballing some of the lines.