forum

Template skin [3/Sep/2020]

posted
Total Posts
20
Topic Starter
Galvit

Whats New


Figma template for song selection.


  • 03/09/2020
  1. Figma song selection template
  2. minor touch-ups

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

    16/07/2020
  5. Photoshop gameplay template added

    25/06/2020
  6. Photoshop ranking panel template

    14/06/2020
  7. Photoshop song selection template

    20/03/2020
  8. redesigned selection-mode
  9. added SD elements

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

    14/07/2019
  11. added numbers

    18/06/2019
  12. 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 need to edit smart objects placed at eponymous artboards.

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?


Select all artboards that aren't red and right click any selected layer (in regard to mods, select each one and proceed in the same way), select export as PNG and chose where to save, save. You can also save each artboard individually. Before saving mode-osu@2x, change it's opacity to 100%.

Screenshots


NeXt4r_
Can the mod please pin this or something? so we don't need countless thread about filling the song selection.
Topic Starter
Galvit
The big update is up, would love to know what you guys think about new Photoshop templates.
SankaHorton
Спасибо, за такой апдейт.
- 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?
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.
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
its an osk file for me, how can i change that? it wont open for me
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...
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
Jarno
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!!!
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
Jarno

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!
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

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.
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

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.
gesmir

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
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!
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.
Please sign in to reply.

New reply