Button variations

Create 2D Video Game Art with Inkscape Create 2D video game art with Inkscape
17 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$49.99
List Price:  $69.99
You save:  $20
€47.46
List Price:  €66.45
You save:  €18.98
£39.51
List Price:  £55.32
You save:  £15.80
CA$70.02
List Price:  CA$98.04
You save:  CA$28.01
A$76.94
List Price:  A$107.72
You save:  A$30.78
S$67.20
List Price:  S$94.09
You save:  S$26.88
HK$389.03
List Price:  HK$544.68
You save:  HK$155.64
CHF 44.22
List Price:  CHF 61.92
You save:  CHF 17.69
NOK kr553.39
List Price:  NOK kr774.79
You save:  NOK kr221.40
DKK kr354.03
List Price:  DKK kr495.67
You save:  DKK kr141.64
NZ$84.87
List Price:  NZ$118.82
You save:  NZ$33.95
د.إ183.61
List Price:  د.إ257.07
You save:  د.إ73.46
৳5,956.37
List Price:  ৳8,339.40
You save:  ৳2,383.02
₹4,224.20
List Price:  ₹5,914.23
You save:  ₹1,690.02
RM222.30
List Price:  RM311.24
You save:  RM88.94
₦84,340.62
List Price:  ₦118,083.62
You save:  ₦33,743
₨13,850.18
List Price:  ₨19,391.36
You save:  ₨5,541.18
฿1,721.45
List Price:  ฿2,410.17
You save:  ฿688.72
₺1,731.12
List Price:  ₺2,423.71
You save:  ₺692.59
B$299.09
List Price:  B$418.75
You save:  B$119.66
R909.26
List Price:  R1,273.04
You save:  R363.77
Лв92.76
List Price:  Лв129.87
You save:  Лв37.11
₩69,804.67
List Price:  ₩97,732.12
You save:  ₩27,927.45
₪182.52
List Price:  ₪255.55
You save:  ₪73.02
₱2,935.98
List Price:  ₱4,110.61
You save:  ₱1,174.63
¥7,592.73
List Price:  ¥10,630.43
You save:  ¥3,037.70
MX$1,012.85
List Price:  MX$1,418.07
You save:  MX$405.22
QR181.67
List Price:  QR254.36
You save:  QR72.68
P680.94
List Price:  P953.37
You save:  P272.43
KSh6,473.70
List Price:  KSh9,063.70
You save:  KSh2,590
E£2,484.78
List Price:  E£3,478.89
You save:  E£994.11
ብር6,300.31
List Price:  ብር8,820.94
You save:  ብር2,520.62
Kz45,539.99
List Price:  Kz63,759.63
You save:  Kz18,219.64
CLP$48,857.72
List Price:  CLP$68,404.72
You save:  CLP$19,547
CN¥362.50
List Price:  CN¥507.53
You save:  CN¥145.03
RD$3,004.64
List Price:  RD$4,206.74
You save:  RD$1,202.09
DA6,679
List Price:  DA9,351.13
You save:  DA2,672.13
FJ$113.46
List Price:  FJ$158.85
You save:  FJ$45.39
Q384.56
List Price:  Q538.41
You save:  Q153.85
GY$10,428.44
List Price:  GY$14,600.65
You save:  GY$4,172.21
ISK kr6,868.12
List Price:  ISK kr9,615.92
You save:  ISK kr2,747.80
DH499.43
List Price:  DH699.24
You save:  DH199.81
L915.32
List Price:  L1,281.52
You save:  L366.20
ден2,917.02
List Price:  ден4,084.06
You save:  ден1,167.04
MOP$399.43
List Price:  MOP$559.24
You save:  MOP$159.80
N$904.34
List Price:  N$1,266.15
You save:  N$361.80
C$1,834.22
List Price:  C$2,568.06
You save:  C$733.83
रु6,733.81
List Price:  रु9,427.87
You save:  रु2,694.06
S/187.60
List Price:  S/262.66
You save:  S/75.05
K200.98
List Price:  K281.39
You save:  K80.41
SAR187.78
List Price:  SAR262.91
You save:  SAR75.12
ZK1,359.51
List Price:  ZK1,903.42
You save:  ZK543.91
L236.20
List Price:  L330.70
You save:  L94.50
Kč1,199.49
List Price:  Kč1,679.39
You save:  Kč479.89
Ft19,679.45
List Price:  Ft27,552.80
You save:  Ft7,873.35
SEK kr546.91
List Price:  SEK kr765.72
You save:  SEK kr218.80
ARS$50,389.68
List Price:  ARS$70,549.59
You save:  ARS$20,159.90
Bs344.45
List Price:  Bs482.26
You save:  Bs137.81
COP$219,921.39
List Price:  COP$307,907.55
You save:  COP$87,986.15
₡25,458.51
List Price:  ₡35,643.95
You save:  ₡10,185.44
L1,260.66
List Price:  L1,765.02
You save:  L504.36
₲389,612.59
List Price:  ₲545,488.80
You save:  ₲155,876.21
$U2,141.18
List Price:  $U2,997.83
You save:  $U856.64
zł204.49
List Price:  zł286.31
You save:  zł81.81
Already have an account? Log In

Transcript

