Guest
home
beatmaps
rankings
community
store
help
forum
  1. Forums
  2. osu!
  3. Skinning
  4. Work In Progress Skins

Template skin [2/Feb/2021]

posted
Total Posts
46
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit
Apparently Photoshop 21 doesn't have render issues so i will continue my work on this project.

Whats New


Export everything in 3 clicks.
Animated cookie.


Change Log

  • 02/02/2021
  1. generate assets support
  2. started work on taiko

    03/09/2020
  3. Figma song selection template
  4. minor touch-ups

    22/07/2020
  5. song selection templates for 4:3, 16:10 and 21:9
  6. minor touch-ups

    16/07/2020
  7. Photoshop gameplay template added

    25/06/2020
  8. Photoshop ranking panel template

    14/06/2020
  9. Photoshop song selection template

    20/03/2020
  10. redesigned selection-mode
  11. added SD elements

    18/07/2019
  12. template for bottom part of RP

    14/07/2019
  13. added numbers

    18/06/2019
  14. initial release

!SongSelection.psd


Before starting skinning, change blending mode and opacity for those artboards:
mode-osu-small@2x [Linear Dodge (Add)]

mode-osu@2x [Linear Dodge (Add); Opacity: 10%]

To skin selection-tab or menu-button-background you would need to work inside provided smart objects.

You can also change profile picture and background image by changing contents of smart objects placed at Top & Bottom Bars > Profile Info > PFP and Background > Song Selection Background.

!Ranking Panel.psd


By default RP Header artboard is hiding bottom part of RP, hide RP Header to be able to see how bottom part looks.

How to export?


To export go to Edit > Preferences > Plugins and tick Enable Generator after that go to File > Generate > Image Assets, it will start saving everything to ...\template skin\!SongSelection-assets (it’s real time so every change will be saved) to disable it go to File > Generate > Image Assets.

Screenshots


Song selection
Mode selection
Mods selection
Ranking panel
Ranking results
Pause screen

Download

Last edited by Galvit , edited 19 times in total.
NeXt4r_
376 posts
Joined January 2016
NeXt4r_
Can the mod please pin this or something? so we don't need countless thread about filling the song selection.
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit
The big update is up, would love to know what you guys think about new Photoshop templates.
Sanka-RiaRei
5 posts
Joined March 2019
Sanka-RiaRei
Спасибо, за такой апдейт.
- Hexality -
5 posts
Joined December 2016
- Hexality -
bruh, I think I'll convert it to work on Adobe Experience Design, since in this way you can see everything together. Can I do it?
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit

- Hexality - wrote:

bruh, I think I'll convert it to work on Adobe Experience Design, since in this way you can see everything together. Can I do it?
Do you mean everything together like ranking panel and song selection in one document? Don't know how it works in XD but it was very resource intense to have everything skinned in one document.
Last edited by Galvit , edited 1 time in total.
Vysion
127 posts
Joined January 2018
Vysion
Wow why didn't I know about this before? This is actually really helpful!

Never saw the update cuz I just started using this but thanks for making it.
Mop The Tea
3 posts
Joined July 2020
Mop The Tea
its an osk file for me, how can i change that? it wont open for me
Zelzatter Zero
3,984 posts
Joined October 2016
Zelzatter Zero

Mop The Tea wrote:

its an osk file for me, how can i change that? it wont open for me
.osk is a file extension for skins in osu...
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit

Mop The Tea wrote:

its an osk file for me, how can i change that? it wont open for me
Rename it, change .osk to .zip
Aimdrip
9 posts
Joined April 2018
Aimdrip
Is there a way to make the white transparent or hide it when I check an artboard? Example: https://prnt.sc/u6r69i. I did set it to transparent in the properties windows, but nothing happens. It should look like this https://prnt.sc/u6s482. But instead it looks like this, altough I set every artboard to transparent in it's properties https://prnt.sc/u6s4x2.

***GREAT*** templates by the way! I love them!!!
Last edited by Aimdrip , edited 3 times in total.
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit

Jarno wrote:

Is there a way to make the white transparent or hide it when I check an artboard? Example: https://prnt.sc/u6r69i. I did set it to transparent in the properties windows, but nothing happens. It should look like this https://prnt.sc/u6s482. But instead it looks like this, altough I set every artboard to transparent in it's properties https://prnt.sc/u6s4x2.

***GREAT*** templates by the way! I love them!!!
Thank you for feedback! In Photoshop navigate to Edit > Preferences > Performance > check Legacy Compositing

Update: Or use PS21
Last edited by Galvit , edited 1 time in total.
Aimdrip
9 posts
Joined April 2018
Aimdrip

Galvit wrote:

