forum

Skinning tutorial (+ skinning support)

posted
Total Posts
4,226
show more
Topic Starter
MLGnom
Okay!
Since a lot of people already wrote this, I think I should do this too.

"Please, avoid skinning test build eleme..." Nope.

Come on guys. Once should be more than enough. You don't need to repeat it over and over. His question was answered, I sent him PM with explanation to avoid spreading it...
AussieEvil
Is anyone going to answer my png sequence question?
Heibel

AussieEvil wrote:

Is anyone going to answer my png sequence question?

OsuMe65 wrote:

Photoshop + logical powers
...
profit
He did
Elanif
Hi, recently I found a hitsound I particularly enjoy, and I wanted to hear it on every click, so I introduced it in my skin folder (not skins) as normal-hitclap.wav, normal-hitnormal.wav, soft-hitclap.wav, soft-hitnormal.wav, but sometimes I can hear it sometimes I can't, probably I don't know what name the sound should have, can anyone help me?
kaminari69
you need to have

normal-hitclap
normal-hitclap2
normal-hitfinish
normal-hitfinish2
normal-hitnormal
normal-hitwhistle
normal-sliderslide
normal-sliderslide2
normal-slidertick
normal-sliderwhistle

and it should work
Elanif

kaminari69 wrote:

you need to have

normal-hitclap
normal-hitclap2
normal-hitfinish
normal-hitfinish2
normal-hitnormal
normal-hitwhistle
normal-sliderslide
normal-sliderslide2
normal-slidertick
normal-sliderwhistle

and it should work
Thanks, worked perfectly

Edit: I'm not sure if there is the sound when there are multiple circles really close to eachother
Edit #2: I also pasted the hitsound as soft-<name> like all you suggestions, and now it works
Edit #3: Now I get the sound also while sliding, tomorrow I'll work on finding out which soft-<thing> is doing that
Edit #4: I'm getting this hitsound spam while I slide and I cannot fix it, the problem isn't from soft-something.wav though
Edit #5: Alright, it was normal-sliderslide.wav, and normal-sldiertick.wav
Edit #6:
Good sounds:
normal-hitclap
normal-hitclap2
normal-hitfinish
normal-hitfinish2
normal-hitnormal
normal-hitwhistle
normal-sliderslide2
normal-sliderwhistle
soft-hitclap
soft-hitclap2
soft-hitfinish
soft-hitfinish2
soft-hitsoft
soft-hitwhistle

