Author Topic: Roxas' In Depth Skin Making Tutorial.  (Read 9071 times)

Offline Roxas

  • Quite Some Free Time
  • ***
  • Posts: 2156
Roxas' In Depth Skin Making Tutorial.
« on: July 01, 2009, 09:58:50 PM »
Step One, The template
Download this Template:

This template has everything you need to make your skin.
It includes a Pallet, the colors in the pallet change into different colors in-game.

Dark grey shades = black, shield indicator
Purple shades = Grey white shade
Red shades = Team colors
green shades = brown shade
yellow shades = skin tone
Periwinkle shades = secondary team color
blue shades =  tertiary team color
cyan shades = golden white shades
the brown color IS NOT PART OF THE PALLET  
Pink, obviously turns transparent
and, light Grey for some reason, turns transparent also.

It's good to use as many pallet colors as you can because, they are changed when certain things happen in smw, for example, when you get ztarred pallet colors switch to black, when you freeze pallet colors switch to blue, etc etc. Also remember, skins that use modified or custom  pallets aren't eligible to be used in future releases of smw


Also, it's important to remember what the frames are for

1st frame is for standing, it doubles up as the first walking frame
2nd frame is the 2nd walking frame
3rd frame is used as the jump frame
4th frame is used for when your character skids on the floor
5th frame is the skins "hit death" used for when your skin is hit with a projectile
6th frame is used for when you get stomped, being stomped is a normal occurrence in SMW

another note about the frames is, you can't make your sprite larger than any of the frames or else it will look very awkward. and your entire skin image cant be one pixel larger than 192x32. Oh, and the lines on the left of the current sprite you are drawing, you CAN draw on them



Step 2, drawing your skin:
Note: that this is my technique, if you have no spriting experience, you may want to pay attention.
The outline
Now start drawing the 1st frame.
When you start drawing your skin, lets say a human shaped skin, start off Drawing the outline, I usually start off drawing the head, than I draw the feet, and I draw the body last, I know this technique sounds odd, but it's effective when dealing with the small 16x16 size constraint.

shading
When I finish drawing the outlines, The obvious thing to do is start shading, keep in mind where you want the light source to come from, A light source, is where the "light" comes fromfor me, the best lightsource, is the top-right, something you don't want to do is pillow shade, pillow shading is when the light source comes from the center of the sprite.

Now which one looks more like a ball?

the next three frames should be edits of the 1st frame, this is the easy part.

for the 2nd frame, all you would have to do is move the arms up a bit, and edit the feet to look like they are in the middle of walking "^"


the third frame should look like the 2nd frame at first, move the leg facing forward up a little, move the right arm down, and the left arm facing up, this is just a generic jump frame, feel free to come up with your own.


the 4th frame unlike the rest of the sprites, should be facing left, what I do with  this frame, is make the sprite go diagonal, like "" and put both arms up  " --" , sometimes I don't make them face diagonal


the 5th frame should have your sprite facing toward the player, arms and legs facing outward like "X" thier facial expression could either be them screaming with thier eyes wide open ">=O" them dying with a peaceful face "-_-" or, screaming with thier eyes closed "XO" what i do, if they have log hair that covers thier face, is shade in the area where there eyes are.


the last frame is the stomped frame, there is a variety of different things you could do with this, I usualy either make them sitting down, facing forward with a calm expression"-_-", or when I'm feeling lazy, I kind of make some sort of block with colors.in it.


Now your skin should look a bit like this

OR, if you are really good at spriting, this


Step 3 Cleanup:

This is a very easy step, all you do is erase the lines, and delete the pallet at the side.
Then you scale the image by 200%

TA-DA, Now your done, also, make sure to put your finished skin in the "skins" folder and that it is a .bmp file, if you want to upload your skin, make a .png backup.

If your not a greedy cookie hoarding person,

 you will post your skin online for other people to use and enjoy

To do that you have to use an image uploader, like tinypic.
When you are on the site, press "browse...", and navigate to the png backup skin and then, press "upload". when you do that, you will be directed to another page, copy the text in the yellow box under "IMG code for forums and message boards" paste it on your thread and Now that you have shared your work, you are truly finished. keep practicing and maybe you can come up with a better tutorial then this one =P







