community forum

New Skinning Tutorial

posted
Total Posts
21
Topic Starter
RockRoller
Welcome to the the skinning tutorial 2.0!
This tutorial is a Work In Progress right now, but I will try to add at least one chapter every Sunday. Feel free to leave any questions you've still got in the comments.

Introduction

There are a few things that you will need, but the most important ones are dedication and an idea. Making a skin takes a lot of time and can be frustrating, especially when things don't work the way you want them to.
You will also need an image editor that supports transparency. Good free options include GIMP and Paint.NET. GIMP has more options, but is much harder to learn. Paint.NET is way easier to learn, but you should install some plugins, as vanilla Paint.NET has many missing features. I recommend installing these plugins. (Other image editors may also have some useful plugins, however you'll have to find them yourself.)
Many skinners use Photoshop as a paid option. For custom sounds, audio editing software will also be required. Audacity and LMMS are both good free options. It doesn't really matter what program you decide to use, I will try to explain things so that you can recreate them in any program. I won't be able to show you how to do things in your specific editor, there are just way too many programs. You can search for some tutorials online if you are having trouble with something.

Information and Help

The most important source of information is the skinnable files list. It contains basic information about all known skinnable files. However, not all elements have complete information. Therefore, it's a good idea to look at other skins, both for inspiration and to figure out how the skinner achieves certain things. Completed skins can be found in the Completed Skins Compendium. osu!'s default skin is also a good starting point, though some newly added elements may be missing.

Other useful information can be found in the important guides and threads post. The Skin Checker can help identify any missing files in the skin's folder.
For additional help, look around in the main skinning forum, and join the skinship and skinhouse discord servers.

Themes and Concepts

You can pick whatever theme you like, just remember to stick to the rules if you plan to post it on the skinning forum.
If you don't have a theme you can just mess around in your image editor until you create something you like or you can try to find some inspiration. You can get inspiration from pretty much anywhere. Some people like to look at other players skins, some take inspiration from art they find online, or even from real life.
Once you have a theme you should consider if it's a good theme. There are two major points for this. Do you have the needed skill? Are there enough resources if you depend on those?
It isn't a good idea to do something that is far beyond your skill level. Sure, you need to learn new things at some point, but try to learn things that are just a bit over your skill level first, its likely that it will fail otherwise. The second criteria mostly applies to anime skins. It's quite hard to do a skin about a character if there is barely any artwork of that character, unless you know how to make the required artwork yourself. You could try to use screenshots from the anime the character is from, but that can be a problem as well, especially if the character is just a side character with not much screentime.
Once you have your theme you should think of a concept. Just starting without any plan will probably result in wasted work. Your concept should have the following:
  1. A rough idea of the colour scheme. For the beginning its enough if you e.g. know dark blue + light blue + pink, exact RGB codes arent a must have for the concept;
  2. A fitting font;
  3. In what direction do you wanna go? Glowy, minimalistic, realistic? (There are many more options, too many to list.)
  4. Optional: Background art, a few skinning styles need those;
  5. Anime skins: Images of the character you wanna theme it around (You're better off searching for renders on the internet if you're not experienced, but don't worry, you will learn how to render images yourself later on.)

HD/SD elements, Aspect Ratios and Resolution

There are HD and SD elements. HD elements have the suffix "@2x" and are exactly double the size of the SD image. If an image is e.g. 128x128 in SD, then it will be 256x256 in HD.

It's highly recommended to skin in HD, because it will look a lot sharper ingame and you can easily convert them to SD. Please note that the skinnable files list only shows SD sizes! It's important to note that HD images are only used if osu runs with atleast 800px height, but SD images will be used if no HD image is available.
There is a way to force osu to use HD elements, even if your resolution is below 800px. Open your osu!.PCUSERNAME.cfg (found in the root of your osu! folder) and set HighResolution: to 1. This may increase the load on weaker systems, but you can always set this back to 0 if you feel like it affects your performance while playing.
A common mistake is to skin in SD and then upscale the image to HD afterwards. Do not do this. There is no reason to do this, because you won't increase the image quality by upscaling. You should create the HD elements first and then you downscale them to SD. Though, this can become annoying, especially if you have your skin finished and you need to downscale 200+ images, that's why there are programs that will do the downscaling for you, e.g. Image Scaler by Roan.
Resolution doesn't really matter for skinning, all it does is determine what elements to use (HD/SD). What really matters for some parts of a skin is the aspect ratio. Some elements need to be adjusted depending on the aspect ratio. It's recommended to try to support 16:9 and 16:10 in your skin, since those two are the most used ones. Many people are using 4:3, but skinning for this aspect ratio is kinda annoying, which is why I won't go over it. Just read how to convert 16:9 skins to 16:10 skins and you should be able to do the 4:3 conversion yourself, if you so desire.

Anchor/Origin Points and Layering

Every element in osu! has an anchor point, which is listed in the skinnable files list. As a consequence of rendering order (the order in which osu! displays images), some elements will appear as if they were above or below other elements. Just remember this, because later on you will need it to understand how some of the gimmicks work. The anchor points that are listed on the spreadsheet will always tell you from where the image will spread, but you also need to consider where an image is placed in the client. Three examples of different anchor points:

As you can see, images that, for example, have their anchor point set as bottom left can't extend to the left. This means that this element wouldn't be able to reach all places of the screen, unless it's placed near the left border of the window, as shown below:

General Tips

Last but not least, a few general tips. Some of these things may seem mundane, but some of you might not know about these.
  1. Whenever you make changes to your skin, you will need to reload it to see the changes. The skin will be automatically reloaded when restarting, but you can do it manually by going into the skin section in the options and changing your skin, or you could simply use the shortcut CTRL + ALT + SHIFT + S to reload your skin. I recommend you make a macro for this if you can.
  2. Work with layers, they make your life a lot easier. When I started I didn't know those existed and it was a pain to create anything. Don't do the same mistake.
  3. Always save your project files!
  4. Different elements have different blend modes and different origin points. These two things will always be listed on the skinnable files list.

Starting

Now that you know about a few general things and have a theme, it's time to start working on your skin.
Most people would immediately start working on the gameplay part of the skin or the song selection, but you need to start with some other things first. The first thing would be to create a skin.ini and to adjust your ingame settings. To create a skin.ini simply create a new text file, call it "skin" and change the file extension from ".txt" to ".ini". You can find a list of all commands and what they do on the aforementioned skinnable files list.
I will only talk about 2 of them in detail, the others will be explained later on. The two commands are the "Version:" and the "Name:" commands. The reason for this is that they often get mixed up. The version command will determine how osu will handle the skin, while the name command simply contains the name of your skin. Many beginner make the mistake to think that "Version:" refers to the release version of their skin, like "Beta Release V.0.8". Such things should go into the name of your skin. There are only 2 skin.ini versions that matter, "2.0" and "2.5".
2.0 brought us new anchor points for many elements and support for @2x elements, but thumbnails for songs aren't supported. Although, those are supported by 2.5. Choosing other ini versions may be useful, but only if you really know what you are doing. We'll ignore them for now. Just make sure to never ever use "Version: 1.0", it's only purpose is for backwards compatability with older skins and because of that, it does not support HD images and some elements have weirder anchor points.

Settings

The next thing you should do is to adjust your ingame settings. This may sound weird at first, but it prevents you from making certain mistakes. You can always change back to your previous settings when you are done skinning. I recommend you adjust the following settings:
  1. ComboBursts: enabled
  2. Hit lighting: enabled
  3. Screenshot format: png
  4. Snow: enabled
  5. Show thumbnails: enabled
  6. Always show key overlay: enabled
  7. Music/Effect sounds should be somewhat close, using e.g. 10% for one and 90% for the other may lead to bad sound choices
  8. Ignore all beatmap skins: enabled
  9. Use combo colour as tint for slider ball: enabled

Song Selection

Again, you can start skinning wherever you want to. Most people start with whatever they've got an idea for, which would be gameplay or the song selection in most cases. I will begin with the song selection, because it is a major part of any skin, which will also have a huge impact on the overall feel.

The song selection screen in osu! looks like this:

It's made out of several parts, which are:

The Bottom Part:


The Top Part:


The Song Caroussel:


The Leaderboard:


And The Mode Selection:

Bottom Part

Let us start with the bottom part. It consists out of the following images:
  1. menu-back@2x.png
  2. selection-mode@2x.png, selection-mods@2x.png, selection-random@2x.png, selection-options@2x.png
  3. selection-mode-over@2x.png, selection-mods-over@2x.png, selection-random-over@2x.png, selection-options-over@2x.png
  4. mode-osu-small@2x.png, mode-fruits-small@2x.png, mode-taiko-small@2x.png, mode-mania-small@2x.png

But what do they all do?
menu-back and selection-mode/mods/random/options are the buttons on the left, the -over images are the ones that get shown when you hover over the buttons (although, the back button doesn't have one, it only gets a bit brighter) and the mode-osu/fruits/taiko/mania-small images are the small mode indicators, shown on top of selection-mode.
There are many ways of designing the song selection, it's totally up to you. Generally though, there are 4 main ways of making the bottom part:


There aren't that many things you need to know to get either of these 4 results.
Whenever you work with the song selection, this template will be of huge help. On there is everything that the song selection contains, with its standard sizes. You basically just need to trace over it, and then, after you're finished, cut everything into their respective images.
There are a few things you can do with the bottom part that goes beyond the intended image sizes. The two main things are a height change and a shape change. The default bottompart is only 180px high, but you can make it higher. All of the bottompart buttons have their anchor points at their bottom left corner, meaning they can be extended all the way up to the upper screen border. BUT, there are two things you need to be aware of when doing this. First, if you go too high you might cover the leaderboards or beatmaps. You can extend the bottom part up to roughly ~220px (shown below), without needing to cover anything.


You could also only have certain parts go above 180px, especially in the middle of the screen, that space is more or less emtpy anyway:


The second thing you need to look out for are hitboxes. The hitbox of the buttons is defined by the size of their -over images, meaning it won't be a problem for selection-mode/mods/random/options, but menu-back doesn't have an -over image. The hitbox of it is defined by the size of the button itself. This is the reason why you can't make it too big, because then you might not be able to click your own topscore on the leaderboard. (The maximum size for menu-back (HD) that I would recommend is something around 220px x 500px)

The other thing I mentioned that you can do with the bottompart was changing the shape. This is basically just the same thing as a height increase, you just increase it only in certain parts.


There are just 3 other things I want to talk about regarding the bottompart. Icons, text and the userprofile.
One of the most important things for the icons and the text is consistency. I often see people use icons with different styles and differently sizes. You should always use the same size for all of your icons, and if you use a round or square-ish design for them, use that design for all of them. It's bad design when three icons are one style and the fourth one has a different style. You also should keep their spacing consistent. And if the icons use a lot of lines/curves you use should use roughly the same line thickness. If they are thicker or smaller it will feel unbalanced overall. The same goes for text: never use different text sizes. People often use different sizes to fit the text for buttons with longer names (e.g. options and random). You should rather try to either make all of the text small or abbreviate random and options. Common abbreviatons are OPT, OPTN, OPTS, RAND, RND and RNDM. Other abbreviations should be fine, as long as it's clear what they mean.

So the last thing regarding the bottom part should be the user profile. There are a few options to chose from here. Some people just make a cutout and leave it like it is, but that can look a bit lazy. There are nicer ways to work with the user profile. You should either add some sort of transition to the edge, a proper border or make it look seemless. In the first example I just added some transparency onto the part with the user profile. Not great, but still better than nothing, like in the second one. A nice border or a seemless blend would be the best. For the seemless blend I used transparency. The part with the user profile actually is highly transparent white. But thanks to the transparency it looks like light grey.

Top part


Now onto the toppart. This one often is a bigger problem for beginners, but it shouldn't be that hard to understand if you read carefully. The top part only has one editable file, selection-tab@2x, which is used for
the sorting tabs you can see in the top right with the grouping/sorting options. They get tinted red when they are inactive and white when they are selected. If you want to blank them out do not make them 1x1px big, their size defines the hitbox. Also, if your selection-tab is black or completely transparent, the text on it will not be visible while its selected. There are 3 main things you can do with the toppart:


You can colour the outline, you can add a background and you can change the shape. The top part isn't directly editable, the file for it is not skinnable. Meaning we will need a workaround. To change the colour of the outline and add a background all we need is the mode-x-small elements. The important factor is that it is in additive blend mode and doesn't have a size restriction.
To change the colour we basically only need to do a small substraction to get the color we want (or at least the closest one to it). All you need to do to change the colour of the topline is to take this file and change its colour. You can't however change it to directly the colour you want the line to be. The blend mode of the mode-x-small images comes into play here. Due to the additive blend mode it's colour values will always be added onto the top line instead of just covering it. This results in a limitation regarding the colour the top line can be. Any colour that has lower RGB values than the blue of the line (which is 49, 94, 237) can't be achieved. Here is a quick overview of the colours that can be achieved:


To get the right colour for the file you just need to calculate the colours the file needs:
R = R(of the colour you want to archive) - 49
G = G(of the colour you want to archive) - 94
B = B(of the colour you want to archive) - 237
If you get a negative value it means that you can not get a perfect fit. You, however, just calculated the nearest possible result. You just need replace the negative values with 0.
If you want, for example, a light blue colour (78, 216, 247) the top bar should use a dark green (29, 122, 10). If you want a red colour (247, 49, 79) you will not be able to get that exact red, the best result would be a dark pink (198, 0, 158) that would result in this pink in-game.

The next thing would be to add a background to the mode-x-small. This isn't that hard, all you need to do is to have your layer with the outline and below it a layer with the background. We don't really have any restrictions for the background, thanks to the background of the default top part being black. There are however a few things you should look out for. If the background is too bright you will have a hard time reading any of the song information.


To counter this you either will have to choose something else for the background, or you could darken the areas where the song information is.


The last basic thing we can do with the top part is to change its shape. The only two elements that cover the whole screen are menu-back and mode-x-small. The problem with the mode-x-smalls is that they are in additive blend mode, they won't be able to cover the toppart properly, but we will be still using them for something else. And menu-back's hitbox is defined by it's size, so if you made it cover the whole screen, most of the screen will become a back button. The element we will use is selection-mode. It is placed 448px (HD) from the left screen border, meaning we will only be able to form the shape from the 449th pixel onward. To tint the line on the leftmost 448px we will just use mode-osu-small again.
The easiest way to explain this is to simply show what we will do with the file.


What we are going to do now is to cover up the curve of the top part with our own shape. You might've noticed that the black part that covers the shape doesn't reach all the way to the top. There is a reason for that, if you make it higher you will cover the map info.


There are two other things you need to look out for. White fringes and that the beatmap info icon getrs covered. Both have relatively easy fixes.


There are multiple ways to get around these fringes, but the easiest one would be to just use this top part template that I made for this post. It also has the position of the beatmap info icon on it. This leads us to the second thing, the fix for the icon. You just have to add your own one. The position is marked on the song selection template.

If you also want to add a background, and not just use black for the colour and replace the topline, you will need an additional step. For this you want the complete top part of selection-mode to be black. You will then put the background and the line onto mode-osu-small. The reason why you need to do this is that it is a pain to allign the background and the line otherwise, without getting some weird fringes, due to them overlapping. Another reason is that even if you would manage to allign them, the position of mode-osu-small slightly shifts between resolutions. You would get some ugly overlapping artifacts on different resolutions then.

There are a a few gimmicky things you can do with the toppart, custom selection-tabs and changing or covering the group and sort text.


Covering the group and sort text is really easy. You just need selection-mode@2x for it. You have to cover the text. You will have the same problems as with changing the top part shape, white fringes and covering information. If you make the cover to high it will cover longer song names. You can mess around with it yourself, or add this onto your selection-mode. If you also want to replace the text, just put the new text either onto the cover or mode-osu-small@2x, depending on if you use a background for the top part or not. The one thing you need to be wary of is that this will break on different languages, because they have longer/shorter words for group/sort.

Custom selection tabs work the same way basically. Just cover the ones that allready exist and put your own ones and your own text onto mode-osu-small. The main point of this is that you can change the text colour with this and use selection-tab styles that normally wouldn't be possible. You can just make the actualy selection-tab a black/completely transparent box, but don't make it a 1x1px blank image. As I already said previously, the hitbox of selection-tabs are defined by their size, so if you add a blank image your custom selection tabs will be useless. The alignment for where you need to place your selection tabs can be found on the song selection template. If you want to see in-game how it's done just try these out. Those are the selection-mode and mode-osu-small from two of my skins. I would link to some skins that have it, but there are very few.

Song Caroussel and Leaderboard

There isn't that much that I need to say about these two parts. The caroussel mainly consists out of menu-button-background@2x.png, star@2x.png and 2 ini commands under [Colours]. With the ini commands you can set the colour of the text on menu-button-background. SongSelectActiveText sets the colour for the currently selected card, SongSelectInactiveText sets the colour for all the non selected cards.
There are a few things you should know before you start making your song caroussel:
  1. The cards in the caroussel get tinted in various colours. This feature sadly cannot be disabled. These colours are all on the skinnable files spreadsheet. Basically, the only way to somewhat work around this is to use mainly black and dark greys for the menu-button-background, this however doesn't work that well with really colourful themes. You will have to try out yourself if a black one or a colourful one will fit your theme better.
  2. The thumbnail is placed 17px away from the left border of the image. The thumbnail is about 227 x 170 pixel big.
  3. The stars will get slightly bigger the more there are.
  4. If you plan to add a box around the stars, you need to be aware of the stars shifting. If you have a rank on it or if the map is for another gamemode, the stars will be shifted to the right.
  5. Stars used to have a different behaviour. They used to get partially filled. This however was changed with skin.ini version 2.2, which brought us thumbnail support. As such you cannot have thumbnail images and the old star behaviour.
  6. Everything gets shifted to the left edge if there is no thumbnail. It's recommend to include a version of the menu-button-background in an extra folder inside your skin that does not have a window for the thumbnail, because there are people who disabled thumbnails in the osu settings.


There isn't a lot you can do with the leaderboard. And for some reason, the leaderboard does not use scoreentry numbers for it's numbers. Basically the only thing you can do is to add a frame or background around the whole leaderboard. Like this:


You can do this by adding it onto mode-osu-small. the placement can be found on the song selection template.

Mode-Osu@2x (and mode-fruits, -taiko and -mania) can be found between the leaderboard and the song caroussel. It shows the current gamemode you are playing. Most people either blank it out or leave it as it is. But there are some gimmicky things that can be done with it. The afformentioned frame on the leaderboard can be done with it aswell and you can add some nice effects to the song selection, like this one (the big bright triangle part).

The last thing I need to mention are the small ranking letters. They get shared between the song caroussel and the leaderboard. They have different anchor points on both. It can be a real nightmare if your font isn't monospaced (fixed-width) it can be a real nightmare to align them properly, because if you align them to the letters to the left, they will look weird on the leaderboard. But the opposite can happen if you allign them to the center. Thats one of the reason why I would recommend a monospaced font for the ranking letters.

Mode Selection

There are 3 general styles for the mode selection. Icons only, complete box and fullscreen.





There are three ways of skinning the mode selection. You can split it all up into their files, blank out 3 of them and use one, or put the background and the catch icon onto mode-fruits-med and put the remaining icons onto their respective images. I would recommend the first approach if you plan to just skin the icons and if you plan to do a fullscreen one I would recommend to use the second or third approach.


I recommend using this template, made by Galvit if you plan to go with only one file.

Thanks to:


Matt2e2 for fixing most of my grammar mistakes
Topic Starter
RockRoller
reserving the topcomment because I will probably hit the character limit for the main post soon

also, the part about starting and the song selection is finall up!
G8D

how to move that score to bottom?
Topic Starter
RockRoller

G8D wrote:

how to move that score to bottom?
I'm not totally sure if that is possible. The position of the scorenumbers is defined by their height. So if you add a lot of space onto the top part of the canvas it could work. But you would also need to add the same amount to the bottom of the canvas, otherwise the ranking panel will be completly broken and this might lead to a size at which osu stops loading the images.
adMftw
Hello, sorry to bother you but I have some questions maybe you have the answers.

When hitting a hitcircle in a slider, how do I make it so that it doesnt expand larger than the slider?

Also, how do I get rid of the matching lines from circle to circle? I find it quite distracting.

Thanks for your help.
Topic Starter
RockRoller
the lines are followpoints. Just add a blank followpoint.png and remove all other followpoint files from your skin.
About the slidercircles: https://cbullet.us/zhq-.txt
BerryFruit
Hi
This question insnt about skinning
But, how do you put this thing at the end of all your posts?
- Marco -
You mean the forum signature?
Just go on the web settings https://osu.ppy.sh/home/account/edit, the third section "Signature".
Topic Starter
RockRoller

- Marco - wrote:

You mean the forum signature?
Just go on the web settings https://osu.ppy.sh/home/account/edit, the third section "Signature".
you have a comma too much at the end, the link is https://osu.ppy.sh/home/account/edit
Fibrix
Hi, I'm in the process of making my first skin and I have one question that bothers me: where do I get sounds from? Do I have to gather them from a few skins or can I find them somewhere like a site or something?
Topic Starter
RockRoller

Fibrix wrote:

Hi, I'm in the process of making my first skin and I have one question that bothers me: where do I get sounds from? Do I have to gather them from a few skins or can I find them somewhere like a site or something?
The easiest way to get nice sounds is to grab them from other skins. The only easy alternatives you have are to look for sounds on sites like freesound.org or take them from games and their menus
A Normal Thing
sorry to bother you
what is the best way to start a skin
do i start from scratch and make a completely new folder or do i copy and paste a skin
this is the first skin im going to make
thanks
Topic Starter
RockRoller

A Normal Thing wrote:

sorry to bother you
what is the best way to start a skin
do i start from scratch and make a completely new folder or do i copy and paste a skin
this is the first skin im going to make
thanks
Thats a question I can't really give an answer to, since its personal preference. I personally start with a blank folder and the first thing I add are blank files for all the stuff I want to remove. A lot of other people take another skin as a base, this however has the risk that 1) you will be very close to the style of the skin you use as a base and 2) that you will leave some images from the base skin in your skin, making it a mixed skin.
I would probably recommend to start from a new folder, then doing the skin.ini and then whenever you make an element take one from another skin as a base and drop it into your image editor as a reference. This will prevent you from having files from your base skin in your final product
A Normal Thing
oh no i need more help why am i like this
im using GIMP.so i make a circle on another layer and i want to select that and align it so that its in the middle.
but i cant find anything related to that and i have trouble trying to center the circle
i just want the circle to be aligned nothing else
ok thanks for help again
Topic Starter
RockRoller

A Normal Thing wrote:

oh no i need more help why am i like this
im using GIMP.so i make a circle on another layer and i want to select that and align it so that its in the middle.
but i cant find anything related to that and i have trouble trying to center the circle
i just want the circle to be aligned nothing else
ok thanks for help again
I have no clue about GIMP and there are very few people in the skinning community that use it. Try to PM h3oCharles via PM or Discord.
KaloyanGFX
How to make the grade in photoshop everytime i cant its just hard
Matt2e2

KaloyanGFX wrote:

How to make the grade in photoshop everytime i cant its just hard
"The grade"? What do you mean by that? ranking-[letter]? ranking-[letter]-small? Anything else?
McCreetard
Hi, Im pretty new to skinning scene, but are there any ways to make a gif/animated hp bar (scorebar) in game, I have some seen in some popular skins and wanna make a custom for my own. Regards. Thanks in advance!!
Topic Starter
RockRoller

McCreetard wrote:

Hi, Im pretty new to skinning scene, but are there any ways to make a gif/animated hp bar (scorebar) in game, I have some seen in some popular skins and wanna make a custom for my own. Regards. Thanks in advance!!
There are only a few elements that can be animated, but all follow the same scheme. Make each frame of the animation a seperate file, called scorebar-colour-0, scorebar-colour-1, and so on
McCreetard

RockRoller wrote:

McCreetard wrote:

Hi, Im pretty new to skinning scene, but are there any ways to make a gif/animated hp bar (scorebar) in game, I have some seen in some popular skins and wanna make a custom for my own. Regards. Thanks in advance!!
There are only a few elements that can be animated, but all follow the same scheme. Make each frame of the animation a seperate file, called scorebar-colour-0, scorebar-colour-1, and so on
How can I do that? I have seen people saying After Effects but Ive never tried any..Are there any specific vids that help on this particular topic? Like skining or how to use a program to skin or so so..
show more
Please sign in to reply.

New reply