How to make osu skin

Skin Generator for osu!

osuskinner allows you to create custom osu! skins with pre-made skin elements.

How it works

Contribute to the Pool

Join the world’s biggest osu! skin community and share your skin elements or the ones you found (with permission, of course!). It’s easy, give it a try!

Pick What You Like

Pre-made skins may look cool, but you may not like some parts of them. This is the reason osuskinner exists: to help you avoid having to use skins you don’t completely like, and rise through ranks with your favourite skin!

Create Better Skins Faster

Features

All Game Modes

osuskinner supports all game modes: standard, mania, taiko and catch.

Save & Remix

You can save the progress you’ve made with your skin whenever you want, so you can continue working on it later.

Sounds

Our library of sound elements helps you pick just the right amount of ORERU in your skin.

Element Uploads

You created this extremely beautiful and aesthetic health bar and want to share it? Great! You can do so with osuskinner!

Customizable Elements

You found the perfect skin but want it in purple? We got you fam. You can easily change the colors of an element with our tools!

Visual Skin.ini Configuration

The heart of every skin, skin.ini is very hard to configure, so we made it visual to help you configure your skin to your heart’s fullest.

Invidual Downloads

To change a part of a skin you like, you don’t have to download the whole thing from scratch, just head to the elements page and download the part you need and copy it into the skin folder!

Fast, Reliable and Free

Create new skins in just minutes and store them for free forever! What else could you want more?!

Mobile Support

Just in case you wanted to make skins on the go.

More to come!

What people say

Is this real life? Oh my god.

Ah yes, finally I can make my own skins without any time to be wasted.

Works just fine for me. Enjoyed testing it out. Keep up the good work!

This is a gift to mankind. Thanks for sharing!

This site is amazing, I always struggle to find a skin I like and having no knowledge on skinning I finally made the perfect skin for me.

This might be the best thing made for osu!, since osu!

I finally found awesome skin creator.

This editor is great, especially for setting up your skin.ini file. It’s also nice to see that people are downloading elements i’ve made.

Skin Generator for osu!

osuskinner is a place to share, create and discover osu skins and skin elements. This website is not affiliated with «osu!» or «ppy». All images and sounds remain property of their original owners. All skins generated with this site are for personal use only.

Beta notice

osuskinner is in beta phase. This means that you may encounter several bugs. You can submit bug reports and feature requests on our discord server.

skin.ini

The skin.ini is an initialization file that is found in almost every skin folder.
This file will define how osu! will display certain skin elements.

Caution: skin.ini commands are case sensitive, make sure you follow the proper spelling and are using the correct capitalisation!

Versions

Below is the skinning changelog.
The version number, seen in the headings, is what will be used in the Version command for the skin.ini file.

UI: positioning changes / osu!: visibility update (reduced clutter).

osu!taiko positioning changes

interface/UI changes

osu!catch changes

osu!mania stage scaling adjustments

osu!mania column and upscroll adjustments

Allow per-type skinning of arrows

osu!mania specific combobursts

latest

Always the newest version

If your skin folder does not contain a skin.ini file, it will default to this version.

Not a version, but always force latest

Notes

Before viewing the skin.ini commands below, here are some notes.

1’s and 0’s

tl;dr 0 = no and 1 = yes

Here is a classic example:

Note that Reisen, the sliderball, does not flip when 0 is used. However, Reisen does flip when a 1 is used. Depending on what sprite is used, you will either get a moonwalking sliderball, or one that turns around.

Numbers and Integers

The tables below may list either a number, an integer or a positive integer.

When viewing these tables:

RGB and RGB(a)

A few commands may ask for a colour in the RGB or RGB(a) format.

How to make osu skin

This article is about frequently answered skinning questions.

What is skinning?

Skinning is a simple image changing mechanism that osu! will load upon selecting a skin in the options. Putting a skin together is easy, but creating the assets for it is a little more difficult to achieve.

Can someone make this skin from that show/game?

If you have gone through the entire skinning forums and you are certain that you cannot find that skin, then congrats, osu! doesn’t have it yet. With this in mind, you can take this initiative to create the skin you dream of and make it something that everyone else may want!

Nevertheless, please, never request for a skin anywhere in the forums. Failing to follow this rule will result in your thread being moved to the wastelands.

Where can I get this skin that I saw someone play with?

First off, do not ask this in the forums; otherwise, your thread will most likely be thrown into the wastelands. Secondly, you’re better off asking that person for the skin they’re using. They may give it to you, but that may not always be the case.

Can I use a skinned element from someone else’s skin?

Yes, you can use skinning elements from other skins. These are called «mixed skins» or «skin mashups». However, you are not allowed post these on the skinning subforum with or without permission! You could, however, post them in your signature or me! userpage.

The only exception to this are sounds, as they are typically harder to make. These can be used from other skins, even without explicit permission from the original skinner. It would, however, be nice of you to credit the original skinner.

What should my skin folder contain?

When releasing your skin, however, you should remove such files to keep the file size down. If you happen to be using the template skin, delete the elements that are not modified because osu! will handle the missing elements automatically.