So in the previous lessons, we were talking about the text tool, how to create simple flat buttons, how to make a bit of 3d effect and button states. And this is all important for your game. But graphically what is important is the setting the mood I was talking about, and I will talk about a lot about the setting the mood of your game. So if it's a cyber science fiction, robot, whatever team game then obviously you cannot have fluffy pink buttons. And also, if it's a fantasy setting, you cannot have cyber buttons with shiny metal plates and you know, digital letters and stuff like this. So when graphically you work on your game, you have to set the mood, and buttons help a lot with that.

So now I will create different type of buttons. Just A very, very simple one that can fit to your game. And you will have a basic idea of how we are developing buttons in Inkscape. It is basically the same as we are drawing bit more complex objects. So what we did before with the bomb is that we create a group of objects. And now we also add on text.

So I will first make button for cute, funny game. I make it overly rounded. To make it friendly, I make it with object to path I make this into path and basically make it like jelly bean if I would make several of these buttons so I would make a menu what I would do is slightly modify all of the buttons. So if I would put a few under each other on the screen I would make each tiny tiny bit modification I would make each unique. So I would have different shapes and obviously I would pick a color which is very very funny and happy. And now it will be this pink.

Inside I put another object line I can keep it like this sharp I can blurt it depends on what I want to achieve. Now it looks a bit like candy if I blurred it. I need my text to just copy from here. And obviously, I have to change the font. So it's matching the game I have. And for this game, if it's this funny, I would go you can go with the arrow keys, also in between the phones.

So now what I do, I just go up and down and I look for the phone. This time it's gonna be something also looking soft and gummy on the edges. What I can do, I can give it a stroke pain which can be wide this time. And the inner pain can be a different color. So I can I can play with it. Try different colors try different styles.

I can make it white and I can make the stroke this pink, good and a bit thicker stroke. If not, then I can give it a shot. Oh. And one more thing I use the freehand tool. I just Ctrl l can modify and simplify the shape if it's not working. Then just delete the nose.

You don't need Get this you see in a second what am I doing these I make another shiny part on the top. So for example like this, I have a very simple button which is looking like rubber. And now that I set the mood with one, I can copy the same thing I can even play around and modify more as you see Just to make them a bit different can duplicate my text and I can odd, the same color my object and create the same effect. I can even check how much blurrier than this one 7.8 I can see here beat down sunshine is about. So that's it. I can do the same with the with the last one.

I'm just working very fast here because I want to keep the lesson short and show you other things you can do. Let's see it. So I have a course I have to change the text and everything. But I have three buttons which are looking different and they have the same style of looking like candy or something like that. So it's very good for a friendly girly game. is a bit different.

If I want to create a game with a bit technical and sharp, I can create or like science fiction. I create a button with edges. So I create I remove the rounded edges I use a different color setting I make it grayish. Here in the gradient with the gradient we are talking about it you can edit the gradient and add stops. With the Add stops function. You can have not just one but several color in your gradient.

Why is it good for because I can make stuff like this So I can select these nodes and make a bit darker and that's what I want to have. It looks like a metal bar. And now I can use this type of text again, if it's like this can be a bit more aggressive font. So this one is quite okay. Obviously the dark is this dark. The brighter part is this very bright one.

And the very dark part is like this one. So it is like a shadow. And now I have a very simple button and it works for I group this up. It works for a science fiction or game or something like that. And it's up to you what you create for it. What I say is it's good to do two things when you are looking for a new type of button.

You can look up Pinterest for example, for game user interface designs, and check different button styles and how other graphic designers are doing the same task. The other thing you can do is Oh, I can make it or engine stand out. Yes. The other thing you can do is look at real things. So you can you can take a look at how this is very cheesy. You can take a look at her how buttons really look in real life.

So how would they look on the remote controlling your car around you how they look in real light, and then you will see the difference what makes a button standing out and popping out from a button just being there being flat, but it's really up to you what you want to create. So this is a friendly cute button. This is more for serious type of game. These are flat ones. And there is one more I want to create. And that is if we have, let's say a fantasy related game, we can create a button which is wood.

I can use you use the freehand tool. I'll show you what I'm doing. duplicate this one intersection I made this video With the free hand I made a very easy pattern for wood in between. Yes, it is rude it can be it can have a thickness. So it is a bit like the other button we did in the beginning Up to me how I want how visible I want this one on the ruler. Okay.

I want to create like it's a bit of plank which is old and torn. To make the time to use this tool, the Bezier tool, create some cutout parts. That's very nice. You see it makes a bit older rude. And now I copy the text from here is the same metal that you're doing. I look for a font family, which is more fitting the environment I'm looking for.

So it has to be something this would be a nice form for the fluffy butter. So I'm looking for something which could be good for a fantasy related game. And a bit more serious. Okay, for example, this one is good. This is a Viking theme themed font. And that's it.

And I can do the same trick with this one as I did with the previous ones. So I can make the lighter part and I can make a doc apart So as you see, just created in a short period of time three very different type of buttons or three very different type of games. I will give the source code obviously, or the source file for these buttons so you can modify the text and create your own from these anything you want. And I hope you learned also how I created this and once more if you want to create your own look up how the designers are doing it and look for real life examples and sketch it and then draw it here in Inkscape. Now, we will move on to a bit more exciting stuff, how to create platforms for To the platform games, and then for creating backgrounds and finally creating characters

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.