Skin Creation: Difference between revisions
(Prepared the page for translation) |
(eyes) |
||
| (7 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
{{MigrateTranslation}} | |||
<languages/> | <languages/> | ||
{{Stub}} | {{Stub}} | ||
<translate> | <translate> | ||
<!--T:1--> | |||
'''''Skin''''' files are 32-bit RGBA formatted in a 2:1 ratio. Each side of the image must be divisible by 4 pixels. | '''''Skin''''' files are 32-bit RGBA formatted in a 2:1 ratio. Each side of the image must be divisible by 4 pixels. | ||
<!--T:2--> | |||
To create a skin, you'll need the appropriate software before you begin. It's advised to use a vector graphics image editor, as they produce clean exports and are easy to edit. Some popular choices are: | To create a skin, you'll need the appropriate software before you begin. It's advised to use a vector graphics image editor, as they produce clean exports and are easy to edit. Some popular choices are: | ||
<!--T:3--> | |||
* [https://inkscape.org/ Inkscape] (free, open-source, and the choice of this tutorial) | * [https://inkscape.org/ Inkscape] (free, open-source, and the choice of this tutorial) | ||
* [https://www.adobe.com/products/illustrator.html Adobe Illustrator] | * [https://www.adobe.com/products/illustrator.html Adobe Illustrator] | ||
| Line 15: | Line 17: | ||
<!--T:4--> | |||
Next, it's time to start making your skin. It's easiest to start from a pre-existing skin, or a template file. [https://github.com/ddnet/ddnet-data-svg/tree/main/skins This GitHub repo] contains many .svg remakes of popular skins. Let's take a look at the default skin .svg: | Next, it's time to start making your skin. It's easiest to start from a pre-existing skin, or a template file. [https://github.com/ddnet/ddnet-data-svg/tree/main/skins This GitHub repo] contains many .svg remakes of popular skins. Let's take a look at the default skin .svg: | ||
</translate> | |||
[[File:Default skin svg.png|thumb|default.svg]] | [[File:Default skin svg.png|thumb|default.svg]] | ||
<translate> | |||
<!--T:6--> | |||
As we can see, each body part has a corresponding black shadow version. | As we can see, each body part has a corresponding black shadow version. | ||
<!--T:7--> | |||
The black shadow of each body part is the outline used in the tee as a whole. | The black shadow of each body part is the outline used in the tee as a whole. | ||
<!--T:8--> | |||
Make sure these share the same shape as each body part, but with a larger stroke size. | Make sure these share the same shape as each body part, but with a larger stroke size. | ||
</translate> | </translate> | ||
==Body Parts Rendering order== | |||
{{todo|verify this is correct}} | |||
# Hand outline | |||
# Hand | |||
# Back feet outline | |||
# Body outline | |||
# Front feet outline | |||
# Back feet | |||
# Body | |||
# Left eye | |||
# Right eye | |||
# Front Feet | |||
[[Category:Tutorial{{#translation:}}]] | |||
Latest revision as of 18:59, 2 October 2023
 This article is a Stub. You can help us by editing and improving it. |
Skin files are 32-bit RGBA formatted in a 2:1 ratio. Each side of the image must be divisible by 4 pixels.
To create a skin, you'll need the appropriate software before you begin. It's advised to use a vector graphics image editor, as they produce clean exports and are easy to edit. Some popular choices are:
- Inkscape (free, open-source, and the choice of this tutorial)
- Adobe Illustrator
- Affinity Designer
Next, it's time to start making your skin. It's easiest to start from a pre-existing skin, or a template file. This GitHub repo contains many .svg remakes of popular skins. Let's take a look at the default skin .svg:
As we can see, each body part has a corresponding black shadow version.
The black shadow of each body part is the outline used in the tee as a whole.
Make sure these share the same shape as each body part, but with a larger stroke size.
Body Parts Rendering order
TODO: verify this is correct
- Hand outline
- Hand
- Back feet outline
- Body outline
- Front feet outline
- Back feet
- Body
- Left eye
- Right eye
- Front Feet