forum

Skinning tutorial (+ skinning support)

posted
Total Posts
4,226
show more
Exw

Yuki-kun wrote:

Anyway, can someone go and ask peppy "when will you release template skin"? xD
this, really need it.
pixeldesu

Takamaru_17 wrote:

Yuki-kun wrote:

Anyway, can someone go and ask peppy "when will you release template skin"? xD
this, really need it.
Like peppy said, it will be released in the next few days. Hopefully...
Yuki-kun
For new mode fade-in in mania game mode

selection-mod-fadein

same size with another mod
zertap
what is the filename for the new spinner skin?
Topic Starter
MLGnom
spinner-top - highest layer.
spinner-middle - middle layer
spinner-middle2 - also middle layer but this is a circle a the centre of spinner
spinner-bottom - lowest layer of spinner

^ This is whole spinner.

spinner-glow - appears around spinner when you complete a spinner

Please wait these few days for skin template. Yeah I know many of you would like to start making/updating skins, but well... we can't do much about this. ^^;
zertap
Thanks a lot :)
Experimented a bit with the new followpoint. Rainbow was IppE's idea

This worked pretty well, but I liked this more:
Hatsune Chiyo

MLGnom wrote:

spinner-top - highest layer.
spinner-middle - middle layer
spinner-middle2 - also middle layer but this is a circle a the centre of spinner
spinner-bottom - lowest layer of spinner

^ This is whole spinner.

spinner-glow - appears around spinner when you complete a spinner

Please wait these few days for skin template. Yeah I know many of you would like to start making/updating skins, but well... we can't do much about this. ^^;
which part that turns to red? I see the edge of the new spinners including the spinner centre turns red.. I'm still didn't get it.. ._.
nevermind.. I just did some quick test and this is what I got..
this is what I set for the spinner (I didn't skin spinner-glow atm)
this is what I get:
  1. spinner-middle goes red as an indicator on how much time left did you have to spin, and it goes on the VERY TOP of the spinner.
  2. spinner-middle2, spinner-top and spinner-bottom spins as usual and does what it said.
  3. you can still use spinner-approachcircle, it does what it used to be.. ;)
Miyucheese

Takamaru_17 wrote:

Someone can tell me the size for mode selection button? I try 73x86 like mod select and another button beside it, it looks weird and doesn't fit.

...and meh it so hard for me if osu default skin template isn't available for now. ):
Mode selection button is 88x90
KingisNitro
Oh my gosh I have not been getting notifications from this...? There seems to be a lot to catch up on omg! Ah hell.
jarrisonfor
thanks for the tutorial, I just learned many things I did not know xD

till now I had done it without help, but with this I see that I have many faults xD

It will not be my thing as professional as having the tutorial. and my skin is ecchi, so I do not think I'll upload it, I want to win a ban xD

sorry for my bad English I'm Spanish and I'm using the google translator to escrbir

Greetings
[_YIz

Garygoh884 wrote:



Okay... is there another filename for the button to watch replay in the results screen?
it's called pause-replay.png.

don't ask me how can I watch replay while I pause 8-)

Ogion
Yuki-kun,

Do your particles blend additive?
Yuki-kun

Ogion wrote:

Yuki-kun,

Do your particles blend additive?
Actually, i used my cursortrail just to find where the part of skin appeared.
Wassaaaa
Don't know for when ppy will publish the new template? or someone has a compilation with new files used (name and size) or last, a skin that uses most of the new files?
I would be very grateful :)
Miyucheese

Wassaaaa wrote:

Don't know for when ppy will publish the new template? or someone has a compilation with new files used (name and size) or last, a skin that uses most of the new files?
I would be very grateful :)
-Link removed-

Here is everything. (Not mine) Everything in there is not skinnable.
chelly

Cookie Cloud wrote:

Wassaaaa wrote:

Don't know for when ppy will publish the new template? or someone has a compilation with new files used (name and size) or last, a skin that uses most of the new files?
I would be very grateful :)
-Link removed-

Here is everything. (Not mine) Everything in there is not skinnable.
You...how did you get this?! And what do you mean by "not skinnable"? :o
Topic Starter
MLGnom
Someone decompiled dll's, took practically every graphic sprite that exists in osu! and shared it, so some of them are not skinnable.

Please don't redistribute it publicly. Wait patiently for official template.
Yuki-kun
LoL, still waiting for the new file skin.ini, so curious about it. xD
RBRat3

