top of page

Main Menu Tab Styling

  • 50541507
  • Mar 18, 2022
  • 1 min read

I decided to take heavy influence from CS:GO's menu styling for the main menu, as that's not only the target audience, but also the best looking in my opinion. After playing CS:GO and Valorant to get a feel for both of their interfaces, CS:GO's feels a lot like glass, in that it's delicate and looks like it could shatter at any moment, something that I personally really like as it's a hard feel to pull off. Valorant's however is like a lump of clay, satisfying, but ultimately not as delicate or precise as the glass, it doesn't have a "fine-tuned" feel to it.


The main thing I got from CS:GO is the lines under the tabs' text. These appear when hovering over the tab, and get bigger when they're clicked on. I decided to do something very similar to this, but also add a gradient, because I feel also CS:GO's UI is very fragile and specific, it is a bit too fragile and specific, so adding gradients will reinforce it somewhat. I do want my own UI to have a glass feel to it also though.

I made the gradients with a material, utilising a "LinearGradient" node and putting that into a Lerp node with the colours for the A and B inputs, which then goes into the final node which has the Material Domain of "User Interface" and the Blend Mode of "Additive", which makes the darker areas more transparent.


 
 
 

Comments


bottom of page