Bad sounds:
normal-sliderslide
normal-slidertick
soft-sliderslide
soft-sliderslide2
soft-slidertick
Mute_Gaming
It would have been nice if we could change the logo on the main menu :(
Ayesha Altugle

Mute_Analogue wrote:

It would have been nice if we could change the logo on the main menu :(

vahn10 wrote:

S1lent wrote:

1000!

//edit

But aside from this awesome GET, I have a legit question; Is there a way to edit the Osu Start button in the title screen? I have this Hakurei Reimu skin, and I would be awesome imo to make a YingYang Osu button in the title.

Made a example;

If you are supporter

vahn10 wrote:

file name: menu-osu.png
dimensions: 520x520 pixels

and this one can be put to your skin folder
Long Quotes

TouchFluffyTail wrote:

Not possible and most likely never will be.

Inori wrote:

Can't since it's a staple and copyright to the game.
the correct answer is the quote below

OsuMe65 wrote:

aside from those, that is locked in osu (regular)... as well as in test build (supporter only)
unfortunately,this one only works with supporter only (Test Build)
kaminari69
hey i try to create some cursor and i need advice


i tried this one what you think can be of any use as a curosr?
Rio-

kaminari69 wrote:

hey i try to create some cursor and i need advice


i tried this one what you think can be of any use as a curosr?
That Cursor is too big... I think You should resize It to 60px or lower
The Italicized Sentence : What does that mean? I don't get It :?
kaminari69

satriobp wrote:

kaminari69 wrote:

hey i try to create some cursor and i need advice


i tried this one what you think can be of any use as a curosr?
That Cursor is too big... I think You should resize It to 60px or lower
The Italicized Sentence : What does that mean? I don't get It :?
i will resize to 50x50
Mute_Gaming
I change the osu!logo
but now i would change the bar

menu-play , menu-edit , menu-options , menu-quit ?
Ideolo

OsuMe65 wrote:

skinning test bulid elements (except for menu-background) should be avoided because those aren't in the skinning standards.
Haruka Shiba
Ummm... Im really new here and I want to make my own skin.
How can I start?
Nathanael

Haruka Shiba wrote:

Ummm... Im really new here and I want to make my own skin.
How can I start?
The instructions are already at the first post.
Haruka Shiba

Nathanael wrote:

Haruka Shiba wrote:

Ummm... Im really new here and I want to make my own skin.
How can I start?
The instructions are already at the first post.
Thanks :)
OsuMe65

Nathanael wrote:

The instructions are already at the first post.
actually, this is a guide, not "instructions"
Nathanael

OsuMe65 wrote:

Nathanael wrote:

The instructions are already at the first post.
actually, this is a guide, not "instructions"
Its just the same..
A guide gives you information or instructions to help you do or understand something.
Rio-

Nathanael wrote:

OsuMe65 wrote:

actually, this is a guide, not "instructions"
Its just the same..
A guide gives you information or instructions to help you do or understand something.
Why Bothering about the difference? At least They're giving Information to You :roll:
kaminari69
i strated using photoshop more often and i wanted to know how do we make HD for skin just up the resolution to 720 in photoshop?
Nathanael
Hmm..
Double the resolution of the element you're making.
Let's say 500x500 so you'll be resizing it to 1000x1000 and name the element with "@2x" at the filename.
Example of that is "mode-osu@2x.png"
TouchFluffyTail

kaminari69 wrote:

i strated using photoshop more often and i wanted to know how do we make HD for skin just up the resolution to 720 in photoshop?
Double the resolution and append @2x to the end of the filename.

For example the default cursor.png is 76x76, so you would make an @2x cursor 152x152 and name is cursor@2x.png.
Topic Starter
MLGnom
HD skinning is used when you are using resolution that have 800px in height.

Elements should have @2x at the end of file name. ("hitcircle@2x.png") And exacly double size of standard skin element.

Example : "hitcircle.png" = 128x128px "hitcircle@2x.png" = 256x256px.

Edit: Holy shit, double ninja. D:
OsuMe65

Nathanael wrote:

Hmm..
Double the resolution of the element you're making.
Let's say 500x500 so you'll be resizing it to 1000x1000 and name the element with "@2x" at the filename.
Example of that is "mode-osu@2x.png"

TouchFluffyTail wrote:

kaminari69 wrote:

i strated using photoshop more often and i wanted to know how do we make HD for skin just up the resolution to 720 in photoshop?
Double the resolution and append @2x to the end of the filename.

For example the default cursor.png is 76x76, so you would make an @2x cursor 152x152 and name is cursor@2x.png.

MLGnom wrote:

HD skinning is used when you are using resolution that have 800px in height.

Elements should have @2x at the end of file name. ("hitcircle@2x.png") And exacly double size of standard skin element.

Example : "hitcircle.png" = 128x128px "hitcircle@2x.png" = 256x256px.

Edit: Holy shit, double ninja. D:


aside from these, why not start it big

like begin with a 152x152 image for the cursor, skin it the way you like and save it as "cursor@2x.png"
and resize it down to 76x76 and save it as "cursor.png"
kaminari69
thanks you gonna try ^^
TouchFluffyTail

OsuMe65 wrote:

aside from these, why not start it big

like begin with a 152x152 image for the cursor, skin it the way you like and save it as "cursor@2x.png"
and resize it down to 76x76 and save it as "cursor.png"
Logically, this the way it should ALWAYS be done. Never upscale an image, it literally won't change anything and if you scaled it poorly then you might even make it look worse.
OsuMe65

TouchFluffyTail wrote:

Never upscale an image, it literally won't change anything and if you scaled it poorly then you might even make it look worse.
Exception to the rule: Texts and Unrasterized Shapes are present
[ Zan ]
how do I make ranking-panel? More specifically, how do I know where the areas for numbers should be (not sure how to describe it)

shoyru166166
Hi, I'm editing image and sound files in a beatmap, so it's generally making a skin just for the beatmap but not the entire client. I want my custom cursor to stop spinning because it's ruining the effect. I didn't want to make a custom skin in the skin folder, but I learned if you make your own, you can turn off the rotating cursor, but when I do that other things change against my will.

My custom countdown, instead of appearing in the same spot, start to appear all over the screen, and I start getting these little pink "30"'s and "10"'s that appear at the beginning, end, and ticks of my sliders.

I don't want these.

I figured it's because I copied the skin.ini from the new skin template which might have different things from the default (but it doesn't really look any different) and then edited the cursor rotate option. Is there something I can do to fix all this? It's frustrating because I don't see options to change how the countdown is displayed, or to turn off those little "10"'s and "30"'s on the sliders. Or nothing in the skin folder that shows the images for those numbers for me to edit them out completely..

