GameBanana shows no ads to members. Sign up now!
Ads keep us online. Without them, we wouldn't exist. We don't have paywalls or sell mods - we never will. But every month we have large bills and running ads is our only way to cover them. Please consider unblocking us. Thank you from GameBanana <3

How to Make UI the Right Way

A Tutorial for Super Smash Bros. Ultimate

Here's a list of techniques I've compiled to get your UI looking as game accurate as possible. I would recommend also using BNTX with ARCropolis to avoid UI compression issues.

1. Your UI looks way more compressed than it should be

Make sure to delete any 0 alpha pixels before importing. This prevents excess color data, so the compression doesn't sacrifice as many colors.

Also, make sure your Compression Mode is set to Normal and that your mipmap count is 0 if you are using the PNG replacement method. No mipmaps should be generated at all for UI.



If it's a chara_4, I would copy paste a chara_4 from another character with a higher chara_4 file size like Lucas's and rename it, and then edit that file.

2. A white square is showing up behind your UI

This one is pretty difficult to notice at first, but can be found on all kinds of portraits and is most noticeable on darker stages.



It usually is fixed by reimporting with the Normal (Good Quality) setting mentioned earlier for PNG method users, and if it is not, you may want to use TexFactory or Photoshop to convert it, as this is a bug with the PNG import.

You can do this by selecting with the lowest tolerance possible on the background in a photo editor, but I just use paint.net for it. Photoshop also has a way of doing it, but I'm not sure how to go about it myself.



If all that still doesn't work, you'll need to delete any 0 alpha pixels before importing. If that still doesnt work, you'll need to use photoshop or have someone convert it for you, as this is a bug with the tool's PNG replace function.

3. Gamma fix causes color quality loss

Normally when creating character UI, you have to Gamma Fix the texture if you are using BC7_UNORM, but if you change it to BC7_SRGB when exporting, the Gamma Fix will not be needed and you can get a darker color palette without being destructive to the texture.

4. Your UI appears blurred ingame

Double check and make sure there is only one mipmap level. Also, make sure to only crop down once, as if you resize a portrait from a high resolution to a low resolution, and then resize that low resolution to an even lower resolution, it will cause some blur from the filtering.

5. chara_4 (Battle Portrait) creation

The first thing you'll want to do is to apply a drop shadow on your render. This is useful for recolors that were made from the website's renders rather than made directly from the originals and for model imports with unique renders. 

These settings may not be 100% accurate, but I think I got decently close. The opacity I know is correct however, so I wouldn't adjust it.



Once that's done, make a 224x224 canvas and crop your UI's image as you like.



This is because the max distance a battle portrait can go for all characters is 224x224. It is coded to forcefully crop off after this even if you make the dimensions bigger beyond 224x224, so I would avoid it hitting past that.

Now this is a part that a lot of people aren't aware of doing properly, specifically due to the triangular border and how it's cropped. Luckily, the game contains a mask that you can use to create these portraits without ugly jagged pixels getting in the way.



This was ripped directly from the game losslessly and was given a black background for use with Photoshop's layer masking tool, but it may work in other image editors. If you need just the white square, you can get it from \root\ui\layout\info\info_melee\info_melee\layout.arc
which you can open in Switch Toolbox. It'll be labelled com_player_mask^s in timg.

Paste/open your image in a new tab and use the layer mask option on the bottom right.



Unselect your Layer, and then click on the new mask like so:



Go to the channels tab and make the Layer Mask visible:



And then paste in the template as provided.



Once that's done, it'll be ready to export, but if you want to make certain objects stick out, like for example Mario's hand, you can brush over white on the spots you want to be visible.

 

Make sure to delete any 0 alpha pixels before importing. This prevents excess color data, so the compression doesn't sacrifice as many colors.

6. chara_1/chara_3 Creation (CSS Portrait & VS. Screen/Results Portrait)

Before you crop, apply a drop shadow with these settings. They shouldn't need any adjustments. This is useful for recolors that were made from the website's renders rather than made directly from the original chara files and for model imports with unique renders. 



I also heavily recommend you try to get the placements of recolors and texture edits as close as you can to the original. It's very jarring scrolling through the alt menu and having it jump up or to the side and just looks plain ugly. 

Keep downscaling and reversing your downscaling until you get to a 95 - 99% ish accuracy to avoid this.