Do note, however, the folder called taiko (case-insensitive) is reserved for osu!taiko skins which will override all of the osu!taiko elements (and some interface elements when playing an osu!taiko beatmap).

How do I reload my skin in osu!?

You can also exit and reopen osu! or start the updater to reload the skin, but it usually is much quicker to use the four-keystroke combination to reload the skin in osu!

What are skinning sets?

In osu!, there are over 200 skinnable elements (not including the individual animated frames). However, you are not required to skin all of them. Instead, you can simply remove them as osu! will use the default images for the ones you don’t include.

That being said, a skinning set (defined by the Ranking Criteria) basically states which elements must be skinned if one of them in the set were skinned. For example, the player using your skin may not like it if you had only skinned only half of the default numbers and left the others as to use their defaults. However, this only strictly applies to beatmap skinning but you may want to take this into account for you own skin.

Is an edited skin a mixed skin?

Edited skins are considered mixed. Thus, they cannot be posted in any subforums.

Can I remake a skin that someone else made?

Yes, you can have a similar skin theme as someone else who might have done it before you. However, you must make the assets yourself and, obviously, don’t copy the assets from the other skin you are trying to remake.

Why isn’t there a database for skins, like beatmaps?

How do I share my skin?

Can I post a mixed skin in the skinning subforums?

No, you are not allowed to post a mixed skin in any subforums. The same thing applies for edited skins as well.

Where can I post my mixed skin?

You can use your me! userpage, your signature, the /r/osuskins subreddit, or anywhere else outside of the osu! forums.

Can I post a skin remake?

Yes, skin remakes are not considered to be mixed. So you can post these, as long as none of the assets were copied or duplicated from another skin (in which, it would be considered mixed).

Can I post R15 skins in the skinning subforums?

Yes, and if you do, you must add warning on your forum post. R15 skins may include but not limited to:

To add this warning, simply prefix [R15] to your thread post title and write a notice at the top of the post itself.

Can I post R18 skins in the skinning subforums?

No, you are never allowed to post skins that contains any R18 content anywhere in osu! Period.

If you post your R18 skin anywhere in the osu! community, be aware that you will be punished for that. On the other hand, if you release it outside the osu! community walls, nobody will hunt you down. R18 skins may include but not limited to:

If you don’t know how to make friendly looking thread, you can use this template.

It is really important to include various screenshots of gameplay and the song selection, etc. A lot of people will want to see your skin looks like before carelessly downloading it! You can use upppy or imgur to upload them.

What is skin.ini?

What is v1.0 and v2.0+?

Skin v1.0 was the old skinning style that was used from the game’s skinning support launch until March 2013. After that point in time, skin v2.0 was released along side a brand new set of skinning elements with some changes. To see a changelog of skinning updates, see the Versions section in the skin.ini article.

It may not seem important to denote which version to use, but understand that some older features may not be available in the latest version of skinning and vice versa.

Sound format hierarchy

The hierarchy of the sound formats that osu! will use is as follows:

What format should the images be in?

What are overlays?

What window resolution should I skin?

Since osu! can be played using different window resolutions, some skinning elements may either overlap or be placed farther apart than anticipated. This means that not all elements will stretch or scale themselves to fit the game window resolution.

It is best to keep the following resolutions in mind while skinning.

Images will be adjusted by the game itself to fit resolutions derivating from the ones mentioned above. Most of them will be rescaled to fit the playfield or repositioned on different aspect ratios.

Every sprite has an HD counterpart, even all frames in an animation can have HD counterparts. As a result, the filesize of the folder or archive will increase due to having more images than normal.

All HD images may also be bigger in filesize due to the fact that the canvas size used is four times bigger compared to the normal sprite. There are essentially two resolution modes osu! is using. Each of them prefers one set of images. The first mode is LowResolution while the second mode is HighResolution.

Ranking screen hit score hierarchy

The ranking screen preferences the static version of skinning elements over the animationed ones. That is, if an animation and a static version of an element is included, the hierarchy is as follows:

However, the osu!mania ranking screen is an exception to this. That is, if an animation and a static version of an element is included, the hierarchy is as follows:

Notice: In osu!mania, osu! ignores the specified path from the skin.ini file and will only use the image from the root directory (the folder where the skin elements are loaded).

How do I animate an element?

The animation frame rates for each element are inconsistent. Some use a value defined in the skin.ini file, some use the client’s defined value, while others are based on the BPM (beats per minute) of the beatmap. Due to this, animating skinning elements is trial-and-error (see the next section for methods on solving this).

My animation is playing too fast/slow, how do I fix it?

If your animation is too fast/slow, you have two ways to fix it:

How do I make a long cursortrail?

You will need the cursormiddle.png element to be present in your skin. If you do not want it, use a transparent image.

I deleted an element, but it’s still there! How do I remove it?

If you want to remove an element, you must use a transparent image in place of the element you want removed. Then reload your skin.

How do I delete the lighting after tapping on an object?

There are two ways to do this:

I meant the particles after clicking!

How do I remove the slider end circle?

Add a transparent file called sliderendcircle.png to your skin.