My cursor is like a crosshair from a shooter game. All I want is for my cursor to stop rotating, and for absolutely nothing else to change.

Help would be greatly appreciated! Thanks!
Rio-
Okay... Let me try to answer :

[ Zan ] wrote:

how do I make ranking-panel? More specifically, how do I know where the areas for numbers should be (not sure how to describe it)

The Best way is, try to edit another ranking-panel with Your Style...
* For Me, I only leave It blank

shoyru166166 wrote:

. I want my custom cursor to stop spinning because it's ruining the effect. I learned if you make your own custom skin in the skin folder you can turn off the rotating cursor, but when I do that other things change.
Simple... Just open skin.ini and then change this :
SPOILER
Name: (The name of the Skin)
Author: (The Creator)
SliderBallFlip: 1
CursorRotate: 0 < Change this from 1 to 0
CursorExpand: 1
CursorCentre: 1
SliderBallFrames: 10
SliderStyle : 2
ComboBurstRandom : 1
HitCircleOverlayAboveNumer: 1
But I dunno about the other things that change, or also If You can, copy the content of the skin.ini here will help Us answer Your Question

shoyru166166 wrote:

My custom countdown, instead of appearing in the same spot, start to appear all over the screen, and I start getting these little pink "30"'s and "10"'s that appear at the beginning, end, and ticks of my sliders.
Give Me the screenshot for the Countdown, I dunno what're You mean ;) ... But the "30" and the "10", You can try to replace "sliderpoint10.png" & "sliderpoint30.png" with A Blank Image If You feel It's too Annoying for You

Hope It helps~ :)
shoyru166166

satriobp wrote:

shoyru166166 wrote:

. I want my custom cursor to stop spinning because it's ruining the effect. I learned if you make your own custom skin in the skin folder you can turn off the rotating cursor, but when I do that other things change.

shoyru166166 wrote:

My custom countdown, instead of appearing in the same spot, start to appear all over the screen, and I start getting these little pink "30"'s and "10"'s that appear at the beginning, end, and ticks of my sliders.
Give Me the screenshot for the Countdown, I dunno what're You mean ;) ... But the "30" and the "10", You can try to replace "sliderpoint10.png" & "sliderpoint30.png" with A Blank Image If You feel It's too Annoying for You

Hope It helps~ :)
Okay I see the files for the slider points and I will change those to blank images, but here are the screenshots of the countdown.

They are supposed to happen one after another in the same spot like this. CORRECT




When I copy the skin.ini and change the value it counts all over the screen instead like this. WRONG



Here is the skin.ini I copied and changed

SPOILER
[General]
Name: supersonic
Author:shoyru166166

//Please remember to remove "//" from some of options if you want them.
//For explanation of every part, see this thread t/51694

SliderBallFlip: 0
CursorRotate: 0
//CursorTrailRotate: 0
CursorExpand: 1
CursorCentre: 1
SliderBallFrames: 10
//SpinnerFadePlayfield: 1
ComboBurstRandom : 0
HitCircleOverlayAboveNumer: 1
//AnimationFramerate: 10
//CustomComboBurstSounds: 30,60,100,150,200,250,300
//SliderStyle: 1

[Colours]
//You can add up to 8 colours.
Combo1: 255,150,0
Combo2: 5,240,5
Combo3: 5,5,240
Combo4: 240,5,5
Combo5: 240,5,5

SliderBorder: 255,255,255
//SliderTrackOverride: 0,0,0
//SpinnerApproachCircle: 77,139,217
//SongSelectActiveText: 0,0,0
//SongSelectInactiveText: 255,255,255
//StarBreakAdditive: 0,0,0

[Fonts]
HitCirclePrefix: default
HitCircleOverlap: 3

ScorePrefix: score
ScoreOverlap: 3
Rio-

shoyru166166 wrote:

They are supposed to happen one after another in the same spot like this. CORRECT




When I copy the skin.ini and change the value it counts all over the screen instead like this. WRONG



Here is the skin.ini I copied and changed

SPOILER
[General]
Name: supersonic
Author:shoyru166166

//Please remember to remove "//" from some of options if you want them.
//For explanation of every part, see this thread http://osu.ppy.sh/forum/t/51694

SliderBallFlip: 0
CursorRotate: 0
//CursorTrailRotate: 0
CursorExpand: 1
CursorCentre: 1
SliderBallFrames: 10
//SpinnerFadePlayfield: 1
ComboBurstRandom : 0
HitCircleOverlayAboveNumer: 1
//AnimationFramerate: 10
//CustomComboBurstSounds: 30,60,100,150,200,250,300
//SliderStyle: 1

