osu!
Personal tools
Namespaces
Variants
Actions
Please be aware that the osu!wiki will be moving to GitHub.
You won't be able to edit articles soon so make sure to learn how to use GitHub.
Go to the new home of the osu!wiki

Skinning Tutorial (Interface)

From osu!wiki
Jump to: navigation, search
Other Languages

Español 


Work.png
Page in progress. Jump in the bandwagon if you can improve the page.


Osu!sys os.png

Skinning Skin.ini
Tutorial » Interface Standard Taiko Catch the Beat Mania Sounds
Skin elements » Interface Standard Taiko Catch the Beat Mania Sounds


Contents


Welcome Screen

These skinning elements are found on the welcome screen (the first screen you see after opening osu!).

Menu-background

Background for main menu. This part is only loaded/available for Supporter tag.png. 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 extension. 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.

Menu-snow

Since December 2014, osu! was given some snow effects. By default, the osu!client will always use the active mode's icon as the snow.

Triangle

Thinking.gif
This article/section is a stub. You can help the osu!wiki by expanding it.


Welcome-text

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"

Cursor

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.

ST 023.jpg

While making one you should do it in a kinda different colour than the skin's combo colours, to make it visible as possible. A cursortrail can help increase the visibility of the cursor.

  • By turning off the skin.ini option "CursorCentre" you gain the possibility to make cursors that act like your Windows cursor.

Examples

ST 024.jpg ST 025.jpg

Buttons

Button-left, Button-middle, Button-right

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.


While adding any patterns/objects to it, remember that in some places the button gets resized... it can look a little ugly.

ST 011.jpg

Song Selection

Menu-button-background

This part appears in few places, but its main usage is in song selection screen as background for beatmaps info.
Skin versions 2.2 and higher add the ability to have a small preview window with the main background of a beatmap set at the left (called thumbnails).

While making a menu-button-background you must consider some of these things.

  • Don't make it too large because it will look ugly when things start to overlap.
  • It's coloured differently, try making it grayscaled or just avoid using too much of dark colours.
  • You can try to be clever while making "bars" for songs names.
  • You can change the colours of text used, look into skin.ini part for SongSelectInactiveText and SongSelectActiveText
  • osu! adds a bit of transparency to the background.
  • The thumbnails are placed beneath the menu-button background and will not move it to the right. The currently selected map's thumbnail is placed above the menu-button-background.

Menu-back

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.

Selection Buttons

Thinking.gif
This article/section is a stub. You can help the osu!wiki by expanding it.


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.

Selection-tab

This image is shown on the grouping filters. It gets tinted red on the inactive tabs while it stays untinted on the active tab.

Star

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.

On skin versions 1 / 2 / 2.1, they are filled up from left to right to a certain part according to the map's difficulty.

  • At 4,65 star rating: 4 stars are filled fully, while only 65% of the 5th star is filled.

On skin versions 2.2 or higher, they are filled fully but are scaled down to very small stars. The higher the star rating goes the larger they get scaled up.

  • At 4,65 star rating: the 4 stars are scaled to their max, while the 5th star is only scaled down to 65% of its maximum size.

Star2

"Stars" that are dropped from cursor in breaks, kiai time, while playing with relax or autopilot mod. Also used by kiai fountain and appears together with comboburst.

ST 124.jpg ST 125.jpg ST 126.jpg ST 127.jpg


Mode Select

Thinking.gif
This article/section is a stub. You can help the osu!wiki by expanding it.


Mod icons

For a list of mod icons, please direct yourself to Game Modifiers

As name says, icons for additional mods that make game easier/harder (or fun).

It might be a little hard to work on such a small area, using "unsharp mask" filter can make your icons more readable. You can change their size, but remember that too big icons might overlap with each other.

Autoplay.png Cinema.png Double time.png Easy.png FadeIn.png Flashlight.png Half-time.png Hard Rock.png Hidden.png 1k.png 2k.png 3k.png 4K.png 5k.png 6k.png 7k.png 8k.png 9k.png Key Coop.png Nightcore.png No Fail.png Perfect.png Random.png Relax.png AutoPilot.png Spun Out.png Sudden Death.png Target.png

Scorebar

Some might refer this as: 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.

ST 079.jpg

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). Scorebar-colour can be animated.

ST 080.jpg

Interesting thing about scorebar-background is lack of size restriction with you can use to make some kind of border for combo or score. I will provide example, so this should be easier to understand :

ST 081.jpg

This is more like option for personal use, since you need to make it in your aspect ratio size. For this example was 1311x768, for 16:9 will be 1366x768 etc. Some people might like this option since someone would like to cover score or something. Be aware that scorebar-background is a highest layer of gameplay which means it will cover any other aspect of screen.

Scorebar-ki/kidanger/kidanger2 - 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.

Countdown

Countdown (v1), Are You Ready?, and Go

A countdown can be a part of some maps. It gives a warning to prepare for playing map.