How do I hide the 300 hit scores?

Add a transparent file for these filenames:

How do I add a background in main menu?

What does the @2x do?

My taiko drums are in the wrong position!

Open the skin.ini file and change the Version to 2.1 or higher.

How do I change the combo colours?

How do I disable one or more hitsounds?

To disable them, find the ones you do not like and replace it with another sound.

I use dots instead of numbers, but when I get to the 10th combo, two dots appear!

To fix this, you need to change the HitCircleOverlap value to the width of the image used for the default numbers. For example, if your the skinned element size is 60×70 pixels (width by height), the value should be 60.

osu! Skin Generator [web] / Make your own osu! skin

Нет аккаунта?

osu! Skin Generator [web] / Make your own osu! skin

Sirade wrote:

Is this real life? Oh my god.

you can believe your eyes

XinCrin wrote:

Oh I really like the design of the web page. Gonna try it now
Good job!

You could have add a template then a coloring too give variety of choice.

It is nice to see that this worked on my phone, Android.

Keyboard: Logitech G103
Mouse: Logitech G300
Mousepad: Steelseries Qck Mass

Sirade wrote:

You could have add a template then a coloring too give variety of choice.

It is nice to see that this worked on my phone, Android.

Nice idea Sirade. i’ll be thinking about it.
Good to hear that worked on mobile Actually i tested on only chrome and firefox for pc. I don’t plan to improve for mobile.

A Medic wrote:

What a extremely well layout site, and I love the functionality of it. It must of taken you ages to write all of the JS.
Do you have any plan for custom user input like if someone wanted to use their own images instead of the image options you provide?

Yes, this is planned. Elements can be added by users in future relases.

ugryy wrote:

Congratulations. Excellent website

Haskorion wrote:

Do you know what the most disrespectful thing with this project is?
Not even mentioning who designed these elements.
All these content creators get their stuff simply put into something without any consent from them. People like Garin, Pannari, Redon, Raflea, Azer, Quanteck, Soda, and many others don’t even get any credits.

This project is not disrespectful. This is user-friendly

Project is currently BETA, so creator names are not displayed for now. Soon all users can be see the who created the element. And elements can be added by users.

Some element creators aren’t exist because skins mostly have same elements. How can i know which elements created by who? Do you have any idea for that?

Sorry for my bad English.

I’m not saying that you should remove everything.
You should add visible credits somewhere on the page, giving proper credits to most of the creators.

Also don’t add skins from any streamers to this since they use mostly mixed skins where no real credits are even given (like WubWoofWolf, HappyStick, or Doomsday) and are not skin creators.

Haskorion wrote:

I’m not saying that you should remove everything.
You should add visible credits somewhere on the page, giving proper credits to most of the creators.

Also don’t add skins from any streamers to this since they use mostly mixed skins where no real credits are even given (like WubWoofWolf, HappyStick, or Doomsday) and are not skin creators.

Okay. I added to elements something like this on hover effect :

Skinning FAQ

Нет аккаунта?

Skinning FAQ

Okay, this will be a literal «Frequently asked questions,» not a full tutorial. Ask a question and I can answer it here.

The background changes color! Why?
Because Peppy says so. Beatmappers can select a background color when mapping a song, so your background will be overlayed with that color. You should probably just make your playfield.png black and white, but you can add a hint of color. Just be aware that it will be recolored for gameplay. The menu-button-background works the same way.

The same rules apply to the approachcircle.png and hitcircle.png, which will change color along with the combo.

The countdown is hard to skin properly.
That’s not a question, but it’s true. Count1.png will be the bottom layer, so you have some leeway with that, but for 2 and 3, you should follow either the template skin or the EBO skin as closely as possible to avoid a mess. These sprites are aligned based on their left border, so variations in shape and size will mess everything up.

Why isn’t anybody commenting on my skin?
There are a few possibilities:
A) It sucks
B) The topic is too obscure, so people don’t bother with it
C) For the most part, only skinners browse the skinning section, so don’t assume it’s A or B. Sometimes nobody comments because nobody has checked it out. Be patient, ask about it in IRC, and keep improving your skin even if nobody is saying anything.

Also, make sure you post some screenshots, keep your first post updated with the most recent download, and bump your thread when you update, so people know what to expect before they download.

What do I have to do to get my skin added to the updater?

This isn’t a very democratic process, as it’s largely up to me and Peppy’s whims. But to increase your odds of being «published» in the updater, make sure your skin is:
A) Complete. You don’t need to skin every little thing, but the gameplay sprites, at the very least, should all match the theme.
2) Fun. It should be fun to play Osu using your skin. Anything too distracting, obnoxious, or ugly might ruin the experience, even if it does fit the theme, so make sure the priority is on making it enjoyable to play with.
3) Clean. I’m a stickler for this. Make sure your sprites have smooth edges, so they don’t look like crap when Osu resizes them. I suggest using an outer glow or drop shadow when appropriate. Also, delete any remnants of the template skin. They waste space and make your skin look unfinished when I browse the folder.

I’ll try to organize this better once I have some more questions. So ask away.