Yuki-kun wrote:

LoL, still waiting for the new file skin.ini, so curious about it. xD
If memory serves me correctly it doesn't use one its just flat out defaulted... hence "default skin"
jemhuntr
what do you call the effect volume bg again?
Wassaaaa

JeMhUnTeR wrote:

what do you call the effect volume bg again?
volume-bg.png (38x232)
jemhuntr
i mean, the one for effect volume, not universal volume
Yuki-kun

JeMhUnTeR wrote:

i mean, the one for effect volume, not universal volume
What do you mean by effect volume @_@ ?
We only can change BG universal volume and the bar which is inside it. That's volume-bar.png
jemhuntr
oops nevermind I found it. volume-bg-effect.png. it's the volume for effects. hold alt while changing your volume.

Edit: also, I can't seem to change the bar. volume-bar.png doesn't work.
jemhuntr
oh btw, check this (the smaller mode images on top of selection-mode):
  1. mode-osu-small.png
  2. mode-taiko-small.png
  3. mode-fruits-small.png
  4. mode-mania-small.png
OsuMe65

JeMhUnTeR wrote:

oh btw, check this (the smaller mode images on top of selection-mode):
  1. mode-osu-small.png
  2. mode-taiko-small.png
  3. mode-fruits-small.png
  4. mode-mania-small.png
^ from Clementine's archive :V
Ayesha Altugle

JeMhUnTeR wrote:

oops nevermind I found it. volume-bg-effect.png. it's the volume for effects. hold alt while changing your volume.

Edit: also, I can't seem to change the bar. volume-bar.png doesn't work.
Asking some questions JeMhUnTeR, do you know the size of it? I think to be the same size as volume-bg.png (38x232)
EDIT:Did you mean volume for sound effects?
Rei Hakurei

JeMhUnTeR wrote:

oh btw, check this (the smaller mode images on top of selection-mode):
  1. mode-osu-small.png
  2. mode-taiko-small.png
  3. mode-fruits-small.png
  4. mode-mania-small.png
Not skinnable aren't they?
jemhuntr

vahn10 wrote:

Asking some questions JeMhUnTeR, do you know the size of it? I think to be the same size as volume-bg.png (38x232)
EDIT:Did you mean volume for sound effects?
yeah, same size.
i mean:
SPOILER
EFFECTS

UNIVERSAL

OsuMe65 wrote:

^ from Clementine's archive :V
I didn't know that.

Rei Hakurei wrote:

Not skinnable aren't they?
what do you mean? it IS skinnable.


are you sure about volume-bar? it's not working D:
Wassaaaa
There is a lot of things that are not skinnable YET, still waiting for ppy and the new template >_>
senofdark
is playfield.jpg useless now ?
jemhuntr
isn't that playfield.png?
Topic Starter
MLGnom
Well, playfield.png is still used in few old maps that doesn't have background.
jemhuntr
i tried renaming the bg of a map, and osu! displayed a black background instead of playfield.png (song selection)
Topic Starter
MLGnom
It only works when map doesn't have any bg from beginning. If you remove bg from map it won't work.

Example : http://osu.ppy.sh/s/2934
jemhuntr
ahhhh.... makes sense. haha
Ogion
Does anyone know how to change the mod icon on the background?
chelly

JeMhUnTeR wrote:

i tried renaming the bg of a map, and osu! displayed a black background instead of playfield.png (song selection)
You can try removing the BG and putting in playfield.png and rename it to BG.png. Not sure if this works but it's worth a try.
Topic Starter
MLGnom

Ogion wrote:

Does anyone know how to change the mod icon on the background?
Actually, you can change that, but I'm not sure if this will be available in new template skin.

Try to edit :
mode-fruits.png
mode-taiko.png
mode-osu.png
mode-mania.png

But don't complain if it's going to be disabled. We don't know what we can and what we can't add to our skin. ^^;
Ogion
MLGnom, it works! Thank you.
ArcadeSona
How about to new mods like Fade-in, Nightcore, and Perfect?
Yuki-kun

ArcadeSona wrote:

