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