These skinning elements are found on the welcome screen (the first screen you see after opening osu!).
This is the background image in the main menu. This part is only loaded/available for osu!supporter. You will also see it in beatmaps without backgrounds, multiplayer lobby, multiplayer match background and osu!direct background.
This is the only skin element that must be in
JPG format. You can easily change it by just dragging a picture and dropping it in main menu window, it will create/replace menu-background in you current skin. If you have created picture of size 1366x768, it will be cut from left side at lower width resolutions.
Since December 2014, osu! was given snow. By default, the osu!client will always use the active mode's icon as the snow.
The Welcome text is the image that appears as you open osu!, this layer can be edited and it's name is "welcome_text.png". This part is only loaded/available for osu!supporter.
The cursor is the most important part of standard mode skinning. Every player has their own opinion about cursors and what kind is the best.
These are the skin parts for buttons that you can find in several places in osu!, like mods selection menu, beatmap options, multiplayer/match buttons etc. As you can see, every button is made of 3 parts: left, middle and right. You need to be careful to make them at same height. To have correctly aligned parts remember that button-left must be connected to the right side of the button-middle and button-right to the left.
You can add patterns/objects to it; but remember that in some places, the button gets resized and can look ugly.
This part appears in few places, but its main usage is in song selection screen as background for beatmaps info.
Skin versions 2.2+ add the ability to have a small preview window with the main background of a beatmap set at the left (called thumbnails).
They are used in three notable places:
While making a menu-button-background you must consider some of these things:
Button that appears in any menu (options, osu!direct, special mode select, song select). This is one of few parts that have size restricted. If you make it any larger than template, part of it will be outside screen. You can also animate it.
Minimalist Miku (65 frames)
Soda (4 frames)
Yugen (59 frames)
Selection buttons are the buttons near menu-back that are pressed to select mods, a random beatmap, beatmap options and the gamemode. Each button has two states, one for when it isn't being hovered over and one for when it is. These buttons are only visible on the beatmap selection page.
This image is shown on the grouping filters. It gets tinted red on the inactive tabs while it stays untinted on the active tab.
The number of tabs that appear (4 or 5 tabs) is dependent on the osu!client's window size.
The difficulty "stars" that you can see in the song menu. These correspond to the star rating of a map up to 10 stars max.
Skin versions 1.0, 2.0, and 2.1, they are filled up from left to right to a certain part according to the map's difficulty.
Skin versions 2.2+, they are filled fully but are scaled down to very small stars. The higher the star rating goes the larger they get scaled up.
Star2 are the "stars" that are dropped from the cursor during breaks, kiai time, and while playing with relax or autopilot mod. Also used by kiai fountain and appears together with comboburst.
These are the icons that tells the user what game mode they are currently using.
By default, the small icons are used for the default snow image(s), if a
menu-snow.png image wasn't given.
As the name says, icons for additional mods that make game easier/harder (or more fun).
It might be a little hard to work on such a small area, using the "unsharp mask" filter can make your icons more readable. You can change the icon's size, but remember that too big icons might overlap with each other.
Also known as the lifebar
This is troubling for most of the skinners if they want to make lifebar different than the original. That's because scorebar-colour has different anchor position than scorebar-background.
Looking at this image, the blue lines show the anchor position for scorebar-colour and if you want to fit them in the same place, try moving the scorebar-background. Also you don’t need to keep length of the lifebar, you can make it shorter or longer (for widescreen). It should be noted that the scorebar-colour can be animated.
The interesting thing about scorebar-background is that it has no the size restrictions. Because of this, you can use to make some kind of border for combo or score. Like this skin here.
You can see that the score (upper-right corner) is blocked while the combos (bottom-left corner) has a border. However, doing this is heavily discouraged due to verious ratio aspects that you'll need to fit.
Skin version 1.0 has scorebar-ki/kidanger/kidanger2. These are part of lifebar that goes with your actual life. Ki is from 50-100% of life, kidanger appears at 25-50% life, kidanger2 appears when player have less than 25% of life.
Skin version 2.0+ now has scorebar-marker, which is a single, static image. Do note that skins version 2.0+ still supports skin version 1.0 style of scorebars.
A countdown can be a part of some maps. It gives a warning to prepare for playing map.
It is important to note that skinning versions 1.0 and 2.0+ use different styles when displaying the countdown (look at examples below).
For skinning versions 1.0
You are not restricted by the width of count pictures, but height should always be 768px. Here's how positioning of counts works:
With this you are able to create many different countdowns. But you need to remember about how they are layered. Count 3 is always on top, count 2 is behind and count 1 is underneath them. So it's kinda impossible to make stacked countdowns (you know numbers that appears on previous one).
It is also important to note that this version was intended for 4:3 ratio aspects. Widescreen ratio aspects will not add pillarboxes.
For skinning versions 2.0+
A countdown can be a part of some maps. It gives a warning to prepare for playing map.
All counts are anchored from the center and are placed on the center of the playfield. There are no size restrictions, so you can try to make something different than default "Go" and "Are you ready?".
Skinning a pause screen is quite easy. Only few elements are used and they are widescreen compatible. So, let's begin with the backgrounds. For the pause screen you need to skin a pause-overlay and will be scaled to the full screen it is smaller. The default skin doesn't have backgrounds for these screens.
The buttons are pause-continue, pause-retry, pause-back. These aren't restricted by size and their clickable area is the resolution of the picture.
It is important to note that the position of the warning arrows do not change.
The failed screen is very similar to the pause screen. A notable difference is that it only uses the pause-retry, pause-back buttons (does not use pause-continue) and uses the fail-background image instead.
Just like the pause screen, the position of the warning arrows do not change.
These are the numbers used for score (and by default, for your current combo). You should try to make these as large as the template numbers sizes.
If they are too small, they may be hard to see, if too large, they will be distracting and may look ugly. Remember that the score numbers also shown in ranking screen, so making them large will complicate creating the ranking panel.
If it appears that your score numbers are too far apart or too cramped closely together,
you can use
ScoreOverlap in the skin.ini under the [Fonts] section.
Note that positive integers will move the numbers closer towards each other, while negative values will move them farther apart.
With the skin.ini,
ScorePrefix allows you to use custom paths to link to the images.
ScorePrefix: numbers/characterlets osu! search for the folder "numbers" in your skin's folder and searches for images containing "character-#" in this folder. If found osu! will load the images from there instead of the images containing "score-#" from the root folder for every score related value.
Be careful, this custom pathing only affects the score numbers, not the combo numbers (assuming you only modify the score numbers, the combo numbers will use the default score numbers).
The usage of
score-comma.png depends on the region your PC is from.
Most countries uses a dot to display decimal values (73**.92%).
While in other countries (such as those in Europe) may use a comma to display decimal values (73,**92%).
To also note, by default, every song will ALWAYS start with
0.00% (with dot) in ALL regions.
However, after the first note is hit, osu! will instantly change it (or keep it) depending on your region.
When you are using widescreen resolution, don't forget about people that play on 4:3 aspect ratio. If made too large of a scorebar, it might cover them.
The combo numbers are used for all the current combo counters in all game modes.
By default, the score number image set are used as the combo number images set.
This default can be changed in the skin.ini file.
To do this, change the
ComboPrefix command (under the
[Fonts] section) to the combo image name.
ComboPrefixto that new prefix.
Just like the default numbers and the score numbers, you can also use
ComboOverlap to adjust the space between numbers.
Where positive integers will move the numbers closer to each other, while negative integers will add more space between numbers.
The FPS numbers. This only works with the Stable (Fallback) stream!
These are the elements that display when playing a beatmap in any mode.
This element is displayed when a certain game mod is enabled (auto/relax/coop/etc.).
As a sugguestion, make sure that this image still reads "unranked" to let the user know that the play is unranked.
The skip button is similar to menu-back with one exception, is not restricted by size. This button appears and is used to skip beginning of beatmaps with intros longer than ~5 seconds. This can be animated.
NeonFX (23 frames)
The warning arrow appears at the end of section break (pass or fail), in pause menu - pointing at actually selected button (appears after pressing keyboard arrows), and while playing TAG in multiplayer - points to who's turn it is. Remember, this image must points towards the right, because it will be reflected to make it point to the left!
In skin version 1.0, the warningarrow stays untinted on the end of section breaks, while in the pause menu it is tinted blue.
In skin versions 2.0+, the warningarrow is tinted red on the end of section breaks, and still gets tinted blue on the pause menu.
There are 3 new arrows that will override the
play-warningarrow.png on their respective screens.
The most useful feature of these new images are that you can use 3 different arrows! In the past you could only use one image and that they would have been tinted differently.
In multiplayer, this is the visual image that tells the other players (and you) that they want to skip the intro. This appears on the scoreboard on the left, next to the player's name.
This is the image that appears when you pass a section. Passing a section is determined whether if you have more than 50% of life (on the scorebar) before break. These don't have a size restriction, so feel free to make them bigger than the default!
This is the image that appears when you fail a section. Failing a section is determined whether if you have less than 50% of life (on the scorebar) before break. These don't have a size restriction, so feel free to make them bigger than the default!
The Input Overlay is displayed on the right-hand side of the play screen. This is only seen in the osu!standard and osu!catch modes. This shows how many times each keybinding has been pressed in the duration of that song.
Note that this can be disabled in the options!
In the skin.ini, there is an option under the
[Colors] section called
This defines the input overlay's text color.
For example, setting it to
255,255,255 will make the input overlay's text white (as seen in the "Yugen" example above).
However, the default is
The input overlay comes in two parts:
|File Name||Description||Resolution (BxH)||@2x Resolution (BxH)|
|inputoverlay-background.png||Defines the overall background for the input overlay||193x90||386x180|
|inputoverlay-key.png||Defines the "key" image for each of the 4 keys in the input overlay||46x46||92x92|
The ranking screen is the last screen a player gets to see after finishing their play of a beatmap. There are many parts inside the ranking screen, so below is the brake-up of what the ranking screen is really about.
Using the image above, here are the meanings:
|# on image||Name||Description|
|1||Ranking Letters||It's not hard to do them. Just don't make them freaking huge. Remember:
|2||Retry, Replay button||Depending on your Version in the skin.ini, either ranking-retry.png/ranking-replay.png (Version: 1.0) or pause-retry.png/pause-replay.png (Version: 2.0 or above) will be used. Retry - play the map one more time. Replay - watch your amazing play.|
|3||Ranking-accuracy and max combo||As the name says. Personally I recommend to make them blank and add "Max Combo" and "Accuracy" by yourself on raking-panel. It's just easier to position them.|
|4||Ranking-graph||This one is kinda size and position restricted. Easiest way to make it, is by using default one, since you won't have problems with correct position to fit actually showed graph.|
|5||Ranking-perfect||You can make it in whatever way you want, add text or picture. Be aware that sometimes you will need to do minor positioning.|
|6||Ranking-title||Title of this screen. Should say "RANK" or "Your Rank".|
|7||Ranking-winner||A small box that shows winner of multiplayer match.|
|8||Ranking-panel||The heart (:3) of ranking. It's not restricted by size (but is restricted by position), so feel free to experiment. Like I said in "score numbers" part, you must remember that is hard to fit large numbers into ranking spaces. I recommend to test your ranking on long maps that have high combo (for example paraparaMAX I, just check out someone's score).|
|9||Mod icons||This is where the enabled mod icons go|
These are the letter grades given based on your accuracy.
Smaller versions of the ranking letters are often designed like their larger counterparts, but on a much smaller scale to fit in certain areas.
Currently, these are used in 3 places:
Interestingly, there is an element here that you could change. It is the bar that shows the current tick of each beat in a beatmap, while offseting.