How about to new mods like Fade-in, Nightcore, and Perfect?
selection-mod-fadein.png
selection-mod-fadeout.png
selection-mod-nightcore.png
selection-mod-perfect.png
The fadein, fade out is new mode (or not, because i don't play mania) but the rest is old.
jemhuntr
what fadeout. there's no such mod as fadeout (afaik, that is)
Yuki-kun

JeMhUnTeR wrote:

what fadeout. there's no such mod as fadeout (afaik, that is)
Oops, i forgot. That's the old mod before update 3/28
Now it's hidden again LoL
Francis
How do you make translucent hitcircles?
Yuki-kun

Francis56789 wrote:

How do you make translucent hitcircles?
Reduce opacity of image in Photoshop or any image editor that support png with transparent.
Ayesha Altugle
aha! found 1 part of the skin used,

menu-osu.png

Description:
It can be seen by watching your failed replay until the end

Example in my skin


that's all I discovered
Yuki-kun
Anyone have idea about selection-mod-freemodallowed.png
Found it by accident while "hacking" to some resources xD
OsuMe65

Yuki-kun wrote:

Anyone have idea about selection-mod-freemodallowed.png
Found it by accident while "hacking" to some resources xD
wtf is that?
Yuki-kun

OsuMe65 wrote:

Yuki-kun wrote:

Anyone have idea about selection-mod-freemodallowed.png
Found it by accident while "hacking" to some resources xD
wtf is that?
nvm
I found its position~
Will post later xD
Yuki-kun
Ok this is what i got :3

Garygoh884
This extra mod icon also appears in the modifier playing list.


This icon was made originally to full transparency as it wasn't a mod. Also appears in multiplayer screens if other time-based mods are enabled.
Yuki-kun

Garygoh884 wrote:

This extra mod icon also appears in the modifier playing list.


This icon was made originally to full transparency as it wasn't a mod. Also appears in multiplayer screens if other time-based mods are enabled.
Yes, that's why we shouldn't turn it on after all. It's just a funny part when make screenshot for ranking score :P
Ayesha Altugle

Yuki-kun wrote:

Anyone have idea about selection-mod-freemodallowed.png
Found it by accident while "hacking" to some resources xD
Do you know what it's size?

Garygoh884 wrote:

This extra mod icon also appears in the modifier playing list.


This icon was made originally to full transparency as it wasn't a mod. Also appears in multiplayer screens if other time-based mods are enabled.
Yuki-kun

vahn10 wrote:

Yuki-kun wrote:

Anyone have idea about selection-mod-freemodallowed.png
Found it by accident while "hacking" to some resources xD
Do you know what it's size?
In my case, i used 552x362 (1366x768 res)
But please note that i used only for fun.
If you want to use, smaller will be better than, same size with mod icon (67x65...i guess)
Ayesha Altugle

Yuki-kun wrote:

In my case, i used 552x362 (1366x768 res)
But please note that i used only for fun.
If you want to use, smaller will be better than, same size with mod icon (67x65...i guess)
It covers mods you used when not reduced opacity like in my image
Jackyyy
I should be the same size as the mod icons as it appears as an extra mod but doesn't appear on nomod.


I made mine wider cause didn't like it overlapping with the mods cause I am just putting some random image there.
Yuki-kun

vahn10 wrote:

Yuki-kun wrote:

In my case, i used 552x362 (1366x768 res)
But please note that i used only for fun.
If you want to use, smaller will be better than, same size with mod icon (67x65...i guess)
It covers mods you used when not reduced opacity like in my image
I forgot to tell you that you need to use transparent image xD
Anw, this is mine.
Yuki-kun
OK
This really not good after all xD


Also, for anyone want to change the hitsound when press F12 (screenshot), try to add this file
shutter.wav
Ayesha Altugle

Yuki-kun wrote:

OK
This really not good after all xD


Also, for anyone want to change the hitsound when press F12 (screenshot), try to add this file
shutter.wav
thanks, first to test it

100% works

did you also try menu-osu.png?

If you have one you can post it

and I forgot the size

It must be 520x520 pixels
you can make it bigger or smaller depending you want
Yuki-kun
I tried but seem like it appear in that map only.
Can't see it anywhere in normal mode @@
Ayesha Altugle

Yuki-kun wrote:

I tried but seem like it appear in that map only.
Can't see it anywhere in normal mode @@
You can see it in watching your failed replay until the end
Yuki-kun

vahn10 wrote:

Yuki-kun wrote:

I tried but seem like it appear in that map only.
Can't see it anywhere in normal mode @@
You can see it in watching your failed replay until the end
Yes i know, when i tried in taiko mode in that map, it appeared, but when i try in standard mode, it's nothing @_@
Ayesha Altugle

Yuki-kun wrote:

I tried but seem like it appear in that map only.
Can't see it anywhere in normal mode @@
Yes i know, when i tried in taiko mode in that map, it appeared, but when i try in standard mode, it's nothing @_@[/quote]

It has to be
senofdark
Is there something like fruit-ryuuta when press shift ?
Topic Starter
MLGnom
Dash in CtB uses "fruit-ryuuta.png". If you made animated catcher, you need to add base sprite of your character.

fruit-ryuuta.png - will be used as dash (might need some positioning if you want to make it correctly with animation.
fruit-ryuuta-0.png
fruit-ryuuta-1.png
fruit-ryuuta-2.png
fruit-ryuuta-3.png
etc... are animations of your character. This is the only one exception where animation overrides base sprite.
ArcadeSona
One more. Is there a possible way to change the font for a skin?
Topic Starter
MLGnom
What do you mean by "change font of the skin"? Font of what? Score numbers, texts, etc. or the font that osu! uses almost everywhere?
ArcadeSona

MLGnom wrote:

What do you mean by "change font of the skin"? Font of what? Score numbers, texts, etc. or the font that osu! uses almost everywhere?

Every font that osu! uses please.
Topic Starter
MLGnom

ArcadeSona wrote:

MLGnom wrote:

What do you mean by "change font of the skin"? Font of what? Score numbers, texts, etc. or the font that osu! uses almost everywhere?
Every font that osu! uses please.
So that way, you can't change it. And I'm pretty sure you won't be able to change it in future.
OsuMe65

ArcadeSona wrote:

One more. Is there a possible way to change the font for a skin?
osu! uses the font "Verdana" which is one of Windows' System Fonts (if i'm correct)

It is non-skinnable and definitely no one can change it.
Rei Hakurei

OsuMe65 wrote:

ArcadeSona wrote:

One more. Is there a possible way to change the font for a skin?
osu! uses the font "Verdana" which is one of Windows' System Fonts (if i'm correct)

