forum

Skinning Tutorial

posted
Total Posts
150
Topic Starter
RockRoller
The skinning tutorial has been moved!
The character limit for forum posts and the fact that BBCode is an outdated language that doesnt have any good editors made me move the tutorial. You can find it and many other useful skinning related topics here:

https://tutorial.skinship.xyz/tutorial/introduction
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.
Denoic
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..
Matt2e2

McCreetard wrote:

How can I do that? I have seen people saying After Effects but I've never tried any..Are there any specific vids that help on this particular topic? Like skinning or how to use a program to skin or so so..


There aren't really any videos specifically for skinning but there are videos for learning After Effects or Photoshop or whatever you want to use for creating animations, just keep in mind that the program you're using should be able to export as a png sequence (since that's how osu! reads animations, as RockRoller said), else you might have a hard time separating the frames.

If YouTube isn't enough you can also join the Discord servers below and ask for help.

Hope this helped.
RFP12
I'm having a problem with the selection-mode.png file on my skin. I want the resolution for it to be 1366x768, but it always comes out as 1920x1080. I tried editing the file and changing it that way, but it never works. How can I fix that?
Draycon

RaymanFP wrote:

I'm having a problem with the selection-mode.png file on my skin. I want the resolution for it to be 1366x768, but it always comes out as 1920x1080. I tried editing the file and changing it that way, but it never works. How can I fix that?


There are selection-mode and selection-mode@2x, you need that one without @2x(SD).
TheBrightSoul

G8D wrote:


how to move that score to bottom?

i never thinked this skin hack before but i think you should make the score numbers long vertically like all the screen and if you dont understended it, here a image: https://mega.nz/#!2nxUXQoL!-eJFwHKJyV59dkj_y7NqGjUW8lEXTBXkwkq-vPWCKos
my angel vikala
This tutorial has a lot of useful things for those who wants to begin their own skins! I would say thank you RockRoller for helping me and others too on this tutorial
CandyTwix
skin
Camillie
Hi,
Im like a begginer and writing here to understand really what i am doing, i've read the thread and did not see my answer, but now i know i little better what I am doing.
What I am trying to ask is, why the bottom parts like selection-mode are done in 2286x2000, or 2286x1440, when I play and I see these things in 1920x1080. You can see this in SPLOOSH+X+WHITECAT skin, I've tried to do it by myself and i've done this in 1920x1080 and in random number like 2400x2000 to see if this works, and guess what, of course it didnt. Could you explain?
Topic Starter
RockRoller

Camillie wrote:

Hi,
Im like a begginer and writing here to understand really what i am doing, i've read the thread and did not see my answer, but now i know i little better what I am doing.
What I am trying to ask is, why the bottom parts like selection-mode are done in 2286x2000, or 2286x1440, when I play and I see these things in 1920x1080. You can see this in SPLOOSH+X+WHITECAT skin, I've tried to do it by myself and i've done this in 1920x1080 and in random number like 2400x2000 to see if this works, and guess what, of course it didnt. Could you explain?


What the resolution you play it doesnt really matter for skinning. Osu skinning is based on 1366x768 (twice that for HD files). So if you were to assemble a full song selection in e.g. photoshop you would need it to be 2732 x 1536 for HD. This would include menu-back and selection mode, cut off the leftmost 448 pixels for the menu-back@2x.png and you will be left with selection-mode@2x.png needing to be atleast 2284 pixels wide. If you do not want to mess around with what needs to be how big, you can always just use the song selection template that I should have linked in the tutorial.
hi_forever_body
Hello, How do i uptade my skin inside Osu! Without closing the game

thx for the answer
Topic Starter
RockRoller

hi_forever_body wrote:

Hello, How do i uptade my skin inside Osu! Without closing the game

thx for the answer

Press Ctrl + Shift + Alt + S
eulyste
Hello, do you still have the template that is mentioned here in the Top Part section, "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." When I click on the link it says the puush could not be found.
Topic Starter
RockRoller

RunicImpulse wrote:

Hello, do you still have the template that is mentioned here in the Top Part section?
https://puu.sh/FIH5F/158690bda6.rar

I know that a few images and links in this post are broken, but I am working on replacing them
KonKoniLou
Sorry to bother you but i was wondering how i would edit the selection mode (full)
Like how would i edit it like in photoshop is there a video about it.
Topic Starter
RockRoller

-Aak- wrote:

Sorry to bother you but i was wondering how i would edit the selection mode (full)
What exactly do you mean
KonKoniLou

RockRoller wrote:

-Aak- wrote:

Sorry to bother you but i was wondering how i would edit the selection mode (full)
What exactly do you mean
how would i edit the selection. Like do i have to Do it in photoshop and How i would do it.
Topic Starter
RockRoller

-Aak- wrote:

how would i edit the selection. Like do i have to Do it in photoshop and How i would do it.
As I mentioned earlier on in the tutorial, if you want to make your own images you will need an image editor that supports transparency, the best option here would be pdn (free, remember to get the pugins I link in the post) and photoshop (paid).
Sey_
Thanks for all the work you have been doing as of now!

Quick question, but here's some info: I use a 1920x1200 which runs the 16:10 aspect ratio, but most skins that I know only have the 16:9 aspect ratio available with the target resolution being 1920x1080.

Is there a way to reliably convert/edit the pictures/elements such that It'll work for my resolution? I already have photoshop and well the way I tried it really didn't work.

Thank you in advance!
Topic Starter
RockRoller

DerFlux wrote:

Is there a way to reliably convert/edit the pictures/elements such that It'll work for my resolution? I already have photoshop and well the way I tried it really didn't work.

Thank you in advance!
There isnt any way to automatically convert them. You need to move parts of the elements, aka edit the iamges directly. Tho, editing from 16:10 to 16:9 is a lot easier then the other way around. Maybe I should make the part about converting 16:9 to 16:10 skins soon
shac
Sorry to bother, but im new to skinning like most people here and i'm trying to work out how to remove the star particles that are attatched to my cursor when i start a map and also the random particles that shoot out, i wouldn't mind re-skinning them but i just have no clue what the name of that file is or anything, thanks.
Topic Starter
RockRoller

shac wrote:

Sorry to bother, but im new to skinning like most people here and i'm trying to work out how to remove the star particles that are attatched to my cursor when i start a map and also the random particles that shoot out, i wouldn't mind re-skinning them but i just have no clue what the name of that file is or anything, thanks.
star2.png is the file you are looking for
shac

RockRoller wrote:

shac wrote:

Sorry to bother, but im new to skinning like most people here and i'm trying to work out how to remove the star particles that are attatched to my cursor when i start a map and also the random particles that shoot out, i wouldn't mind re-skinning them but i just have no clue what the name of that file is or anything, thanks.
star2.png is the file you are looking for
thank you so much been looking for this for days!
Corne2Plum3
The website look good but he's incomplete (are you waiting osu!lazer for add some parts, like the gameplay sections?)

Suggestion
In the site there is no space between the side-navigation at the left and the main content of the page, and it's a little hard to read. You should add in css/main.css these lines in the .main section (~ line 30) :
padding-left: 12px;
padding-right: 12px;
It's for add a space between the side-navigation at the left and the text, it's better to read.
Topic Starter
RockRoller

Corne2Plum3 wrote:

The website look good but he's incomplete (are you waiting osu!lazer for add some parts, like the gameplay sections?)

Suggestion
In the site there is no space between the side-navigation at the left and the main content of the page, and it's a little hard to read. You should add in css/main.css these lines in the .main section (~ line 30) :
padding-left: 12px;
padding-right: 12px;
It's for add a space between the side-navigation at the left and the text, it's better to read.
No I am not waiting for lazer, if I would be doing that there would be no point in writing this thing in the first place. Its just that writing these tutorials takes a lot of time and I am the only one doing it. Just be glad that there is something.

And yea, I know that the website isn't working perfectly on slim resolutions, what you suggested doesn't fix it at all tho. It will be fixed at some point, just wait for that. If you want to use the site in slim widths you can always make your own userstyle with stylus. Also, padding isnt the way to go here, you would need margin
WukongLord595
Hi, sorry to bother you but how do I change it so when the slider moves it doesn't show up a circle that gets big?
Topic Starter
RockRoller

WukongLord595 wrote:

Hi, sorry to bother you but how do I change it so when the slider moves it doesn't show up a circle that gets big?
blank out slider-followcircle
XaLERIK
Hey hello guys. Im starting to create my first skin and wanna remove this white outline border on buttons .
This appears when you hover over the button.
Also it appears for some elements like "Miss" image

(but image does'nt have this border actualy) Maybe I don’t know something (Im noob at osu skinning actually)? I took the Luisina's skin for BeasttrollMC (btmc - Noel Sora no method) as a basis for my skin (maybe is't matter? But i tried to make skin from scratch and this outline is still on they place. Thanks in advance for reply.
Redo_

XaLERIK wrote:

Hey hello guys. Im starting to create my first skin and wanna remove this white outline border on buttons
When You're saving your asset don't do File > Save As, but use File > Export As > PNG instead. This should get rid of your problem.
McEndu
What is the suggested SD size for line-style follow points?
Topic Starter
RockRoller

McEndu wrote:

What is the suggested SD size for line-style follow points?
256px HD, but that is the canvas, for the length of the actual line please just refer to other skins.
McEndu

RockRoller wrote:

McEndu wrote:

What is the suggested SD size for line-style follow points?
256px HD, but that is the canvas, for the length of the actual line please just refer to other skins.
I think stuff related to line-style follow points are good for the guide section?
Topic Starter
RockRoller

McEndu wrote:

RockRoller wrote:

McEndu wrote:

What is the suggested SD size for line-style follow points?
256px HD, but that is the canvas, for the length of the actual line please just refer to other skins.
I think stuff related to line-style follow points are good for the guide section?
Or rather in the tutorial directly. Just haven't written that part yet. There is just so much to write
remclean
How do you make a metre instead of a approach circle on the spinners? I have seen it before so I know you can. I am new to skinning, please help me.
Topic Starter
RockRoller

remclean wrote:

How do you make a meter instead of a approach circle on the spinners? I have seen it before so I know you can. I am new to skinning, please help me.
Use the old spinner style and not the new one
remclean

RockRoller wrote:

remclean wrote:

How do you make a meter instead of a approach circle on the spinners? I have seen it before so I know you can. I am new to skinning, please help me.
Use the old spinner style and not the new one
I don't know how to do that. I only started skinning 2 days ago.
Topic Starter
RockRoller
you need to use spinner-background, that enables the old spinner style, then you can use the elements of the old spinner style which includes the metre

Just check this spreadhseet https://docs.google.com/spreadsheets/d/1bhnV-CQRMy3Z0npQd9XSoTdkYxz0ew5e648S00qkJZ8/edit#gid=2074725196
SLFY
Thanks for skinning guidance! Do you know if ranking-replay.png is still skinnable or has been renamed to something else? Mine has reverted to the default "Watch Replay" button while my "Retry" is still properly skinned.

Edit: It works when I put the image into a different skin and use it. I have a feeling something in my skin.ini is preventing it (?) but I can't seem to find anything relating to ranking screen at all in there.

Edit2: Turns out it works when I switch my skin version from 2.4. to 1. Unsure why the only thing that's affected is the ranking-replay.png though, since the ranking-retry worked in 2.4
Topic Starter
RockRoller

SLFY wrote:

Thanks for skinning guidance! Do you know if ranking-replay.png is still skinnable or has been renamed to something else? Mine has reverted to the default "Watch Replay" button while my "Retry" is still properly skinned.

Edit: It works when I put the image into a different skin and use it. I have a feeling something in my skin.ini is preventing it (?) but I can't seem to find anything relating to ranking screen at all in there.

Edit2: Turns out it works when I switch my skin version from 2.4. to 1. Unsure why the only thing that's affected is the ranking-replay.png though, since the ranking-retry worked in 2.4

rankin-retry recently got reenabled across all versions, for V2 skinning you need pause-replay for the replay button
remclean
I never found out how to use a spin metre but I found something else I like and will be using. Thanks for the help anyway RockRoller.
St1ck-
Idk if this reported, but skin testing beatmap has been deleted or smth, so the link on the site doesn't lead anywhere.
Topic Starter
RockRoller

St1ck- wrote:

Idk if this reported, but skin testing beatmap has been deleted or smth, so the link on the site doesn't lead anywhere.
well aware of that and planning to make my own soon
DzulNotFound
hi,i'm still new in skinning,my question is how to get sound effect for every button like play,setting,and quit,and quit sound (sry for rip english)
Topic Starter
RockRoller

DzulNotFound wrote:

hi,i'm still new in skinning,my question is how to get sound effect for every button like play,setting,and quit,and quit sound (sry for rip english)
You have to set them all. Here is a list containing all sound files:
https://docs.google.com/spreadsheets/d/1bhnV-CQRMy3Z0npQd9XSoTdkYxz0ew5e648S00qkJZ8/edit#gid=1820685604
Kaheru
Hi i’m new to osu and How can i replace the slider ball with circles?? Thanksss
remclean
I need help to (btw illpandaa I think you get a circle you want to replace it with (make sure it is the right size) and name it sliderb0 and put it in a folder and move the folder to Osu!'s skins folder and change to that skin in Osu!) I can't change the slider track and I named it sliderb-nd and looked at the spreadsheet you gave me earlier and I have no clue. Pls help.
Topic Starter
RockRoller

remclean wrote:

I can't change the slider track and I named it sliderb-nd and looked at the spreadsheet you gave me earlier and I have no clue.
slideb-nd and sliderb-spec are both files that don't really work.
To change the slidertrack you need the skin.ini command SliderTrackOverride:
Kaheru
i don't really get it maybe i need some knowledge in skinning but thankss!
remclean
2 things... 1. illpandaa I think you should try a skin someone has made like Yugen.( https://osuskins.net/skin/wEaMJGb ) 2. I do not know how to make a command in a skin. Pls help.
Topic Starter
RockRoller

remclean wrote:

I do not know how to make a command in a skin. Pls help.
You just type them in the skin.ini just put SliderTrackOverride: with the rgb value you want under [Colors]
remclean
It worked, Thank you again RockRoller. :) but I have a new question. I have my combo color set to black and my approach circle set to white but the approach circle is still black. Is it even possible? pls help.
JoshThePaladin
hi so i encountered a problem when i made my skin and i know i messed up pretty good somewhere but i dont know where. my issue is that i dont get combo numbers on my hit circles or sliders.
  1. ss/15641733/3997
BenTheBen
My skin doesn't have a "skin.imi" in the folder. Is there a way to modify the settings of the skin?
I attempted to download a clean skin.imi, however it ruined the scaling of most assets.

I'm looking to specifically resize the "columnwidth" for osu!mania 4k.
PinkMike
idk
Topic Starter
RockRoller

BenTheBen wrote:

My skin doesn't have a "skin.imi" in the folder. Is there a way to modify the settings of the skin?
I attempted to download a clean skin.imi, however it ruined the scaling of most assets.

I'm looking to specifically resize the "columnwidth" for osu!mania 4k.
You need to have a skin.ini file for that. Really shouldn't be too hard. Your thing probably got messed up because you changed the Version: in the skin.ini. A skin without a skin.ini uses Version: 2.5 I beleive, so if you make a skin.ini make sure to set that
Raddeon
does anyone know a skin with rem from re zero?
GreyXRM
How do I remove the hitting animations on the notes?
Topic Starter
RockRoller

GreyXRM wrote:

How do I remove the hitting animations on the notes?
What you are refering to should be either hit lighting, which can be turned of in the options, or you are looking for instant fading hitcircles, for which you can find a guide here: https://tutorial.skinship.xyz/guides/insta_fade_hc
McEndu
Just a question: Does renaming a PNG file (format, not file extension) to menu-background.jpg work?
Topic Starter
RockRoller

McEndu wrote:

Just a question: Does renaming a PNG file (format, not file extension) to menu-background.jpg work?
yes you can rename menu-background.png to .jpg to get the full quality. Works just fine iirc
remclean

JoshThePaladin wrote:

hi so i encountered a problem when i made my skin and i know i messed up pretty good somewhere but i dont know where. my issue is that i dont get combo numbers on my hit circles or sliders.
  1. ss/15641733/3997
Did you make the image that has the numbers on it to big? If it is to big, then osu! will stop rendering it. I did the same thing a few days ago.
rematyar
any tutorial on how to skin the spinner?
Topic Starter
RockRoller

Rematyar wrote:

any tutorial on how to skin the spinner?
Not yet. For now the best you can do is to look at the skinnable files spreadsheet and other skins to figure it out by yourself
remclean
I have an error, I just made the menu-button-background, and now the picture that more songs have don't show up... pls help.

And as I am asking one thing I will ask another, my scorebar-colour is not rendering as high as it should. I have it at the top of the picture, yet there is space between the top of the screen. Pls help.
Topic Starter
RockRoller

remclean wrote:

[...] and now the picture that more songs have don't show up... pls help.
I genuinly have no clue what you mean, can you like post an image that shows the problem?
remclean
Topic Starter
RockRoller
Ah, make sure to set Version: in the skin.ini to 2.5
This is Version:2.1 and below behaviour
remclean
Thanks, it worked. Now just to fix the image itself.

Now, for the second problem... have an idea?
Topic Starter
RockRoller
scorebar-color can never touch the borders of the screen, since its offset by a certain amount of pixels (12,12 with -marker and 5,16 with -ki)
Riae
How do I fix the skin default? I mean like when it's 1-9 it's normal but when it goes to 10+ the font mixes it's like penetrating to each other. also, how do I remove the skin border? the square border like in cookiezi's skin?
Phantonym

Riae wrote:

How do I fix the skin default? I mean like when it's 1-9 it's normal but when it goes to 10+ the font mixes it's like penetrating to each other. also, how do I remove the skin border? the square border like in cookiezi's skin?
Change the HitCircleOverlay value in skin.ini
izekok

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!!

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



can "section-pass" be animated?
Topic Starter
RockRoller

izekok wrote:

can "section-pass" be animated?
no
show more
Please sign in to reply.

New reply

/