Team Select Screen

From experiencing CS:GO's various different team selection screens, and with Valorant not having one, I chose to create one inspired by CS:GO's earliest team selection screen. This took up the entire screen, and was split into two halves, Counter-Terrorist, and Terrorist. Later team selection screens in CS:GO turned these into boxes, and then 3D models with the logos behind them, which is nice, but not as cool as the fullscreen one in my opinion.

My first attempt at this went alright. I decided to use a gradient to highlight the images as well as making them lighter so fit with the overall UI theme.

However, it was apparent that it didn't show all the information that it needed to, and looked quite bland and, funnily enough, big. I redesigned it and achieved this:

I then did some research on greyscaling images, and found the Desaturation node, where I put the RGB value of the Texture Sample I used for the T and CT images into it, and a scalar value into the Fraction input, looking like this:

A value of 1 is full greyscaled, and 0 is full colour, so in my Team Select Widget Blueprint, I just had to lerp the Saturation value from 0 to 1 when hovering over the button. I first had to apply a dynamic material to the image first though, something I've never done before.

I then animated the Saturation scalar value like so:

I also moved the Random and Spectate buttons up to make them easier to access, and added a Cancel button which will only show when trying to change team from within a game mode that enables it (like casual or deathmatch), and now it looks like this: