Introduction

Authored by RockRoller. Co-authored by Redo .

Last edited: October 27th 2026

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.

Skins are made mostly of image files which are named as what the game expects them to be named as (except mania files, those can be renamed, you will learn about this later). You will need an image editor that supports transparency and, optionally, an audio editor. The following are recommendations, but any software you choose will probably work.

While there are way more free options like Gimp, Paint.net, or Photopea (web-based photoshop clone), which are fine for the most part, but have significant shortcomings like bad UX, lack of non-destructive editing, limited features and tool-set, or ease-of-use issues, which leads us to not recommending them. They are still decent free options and will work good enough for a beginner, so if you already know how to use one of these programs, then you most likely have nothing to worry about. But, the programs explicitly mentioned in the list above will most likely make working on skins easier.

This tutorial will not show you how to do things in most of the programs mentioned above, there are just way too many options and nuances to cover. You can search for some general purpose tutorials online related to your program if you are having trouble with something, or join the skinship discord server and ask for help there!

Information and Help

The most important source of information is the Skinnable Files Wiki. 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 which mirrors the Completed Skins subforum. 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, or join the skinship discord server.

Templates

Whenever you work with skins, it’s good to have a template which will show you all elements and their anchor points. This song selection template will be of huge help and will work with any program since it’s just a PNG. Everything that the song selection entails can be found there, with its standard sizes. You basically just need to trace over it, and then, after you’re finished, cut everything into their respective images. If you use photoshop, we suggest you use the automated template we made instead. It will greatly speed up the process, while giving you a more reliable representation of song select with your changes.

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. For design references Pinterest is a great place to look at, but you may need to make a design oriented moodboard in order for the algorhythm to show you more things alike.

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 you will get overwhelmed and disappointed with your results, and fail, which will demotivate you.

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 create 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 screen time. When using art from independent artists, PLEASE respect their wishes and Terms of Service. If one does not allow their artwork to be used, or modified; you should not be doing so. This is especially important during the official skinning contests, where using artwork without obtaining permission (licensed to you directly by the artist, TOS allowing for non-commercial use and modifications) from the artist may result in your entry being disqualified.

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:

HD/SD elements, Aspect Ratios and Resolution

There are HD and SD elements. HD elements have the @2x suffix 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. This tutorial (or other skinners) will mention @2x or HD interchangably, you just need to remember these terms refer to the same thing.

You should always skin HD assets first, due to the higher quality and the ability to easily convert them to SD. Please note that the skinnable files wiki only shows SD sizes! You need to double that value for HD It’s important to note that HD images are only used by osu if it runs with at least 800px height, however, if no HD image is present for a file it will use SD image instead if 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: 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, because you won’t increase the image quality by upscaling (unless you chose vector software as your image editor of choice, then you can upscale as much as you want). You should create the HD elements first and then 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.

Your in-game 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 it. It’s recommended to try to support 16:9 and 16:10 in your skin, since those two are the most used ones. Not as many people are using 4:3 anymore, and more and more people switch to 21:9 (and other ultrawide aspect ratios, if only manufacturers didn’t mislabel them and make 21:9 a blanket term) but it’s still important to consider supporting those. We will go over the process of skinning different aspect ratios later in this tutorial.

Common fullscreen resolutions

You may need these later when making fullscreen @2x assets.

Anchor/Origin Points and Layering

Visualization of origin points

Every element in osu! has an anchor point, which is listed on the skinnable files wiki. 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 wiki will always tell you from where the image will spread, but you also need to consider where an image is placed in the client. The main anchor points being one of the top corners of the file or its centre:

Images that, for example, have their anchor point set as bottom left can’t extend to the left. This means that an element would not be able to reach all places of the screen, unless it’s placed near the left border of the window, as shown below:

Visualization of bottom left origin points

Where to start actually skinning?

Now that you know about a few general things and have a theme, it’s time to start working on your skin. Before you do this there is one last thing you should be doing, which 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:

Multiplicative colors

Very often throughout this tutorial, you will see us reference colors being applied multiplicatively.

The short and simple answer would be to imagine it like putting your asset into image editing software, creating a new layer above it and filling it with a color, clipping that color layer to the asset, and changing the color layer’s blending mode to Multiply.

Multiply blend mode takes the RGB channel values from 0 to 1 of each pixel in the top layer and multiplies them with the values for the corresponding pixel from the bottom layer. The composite is darker, unless the pixel is white in either layer or black in both layers. Where either layer is white, the composite is the same as the other layer. Where both layers are black, the composite is the same.

f(a, b) = a * b

where a is the base layer value and b is the top layer value.

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.

Icons

When making a skin, you may choose to include icons on some of the assets. One of the most important things about them (and anything really) is consistency. It’s a bad design practice when you mix icon styles across your skin. Best way to go about this is to use the same icon library for all your icons. That way their style and in some cases outline thickness is guaranteed to match. When it comes to their size, you should keep it the same for elements which serve similar purpose, but it’s okay for it to vary across different areas. If you don’t know which icon libraries to use, here are some popular ones:

Text

The same goes for text: never use different text sizes for similar things, unless you have a good reason to and know what you’re doing. 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 abbreviations are OPT, OPTN, OPTS and RAND, RND, RNDM. Other abbreviations should be fine, as long as it’s clear what they mean.

Closing statement

Now, head over to your game’s install location, and find the skins directory. Make a new folder inside, and name it what you want your skin to be named as, head over to your game and refresh the skin list (do you remember what the shortcut was? 👀). After that you should first work on the skin.ini, and then you can move onto some other section, We recommend the song selection.