ST 018.gif

After last wide-screen update creating a countdown should be a lot easier. You are not restricted by the width of count pictures but height should always be 768px. How positioning of counts works:

ST 019.png

Count 3 - Anchor position at top left side. Left side of picture will start here.
Count 2 - Anchor position at top right side. Right side of picture will start here.
Count 1 - Anchor position at centre of screen. Centre of your picture will be here.

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 covered by them. So it's kinda impossible to make stacked countdowns (you know numbers that appears on previous one).

Countdown (v2), Are You Ready?, and Go

A countdown can be a part of some maps. It gives a warning to prepare for playing map. (This one has different anchor points)

ST 018n.gif

All counts are anchored from the center and are placed on the center of the playfield.

You are not restricted by size so you can try to make something different than default "Go" and "Are you ready?".

Pause Screen

Pause/Fail screen

Skinning a pause or fail screen is 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, for the fail screen a fail-background. The default skin doesn't have backgrounds for these screens.

The buttons are pause-continue, pause-retry, pause-back (fail screen only shows retry and back). These aren't restricted by size and their clickable area is the resolution of the picture.

Score numbers

Score numbers - Numbers used for score (and by default for your current combo). You should try to make these as large as the template numbers. 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 are shown on ranking screen, so making them large will complicate creating the ranking panel.

ST 029.jpg


If you feel like your score numbers are too far apart or too cramped you can use ScoreOverlap in the skin.ini under the [Fonts] section.

Positive integers will move the numbers nearer to each other while negative values will add more space between numbers.


Another function in the skin.ini is ScorePrefix. It can be used to derivate in the naming scheme of the numbers.

  • Example: Using "ScorePrefix: character" lets osu! search for images containing "character-#" in your skin's folder and load these instead of the images containing "score-#" for every score related value.
    • This can be combined with pathing: "ScorePrefix: numbers/character" lets osu! search for the folder "numbers" in your skin's root 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 if you decide to use other prefixes than score for the score numbers, since combo numbers aren't tied to ScorePrefix and ScoreOverlap. If you use a custom score prefix (even combined with pathing) osu! still loads any images containing "score-#" for the combo counter. More info can be found below in the section for combo numbers.


The usage of score-comma depends on the region your PC is from. Most countries use a dot to display decimal values (98

.

95%
).
Other countries (such as countries from europe) use a comma to display decimal values (97

,

99%
).

It is hard to notice since every song starts with 0.00% in all regions but after the first note is hit it instantly switches to the comma in some countries.


When you are using widescreen resolution, don't forget about people that play on 4:3 aspect ratio. If made too large the scorebar might cover them.


Combo numbers

The combo numbers are used for all the current combo counters in all game modes.

  • osu!standard: bottom left corner
  • Taiko: above the taiko drum
  • Catch the Beat: above the catcher (moving along the catcher)
  • osu!mania: at the top of the columns (can be moved up or down manually)


You can use a different set of numbers by editing the skin.ini.

This can be done by using ComboPrefix under the [Fonts] section. By default it is set to "ComboPrefix: score".


If you want to use this you need to include a new number image set with a prefix other than score and then set "ComboPrefix" to the new prefix you are using.

  • Example: Using "ComboPrefix: combo" lets osu! search for images containing "combo-#" in your skin's folder and load these instead of the images containing "score-#" for the combo counter.
    • This can be combined with pathing: "ComboPrefix: numbers/combo" lets osu! search for the folder "numbers" in your skin's root folder and searches for images containing "combo-#" in this folder. If found osu! will load the images from there instead of the images containing "score-#" from the root folder for the combocounter.

In the same fashion as the score numbers you can also use ComboOverlap to adjust the space between numbers.

Positive integers will move the numbers nearer to each other while negative values will add more space between numbers.


In osu!standard the counter is always displayed with a multiplier. This means that you can include a custom multiplier image, it just needs to share the prefix your custom combo counter images use.


FPS

Thinking.gif
This article/section is a stub. You can help the osu!wiki by expanding it.


Playfield

Play-unranked

Skin element of "Unranked" text that appears when using auto/relax/autopilot mods.

Play-skip

Similar part to menu-back with one exception, is not restricted by size. Used to skip beginning of some beatmaps. This part can be animated.

ST 064.jpg

Examples

Play-warningarrow

A warning arrow that 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 - warns about your turn. Remember that warning arrow appears from both sides, right side is mirrored.
In skin version 1, the warningarrow stays untinted on the end of section breaks, while in the pause menu it is tinted blue.
In skin versions 2 or higher, the warningarrow is tinted red on the end of section breaks and still gets tinted blue on the pause menu.

ST 068.jpg

Examples

ST 069.jpg ST 070.jpg ST 071.jpg ST 072.jpg

New warningarrow

