Good Morning, Good afternoon, and Good
evening. Depending on where you are around the globe while you watch this.
Today’s video is a tutorial on how to make buttons and UI Elements for your
games. Buttons are often overlooked, but they can give menus and pop-ups a
consistent style that can make your games look just that little bit better.
In this video, we’ll be going over some basic buttons, industrial
buttons, and some wooden buttons. The first we’ll be making are some basic
buttons and switches that can be used in menus, settings and those kinda things.
To begin, we’ll create a basic rectangle in whatever colour your outline colour is. It
doesn’t really matter what outline colour you use, as long as you make sure it's fairly dark.
Then, remove each corner pixel. This will mean that your button will have a rounder look,
and I think it gives it a nice feel. You don’t have to stop and one pixel either. If you
want, you can round the edges even more, depending on the style of your game. Here,
I’ve rounded the corners by two pixels. Now, select the bottom half of your outline and
copy it down by a couple of pixels. This means the button is more three-dimensional and actually has
some form. This side is what we’ll change to show what it looks like when the button is pressed, but
that’s for later. Fill the shapes in with whatever colour you want, but make sure you use a slightly
darker colour for the bottom side of the button, to show where the light is coming from.
Then let’s replace that middle line and show that it’s a corner with a highlight colour. This just
gives it a softer transition between the sides and makes it more like a corner. Now you can add
your text. For this example, I’m just putting the word ‘start’, but you can use whatever you want.
The button’s nearly done. Just add some shadows around the corners where it will get less light
and some highlights where it will get more light. To give it some more depth, you can get your
outline colour and change it to a slightly brighter colour for just the edges that will get
more light. This step is optional, but I think it gives the button a little bit more interest.
Finally, a shadow. This step is also optional, and it really depends on
where you’re using the button. Now we’re up to the fun part. The animation.
First copy and paste the button to another section of your page, or if you’re in a program
that has frames, duplicate the frame. Then all we’ve got to do is select that top surface of
the button and drag it down until the shaded side is only a couple pixels tall. This
is for when the user clicks the button, so we can show it being pressed down.
It’s really as simple as that. If you’ve got a shadow from your button, just make sure
you shorten the shadow on the second frame. And if we put the two frames together, we have
a very nice-looking button. To be really fancy, you can even add a frame where the button
is half pushed to smoothen the animation. Here’s what it looks like with
different amounts of in between frames. Now we can modify this button and make many
different variants for all different purposes. Ok so I went ahead and made a couple of
different variations of the basic button. These were all made in a similar way as the one we made
together, and they’re not that difficult to make. The first one is pretty much identical to the
original design, except that in its pressed state, it’s actually sunken into the surface a little
bit. It’s really up to preference of course, and there isn’t much difference between the two, but I
thought this version could be sort of interesting. The second UI element I made is a slider.
You see these sliders on iPhones and apple products all the time, so I thought it would
be cool to introduce it into a pixel style. This could be used for toggling on and off
settings or options in a game. I used some yellow and orange on the in-between frames
to transition from the green to the red. The other slider I made was for a setting with
more than two states. You see these sliders in the Minecraft options and plenty of other
games, so I decided to do my own take on it. The next element is pretty similar to the
first slider, just in the form of a button. I wanted to make it like a big circular on button
you’d find on a physical piece of technology. This fifth version is really close to the
original button I showed you how to make, just with a base at the bottom. Again, it’s
really up to preference here, but I think the solid base makes it feel a bit sturdier.
This button is an analogue switch, and you’ve probably seen one of these in
real life before. Like the first slider and the circular button, this one is intended
for two states, like a setting for on and off. Finally, a strange triangle button. I doubt
many people would use anything like this in an actual game, I just thought it would be fun to try
something a little different for the last button. I think those elements look pretty cool together,
but now it’s time to add in some unique styles. The next style of UI elements we’ll be making
is an industrial style. So, let’s get into it. Like the basic buttons, start with an outline
of the button, and another way to do this is to create two rectangles first, and then round the
edges. Instead of the green we used last time, get a medium bluish grey colour to simulate
metal. Shade in the sides the same, with the side being darker than the top.
And we’ll do the same thing as we did last time for the corner, making it a light colour.
Except this time, for the next step, we’ll also add some lighter colours in the middle of that
line. As you get closer to the centre, make the colour closer to white. This is a technique we
can use on materials like metal, which are shiny. Now before we add the text, something I like to
do is make some diagonal lines with a lighter shade on the top, but of course it’s up to you.
Now the text. Again, I’ve just put 'start', but you’ll put whatever the button is being used
for. The next step is to add the highlights and shadows. Don’t be afraid to go pretty extreme with
the highlights because the metal we’re trying to show is shiny and will reflect lots of light.
And I think we’re up to the optional stage of changing the outline colour. Next, here’s
a really easy trick that I think makes the buttons look a lot more industrial. By
placing a single dark pixel at each corner, you can represent rivets or screws. I think
this is a nice touch, but it’s optional. Finally a shadow, and our
industrial button is done. To animate, it’s the same process
as the basic button, just copying the button and moving the top surface down.
There’s our industrial button. I think that looks pretty cool. Like the basic button, I
went ahead and made some different variations. So the first button here is the
same as the first basic button, not anything really exciting with that,
except that I changed the material to a metal. The second button is a little different. I knew
I wanted a big red button, so I drew it with a base and added some warning stripes to the side.
This next element is a switch, and it’s similar to the switch on the basic button, but in metal.
I made the same switch again because I thought it fit really well in the industrial theme.
The next button is a large metal button with a sturdy base. Again, I
implemented in some warning stripes. This button is just a metal circular
button, simple but effective. Now we have a different kind of switch, in
fact it’s more like a lever. This would be used for toggling on and off settings.
Here’s an interesting one. This button is hidden inside some metal doors. I made
this with the idea in mind that the doors would open when the user hovers over the button
with their mouse, and that the button would be pressed when the user clicks it.
And finally, a slider in metal. I think there’s a lot of space for some
really cool buttons in the industrial style, and that they could make a dystopian
or sci-fi game menu really unique. The next style we’ll be doing is wooden.
Ok so to begin, lets draw those two rectangles again. Because this is a slab of
wood, we won’t make it as tall. Then like the other two, round the edges, but not too much.
Let’s fill in both areas with a brown wood colour, making that bottom half darker. Now to really
reinforce the idea that this is a piece of wood, we need to add some details. The first is create
some groves in the wood. To do this, create a brick pattern in a darker shade, then remove all
the intersecting pixels. Another detail we want to add are some screws to the edges, just like we
did with the rivets in the industrial buttons. Then , it’s just a matter of creating
some highlights and shadows. We also want to change that outline colour slightly.
Now you can add your text. And something I like to do with the text is to get a darker shade and
draw at the top of the letters to try and show that it has been carved out of the wood.
Finally, the shadow to finish it. So, there’s our wooden button. Just like
the other two, I made some variations. The first button is very close
to the one we made together, just that it goes into the surface a bit more.
There isn’t really anything special about this next button either, but I am just really happy
with how it turned out. This was the first time I introduced metal, because I thought wood
might not look great if it was everywhere. Next, we have a pretty standard
button with a large base, again using some metal, this time on the corners.
For the fourth button, I did something a little different. I made it into a dial, which I assumed
would turn when people clicked it. I don’t really see this as being very useful though, because
it’s sort of unclear what stage it’s on. I got really fancy with this fifth button, and
I don’t think I’d ever use it for anything, but it was interesting to make at least.
Here I made some chains, because I imagined this button to be hanging off the bottom of a menu.
And finally, we have a slider again, but this time I put a big wooden knob on the top. And
that just about wraps up the wooden buttons. We did it. There’s our three
different themes of buttons, and I think they all turned out ok, but what’s
the point of a button if it doesn’t do anything? Well to fix that, I made some menus so we
can see the buttons in their correct place. Very cool.
Hopefully, you learnt something today or at least found the video interesting. Thanks
for watching and I’ll see you in the next video.