It is non-skinnable and definitely no one can change it.
peppy said Tahoma *iirc*
TheAussie
loool
OsuMe65

Rei Hakurei wrote:

peppy said Tahoma *iirc*
ah yes...
i forgot about that already
primrose
Can someone make a list and what it does to new skinnable elements?
Rei Hakurei

Awoken- wrote:

Can someone make a list and what it does to new skinnable elements?
download the template? and check what people keep talking on this thread?
TheAussie

Rei Hakurei wrote:

Awoken- wrote:

Can someone make a list and what it does to new skinnable elements?
download the template? and check what people keep talking on this thread?

there isnt a template yet for new skin.
jemhuntr
someone on #osu changed the ui font before. (well I have no idea if that's still possible on the new build but meh)
i forgot who he was, though.

I really hope peppy is already working on improving the taiko and mania interfaces though... oh well *back to enjoying my time drawing vividred operation*
Immaterial_old
Hey!!

Update the template plz

thx
Yuki-kun

Immaterial wrote:

Hey!!

Update the template plz

thx
You should pm peppy instead of posting here :P
Immaterial_old
seriously? I thought it was difficult to contact. I'll do it anyway. thx
Bittersweet
You should wait and keep on eye on the foruns, he said he will release it, so he will. No need to pm him for that :P
Immaterial_old
-_- I have not all the time in the world, I will have to check the total program
jarrisonfor
take long to publish the new skin? say how long it will take to publish about

I have a question, the new skin accepts funds in 1920x1080 resolution and resized according to the user's screen?

sorry for my bad English I'm Spanish and I'm using google translator to write
Topic Starter
MLGnom

jarrisonfor wrote:

take long to publish the new skin? say how long it will take to publish about

I have a question, the new skin accepts funds in 1920x1080 resolution and resized according to the user's screen?

sorry for my bad English I'm Spanish and I'm using google translator to write
Well, that's depends on person who is making skin. (his/her photoediting skills, ideas, free time, what is actually skinned etc.). If person really want to release skin it can take few days - up to week.

Yes it is, as long as it's created for HD resolution (resolution with height larger than 1000px or forced in osu! config file). Every skin file that is supposed to be HD should have "@2x" in the end. For example :
pause-overlay@2x.png
jarrisonfor

MLGnom wrote:

jarrisonfor wrote:

take long to publish the new skin? say how long it will take to publish about

I have a question, the new skin accepts funds in 1920x1080 resolution and resized according to the user's screen?

