forum

Skinning tutorial (+ skinning support)

posted
Total Posts
4,226
show more
WASSHOI
It isn't possible to change the colors of song select tabs?
Topic Starter
MLGnom
Which one tabs?
ziin

pyransc wrote:

How can i change SliderBallFlip in beatmap skin??
Put it in skin.ini and call the skin. Every time someone puts a skin in a beatmap, I feel like they just gave me the middle finger.

WASSHOI wrote:

It isn't possible to change the colors of song select tabs?
You can only change the text colour. Menu-button-background.png is coloured into white, blue, red, pink, or orange via reducing the RGB channels. Red, for example, is achieved by removing the blue and green channels. You can use this to make different colours, but many colours are just not possible.
WASSHOI

MLGnom wrote:

Which one tabs?
menu-button-background.png, the colors that are used for unselected tracks, unopened folders, unplayed songs, etc.


ziin wrote:

WASSHOI wrote:

It isn't possible to change the colors of song select tabs?
You can only change the text colour. Menu-button-background.png is coloured into white, blue, red, pink, or orange via reducing the RGB channels. Red, for example, is achieved by removing the blue and green channels. You can use this to make different colours, but many colours are just not possible.

Thanks, I was afraid of that. Has Peppy ever said he was against that part of osu! being skinnable? I'd image a lot of people would rather use their own color values, especially if they have a skin themed around a set of colors already.
OsuMe65

WASSHOI wrote:

Thanks, I was afraid of that. Has Peppy ever said he was against that part of osu! being skinnable? I'd image a lot of people would rather use their own color values, especially if they have a skin themed around a set of colors already.
Yes...
[title.png]

this title.png is a forbidden part in a skin...
you need to put it in the "Data" folder of osu! (replacing the 1x1 title.png) in order to work...

[and peppy doesn't allow any skinner to do that (even most skinners disobey this)]
Topic Starter
MLGnom

OsuMe65 wrote:

Yes...
[title.png]

this title.png is a forbidden part in a skin...
you need to put it in the "Data" folder of osu! (replacing the 1x1 title.png) in order to work...

[and peppy doesn't allow any skinner to do that (even most skinners disobey this)]
The hell you are talking about? He asked about menu-button-background colours not about title.png. Read again his post.

WASSHOI wrote:

Thanks, I was afraid of that. Has Peppy ever said he was against that part of osu! being skinnable? I'd image a lot of people would rather use their own color values, especially if they have a skin themed around a set of colors already.
I think there was a topic about this, but I don't remember if peppy was against about changing these colours. But I think he wouldn't like to change them. Yeah I know it doesn't help anyway...
OsuMe65

MLGnom wrote:

The hell you are talking about? He asked about menu-button-background colours not about title.png. Read again his post.
i forgot...
but i know that it's forbidden
and i'm still 13... give much patience plz...
-_-

--------------------------------------------------------------------------------------------------------------------------

as for the colours... no news... -_-
waiting for a new one
:|
rikku_hanamura
Nice..
i wanna test this
Hakito
Doesn't seem like anyone knows of this one: options-background.png


The image I used is 1100x780, and I can't be bothered to find the exact size...
Topic Starter
MLGnom

Hakito wrote:

Doesn't seem like anyone knows of this one: options-background.png


The image I used is 1100x780, and I can't be bothered to find the exact size...
Hah. I will check and test for size later. Thanks for information.
OsuMe65

Hakito wrote:

Doesn't seem like anyone knows of this one: options-background.png


The image I used is 1100x780, and I can't be bothered to find the exact size...
it's legit

thanks for the information
:)
OsuMe65
i created some ranking-winner and spinner-rpm that looks like the default ones... (but not look exactly as the default ones)

http://puu.sh/MDVv

Don-Tan
nice theard :) but does anyone know how the slider-like things between the fruits in catch the beat are called :?: (filename) i can't find it :?
OsuMe65

xXDoNiXx wrote:

nice theard :) but does anyone know how the slider-like things between the fruits in catch the beat are called :?: (filename) i can't find it :?
well... if you mean the droplets between the fruits, it is called fruit-drop.png. it comes along with fruit-drop-overlay.png (if i'm correct...) for a stylish look...


but if you mean something else, then i don't know...
Don-Tan
yeah thx that was what i meant XD
WASSHOI

Hakito wrote:

Doesn't seem like anyone knows of this one: options-background.png


The image I used is 1100x780, and I can't be bothered to find the exact size...
Mind posting the exact image you used?
Don-Tan
i tested it and for me it fits perfectly in 1024x768

here is the prove :<
WASSHOI

xXDoNiXx wrote:

i tested it and for me it fits perfectly in 1024x768

here is the prove :<
What point in the image do you cut off the top so the image won't overlap the black bar on top?
Don-Tan
you have to include the black bar on the top cause if you don't add the black bar osu goes LSD XD

options-background.png example without the black bar on the top:

i hope this could answer your question :)
OsuMe65