[Colours]
//You can add up to 8 colours.
Combo1: 255,150,0
Combo2: 5,240,5
Combo3: 5,5,240
Combo4: 240,5,5
Combo5: 240,5,5

SliderBorder: 255,255,255
//SliderTrackOverride: 0,0,0
//SpinnerApproachCircle: 77,139,217
//SongSelectActiveText: 0,0,0
//SongSelectInactiveText: 255,255,255
//StarBreakAdditive: 0,0,0

[Fonts]
HitCirclePrefix: default
HitCircleOverlap: 3

ScorePrefix: score
ScoreOverlap: 3
It's probably Hard to doing the Countdown Stacked like that... Is It from A Skin or Something, If Yes.... Link from the skin that has the Stacked Countdown please? (For further experiment, since this is the first-time I seen countdown like that :roll: )

oh... And one thing

MLGnom wrote:

So, with this you are able to create many different countdowns. But you need to remember about how they are layered. Count 3 is always on top, count 2 is behind and count 1 is covered by them. So it's kinda impossible to make stacked countdown (you know numbers that appears on previous one).
Topic Starter
MLGnom

shoyru166166 wrote:

Hi, I'm editing image and sound files in a beatmap, so it's generally making a skin just for the beatmap but not the entire client. I want my custom cursor to stop spinning because it's ruining the effect. I didn't want to make a custom skin in the skin folder, but I learned if you make your own, you can turn off the rotating cursor, but when I do that other things change against my will.
If you are making skin for beatmap, you won't be able to do much. Skin.ini is used from your actual skin and if someone other plays your beatmap, most likely that person will have their own settings.

Making stacked countdown is actually possible. But only with selected "New skin behaviour" option.
Countdown starts from centre and 3,2,1 appears one after another.

(Remember guys that I still haven't completed update... (Lack of free time ;_;).
shoyru166166

satriobp wrote:

It's probably Hard to doing the Countdown Stacked like that... Is It from A Skin or Something, If Yes.... Link from the skin that has the Stacked Countdown please? (For further experiment, since this is the first-time I seen countdown like that :roll: )
I changed the images for the countdown, but a stacked countdown was the default on my osu client when "osu by peppy" skin is selected. All my countdowns are like that unless I change the skin..I am not going to distribute the skin I'm making, it's just for personal use and for a few friends on a beatmap created by someone else so it's not like there's a link for it on the internet. But thanks a lot for helping.


MLGnom wrote:

If you are making skin for beatmap, you won't be able to do much. Skin.ini is used from your actual skin and if someone other plays your beatmap, most likely that person will have their own settings.

Making stacked countdown is actually possible. But only with selected "New skin behaviour" option.
Countdown starts from centre and 3,2,1 appears one after another.
Thanks, checking the "new skin behaviour" option made it stack correctly once again. I'll just have to put my skin as the beatmap's preferred skin and send it to my friends and ask them to check that box too. I know they don't use any skin other than the default so it won't be a problem. Thanks a lot, you both helped me a lot.

I still have a lot to work on for my skin, so if I run into any more problems in the future I'll be coming back for help. Thanks!
Mute_Gaming
We can't custom the osu!logo :(
OsuMe65

I wrote:

that is locked in osu (regular)... as well as in test build (supporter only)
Mute_Gaming
That not work on osu!test
TouchFluffyTail
Seems peppy locked out all the things you shouldn't have been able to touch in the first place in osu!test. :)
Ticot
Hey, i'm just here to talk about my skin project (with my bad english). I want to make the perfect skin, the most readable skin, for skilled gamers. So, what I did now condensed in a video : http://www.youtube.com/watch?v=yjLbCv_sLsA

Remember that's just a prototype. So, I'm here to ask you what I should do next, to collect some advice :)
TouchFluffyTail

Ticot wrote:

Hey, i'm just here to talk about my skin project (with my bad english). I want to make the perfect skin, the most readable skin, for skilled gamers. So, what I did now condensed in a video : http://www.youtube.com/watch?v=yjLbCv_sLsA

Remember that's just a prototype. So, I'm here to ask you what I should do next, to collect some advice :)
People's tastes are too subjective to really make a "perfect, most-readable" skin. Just for example; I wouldn't use a single part of that skin. :P

You should really aim to make a more distinct skin rather than just a generic 'pro' skin, since they all end up looking like the same 2-3 skins.
show more
Please sign in to reply.

New reply