Jarno wrote:

Is there a way to make the white transparent or hide it when I check an artboard? Example: https://prnt.sc/u6r69i. I did set it to transparent in the properties windows, but nothing happens. It should look like this https://prnt.sc/u6s482. But instead it looks like this, altough I set every artboard to transparent in it's properties https://prnt.sc/u6s4x2.

***GREAT*** templates by the way! I love them!!!
Thank you for feedback! In Photoshop navigate to Edit > Preferences > Performance > check Legacy Compositing
Worked like a charm. Again, thank you for these awesome templates. They fit in-game perfectly and I just couldn't skin without them. It's perfect. You did a wonderful job!
Last edited by Aimdrip , edited 2 times in total.
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit
I'm very exited to start creating Figma templates for you guys. Please tell me if you have any problems using my templates or you just don't understand how to use them, I will be glad to help out!
TheKubaX
27 posts
Joined November 2014
TheKubaX

Galvit wrote:

Please tell me if you have any problems using my templates or you just don't understand how to use them, I will be glad to help out!
Hi. Is it possible to make these files work on 1366x768 screen resolution? So far I have only tried song selection files, but they doesn't fit the resolution no matter how much I try to resize them. I can provide screenshots if needed.

With kind regards, TheKubaX.
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit

TheKubaX wrote:

Hi. Is it possible to make these files work on 1366x768 screen resolution? So far I have only tried song selection files, but they doesn't fit the resolution no matter how much I try to resize them. I can provide screenshots if needed.
All my templates are made for "HD" resolutions, they are based on 2732x1536 (doubled dimensions of 1366x768, thus @2x), you can downscale them by using this program.
TheKubaX
27 posts
Joined November 2014
TheKubaX

Galvit wrote:

All my templates are made for "HD" resolutions, they are based on 2732x1536 (doubled dimensions of 1366x768, thus @2x), you can downscale them by using this program.
Hey, the program is awesome. It helped me. If I'll have any further problems I will let you know.
Last edited by TheKubaX , edited 1 time in total.
rimseg
47 posts
Joined August 2020
rimseg

Galvit wrote:

[notice]

Whats New


Figma template for song selection.
Hey, I think the link is set wrong, it just links to the Figma Site and not the Figma File.

Would love if u could share it, I'm currently working on a full figma skin template and this would help me a lot.
I'm stupid

thank you for ur work, made skinning so mutch easier <3
Last edited by rimseg , edited 1 time in total.
Nate-san
2 posts
Joined May 2017
Nate-san
Hi,
I just downloaded the template skin and am wondering how to properly utilize the !songselection template. I'm not sure what its used for, im used to just editing each image seperatley. Could someone tell me what they use the template for?

I appreciate the help!
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit

Nate-san wrote:

Hi,
I just downloaded the template skin and am wondering how to properly utilize the !songselection template. I'm not sure what its used for, im used to just editing each image seperatley. Could someone tell me what they use the template for?
If you are talking about photoshop template, it's not that different from editing each image separately, just make sure you are keeping each element in it's own artboard.
Aimdrip
9 posts
Joined April 2018
Aimdrip
They removed legacy compositing. It's all white again :(
I downloaded PS 2019 and it works again. But unfortunately, it doesn't in newer versions.
Last edited by Aimdrip , edited 1 time in total.
Shirogane-Ken-
1 post
Joined August 2017
Shirogane-Ken-
I try to edit menuback button, but there is a glowing line on it, help
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit

deseptian wrote:

I try to edit menuback button, but there is a glowing line on it, help
Can you take a screenshot of it? It probably has someting to do with mode-osu-small.
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit

Jarno wrote:

They removed legacy compositing. It's all white again :(
I downloaded PS 2019 and it works again. But unfortunately, it doesn't in newer versions.
Just updated to PS 22.1.1 and it works like it should.
SupaJuke
6 posts
Joined February 2017
SupaJuke
Is there an easy way for me to edit, say the top black bar in Top & Bottom Bars BG without ruining the shadowing and stuffs?

Sorry for being a noob :<
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit

SupaJuke wrote:

Is there an easy way for me to edit, say the top black bar in Top & Bottom Bars BG without ruining the shadowing and stuffs?
You shouldn't edit red artboards, they include what can't be skinned (I know template elements are colored red too but this will change in next update)
Last edited by Galvit , edited 2 times in total.
NyuPenyu
42 posts
Joined May 2018
NyuPenyu
hi. is this just for the standard osu mode? is there any template for all of the modes?
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit

NyuPenyu wrote:

