1. osu! forums
  2. osu!
  3. Skinning

posted
I've just started skinning so I'm not very good at it yet.

If anyone has any ideas of some things I could do, let me know!

Version 1.5 is now out!

Credits go to:
Nya-Chan (For providing the number/score text)
DJPop (For the star2 picture) (A nice looking music note)
Daru (For the hit300, hit100, and hit50 pictures, also better resolution K-ON! title for spinner background)
James (For the new playfield image)
Rolled (For the Ki-bar/Score-bar things)
Kyu (For providing the awesome Mio countdown~)
SuzumiyaKyon (For the new combobursts)
Ryuukun (For the new hitcircle/hitcircleoverlay)
LuigiHann (For the lighting.png) (Hope he doesn't mind)
Version 1.5 Download

Version 1.4a includes~
  1. Countdown by Kyu
  2. New combo bursts (Not as surprising as the current one, but it has everyone in there)
  3. SH ranking picture is now more tidy.
  4. New SSH ranking picture added
  5. Matching colors on the ki-bar
  6. Colors changed for some things.

Version 1.4b includes~
  1. New combobursts from SuzumiyaKyon

Version 1.4c includes~
  1. New cursor color
  2. Sharper hitcircle


Version 1.5 includes~
  1. New hitcircle
  2. Lighting.png
  3. Fixed score numbers during gameplay.

Yeah... Not very many things changed. -.-

_____________
Got pictures you have that look better than the ones currently in the skin? Post them here in a message and you will receive credit and my thanks! :D
posted
What if you put LAZY on the misses and CRAZY! on the Hits. (Reference to the ED. Heheh. *not funny*)
posted
White halo around the images is bleh. Need help removing that?
posted
@strager: Yes please, I would very much appreciate it. hehe
@SuzumiyaKyon: oo that sounds like a very good idea, I'll consider doing that.
posted
Suggestions On what you have:

-Make the "0" taller. All the other numbers are full height, while the 0 is kinda like an o in the center of it. Just strech it a little and it should look a little better (I know it's prolly the font, but it looks funny in the middle of a pile of numbers like it will be for scores and whatnot).
-Make sure the glows and whatnot you have on the letters don't get cutoff on the pixel limit. Looks kinda like the "0" on the left-hand side hit that problem, same side for the 9 as well.
-For the section pass, make something around it (make a frame of some sort, maybe like in the OP) because it being cut off due to the original image looks kinda bad. Same with Section fail, though you can maybe get away with just making it fade at the bottom.
-The Rank image is rather grainy. There's two ways to fix this, Easy way: Fiddle with filters and make it look better (Doesn't always work, but more often than not takes less time), or the Harder Way: Revector it (Looks better, but takes more time)
-Make the little white dots around the edges go away.
-Maybe make the K-ON! group image in the back be in the middle or on the left side? *shrugs* I usually like seeing the characters on the rankings part, and most of the time the right side is covered in the song-select anyways (with the song's ranking thing).
-The eight looks rather thick. Is that is the font, or can you fiddle with it?

Suggestions for other stuff:

-I agree on the Crazy/Lazy thing. Might wanna make it similar to the way it shows in the ED towards the end, all the letters turned differently and stuff.
-Maybe make the cursor the bass drum on a drum set with the K-ON logo on it (lightly)?
-Red/White will be your best bet for color scheme. Do the girls have characters colors (I've only seen the OP and ED, so I don't know)? If they do, then you should use those as well as accent colors.
-Stars --> Guitars, Of course. :3

Questions:
-What program are you using? I can give some pointers if it's Photoshop (7.0 or Higher).
-Does the font you're using for the numbers have letters as well?
-What font IS that? (xD I want it~!)

I can't wait to see this theme completed~!
posted
inb4 dumpsterdiver
posted

Nya-Chan wrote:

Questions:
-What program are you using? I can give some pointers if it's Photoshop (7.0 or Higher).
-Does the font you're using for the numbers have letters as well?
-What font IS that? (xD I want it~!)
-The programs I'm using are GIMP 2 and Adobe Photoshop CS4. (Dunno if that's a version.)
-Yes it does
-It's actually a text generator online that I'm using. http://cooltext.com/
The font is Neon
posted

Mafiamaster wrote:

Nya-Chan wrote:

Questions:
-What program are you using? I can give some pointers if it's Photoshop (7.0 or Higher).
-Does the font you're using for the numbers have letters as well?
-What font IS that? (xD I want it~!)
-The programs I'm using are GIMP 2 and Adobe Photoshop CS4. (Dunno if that's a version.)
-Yes it does
-It's actually a text generator online that I'm using. http://cooltext.com/
The font is Neon
Looking at the font generator, it's actually using the font "Blippo", which I know I have somewhere in my PC. By the looks of it, it seems that it's just a bunch of filters. It may be better to alter the font yourself with CS4 (CS#s are the newer versions after 7.0 if I recall right), since then you can fiddle with a lot more afterwards and make sure it all looks right.

... and heck, their 0 looks like an o! xD

To duplicate the same effects, use any "Blippo" font (I tested using "Blippo Blk BT", type in you number or letter.
-Duplicate the layer.
-Right click the new layer, and click "Rasterize Layer"
-Right click the preview image of the layer, click "Select Layer Transparency"
-Go to Select-->Modify-->Contract. Put in 4-6 for the amount. Hit enter, and the selection will shrink.
-Press delete.
-Double click on the layer or open up Layer Style.
-Drop Shadow: Opacity = 75, Angle =120, Distance = 6, Spread = 0, Size = 2.
-Outer Glow: Blend Mode = Screen, Opacity = 75, Noise = 0, Glow color = 23D3FF, Technique = Softer, Spread = 12, Size = 7
-Inner Glow: Blend Mode = Normal, Opacity = 78, Noise = 0, Glow Color = 23D3FF, Technique = Softer, Source = Edge, Spread = 11, Size = 3
-Fiddle with them to your liking, and save as png.

What I get:

(Prolly bigger than it should be, but just to show you).
My Blippo font might be different than theirs, or they may filter the 0 to become an o, I'm not sure. But they ARE using a Blippo font, and I used a Blippo font as well.

While it may take a bit longer (Maybe not depending on the load time of that site lol), you do get full control over the outcome. If you need the font, I can probably find it and put it up for you if you need it. :3
posted
Sorry, but where is the text maker in CS4 again? xD

Or posting 1 - 9 would be helpful, like you did with 0.
And possibly throw in an x, dot, comma, and a percent sign! xD
posted

Mafiamaster wrote:

Sorry, but where is the text maker in CS4 again? xD
For future Reference: It's in the tools Window (A rectangle usually with two rows of pictures icons), should be a letter "T".

But since it takes just a couple minutes, here's the numbers and the extra symbols. Resize and whatnot to make them fit into the pixel dimensions for the number files. The percent one's rather thin cause it wasn't 6pix wide in any part. xD;

posted
This map has been deleted on the request of its creator. It is no longer available.
posted
This map has been deleted on the request of its creator. It is no longer available.

posted
How do you make a skin for a anime that's been going for ~2 episodes?(It's Friday so there should be a new one right? I see the ep. 2 raw up anyways.)

I think the hitcircleoverlay hide the white around the around the hit circle, but that's cheating isn't it, and I think the overlay's edges are a bit too sharp, and it doesn't really cover it all. I don't really see it in such a fast paced map or game though. :P But there are obvious ones, like the rankings and the pass/fail.

Just some suggestions: Maybe make the slider's rails black, or a darker color, since the hit circle is kind of dark.
Same with the approach circle? Make it darker? Just overlay it with gray? Not too dark though. I would say the slider's track colors, but that messes with the hit circle's color, and no I'm not talking about the force slider color.

Check these out, they are more obvious on slower maps, but I can see it on darker background easily(like on dumpsterdiver's post). It's easier to see for yourself, try playing one withadark background, like Red Rocket Rising, or any slow map. But that rim around it should be easy to take out. I think minus the ring it'll(hit circle) be fine. White is noticable, but it's cover up be the overlay mostly, but as I said that's cheating, but a smart way of it. :D



posted
Yeah I was thinking the same thing about the hit circle overlay, just leaving it white / default.
Also I kind of fixed the hit circle a little around the edges a bit more
posted

Mafiamaster wrote:

Yeah I was thinking the same thing about the hit circle overlay, just leaving it white / default.
Also I kind of fixed the hit circle a little around the edges a bit more
Where did someone say to leave it default :\ Did you misunderstand me? Or did someone suggest that, I meant the current on covers it well enough. I also like how it looks on other custom hit circles(the new Cirno one, ranked a bit back)

I like the effect. :) Keep it! :P
posted
Rawr, guess I just misunderstood. :P

This is the latest version with pause menu buttons added.

I don't expect anyone to download this since it has some stray pictures that aren't used. I'm uploading this from the laptop so I can download on my desktop later.


Sorry it doesn't have to do anything with the anime, amirite

Nya-Chan wrote:

To duplicate the same effects, use any "Blippo" font (I tested using "Blippo Blk BT", type in you number or letter.
-Duplicate the layer.
-Right click the new layer, and click "Rasterize Layer"
-Right click the preview image of the layer, click "Select Layer Transparency"
-Go to Select-->Modify-->Contract. Put in 4-6 for the amount. Hit enter, and the selection will shrink.
-Press delete.
-Double click on the layer or open up Layer Style.
-Drop Shadow: Opacity = 75, Angle =120, Distance = 6, Spread = 0, Size = 2.
-Outer Glow: Blend Mode = Screen, Opacity = 75, Noise = 0, Glow color = 23D3FF, Technique = Softer, Spread = 12, Size = 7
-Inner Glow: Blend Mode = Normal, Opacity = 78, Noise = 0, Glow Color = 23D3FF, Technique = Softer, Source = Edge, Spread = 11, Size = 3
I tried to do this but the parts that are in bold, I am having trouble with this.
First I duplicate the layer. Then when I right click the new layer, I don't see anything that says "Rasterize Layer", the closest thing I see is "Rasterize Type". It is then that I use "Convert to smart object", afterwards when I right click it, I see Rasterize Layer. Which seems fine.

Then I right click on the preview picture of the copied layer, but I don't see "Select Layer Transparency"
From right clicking on the preview picture


From right clicking just on the name


Therefore when I click Select, "Modify" is grayed out


Orrrr, to make things easier, you could possibly post an SS, S, A, B, C, D in a type of red for the small ranking letters.
And another S and SS in a choice of your color for the hidden mod rankings. :P
posted
Rasterize Type is the same thing (It turns it into a pixel object rather then text).

Looks like they reworded "Select Layer Transparency" to "Select Pixels", click that. It should do the same (If there are those marching ants around the numbers, yup, that's what you want).

*sighs* Does Adobe need to reword everything with new versions? Geez.

Also, Nice font on those buttons. Though maybe instead of them being buttons... *thinks* Hm, maybe get a picture of an amplifier and have it coming out of that? Buttons just seem kinda plain.
posted
Going by your steps to get that same effect I got...


Where's the whiteness? xD

Also I'm guessing this is how people edit their pictures (No white dots/halo or anything surrounding the picture)
That is really awesome!
This method can be done with pictures, right? :?
Edit: Ehh?

Am I suppose to be magnifying the lens to delete the white halo by hand around the character?
Or is there another way of doing this...
The Refine Edge option in CS4 doesn't seem to be working.
Would using the Blurring tool around the edges help?



Also the button idea is a VERY GOOD idea, I'll try and do that somehow whenever I find some anime-ish instruments/speakers/amplifiers.
posted
For a spinner, I'm thinking the promotional image for the K-On anime that has Yui holding the guitar, and have the guitar as a spinner. Can't find a decent picture, though. Episode 2's subbed, though, so I might get some ideas from there.
posted
Either make the text white when you type it in, or create a new layer, press CTRL+G or go Layer --> Group with Previous (Might have been reworded though xD). Either of those will "group" it with the layer below, making it so that it doesn't go outside of what the layer it's group to. It's kinda hard to explain, but you can change colors of stuff easy like that.

As for removing the white 'halo', it will depend on how the image deals with it, but usually I'll Select Layer Transparency/Select Pixels. Follow that by Right Click on the Canvas --> Select Inverse, then go Select --> Modify --> Expand, 1px. Press delete and it's mostly gone. If most of the black lines are gone, then add layer effects, Stroke, with 1-2 pixels of black (Or whatever color looks best).

Or, option number 2: Learn how to use the Pen Tool (it's the one that looks like a quill tip, right above the Text Tool) and trace the whole thing out. It's tedious, but usually (You have to zoom in at like, 300%+, and perfectly outline it) it looks rather good. I only recently stopped bothering it with cause I'm lazy. For most of my stuff I use the Magic Wand tool (looks like a wand xD) and select all the parts I don't want and do the end of option 1 to make it look right. Only when there's too many colors do I use the pen tool.
show more
Please sign in to reply.