So it's my first time making a skin and i thought i should visit this site for help: t/51694 but i found the instructions and explanations hard to comprehend, few are even missing. I have some questions which i hope some of you could give me a clear explanation so i can start making my own skin.

Here they are:

1. Why are there 2 images of the same design in the "new skin template" and why does the second image's name have (@2x) at the end? Also, Why is the first one blurry than the second? I noticed that other user's skins dont have "@2x" on their designs and don't have duplicates but in the new skin template i found almost every image has a duplicate with "@2x"



2. From what i understand, you basically just add the customized elements you want to customize in the skin folder to change osu!'s elements in game and is it okay if some of them are missing but those are the ones you don't need customizing, for example, you just want to customize osu! mania so you just add osu! mania elements in the folder?

3. What's the name for this element and how do i customize it?



I'm talking about the pink and orange selection boxes. I can't find it anywhere in the templates. I found some of the user's have the same type of this. Is there like a source where you can get/choose your own and download it?

4. What's the purpose of these .ini files? I can't find these in other user's skins. Are they recommended?



5. How do i use skin.ini? I found this command in the skin.ini and i don't know what it's used for especially the numbers, is there a meaning to their value?:

[Colours]
//You can add up to 8 colours.
Combo1: 255,150,0
Combo2: 5,240,5
Combo3: 5,5,240
Combo4: 240,5,5
Combo5: 240,5,5

And lastly, If i replace some images in the new skin template folder with my customized ones but i don't change their names, let's say, mania-hit100 is the original name but i only want to replace the image so i leave the name untouched will it still work? and do i have to change/adjust some commands in the skin.ini for the customized image to function correctly or should i just leave it alone?

And that's all of them. Thanks for everyone willing to help.

http://osu.ppy.sh/wiki/Skinning
http://osu.ppy.sh/wiki/Skin.ini

All the information you need can be found on the wiki

You can also check this thread as well!
t/51694

I'll answer a few questions partially, the .ini questions are too in depth and following LoliFlans links would help you more.
1. Basically @2x is literally just the same image but sized 2x bigger in dimensions, it is essentially the HD version. In all cases the @2x will be prioritized as the chosen image in game and it scales better the higher resolution you play the game at.

2. Yes you're right, not all elements are needed for the skin to work properly. If any elements are missing the game will just use the default skin elements.

3. The element is called menu-button-background.png the pink and orange tint will appear as long as the image you use isn't transparent.

4. Those are used for mania styles 4Key, 5Key, 6Key, 7Key, and 8Key respectively. Skinners that didn't bother with mania elements usually just remove them.

5. Those numbers are rgb (red green blue) color code; I usually use rapidtables to get a color code I want.

6. From what I understand you're trying to swap elements with new 1s? You would have to match how they're named in the folder you chose or else it won't show up. Also make sure remove or just rename @2x files if you're going to use a regular image size (eg. you have a default-1.png and default-1@2x.png in the folder and want to use a new default-1.png, just rename default-1@2x to something random like default-169420@2x). Oh and if you want to keep the image you want to replace rename it or put it in a seperate folder before you lose it forever.

1. HD and SD reso. Files with names ending with @2x will appear if the resolution's height is greater than 768px. Files without @2x will appear if situation is otherwise.

2. If you intend not to include some elements for your skin, get screwed. Reason can be found at the post above mine.

3. menu-button-background.png, yes. Orange and pink tints have the "Overlay" property of Photoshop, I bet. So if you hate those tints, just deal with it™.

4. Those .inis are the old ways of customizing the Mania stage for different key counts. Useless nowadays.

5. RGB values, yes. Full black is 0,0,0 and full white is 255,255,255. Your photo editor has those values in the color picker. Simply "memorize" those 3 numbers of the color you like, and key in to your skin.ini... Make sure that you won't mess up the order of those numbers, else you're SO done for.

6. Refer to the post above mine.

OsuMe65 wrote:

1. HD and SD reso. Files with names ending with @2x will appear if the resolution's height is greater than 800 px. Files without @2x will appear if situation is otherwise.

799px is still SD or was it changed?

Thanks for your help everyone, i think i kinda get the idea of skinning now but there's just a few more things i'd like to ask:

1.Can i change the colors for "menu-button-background.png" like say, the new unplayed beatmaps that are usually pink to green and played beatmaps from orange to blue?

2.Does the image resolution size matter for elements or does osu! automatically resize them to fit?

1: You can't change the colors directly. The base image gets colored by the game. To achieve atleast some different colors try coloring the base image. For example the menu-button-background is tinted in cyan/turquoise. The currently selected difficulty of a mapset is cyan. The other difficulties are also in cyan but a darker shade. Unplayed sets are in an even darker cyan, almost blue while played mapsets are in a darker green.

2: The default game resolution is 1024x768 (or 1366x768 for widescreen), so adjust all images to this resolution height. Canvas size doesn't really matter but expands hitboxes (clickable area) in some cases and may prevent other things to be clicked on or causes accidental clicks. The images themselves should still follow the template skin since they don't get resized on the same resolution height. As for other resolution heights, of course they get resized automatically. Else all the HD images would look way to big on HD resolutions under 2048x1536.

You can also check this thread: t/186787

Be warned, later sections may be a bit hard to understand without knowledge, but I tried to include as many things that aren't in the main tutorial thread, like how these HD images work. There also is a link to a google doc with all skinnable images and audio files with some annotations aswell a sheet with skin.ini command lines.

Haskorion wrote:

OsuMe65 wrote:

1. HD and SD reso. Files with names ending with @2x will appear if the resolution's height is greater than 800 px. Files without @2x will appear if situation is otherwise.

799px is still SD or was it changed?

Total 0 idea, till further testings. For now, 768px is a safe mark (till proven otherwise)