There are 3 new arrows that will override the play-warningarrow on their respective screens.

  • arrow-generic: it replaces the turn indicator during TAG multiplayer games (?).
  • arrow-pause: it replaces the arrow on the pause and fail screens and won't be tinted blue anymore.
  • arrow-warning: it replaces the arrow that appears at the end of breaks. Like in skin version 1, it won't be tinted red on skin versions 2 or higher

The most useful feature of these new images are that you can use 3 different arrows, where in the past you could only use one and that they will no longer get tinted by the game.


Addimage.png
It has been requested that image(s) be uploaded and added to this page or section.

Please remove this template once the image(s) have been uploaded and applied.


Multi-skipped

When you play a map that has a intro which can be skipped in a multiplayer game, it provides a better visual feedback when someone already skipped it and waits for the others to also do this. It appears on the scoreboard next to a player's name.


Addimage.png
It has been requested that image(s) be uploaded and added to this page or section.

Please remove this template once the image(s) have been uploaded and applied.


Section Pass and Section Fail

Pictures that appear in longer breaks. You get shown section pass for having more than 50% of life before break. Section Fail appears while having less than 50% of life. Nothing special about these, they don't have size restrictions so feel free to make them larger.

Input Overlay

The Input Overlay is displayed on the right-hand side of the play screen. It shows how many times each keybinding has been pressed in the duration of that song.


In Skin.ini, there is an option under the [Colors] section called "InputOverlayText" which 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). It defaults to 0,0,0 (black).

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

Ranking Screen

Ranking panel uses many skin elements, which will create pretty nice thing.

ST 073n.jpg
Ranking Letters It's not hard to do them. Just don't make them freaking huge. Remember ranking-X is for SS, ranking-SH - Platinium S, ranking- XH - Platinium SS.
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.
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.
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.
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.
Ranking-title Title of Rankings. Usually used as "RANK / Your Rank".
Ranking-winner A small box that shows winner of multiplayer match.
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).

Offset Wizard

Thinking.gif
This article/section is a stub. You can help the osu!wiki by expanding it.


Ranking Grades

Small ranking letters

Smaller versions of the ranking letters. They are often designed like their larger counterparts but on a much smaller size to fit on certain displays.
Currently you can find these in 3 places.

  • on a beatmap's ranking to the left
  • on the song select panels
  • near the accuracy display during longer breaks in beatmap.


List of Guides in osu!
FAQ/Ranking Guidelines
General Mapping Guides What is a beatmap? How do I beatmap? How do beatmaps get ranked? Difficulty appropriate gameplay elements How to time songs Song Setup Mapping Taiko Difficulties Fitting the Size-limit
Modding Aides AIBat
Mapping Techniques Mapping Techniques Making Good Sliders How to do 15° Patterns
Modding Info How do I mod?
Skinning/Hitsound Guides
Skinning Skinning Tutorial » Interface Standard Taiko Catch the Beat Mania Sounds

Cropping with Complex Backgrounds Cropping with Simple Backgrounds Making Properly Centered Spinners What are Custom Sample Overrides? Custom Hitsound Library Adding custom hitsounds

Storyboarding Guides Storyboard Scripting Storyboard Scripting (Cheat Sheet) SGL Tool Reducing SB Load
Audio Editing Guides Audio editing Basic MP3 modifications Getting songs from Video Games
Video Editing Guides Compressing Videos Videos from YouTube
Gameplay Guides Play Styles How to increase your rank Making nice recording for Youtube Live streaming osu! How do I use the Chat Console?
Common Mistakes Changing the Map's Artist or Title
osu!forums Guides BBCode Starting a Beatmap Project How to not Embarrass Yourself in the Projects Subforum How to not Embarrass Yourself in the Modding Queues Subforum
Miscellaneous BanchoBot Changing Title Text Music Theory Setting the Offset on the Correct Beat Collab Information Shortcut Key Reference GL Support Issues What is Internet Relay Chat? How to Run osu! on Your Mac without using Boot Camp



Contents of
Logo.png
wiki
Getting Started Registration Installation Newbie's guide Game Interface Options Hit Objects
osu! Game Styles Basic explanation Multi-play
External ports » osu!stream osu!droid opsu! osu!wp T-Aiko Beats
External clients » osu!tourney osu!MapDownloader
World of osu!
Miscellaneous » Mascots osu!academy osu!talk
Beatmap Editor Compose / Design (Scripting) / Timing / Song Setup

Beatmapping Beat Snap Divisor / Distance Snap Custom Sample Overrides Kiai Time Mapping Techniques Skinning Skin.ini Storyboarding

Online Editing
and Ranking
Beatmap forum Submission Beatmap Approval (How to Get Your Map Ranked) Modding (Getting Your Map Modded) Music Theory Audio Editing Kudosu / Star Priority
People The Team Administrators/Global Moderation Team Quality Assurance Team Beatmap Nomination Group Language Moderators osu! Alumni Support Team Community Contributors List of notable people