sorry for my bad English I'm Spanish and I'm using google translator to write
Well, that's depends on person who is making skin. (his/her photoediting skills, ideas, free time, what is actually skinned etc.). If person really want to release skin it can take few days - up to week.

Yes it is, as long as it's created for HD resolution (resolution with height larger than 1000px or forced in osu! config file). Every skin file that is supposed to be HD should have "@2x" in the end. For example :
pause-overlay@2x.png

thanks for the reply, but sorry I have a problem with that you said about @ x2

is that it does not work I put an image and adapt to 1920x1080 resolution I put the name to be next to @ x2 and does not work, put a transparent black screen

supposedly this although I have a lower resolution screen (mine is 1366x768) image would have to adapt to my resolution even though the picture is 1920x1080 right?

What I want is to make a skin that can be used on any screen and images are made full screen
Topic Starter
MLGnom
If you are using 1366x768 you (or anyone else) will need to force this option to work. (resolution height is lower than 1000px)

Find in main osu! folder, file named "osu!.<username>.cfg" and open it with notepad.
Then you need to find this line :
HighResolution = 0

And change 0 to 1.

If you want to make skin for every resolution just make 2 backgrounds : Normal and HD (this is even recommended for everyone if someone is making HD skin)

Also, remember that @x2 MUST be 2x size of normal sprite since it will be way to small.

Example :
"pause-overlay.png" - is normal pause screen. Size : 1366x768px
"pause-overlay@x2.png" - will be replaced if person is using resolution with height above 1000px or forced it (this thing above). Size : 2732x1536px
AussieEvil
I really need the metrics for the ranking screen elements!
Topic Starter
MLGnom
About which elements do you need to know?
AussieEvil
Preferred size of "Perfect," how to align the score graph and position of accuracy/combo numbers
senofdark
is it possible to screenshot in the game and crop out the default skin ? lol
kona x taros

AussieEvil wrote:

Preferred size of "Perfect," how to align the score graph and position of accuracy/combo numbers
For reference...
but it doesn't work in the new skin style




btw, We need to skinning for new skin style?
Topic Starter
MLGnom

AussieEvil wrote:

Preferred size of "Perfect," how to align the score graph and position of accuracy/combo numbers
I will tell you a little more about this tomorrow. :3

senofdark wrote:

is it possible to screenshot in the game and crop out the default skin ? lol
If you really want, sure it's possible. You can get most of the elements that way.

senofdark wrote:

btw, We need to skinning for new skin style?
No, actually you can decide with which style you want to make a skin (but stil,l older skins might need some fixing).



I'm slowly testing things and maybe I will be able to make another update soon.
jemhuntr
I have two questions:
1. what are all the animate-able elements again...??
2. how do I name @2X animated elements? should it be <name>-0@2x.png or <name>@2x-0.png??
Topic Starter
MLGnom

JeMhUnTeR wrote:

I have two questions:
1. what are all the animate-able elements again...??
2. how do I name @2X animated elements? should it be <name>-0@2x.png or <name>@2x-0.png??
You can also create animation of several skin parts, with are :
- followpoint
- fruit-ryuuta
- menu-back
- play-skip
- scorebar-colour
- sliderfollowcircle
- taiko mascot
- taikocircleoverlay
- taikobigcircleoverlay
- hitbursts (300,100,50,miss etc.)
- hitcircleoverlay
- sliderball
And there is few in osu!mania like LightingL, hitbursts etc. but I don't remember them all (and maybe I missed something ^^; ).

2. After counting of animation, before .png extension.

"play-skip-0@2x.png"
"play-skip-1@2x.png"
"play-skip-2@2x.png"
"play-skip-3@2x.png"...
jemhuntr
animating the osu!mania hitbursts isn't good. only 3 or 4 frames will be appear since the next notes will most probably replace it. hmm.... thanks.

edit: use 12 frames
Ayesha Altugle
using kona x taros' template of ranking-perfect.png and ranking-graph.png , I've done It well and It turned nice thou I attempt many times

primrose
Thanks MLGnom for the HighResolution trick, I'm going to try it.
Also is there any new elements? :o
Topic Starter
MLGnom
There is few "new" elements, some has been changed, some have changed position a little. Everyone is still waiting for new template.
OsuMe65

MLGnom wrote:

There is few "new" elements, some has been changed, some have changed position a little. Everyone is still waiting for new template.
some might be/ are removed
show more
Please sign in to reply.

New reply