More Image uploaders
http://www.imageshack.us/
http://photobucket.com/

Credits:
GDKN, for his Ztemplateman skin, without it, i wouldn't be making good skins, and I wouldn't have been able to post the template, which is an edit of his skin and I couldn't make this tutorial. King pepe for mentioning Imageshack.  LTGH for mentioning photobucket

If you moderators find that his could be helpful, please sticky this.

EDIT: if this is missing anything, please point it out and I will add you in the credits.
[s:2hedf6a5]EDIT2: shit I posted this in the wrong forum[/s:2hedf6a5]
EDIT3: Added more uploaders
[s:2hedf6a5]EDIT4:Imageshack is Imagehacked[/s:2hedf6a5]
EDIT:5 that brown color isnt part of the pallet
« Last Edit: November 14, 2009, 08:37:17 AM by Roxas »

Abominations created by Me and my brother on MSpaint.

Offline Rockerfrick

  • Lots of Free Time
  • ****
  • Posts: 1062
  • Theory of Nekomata
    • Nihilist Philanthropy
Re: Roxas' In Depth Skin Making Tutorial.
« Reply #1 on: July 02, 2009, 03:23:00 AM »
In conclusion, skin making is a delicate art, as well as mapmakig, world-making, etc.
[smwstuff]914[/smwstuff]

New Jawbox | Map Request Thread | Old Jawbox

Thou shalt not pie if thou shalt not meal.


Offline Roxas

  • Quite Some Free Time
  • ***
  • Posts: 2156
Re: Roxas' In Depth Skin Making Tutorial.
« Reply #2 on: July 02, 2009, 06:08:07 AM »
the tutorial does make skinning seem complicated, but I added a lot of stuff to it.

Abominations created by Me and my brother on MSpaint.

Offline yoshi_the_best

  • Kinda Regular
  • ****
  • Posts: 336
    • http://sysphpbbmods.bplaced.net
Re: Roxas' In Depth Skin Making Tutorial.
« Reply #3 on: July 02, 2009, 10:01:08 AM »
Quote
To do that you have to use an image uploader, like tinypic.

I wouldn't use tinypic - it JPG fails pics.
parkapic.com is good, but it seems it doesn't work currently (or is it just me?).
Best solution: http://smwffh.supersanctuary.net/

Offline KingPepe

  • Forum Moderator
  • this title came sooner than the last
  • *
  • Posts: 3556
Re: Roxas' In Depth Skin Making Tutorial.
« Reply #4 on: July 02, 2009, 10:44:09 AM »
Quote from: "yoshi_the_best"
Quote
To do that you have to use an image uploader, like tinypic.

I wouldn't use tinypic - it JPG fails pics.
parkapic.com is good, but it seems it doesn't work currently (or is it just me?).
Best solution: http://smwffh.supersanctuary.net/
And everyone forgets about Imageshack.

Quote from: \"JJames19119\"
Times today are just as bad what with the video game market being made up of 80% first person shooters that are 80% brown and 20% black and 100% bloom.

Offline LTGH

  • Gettin' Into the Swing of Things
  • **
  • Posts: 30
    • http://www.Diablo3Warcraft.com/
Re: Roxas' In Depth Skin Making Tutorial.
« Reply #5 on: July 02, 2009, 12:01:28 PM »
Quote from: "KingPepe"
Quote from: "yoshi_the_best"
Quote
To do that you have to use an image uploader, like tinypic.

I wouldn't use tinypic - it JPG fails pics.
parkapic.com is good, but it seems it doesn't work currently (or is it just me?).
Best solution: http://smwffh.supersanctuary.net/
And everyone forgets about Imageshack.

I used to use imageshack but then i found out about photobucket. Its much better.
Easier if you want to know where you have all your images, make folders, make private folders, save backups for all your images and so on.
:p But maybe some people think "its to advanced" but its not, takes a few second to upload a pic for me.

Offline princeyoshi4

  • Kinda Regular
  • ****
  • Posts: 323
Re: Roxas' In Depth Skin Making Tutorial.
« Reply #6 on: July 02, 2009, 12:15:00 PM »
I see you took my advice and made this thread.

This thread should be pinned.


Quote from: "Roxas"
maybe you can come up with a better tutorial then this one
That would break the laws of physics.


Quote from: "KingPepe"
And everyone forgets about Imageshack.
Whats an Imageshack? (JK)

Offline Madosuki

  • Lots of Free Time
  • ****
  • Posts: 788
    • Steam Profile
Re: Roxas' In Depth Skin Making Tutorial.
« Reply #7 on: July 02, 2009, 03:27:29 PM »
Quote from: "KingPepe"
Quote from: "yoshi_the_best"
Quote
To do that you have to use an image uploader, like tinypic.

I wouldn't use tinypic - it JPG fails pics.
parkapic.com is good, but it seems it doesn't work currently (or is it just me?).
Best solution: http://smwffh.supersanctuary.net/
And everyone forgets about Imageshack.
I LOOVE imageshack :) its so easy to use.
Oh, come, lovely child! Come thou with me! For many a game I will play there with thee.

Offline Roxas

  • Quite Some Free Time
  • ***
  • Posts: 2156
Re: Roxas' In Depth Skin Making Tutorial.
« Reply #8 on: July 04, 2009, 11:56:07 AM »
bump, so people can see this.

Abominations created by Me and my brother on MSpaint.

Offline Madosuki

  • Lots of Free Time
  • ****
  • Posts: 788
    • Steam Profile
Re: Roxas' In Depth Skin Making Tutorial.
« Reply #9 on: July 04, 2009, 02:59:03 PM »
You need to find some way to move this.
Oh, come, lovely child! Come thou with me! For many a game I will play there with thee.

Offline Roxas

  • Quite Some Free Time
  • ***
  • Posts: 2156
Re: Roxas' In Depth Skin Making Tutorial.
« Reply #10 on: July 04, 2009, 11:37:46 PM »
Not to toot my own horn or anything but I put a lot of effort into making this, and It can be really helpful, but if people can't see this they can't learn, Correct me if I'm wrong but This deserves a sticky.

Abominations created by Me and my brother on MSpaint.

Offline Madosuki

  • Lots of Free Time
  • ****
  • Posts: 788
    • Steam Profile
Re: Roxas' In Depth Skin Making Tutorial.
« Reply #11 on: July 05, 2009, 02:58:07 PM »
Quote from: "Roxas"
Not to toot my own horn or anything but I put a lot of effort into making this, and It can be really helpful, but if people can't see this they can't learn, Correct me if I'm wrong but This deserves a sticky.
yes i think so.
Oh, come, lovely child! Come thou with me! For many a game I will play there with thee.

Offline Roxas

  • Quite Some Free Time
  • ***
  • Posts: 2156
Re: Roxas' In Depth Skin Making Tutorial.
« Reply #12 on: July 05, 2009, 03:44:44 PM »
I love the mod who did this , it got moved! also, I plan to update this tutorial with more skin-drawing techniques.

Abominations created by Me and my brother on MSpaint.

Offline Madosuki

  • Lots of Free Time
  • ****
  • Posts: 788
    • Steam Profile
Re: Roxas' In Depth Skin Making Tutorial.
« Reply #13 on: July 05, 2009, 03:51:26 PM »
Quote from: "Roxas"
I love the mod who did this , it got moved! also, I plan to update this tutorial with more skin-drawing techniques.
:Sighs and wishs he would have made a skin tut: Oh well...
and the mod who did this :1-up: :wink:
Oh, come, lovely child! Come thou with me! For many a game I will play there with thee.

Offline Roxas

  • Quite Some Free Time
  • ***
  • Posts: 2156
Re: Roxas' In Depth Skin Making Tutorial.
« Reply #14 on: July 05, 2009, 03:57:25 PM »
Quote from: "WII!MAN"
Quote from: "Roxas"
I love the mod who did this , it got moved! also, I plan to update this tutorial with more skin-drawing techniques.
:Sighs and wishs he would have made a skin tut: Oh well...
and the mod who did this :1-up: :wink:
it's never too late, maybe you can make a better one when people don't look at this anymore.

Abominations created by Me and my brother on MSpaint.