hi. is this just for the standard osu mode? is there any template for all of the modes?
I've started working on taiko template and other modes don't really need templates, but I'll include skinnable files.
skvikii
1 post
Joined February 2021
skvikii
hey the template is pretty confusing for me like some of the stuff are pixelated and doesnt look the same ingame
oh yeah and some of the options are gone and random doesnt even work
Last edited by skvikii , edited 1 time in total.
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit

skvikii wrote:

hey the template is pretty confusing for me like some of the stuff are pixelated and doesnt look the same ingame
oh yeah and some of the options are gone and random doesnt even work
This skin is @2x only.
Last edited by Galvit , edited 1 time in total.
Archnila
5 posts
Joined May 2015
Archnila
Thanks for the templates! Especially the figma template. Ended up learning how to use figma lol since for my personal skin, I prefer using vectors.
McEndu
1,161 posts
Joined March 2019
McEndu
The templates are great!

While there is a template for the online ranking panel, the hitbox for the vote button is missing, which somehow makes it hard to skin it without diving into the game.

Let me take my time to put up a screenshot at 1366x768 for reference

Last edited by McEndu , edited 2 times in total.
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit

McEndu wrote:

The templates are great!

While there is a template for the online ranking panel, the hitbox for the vote button is missing, which somehow makes it hard to skin it without diving into the game.
I'll work on it!
MegumiAkari
2 posts
Joined January 2021
MegumiAkari
where do u guys edit this template? Sorry I'm noob XD
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit

MegumiAkari wrote:

where do u guys edit this template? Sorry I'm noob XD
Photoshop
Cruxial
17 posts
Joined September 2018
Cruxial
Yo, whenever I export selection-mode and menu-back, it shows up with white boxes behind them.
Is there something I did wrong? And if so how would I fix it? xd

Cool template, and thanks in advance.

Galvit
212 posts
Joined December 2015
Topic Starter
Galvit

Cruxial wrote:

Yo, whenever I export selection-mode and menu-back, it shows up with white boxes behind them.
Is there something I did wrong? And if so how would I fix it? xd
Did you use this method?

To export go to Edit > Preferences > Plugins and tick Enable Generator after that go to File > Generate > Image Assets, it will start saving everything to ...\template skin\!SongSelection-assets (it’s real time so every change will be saved) to disable it go to File > Generate > Image Assets.
Cruxial
17 posts
Joined September 2018
Cruxial

Galvit wrote:

Cruxial wrote:

Yo, whenever I export selection-mode and menu-back, it shows up with white boxes behind them.
Is there something I did wrong? And if so how would I fix it? xd
Did you use this method?

To export go to Edit > Preferences > Plugins and tick Enable Generator after that go to File > Generate > Image Assets, it will start saving everything to ...\template skin\!SongSelection-assets (it’s real time so every change will be saved) to disable it go to File > Generate > Image Assets.
I did.
ElectircRex
1 post
Joined March 2021
ElectircRex
Is there any other software than Adobe software that i could use
TKieen
46 posts
Joined June 2018
TKieen

ElectircRex wrote:

Is there any other software than Adobe software that i could use
there's Figma
Desertgemini
1 post
Joined October 2020
Desertgemini

Zelzatter Zero wrote:

Mop The Tea wrote:

its an osk file for me, how can i change that? it wont open for me
.osk is a file extension for skins in osu...
you need to get winrar and there is a tutorial on making skins and it should work
Fyslixus
1 post
Joined December 2018
Fyslixus
Hi, when I change the contents of the menu-button-background smart object, it doesn't get updated in the artboard. How can I fix this? I've already tried Layer > Smart Objects > Update Modified Content, but it doesn't work.
Thanks!
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit

Fyslixus wrote:

Hi, when I change the contents of the menu-button-background smart object, it doesn't get updated in the artboard. How can I fix this? I've already tried Layer > Smart Objects > Update Modified Content, but it doesn't work.
Thanks!
You have to save (ctrl+s) changes in that smart object.
Content Spy
2 posts
Joined March 2018
Content Spy
hey is it possible to edit it using paint.net? or is there any other free program I could use since I don't have photoshop
Galvit
212 posts
Joined December 2015
Topic Starter
Galvit

Content Spy wrote:

hey is it possible to edit it using paint.net? or is there any other free program I could use since I don't have photoshop
You can edit images that are inside with paint.net.
Darius3
16 posts
Joined April 2011
Darius3
Yo! I made something in the template skin in photoshop

but when I check the generated Assets file, it looks like this!

The gradient looks differently.
Any ideas why?

UPD Ok it seems that the output file looks like the effect preview in photoshop but looks differently from the image in the editor, I made it looks like I want eventually.
Last edited by Darius3 , edited 1 time in total.
Please sign in to reply.

New reply

0
1 / 46