forum

Skinning tutorial (+ skinning support)

posted
Total Posts
4,226
show more
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
Garygoh884
Skinned the Perfect mod. You'll need this with the file format: selection-mod-perfect.png.

SS or quit
OsuMe65

Garygoh884 wrote:

Skinned the Perfect mod. You'll need this with the file format: selection-mod-perfect.png.

SS or quit
thanks for the information...
:)
KingisNitro

Garygoh884 wrote:

Skinned the Perfect mod. You'll need this with the file format: selection-mod-perfect.png.

SS or quit
I was wondering if there is something like this. Thanks! uwu

edit: Oooh I love how it ends the game, it's not all scary like Sudden Death~
Rei Hakurei

Garygoh884 wrote:

Skinned the Perfect mod. You'll need this with the file format: selection-mod-perfect.png.

SS or quit
is the original file of the selection-mod-perfect is ready? i hope it was included in the current template..
Topic Starter
MLGnom
Actually I'm not able to get it and update template. (and add few more things).
Will try to do it today evening or tomorrow.
KingisNitro
(I am sorry for making so many posts D: I wanted to edit the last but suddenly other comments.)

I have another question, how did I happen to change the ranking panels (shown on the right) to the ranking panels on the left?
My theme was made by putting in the template, one skin I downloaded and a skin for one song, and then I changed all of the files, all of them... I checked all those and I didn't find this anywhere??
Also I downloaded more themes and they had it like in the picture (the left part) aaaand they didn't have a file for that or anything? Also I checked skin.ini but didn't find anything like that in there.
Please?
Topic Starter
MLGnom
It's menu-button-background. It is used in few places. In options as button to select skin, in song select menu (main thing), ranking (the one you are showing), on ranking screen (aka confirming button).

Simply you did it longer than default one, that's why it's longer there. If you would like to have different look (for example picture), you need to edit right part of menu-button-background.
Topic Starter
MLGnom
Update :

Reuploaded template because added :
- selection-mod-perfect
- ranking-winner
- spinner-rpm

Also added info about options-background (yes the same that I wrote few posts back).
Hope that I haven't miss something.
Malinen
Thanks, MLGnom :3
Garygoh884
I have discovered a new skin part. It's called special-background.png. Cannot be scaled but requires a large image size for widescreen.


Also, I have discovered special-taiko.png, but there is one more to make for CtB.
show more
Please sign in to reply.

New reply