Skin Creation/ko: Difference between revisions

Latest revision as of 13:57, 5 May 2024

Note: This page already exists on your language! Please help out by migrating the archived page (accessible by clicking this link) to the new translation system by clicking 'Translate'. Once finished, delete the archived page to remove this notice. Thanks! You can find a list of pages needing migration on Category:NeedsMigration.

This article is a Stub. You can help us by editing and improving it.

Overview

Skin files are 32-bit RGBA formatted in a 2:1 ratio. Each side of the image must be divisible by 4 pixels.

Create a skin

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

@@ Line 1: / Line 1: @@
+{{MigrateTranslation}}
+<languages/>
 {{Stub}}
-{{LangNavBox}}
-'''''스킨''''' 파일은 2:1 비율로 포맷된 32비트 RGBA입니다. 이미지의 각 면은 4픽셀로 나눌 수 있어야 합니다.
-스킨을 만들려면 시작하기 전에 적절한 소프트웨어가 필요합니다. 깨끗한 내보내기를 생성하고 쉽게 편집할 수 있으므로 벡터 그래픽 이미지 편집기를 사용하는 것이 좋습니다.  아래는 몇 가지 인기 있는 사이트입니다.
+<div lang="en" dir="ltr" class="mw-content-ltr">
+== Overview ==
+</div>
-* [https://inkscape.org/ Inkscape](무료, 오픈 소스, 이 튜토리얼에서 선택)
+<div lang="en" dir="ltr" class="mw-content-ltr">
-* [https://www.adobe.com/products/illustrator.html 어도비 일러스트레이터]
+'''''Skin''''' files are 32-bit RGBA formatted in a 2:1 ratio. Each side of the image must be divisible by 4 pixels.
-* [https://affinity.serif.com/en-us/ 어피니티 디자이너]
+</div>
-다음은 스킨 만들기를 시작할 차례입니다. 기존 스킨 또는 템플릿 파일에서 시작하는 것이 가장 쉽습니다. [https://github.com/ddnet/ddnet-data-svg/tree/main/skins GitHub 저장소]에는 인기 있는 스킨의 많은 .svg 리메이크가 포함되어 있습니다. 기본 스킨 .svg를 살펴보겠습니다.
+<div lang="en" dir="ltr" class="mw-content-ltr">
+== Create a skin ==
+</div>
-[[File:Default skin svg.png |thumb|기본스킨.svg]]
+<div lang="en" dir="ltr" class="mw-content-ltr">
+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:
+</div>
-보시다시피 각 신체 부위에는 해당 검은 그림자 버전이 있습니다.
+<div lang="en" dir="ltr" class="mw-content-ltr">
+* [https://inkscape.org/ Inkscape] (free, open-source, and the choice of this tutorial)
+* [https://www.adobe.com/products/illustrator.html Adobe Illustrator]
+* [https://affinity.serif.com/en-us/ Affinity Designer]
+</div>
-각 신체 부위의 검은 그림자는 티 전체에 사용되는 아웃라인입니다.
-이것들이 각 신체 부위와 동일한 모양을 공유하지만 더 큰 획 크기를 사용하는지 확인하십시오.
+<div lang="en" dir="ltr" class="mw-content-ltr">
+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:
+</div>
+[[File:Default skin svg.png|thumb|default.svg]]
+<div lang="en" dir="ltr" class="mw-content-ltr">
+As we can see, each body part has a corresponding black shadow version.
+</div>
+<div lang="en" dir="ltr" class="mw-content-ltr">
+The black shadow of each body part is the outline used in the tee as a whole.
+</div>
+<div lang="en" dir="ltr" class="mw-content-ltr">
+Make sure these share the same shape as each body part, but with a larger stroke size.
+</div>
+<div lang="en" dir="ltr" class="mw-content-ltr">
+==Body Parts Rendering order==
+</div>
+<div lang="en" dir="ltr" class="mw-content-ltr">
+{{todo|verify this is correct}}
+</div>
+<div lang="en" dir="ltr" class="mw-content-ltr">
+# Hand outline
+# Hand
+# Back feet outline
+# Body outline
+# Front feet outline
+# Back feet
+# Body
+# Left eye
+# Right eye
+# Front Feet
+</div>
+[[Category:Tutorial{{#translation:}}]]