okay 
forum
Skinning tutorial (+ skinning support)
posted
Total Posts
4,226
for a fixed image (like anime), it's not really legit to have a single sized image...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...
i'll just keep it simple...
--------------------------------------------------------------------------------------
yeah and i tested it before leaving home...
too bad it's not legit... that image is ruined...
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!
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 personally think it looks neat but other people's opinion are always great!
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).
Yeah.. I tried that and it's work fine now for me nowKingisNitro 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.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!
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).
Oh great! C: I wonder what other sizes do other screen resolutions use.xXDoNiXx wrote:
i'm playing on 1920x1080 and 1024x768 works perfectly for me too.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).
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
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.
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.
No need, it will look the same on every resolution because osu! is adding black bars on sides for widescreen resolutions.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?
Thanks for info!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.No need, it will look the same on every resolution because osu! is adding black bars on sides for widescreen resolutions.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?
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
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! uwuGarygoh884 wrote:
Skinned the Perfect mod. You'll need this with the file format: selection-mod-perfect.png.SS or quit
edit: Oooh I love how it ends the game, it's not all scary like Sudden Death~
is the original file of the selection-mod-perfect is ready? i hope it was included in the current template..Garygoh884 wrote:
Skinned the Perfect mod. You'll need this with the file format: selection-mod-perfect.png.SS or quit
Topic Starter
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.
Will try to do it today evening or tomorrow.
(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?
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
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.
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
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.
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.
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.
Also, I have discovered special-taiko.png, but there is one more to make for CtB.
seems legit but what is the dimensions for this special-taiko.png and the other one [CTB]?Garygoh884 wrote:
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.
The dimensions are 1024 by 768 pixels for the background, but its width should be extended for widescreen players.
The two game mode choices have the same dimensions, each holding 639 by 265 pixels.
I tried the special-catchthebeat but it's wrong... Any others?
The two game mode choices have the same dimensions, each holding 639 by 265 pixels.
I tried the special-catchthebeat but it's wrong... Any others?
What about just special-ctb or special-fruit?Garygoh884 wrote:
The dimensions are 1024 by 768 pixels for the background, but its width should be extended for widescreen players.
The two game mode choices have the same dimensions, each holding 639 by 265 pixels.
I tried the special-catchthebeat but it's wrong... Any others?
And for widescreen players, how does it works? If I put a widescreen pictures to the theme and a non-widescreen player would use it, middle is picked, or what happens?
(I should tr ythis yself yeah)
Only one background is used for that and has left and top alignments from the top-left of the screen.
Topic Starter
I will test them and provide any information about sizes and restrictions. Just give me a little time.
So what we have already:
Special-background - Minimal size that picture must have is 1024x768, avoid transparency. There is no restrictions in larger size. So if you are using widescreen use widescreen resolution. (BUT If you are using for example 1024x600 do it in lager size 1280x800). Also remember about lights that are moving in the background.
Special-taiko and Special-fruits - Base resolution is 640x265 both aren't restricted by size, you can make them small or big.Click-able area is size of picture.
So what we have already:
Special-background - Minimal size that picture must have is 1024x768, avoid transparency. There is no restrictions in larger size. So if you are using widescreen use widescreen resolution. (BUT If you are using for example 1024x600 do it in lager size 1280x800). Also remember about lights that are moving in the background.
Special-taiko and Special-fruits - Base resolution is 640x265 both aren't restricted by size, you can make them small or big.Click-able area is size of picture.
I am new to the whole skinning thing and i have a few questions. I use( or atleast am trying to use) photoshop. when ever i make a comboburst it has a white background, how do i get rid of it? also could someone guide me a bit more on how to make the countdown.
It's seems you save the comboburst as .jpg. save it as .png to have transparency...tennrox wrote:
I am new to the whole skinning thing and i have a few questions. I use( or atleast am trying to use) photoshop. when ever i make a comboburst it has a white background, how do i get rid of it? also could someone guide me a bit more on how to make the countdown.
nope the file is png. maybe im doing something else wrong. can someone help meGeryon wrote:
It's seems you save the comboburst as .jpg. save it as .png to have transparency...tennrox wrote:
I am new to the whole skinning thing and i have a few questions. I use( or atleast am trying to use) photoshop. when ever i make a comboburst it has a white background, how do i get rid of it? also could someone guide me a bit more on how to make the countdown.
Have you cleaned the background (delete the white part) ?tennrox wrote:
nope the file is png. maybe im doing something else wrong. can someone help me
Transparent background should look like this:
oh.......you can do that XD ok ill try itGeryon wrote:
Have you cleaned the background (delete the white part) ?tennrox wrote:
nope the file is png. maybe im doing something else wrong. can someone help me
Transparent background should look like this:
THANK YOU IT WORKED! now if only i could figure out count down. it seems so confusing
to make countdown, you need to make 3 images:tennrox wrote:
oh.......you can do that XD ok ill try it
THANK YOU IT WORKED! now if only i could figure out count down. it seems so confusing
count-3 (left)
count-2 (right) and count-1 (center)
for count 3 & 2 use 388x767 and count 1 use 528x767 (according to templateskin lol)
you will need to make this shape for count 3 & 2 (simply create 1 and mirror it
)and this for count 1
I'm including my blank countdown template incase you want to use it (simply put images there lol)
http://puu.sh/Xoet
Hope it's helpful :v
IT WORKED! THANK YOU SO MUCH!Geryon wrote:
to make countdown, you need to make 3 images:tennrox wrote:
oh.......you can do that XD ok ill try it
THANK YOU IT WORKED! now if only i could figure out count down. it seems so confusing
count-3 (left)
count-2 (right) and count-1 (center)
for count 3 & 2 use 388x767 and count 1 use 528x767 (according to templateskin lol)
you will need to make this shape for count 3 & 2 (simply create 1 and mirror it
and this for count 1
I'm including my blank countdown template incase you want to use it (simply put images there lol)
http://puu.sh/Xoet
Hope it's helpful :v
i make improvements or corrections :3
Update OP with that?peppy wrote:
I have added animation support to hit sprites. Note that they will still gain the internal animation from osu! (explod-y thing)
Topic Starter
Come on! Peppy added that few minutes ago. Give me some time. XD
Yeah, just informing you because it could easily be missed ;P
Topic Starter
Yay for 24h supporter! I was able to test backgrounds for osu!direct and main menu. ^^;
So, since last public release we are able to :
1. Make Hitbursts animated! (300,100,50, miss)
You can animate it in similar way like others files, example.
hit300-0.png , hit300-1.png , hit300-2.png etc.
Note 2 things :
- Animation is pretty fast so for slow down you will need duplicate frames.
- skin.ini "AnimationFramerate" doesn't affect hitbursts.
2. Changing background for multiplayer lobby, match-room and osu! direct search :
Names :
lobby-background.png - background for lobby window. Acts in same way like fail/pause backgrounds. Size : 1024x768
matchsetup-background.png - background for multiplayer room. Acts in same way like fail/pause backgrounds. Size : 1024x768
search-background.png - background for osu!direct. Width should be correct with your aspect ratio. Height must be 768px for correct resize.
3. We are already able to set our own menu background!
Name : menu-background.jpg - Size for it should be your aspect-ratio resolution.
Menu-background is only available for osu! supporters.
"Why it must be in jpg?" - Because peppy say so! ^^;
I think that's all for today.
So, since last public release we are able to :
1. Make Hitbursts animated! (300,100,50, miss)
You can animate it in similar way like others files, example.
hit300-0.png , hit300-1.png , hit300-2.png etc.
Note 2 things :
- Animation is pretty fast so for slow down you will need duplicate frames.
- skin.ini "AnimationFramerate" doesn't affect hitbursts.
2. Changing background for multiplayer lobby, match-room and osu! direct search :
Names :
lobby-background.png - background for lobby window. Acts in same way like fail/pause backgrounds. Size : 1024x768
matchsetup-background.png - background for multiplayer room. Acts in same way like fail/pause backgrounds. Size : 1024x768
search-background.png - background for osu!direct. Width should be correct with your aspect ratio. Height must be 768px for correct resize.
3. We are already able to set our own menu background!
Name : menu-background.jpg - Size for it should be your aspect-ratio resolution.
Menu-background is only available for osu! supporters.
"Why it must be in jpg?" - Because peppy say so! ^^;
I think that's all for today.
+When I set up osu direct bg the search window disappearded lolMLGnom wrote:
Yay for 24h supporter! I was able to test backgrounds for osu!direct and main menu. ^^;
So, since last public release we are able to :
1. Make Hitbursts animated! (300,100,50, miss)
You can animate it in similar way like others files, example.
hit300-0.png , hit300-1.png , hit300-2.png etc.
Note 2 things :
- Animation is pretty fast so for slow down you will need duplicate frames.
- skin.ini "AnimationFramerate" doesn't affect hitbursts.
2. Changing background for multiplayer lobby, match-room and osu! direct search :
Names :
lobby-background.png - background for lobby window. Acts in same way like fail/pause backgrounds. Size : 1024x768
matchsetup-background.png - background for multiplayer room. Acts in same way like fail/pause backgrounds. Size : 1024x768
search-background.png - background for osu!direct. Width should be correct with your aspect ratio. Height must be 768px for correct resize.
3. We are already able to set our own menu background!
Name : menu-background.jpg - Size for it should be your aspect-ratio resolution.
Menu-background is only available for osu! supporters.
"Why it must be in jpg?" - Because peppy say so! ^^;
I think that's all for today.
anyway, thanks MLGnom
Here I have so far:
Firstly I take three screenshots before skinning. Then I template the backgrounds with my image editor.
Here is the image template for the osu!direct if the free acces is over:
Firstly I take three screenshots before skinning. Then I template the backgrounds with my image editor.
Here is the image template for the osu!direct if the free acces is over:
Topic Starter
Ah I see the problem. Typing field is part of default background, so you will need to add something similar on your background to show where it is. ^^;
Will try to do some kind of template for search-background to make it a little easier.
Same for lobby background, using bright pictures will make it unreadable. Also will try to do something about that.
Hah even "player" numbers in matchsetup-background are part of default background.
Okay, give me some time and I will prepare something.
Will try to do some kind of template for search-background to make it a little easier.
Same for lobby background, using bright pictures will make it unreadable. Also will try to do something about that.
Hah even "player" numbers in matchsetup-background are part of default background.
Okay, give me some time and I will prepare something.