xXDoNiXx wrote:

you have to include the black bar on the top cause if you don't add the black bar osu goes LSD XD

options-background.png example without the black bar on the top:

i hope this could answer your question :)
you can exclude the black bar if you take the risk of this "LSD"
if not, then use a black bar
:)
WASSHOI

xXDoNiXx wrote:

you have to include the black bar on the top cause if you don't add the black bar osu goes LSD XD

options-background.png example without the black bar on the top:

i hope this could answer your question :)
Is the black bar a separate skin element? Or is there a point in your background image where you need to manually cut off and make your own bar?
Hakito

WASSHOI wrote:

xXDoNiXx wrote:

*Space Saver*
Is the black bar a separate skin element? Or is there a point in your background image where you need to manually cut off and make your own bar?
... No... The bar is part of options-background.png, and it should be around 85 pixels high.
Topic Starter
MLGnom
Ehh... I was hoping for someone to explain this instead of me... but I see I must do this.
So let's begin.

1. So "options-background.png" doesn't have constant size like spinner-background or anything else in gameplay. What I mean? That you must remember about people that use different aspect ratio : 16:9, 4:3, 16:10 etc.
So if you are going to add it to skin and release, remember to add different sizes of this for different people.

2. Simple example how it's look for me as I'm using 4:3 (1280x960).

3. "But the tabs looks bad!" - Don't worry, these tabs are 83px lower than top of the picture.


4. So let me show you quick example how could it look if you want edit it.


So basically you should use size 1024x768 or 1024x600 but this is up to you.

Don't make it transparent because things will mess up!
OsuMe65

MLGnom wrote:

Ehh... I was hoping for someone to explain this instead of me... but I see I must do this.
So let's begin.

1. So "options-background.png" doesn't have constant size like spinner-background or anything else in gameplay. What I mean? That you must remember about people that use different aspect ratio : 16:9, 4:3, 16:10 etc.
So if you are going to add it to skin and release, remember to add different sizes of this for different people.

2. Simple example how it's look for me as I'm using 4:3 (1280x960).

3. "But the tabs looks bad!" - Don't worry, these tabs are 83px lower than top of the picture.


4. So let me show you quick example how could it look if you want edit it.


So basically you should use size 1024x768 or 1024x600 but this is up to you.

Don't make it transparent because things will mess up!
any size is legit enough for a basic design... even it is 16:9, 4:3, 16:10 blah, blah, blah... (i used a 1366x768 options-background)




but for images, one size is no good

------------------------------------------------------------------------------------------------

EDIT: thank you, MLGnom for a wonderful explanation... :)
Dark_Ai
How can I use options-background btw ??
Topic Starter
MLGnom

Dark_Ai wrote:

How can I use options-background btw ??
Create new image file in size that you use, save it as options-background.png and add it to your skin.

OsuMe65 wrote:

...
Have you tested it on something different that your pattern? Because you won't see the problem with simple pattern.
I need to waste time to explain you this geez...
Yes I know it's work for basic patterns. But people need to know if they are going to use for example a picture...


Dark_Ai
yehah!
Thank you :3 But it look like a bit weird. wrong size damn ;w;

