Figma Game UI - Baldur's Gate 3 Game UI Tutorial

hey guys today we're going to be slowing down the pace a little bit and taking a look at one of the videos I released earlier on this year which was a speed build for the boulder Gate 3 button and it was uh yeah it was quite quite a cool build and I recently sort of felt like yeah I needed to release a longer form version of it just so it' be a little bit more helpful so we'll jump straight into it so essentially we just need to create the ornate decoration for the yeah the outside of the button now it's sort of loosely based on you know sort of Celtic knots and you know that sort of aesthetic that you'd kind of typically get in RPGs where it's you know this constant knot or um you know like you get it a lot with uh dwarf rings and stuff like that or Viking types of games where you've got this geometric design that follows around the the outer button or panel or or whatever it may be so just getting that down first felt like the most essential step to capture the essence of the uh the style here we're just going to hop into it and yeah I'll just outline outline the stroke and then essentially what we need to do is we need to break up the design a little bit so I'm just going to create this uh object and then essentially just subtract it from what we've got it's a little bit fiddly at the moment because the yeah the width of the object you know the the little Center bits where the shapes overlap are not like full pixels they're sort of like half pixels and stuff so it's a little bit manual but um yeah we get there anyway so we're just going to subtract this and you'll notice that yeah obviously we've just brok Bren up the knot which kind of gives it like a nice a nice look so at this point instead of you know creating the same decoration all the way around yeah we just need to flip and mirror it you know copy and paste in that type of thing and then we'll merge it all together when both sides are merge together we're going to merge these two together and then essentially join the elements cool and the best uh thing to do is probably just to flatten this now so that's essentially the the outer detailing done and then we'll probably just focus on that um middle main button now [Music] so using the inner Shadow here we're essentially creating like that Inner Glow effect you can sort of see it on the uh the you can see it on the reference there it's um it's creating like a highlight Ridge that sort of makes it feel like it's a a 3D button and doing the same again for the bottom and now this would actually be the uh the inner Shadow here the top would be the Inner Glow and the bottom would be the inner Shadow I'd [Music] say yeah so we probably just need to create that little step you know where the the light sort of rolls over the button and then it sort of catches Midway so we're just going to use two gradient Stoppers here just the values and obviously had a little bit of a highlight there there it is and then get these as close as possible there a little bit of you know sort of slow tweaking and refining going on and you know that's that's a likely scenario really when you're trying to figure out or find the uh the best best solution really [Music] so to create that little highlight yeah I actually chose to use an inner Shadow but just place it underneath the darker inner Shadow and that creates um yeah just that little step Where the Light reaches it sort of like let's say sharpest point before yeah it drops off completely to the um that shadow there and this just sort of reinforces the 3d effect [Music] really and I'm doing the same again for the top [Music] bit as you can see yeah it's when you've got in a shadow in a shadow in a shadow in Shadow it's like yeah it can get a little bit confusing which which one is the inner Shadow so um yeah it's something to look out for this could easily also be achieved if we decided to use like a rectangle for the you know that thin highlight it might be a cleaner way of doing it that way to be honest so it might be something to consider so now just to bring it sort of close to to the uh design my reference in I'm just going to sample some of the uh the colors here [Music] we're getting somewhat closer this is the part where it starts to come to life we're going to use a gradient and we're just going to try and capture that sort of like hot point on the button where it's radiating red so it's a really sort of it's a common sort of style for these RPG buttons and yeah for good reason too like it just it really helps sort of focus your attention from the edges of the button but you know into the into the words that are on the button just creates that hot point yeah it's looking quite nice already this effect could also be easily achieved if um when we started the video if uh instead of using inner shadows and stuff like that we just use rectangles like I mentioned with the the thin sort of highlight and that would probably yeah add a little bit more clarity to what's actually going on and then you could you know mask the button essentially you could mask all the elements inside so it be nice and tidy but um yeah the benefit of doing that would be You' have a different canvas hierarchy where you've got these you know highlights and shadows and stuff like that um as you can sort of see the canvas hierarchy this is all happening on one object so yeah I think my intention is to kind of see how close we can get without having a really bloated hierarchy stack instead we've got a really bloated um effect stack but uh but yeah it just goes to show you know there's there's many ways you can um yeah achieve this button not necessarily just bloated hierarchy or a text and stuff like that but maybe a combination yeah I'm quite pleased with [Music] that so I'm essentially duplicating this base and this is going to be the texture and I'm going to use my favorite te uh plugin which is the noise and texture plugin it's really cool um I think I say this in quite a lot of my videos but um what it does for you is yeah just really powerful and yeah you can like change it on the fly as well so at this point I'm just trying to yeah get something that's going to add a little bit like more variation to the buttons and we're just yeah just wiggling the options here playing with the blend modes it's just really cool that after you've done it you can export the um textures as well is so useful obviously because we duplicated it we just need to clear that um stack there it's looking really nice [Music] and at this point I'm just trying to yeah see what we can do like stack more noise on it just to make it look a little bit more worn [Music] and because we don't really have the identical texture that they're using we're sort of just trying to get something relatively close and taking a look at the texture they're using there you know it's quite obvious that they're using some sort of like dirt that you would get on glass you know that type of thing and the um material was sort of replicating here is clearly some sort of you know precious stone some type of diamond or glass type of thing and typically you would get scratches and like mck and you know that type of thing on there so yeah it's just just trying to match that really and also just trying to think about those types of properties that you'd end up getting on that material so yeah dust scratches and those types of things they're all good definitely worth considering so it doesn't have to be a onetoone match or anything so obviously just using a few uh effects and gradients and things like that we're going to create that sort of that harsh step halfway through as well and that's going to give it that proper 3d effect and already like this button just it pretty much looks finished doesn't it looks really tidy it's such a simple button and a lot of the uh the difficulty in these types of buttons is just coming up with the design in the first place and fortunately for us you know we're using this this as a reference so we don't really need to you know iterate too much on what the styling's like we just need to match it as closely as [Music] [Music] possible just going for the classic tragan Pro for this [Music] it's a pretty close match there some similarities there yeah I just want that point where the two gradients and me a little bit tighter than they currently are just create that harder glass edge you know yeah I'd like to create some sort of highlight at the top just so it catches the light a little bit if that's possible [Music] because we're like you know over pixels you know we've got to be really sort of like precise with with what we want so just dialing that and tweaking it remove the blur probably so it's a harder step or at least lower it just create like a nice [Music] highlight just going to lift it off from the background a little bit with a nice [Music] shadow yeah it's looking good and so just to go back to what I said earlier about the uh different textures and stuff like that these are just some textures that I had I created them in um substance designer um so I'm just going to use them and these are going to bring a little bit more grunge and variation to the to the overall effect really but you could use anything sort of see it's not a onetoone match but um you know it's it's the same it's capturing the same essence which is really nice and then just I've just brought in a a random texture that I think I used in yeah a previous project and this is just going to bring that little bit of that scratchy effect you know that you would sort of get with glass just making sure that we yeah fit it to the [Music] [Music] object yeah it's really starting to look good [Music] so yeah just tweaking the text [Music] here [Music] just adding a little bit of a drop shadow there we go it just lifts it from the background which is nice there we go guys so that's essentially the button and I think it's looking pretty cool hopefully you know you give it a try so if you haven't already please like And subscribe and I'll see you in the next video cheers guys

Channel: Warren Winters

Views: 374

Keywords: Baldurs Gate 3 Game UI, Baldurs Gate 3 Game User Interface, Baldurs Gate 3 Game games user interface, figma game ui, figma user interface art, game ui, game ui art, how to create game user interface, mobile game ui, mobile game ui figma, ui art, user interface game ui, figma ui

Id: nTdxRU7a9WU

Length: 18min 25sec (1105 seconds)

Published: Mon Nov 13 2023