1 (edited by Lappi 2009-05-12 00:31:34)

Topic: [GRAPHICS] Skin Tutorial (English/German)

You can find the up-to-date-version @ teewiki.info.


This is an outdated version of my tutorial:

So you want to do this crazy skin stuff and show the world how creative you are, but ... you have not got any idea how to do these things? Wait, you've heard of that paint.exe thing and seen the graphics in the skin directory? DO NOT follow your instincts! First, read how to do it, so nobody will laugh about your grainy (c3wl 1337-r0xxOr) pixel heaps!

First I will explain you which freeware tool you want to download. Then you should watch some basic Inkscape tutorials, my explanation of the skin structure and a video tutorial on how to do a teewars skin. Finally, after you've all had that input, you are officially allowed by my humble presence to create your output.

Quick links:
Take a look at this basic tutorial about the structure of a skin.png: skin structure (basic)
The German version of the video can be found here
The English synchronized version of the video can be found here or here(higher res) (excuse my stumbling, I've never recorded my English before!)
raxxar obviously liked my video and did something similar in Italian: youtube pt.1, pt.2

-----------------------------------------
A: Learn the difference between pixel programs and vector programs

To cut it short: A pixel based graphics program will save the inforamtion as a table of different colours. If you draw a circle, the program doesn't know that it is a geometric shape with certain properties. Once it is put into the picture, it won't remeber those. The skins are saved in a pixel format called PNG.

A vector based graphics program "remembers" those properties, e.g. position and size. Each shape has an outline and a fill. You can combine two shapes with boolean operations, e.g. substraction or division. The main advantage is, that it will scale to all dimensions, regardless to your zoom level, because the program gives you the best approximation of a circle. It "knows" it was meant as a circle. This is a main advantages, 'cause you can easily change properties like outline thickness, fill style or colour. Therefore you want to do skins as a scalable vector graphics (.SVG) which is a format Inkscape also uses.

There is a picture in the wikipedia which illustrates this very well. There, you might also check for further information http://en.wikipedia.org/wiki/Vector_graphics

-----------------------------------------
B: Choosing the right program

Remember kids: pixel style isn't teewars style. To make skins that fit into the game, you should remember this. Therefore you should get yourself a graphics program that can handle vectors. There are plenty of free vector programs out there. Adobe Illustrate surely is capable of handling it, but it is most probably too expensive. Corel Paint Shop Pro (<3) might be a good alternative, if you want to spend something like 20 Euros/Dollars. If you are a student or just don't wanna spend any money, choose a freeware program like Inkscape.

-----------------------------------------
C: Installing Inkscape

1. Get yourself inkscape for your OS at http://www.inkscape.org/
2. Install inkscape and give it a try, doodle around, feel free to be creative!

-----------------------------------------
D: Basic working

1. It might be helpful to do some of the basic tutorials (Jeppo proposed to look  here or here) To do some interesting skins, you should know the Bezier-Curve tool and the boolean operations. You might also want to give this wikibook (good quality only in German)
a try.

2. If you've never seen or understood a skin file, watch my basic tutorial on the structure of a skin file, which can be found here. You might also take a look at Jeppo's template in which he explains which space is used for which skin element here.
To sum up: (from left 2 right): Normal eyes, "player gets katana"-eyes, hurt eyes, kill eyes, death eyes (not implemented yet), "another player gets katana"-eyes (thx Landil)


3. Now it's getting serious. I did a video tutorial in which you will get an impression on how a skin could be done. Watch it here in German or there a synchronized English version.
-----------------------------------------
E: Redrawing the pixel-skin

So now you have seen a lot, but didn't make a skin. Follow the steps in the video which are:

1. Load your grainy skin into Inkscape
2. Re-Draw your skin with Inkscape (just like I did in the tutorial)
3. Delete the old graphic from the background
4. Export your redesigned skin to .png

-----------------------------------------
F: Sharing your skins with the community

Most probably you want to share the skin with the community to get famous for your great skins. But do hesitate for a moment:

1. Do you like your skin? If you're not happy with it, sleep a night and correct some details.
2. Mail your skin to a friend. If he/she is a good one, he/she will tell you, if it's good and if not, what he dislikes. Again: correct the skin until you think it's perfect.
3. Upload your skin using an image hosting service or your own webspace. You could use:
http://www.imageshack.us (they rename the file)
http://www.rapidshare.com (they do not rename the file, but it's an indirect download)
Ideally it would be a hosting service which allows .PNG uploads and does not change the filename. Because only if the filenames are identical on all clients you will see other players using your skin.
(proposals?)
4. If you create a thread in this forum, be so gentle and remeber the mod's words (based on his words):
- Write clean topic title (author/type, e.g. [SKIN] Lappi's skins)
- 1 preview graphic (a small graphic in which you'll see your skin in action. Don't post screenshots, 100x100px are sufficient)
- 1 download link for the graphic (or the skin itself)
- Don't open multiple topics with your stuff
- Twice is nice: NO multiple topics, edit your "[SKIN] yourname's skins" topic. Instead modify your unique thread and add a comment like "I added the new skin XY". Don't do that without publishing a new skin - bumping is forbidden!

Question? search function
Short movies? Lappi's link loft
Teeworlds info'n'tuts on gfx? Landil's sketchbook

2

Re: [GRAPHICS] Skin Tutorial (English/German)

I love the "F" part smile

Excellent work, needs to be sticky!

aka oop²

3

Re: [GRAPHICS] Skin Tutorial (English/German)

this was SOO needed. thx for this one

4 (edited by Lappi 2008-03-24 14:07:33)

Re: [GRAPHICS] Skin Tutorial (English/German)

Thanks for the sticky and the changed title.

For the rest I encourage you to propose improvements, e.g. explanations which are missing or hosting services which fit the requirements more than the others. I'm also looking forward to hearing translations of the video's audio track in other languages, e.g. Polish or Russian.

Question? search function
Short movies? Lappi's link loft
Teeworlds info'n'tuts on gfx? Landil's sketchbook

5

Re: [GRAPHICS] Skin Tutorial (English/German)

Nice yikes - Not that I want to make this in Danish .. tongue

But well, nice guide . I like your German, and I like your English wink

Core2Quad QX9650 12MB 4x3,00GHz - Razer Lachesis - Corsair 8 GB XMS2 DDRII PC6400 RAM DualChannel - Nvidia GeForce 9800GX2 1GB PCI-E - Windows Vista Ultimate EN 64-bit

6

Re: [GRAPHICS] Skin Tutorial (English/German)

"We are launching the new sevenload 3.0! Please try a little later to access the site."
Damn, I just wanted to watch the tutorial xD

7

Re: [GRAPHICS] Skin Tutorial (English/German)

sevenload is up again

Question? search function
Short movies? Lappi's link loft
Teeworlds info'n'tuts on gfx? Landil's sketchbook

8

Re: [GRAPHICS] Skin Tutorial (English/German)

i watched it last night... you thaught me how to make skins XD

9 (edited by n0nAme.c0re 2008-04-03 15:54:16)

Re: [GRAPHICS] Skin Tutorial (English/German)

*english please*

10 (edited by Lappi 2008-08-03 21:30:05)

Re: [GRAPHICS] Skin Tutorial (English/German)

(Please post in English!)
If your tee-skin is too pixelized go to the document options, on the first tab you'll find the option to determine the page background colour. Change it to an invisible black RGBA(0,0,0,0).
http://img261.imageshack.us/img261/2982/pixelstuffyc0.th.jpg
By default it is an invisible white RGBA(255,255,255,0) which makes some difficulties sometimes.

Question? search function
Short movies? Lappi's link loft
Teeworlds info'n'tuts on gfx? Landil's sketchbook

11

Re: [GRAPHICS] Skin Tutorial (English/German)

Lappi, how do i save the skin as .png?
If i want to save it, the ending is .svg

There is another option: export as bitmap. But after that the skin looks like crap!

Pls can you help me?

ima charhgin ma lazerz!!1
SHOOP DA WHOOOOP!!!!!!11

12 (edited by Lappi 2008-04-28 15:06:59)

Re: [GRAPHICS] Skin Tutorial (English/German)

Reaper wrote:

Pls can you help me?

Sure, I try my very best. The option you've mentioned is the correct one: Export to bitmap (Ctrl+Shift+E). You have to specify the correct output size (width and height), so choose complete page and save - as I say in the video tutorial - the correct pixels (256x128! [Edited] Yepp, it's 256x128 - check if Inkscape also got this). If you've got a strange Anti-Alias, look in one of the upper posts in this topic, where I explained how you correct the gamma value.

If this doesn't help, specify your problems - .why does it look like crap?

Question? search function
Short movies? Lappi's link loft
Teeworlds info'n'tuts on gfx? Landil's sketchbook

13 (edited by Rayzoned 2008-04-28 14:16:54)

Re: [GRAPHICS] Skin Tutorial (English/German)

hmm what do you think is the best programm for this??

I have tried GIMP first, but i find no line-tool....and in inskape i find no tool,that makes a color between two that it lokes better....

So what programm is better or is there a better programm as GIMP or INKSCAPE?!

14

Re: [GRAPHICS] Skin Tutorial (English/German)

@Rayzoned: I don't understand your question. At first, take a look at the comparison between a photo editor (e.g. your GIMP) and a vector program (e.g. your Inkscape). They do not do exactly the same, though they both have something to do with graphics.

To start, look for a Inkscape Tutorial and then head over to my skin tutorial. Good luck and have fun!

Question? search function
Short movies? Lappi's link loft
Teeworlds info'n'tuts on gfx? Landil's sketchbook

15

Re: [GRAPHICS] Skin Tutorial (English/German)

^^ ok

16

Re: [GRAPHICS] Skin Tutorial (English/German)

I don't get the point. Of course you can save the data!

Question? search function
Short movies? Lappi's link loft
Teeworlds info'n'tuts on gfx? Landil's sketchbook

17

Re: [GRAPHICS] Skin Tutorial (English/German)

Great work Lappi !

Even a noob like me understands now this program :-D

You should get a Award for your work smile

18

Re: [GRAPHICS] Skin Tutorial (English/German)

Hi Resi XD

yeah you are right^^

ima charhgin ma lazerz!!1
SHOOP DA WHOOOOP!!!!!!11

19

Re: [GRAPHICS] Skin Tutorial (English/German)

please help me i try to take a look on the video, but i see only gray sad

20

Re: [GRAPHICS] Skin Tutorial (English/German)

Is java script enabled?
Do you have the current adobe flash  player?
If you have an adblocker disable it!

Antoine de Saint Exupéry: It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away.
Besides -  I am the gfx guy!

21

Re: [GRAPHICS] Skin Tutorial (English/German)

yes i have

22

Re: [GRAPHICS] Skin Tutorial (English/German)

please upload the video on youtube so i can see it

23

Re: [GRAPHICS] Skin Tutorial (English/German)

uploaded a higher res version to vimeo: http://www.vimeo.com/1280547 (English version). Youtube only allows very crappy resolution and a limited filesize. Since I'm too lazy to reencode the video just to upload it on the crappy market leader, try this one out.

Question? search function
Short movies? Lappi's link loft
Teeworlds info'n'tuts on gfx? Landil's sketchbook

24

Re: [GRAPHICS] Skin Tutorial (English/German)

nice1!

Antoine de Saint Exupéry: It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away.
Besides -  I am the gfx guy!

25

Re: [GRAPHICS] Skin Tutorial (English/German)

thanks Landil, at least you gave feedback. Don't understand why ppl keep on requesting until sth is done for them and after having fulfilled their needs, they forget that ppl did sth for them. *head shaking*

Question? search function
Short movies? Lappi's link loft
Teeworlds info'n'tuts on gfx? Landil's sketchbook