look a bit strange :(

Topic Starter
MLGnom
That's what I was talking about. Better to use same size as your osu! resolution. Try doings 1024x600.
Dark_Ai
that what happen =w=
Topic Starter
MLGnom
oh geez... Can you send me a picture? I will see what can I do. :3c
Dark_Ai
yeah sure :3

http://puu.sh/NTKR
Topic Starter
MLGnom
Oh geez... It's looks like that options-background can only have constant 1024x768 size... If you do larger (or wider for widescreen) it will always take 1024x768 of the picture and resize it. So it won't work well on widescreen.
Dark_Ai
okay :(
OsuMe65

MLGnom wrote:

Have you tested it on something different that your pattern? Because you won't see the problem with simple pattern.
I need to waste time to explain you this geez...
Yes I know it's work for basic patterns. But people need to know if they are going to use for example a picture...


for a fixed image (like anime), it's not really legit to have a single sized image...
:(
i'll just keep it simple...
:(
--------------------------------------------------------------------------------------

yeah and i tested it before leaving home...
:D
too bad it's not legit... that image is ruined... :cry:
KingisNitro
On a somewhat off-topic from options-background (thanks A LOT for the info though!), do you think positioning the ranking like this looks weird? ->
I personally think it looks neat but other people's opinion are always great! :D


edit: Oh well regarding the options-background, what is recommended size/how can we add more than one in? :?
edit2: Oh actually nevermind about the recommended size or whatever at options-background. Taking a picture you want, resising it to 1024x600 and then stretching to 1024x768 works wonderfully for me. That's probably the best actual way how to do it. However again this way will only work for people who play on 1024x600 (that would be widescreen if I am correct).
Dark_Ai

KingisNitro wrote:

edit2: Oh actually nevermind about the recommended size or whatever at options-background. Taking a picture you want, resising it to 1024x600 and then stretching to 1024x768 works wonderfully for me. That's probably the best actual way how to do it. However again this way will only work for people who play on 1024x600 (that would be widescreen if I am correct).
Yeah.. I tried that and it's work fine now for me now :D
Don-Tan

KingisNitro wrote:

On a somewhat off-topic from options-background (thanks A LOT for the info though!), do you think positioning the ranking like this looks weird? ->
I personally think it looks neat but other people's opinion are always great! :D


edit: Oh well regarding the options-background, what is recommended size/how can we add more than one in? :?
edit2: Oh actually nevermind about the recommended size or whatever at options-background. Taking a picture you want, resising it to 1024x600 and then stretching to 1024x768 works wonderfully for me. That's probably the best actual way how to do it. However again this way will only work for people who play on 1024x600 (that would be widescreen if I am correct).
i'm playing on 1920x1080 and 1024x768 works perfectly for me too. 8-)
KingisNitro

xXDoNiXx wrote:

KingisNitro wrote:

edit2: Oh actually nevermind about the recommended size or whatever at options-background. Taking a picture you want, resising it to 1024x600 and then stretching to 1024x768 works wonderfully for me. That's probably the best actual way how to do it. However again this way will only work for people who play on 1024x600 (that would be widescreen if I am correct).
i'm playing on 1920x1080 and 1024x768 works perfectly for me too. 8-)
Oh great! C: I wonder what other sizes do other screen resolutions use.

On a side-off-topic note yet again because I see it didn't work out the first time, do you think positioning rankings like this is okay? Could anyone provide me a screeshot with different screen resolution (I use 1024x600) if I provide the theme?
(I am doing v1.1 for my skin, yay)

edit: Oh by the way what is the file "blk.jpg" for?
Topic Starter
MLGnom
I did few already but forgot to write about how to do option-background correctly. ^^;

Aspect ratios :
For 4:3 you simply do picture of resolution 1024x768.
For 16:10 you need to do picture of size 1229x768. Next resize it to 1024x768. Yes, it will be narrowed but after adding to skin osu! will resize it to proper look.
For 16:9 same thing as above but the size of picture need to be 1366×768. And the same, resize it to 1024x768.

KingisNitro wrote:

On a side-off-topic note yet again because I see it didn't work out the first time, do you think positioning rankings like this is okay? Could anyone provide me a screeshot with different screen resolution (I use 1024x600) if I provide the theme?
No need, it will look the same on every resolution because osu! is adding black bars on sides for widescreen resolutions.
KingisNitro

MLGnom wrote:

I did few already but forgot to write about how to do option-background correctly. ^^;

Aspect ratios :
For 4:3 you simply do picture of resolution 1024x768.
For 16:10 you need to do picture of size 1229x768. Next resize it to 1024x768. Yes, it will be narrowed but after adding to skin osu! will resize it to proper look.
For 16:9 same thing as above but the size of picture need to be 1366×768. And the same, resize it to 1024x768.

KingisNitro wrote:

On a side-off-topic note yet again because I see it didn't work out the first time, do you think positioning rankings like this is okay? Could anyone provide me a screeshot with different screen resolution (I use 1024x600) if I provide the theme?
No need, it will look the same on every resolution because osu! is adding black bars on sides for widescreen resolutions.
Thanks for info!
As for the second part, I noticed the bars, but wasn't sure if it works the same way everywhere else. This means if I make something fit for my own theme, it will autmatically fit in the same ratio everywhere, though scaled, correct? If so, that's wonderful! I really love osu!. uwu
show more
Please sign in to reply.

New reply