Skinning tutorial (+ skinning support)

posted
Total Posts
4,186
show more
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-)
show more
Please sign in to reply.

New reply