7. Conclusion

congrats wow you did the thing good job you are good at this : ) ) ) ) yaaaaaaaaaay ! !! ! !
Sign up to access this!
  • zrksyd avatar
    zrksyd username pic Joined 4y ago
    Online
    9,852 points Ranked 661st
    22 medals 3 legendary 2 rare
    • 2017 Top Contributor Medal icon
    • 30 submissions featured Medal icon
    • Returned 5000 times Medal icon
    • 10 submissions featured Medal icon
    • Returned 1000 times Medal icon
    • Returned 100 times Medal icon
    7d
    In the example I would've moved Mario up so you can give an example of the hat sticking out of the portrait.
    Zarek avatar
    Mantra
    Zarek
    URL to post:
  • Miguel92398 avatar
    Miguel92398 username pic Joined 4y ago
    Offline
    20,449 points Ranked 269th
    29 medals 3 legendary 6 rare
    • 2017 Top Contributor Medal icon
    • 30 submissions featured Medal icon
    • 2019 Top Contributor Medal icon
    • 10 submissions featured Medal icon
    • Returned 1000 times Medal icon
    • Submitted 50 Skins Medal icon
    7d
    But isn't chara_4 depends on character poses?
    Why is this big?
    Don't DM me for stuff
    URL to post:

Embed

Share banner
Image URL
HTML embed code
BB embed code
Markdown embed code

Credits

Key Authors
Kalomaze
Kalomaze Joined 4y ago
BotW Manager Splatoon Manager SMO Manager
Offline
23,336 points Ranked 234th
42 medals 4 legendary 8 rare
  • 30 submissions featured Medal icon
  • 2017 Top Contributor Medal icon
  • Reached 100 subscribers Medal icon
  • 2019 Top Contributor Medal icon
  • Reached 50 subscribers Medal icon
  • Received thanks 50 times Medal icon
Wrote the guide
Special Thanks
ThatNintendoNerd
ThatNintendoNerd Joined 4y ago
SSBU Manager
Out of Order
17,179 points Ranked 339th
23 medals 2 legendary 4 rare
  • Returned 5000 times Medal icon
  • 2017 Top Contributor Medal icon
  • Returned 1000 times Medal icon
  • 10 submissions featured Medal icon
  • Achieved Game Manager clearance Medal icon
  • Reached 50 subscribers Medal icon
advice on chara_4 masking
Budsmith avatar
Budsmith username pic Joined 4y ago
Offline
769 points Ranked 43,216th
11 medals 1 rare
  • Returned 1000 times Medal icon
  • One month a member Medal icon
  • Returned 100 times Medal icon
  • 6 months a member Medal icon
  • 1 year a member Medal icon
  • 2 years a member Medal icon
Jaded Ridley's UI example + WIP mewtwo recolor render used for drop shading example
ultrakirbyfan100
ultrakirbyfan100 Joined 4y ago
Offline
1,512 points Ranked 22,233rd
10 medals 1 legendary 1 rare
  • Returned 5000 times Medal icon
  • Returned 1000 times Medal icon
  • One month a member Medal icon
  • Returned 100 times Medal icon
  • 6 months a member Medal icon
  • 1 year a member Medal icon
WIP Mewtwo recolor the render was based off of

Submitter

Kalomaze avatar
Kalomaze Joined 4y ago
BotW Manager Splatoon Manager SMO Manager
Offline
23,336 points Ranked 234th
42 medals 4 legendary 8 rare
  • 30 submissions featured Medal icon
  • 2017 Top Contributor Medal icon
  • Reached 100 subscribers Medal icon
  • 2019 Top Contributor Medal icon
  • Reached 50 subscribers Medal icon
  • Received thanks 50 times Medal icon
Kalomaze
Creator
Sign up to access this!
Sign up to access this!
Sign up to access this!

Game

Sign up to access this!

Category

Details

Difficulty Level
Intermediate

Attributes

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • Best of the Banana
    Featured on Sep 16 2020
  • Best of Yesterday
    Featured on Sep 15 2020
  • Today's Pick
    Featured on Sep 14 2020
  • 10
  • 2.3k
  • 4
  • 7d
  • 7d

More from Submitter

WiPs by Submitter

More Other/Misc Tutorials