Design the knight character in Inkscape - Part 1

2D Game Character Animation With DragonBones and Inkscape 2D game character animation with DragonBones and Inkscape
11 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€65.44
List Price:  €93.49
You save:  €28.05
£56.04
List Price:  £80.06
You save:  £24.02
CA$95.74
List Price:  CA$136.79
You save:  CA$41.04
A$107.11
List Price:  A$153.03
You save:  A$45.91
S$95.36
List Price:  S$136.24
You save:  S$40.87
HK$547.90
List Price:  HK$782.75
You save:  HK$234.85
CHF 64.03
List Price:  CHF 91.47
You save:  CHF 27.44
NOK kr772.60
List Price:  NOK kr1,103.76
You save:  NOK kr331.16
DKK kr487.88
List Price:  DKK kr697.01
You save:  DKK kr209.12
NZ$117.84
List Price:  NZ$168.36
You save:  NZ$50.51
د.إ257.06
List Price:  د.إ367.25
You save:  د.إ110.18
৳7,700.43
List Price:  ৳11,001.09
You save:  ৳3,300.65
₹5,837.33
List Price:  ₹8,339.41
You save:  ₹2,502.07
RM333.81
List Price:  RM476.90
You save:  RM143.08
₦92,489.99
List Price:  ₦132,134.22
You save:  ₦39,644.23
₨19,474.37
List Price:  ₨27,821.72
You save:  ₨8,347.35
฿2,588.61
List Price:  ฿3,698.17
You save:  ฿1,109.56
₺2,275.23
List Price:  ₺3,250.47
You save:  ₺975.23
B$358.08
List Price:  B$511.57
You save:  B$153.48
R1,312.98
List Price:  R1,875.77
You save:  R562.78
Лв127.91
List Price:  Лв182.73
You save:  Лв54.82
₩96,452.39
List Price:  ₩137,795.03
You save:  ₩41,342.64
₪267.73
List Price:  ₪382.49
You save:  ₪114.75
₱4,034.64
List Price:  ₱5,764.02
You save:  ₱1,729.38
¥11,065.06
List Price:  ¥15,807.91
You save:  ¥4,742.85
MX$1,201.03
List Price:  MX$1,715.83
You save:  MX$514.80
QR255.05
List Price:  QR364.38
You save:  QR109.32
P965.79
List Price:  P1,379.76
You save:  P413.97
KSh9,296.24
List Price:  KSh13,280.92
You save:  KSh3,984.67
E£3,349.82
List Price:  E£4,785.67
You save:  E£1,435.84
ብር3,985.10
List Price:  ብር5,693.24
You save:  ብር1,708.14
Kz58,375.85
List Price:  Kz83,397.65
You save:  Kz25,021.80
CLP$66,375.71
List Price:  CLP$94,826.51
You save:  CLP$28,450.80
CN¥507.11
List Price:  CN¥724.48
You save:  CN¥217.36
RD$4,113.13
List Price:  RD$5,876.15
You save:  RD$1,763.02
DA9,392.53
List Price:  DA13,418.47
You save:  DA4,025.94
FJ$158.35
List Price:  FJ$226.22
You save:  FJ$67.87
Q544.06
List Price:  Q777.27
You save:  Q233.20
GY$14,678.83
List Price:  GY$20,970.66
You save:  GY$6,291.82
ISK kr9,837.79
List Price:  ISK kr14,054.59
You save:  ISK kr4,216.80
DH708.72
List Price:  DH1,012.51
You save:  DH303.78
L1,246.75
List Price:  L1,781.16
You save:  L534.40
ден4,025.16
List Price:  ден5,750.48
You save:  ден1,725.31
MOP$565.76
List Price:  MOP$808.27
You save:  MOP$242.50
N$1,340.22
List Price:  N$1,914.68
You save:  N$574.46
C$2,582.07
List Price:  C$3,688.83
You save:  C$1,106.76
रु9,353.99
List Price:  रु13,363.42
You save:  रु4,009.42
S/263.57
List Price:  S/376.55
You save:  S/112.97
K270.82
List Price:  K386.91
You save:  K116.08
SAR262.50
List Price:  SAR375.01
You save:  SAR112.51
ZK1,859.31
List Price:  ZK2,656.27
You save:  ZK796.96
L325.94
List Price:  L465.65
You save:  L139.71
Kč1,644.39
List Price:  Kč2,349.23
You save:  Kč704.84
Ft25,720.62
List Price:  Ft36,745.32
You save:  Ft11,024.70
SEK kr762.14
List Price:  SEK kr1,088.81
You save:  SEK kr326.67
ARS$61,174.36
List Price:  ARS$87,395.69
You save:  ARS$26,221.33
Bs486.59
List Price:  Bs695.16
You save:  Bs208.56
COP$277,528.94
List Price:  COP$396,486.91
You save:  COP$118,957.97
₡35,172.98
List Price:  ₡50,249.28
You save:  ₡15,076.29
L1,732.56
List Price:  L2,475.19
You save:  L742.63
₲520,857.74
List Price:  ₲744,114.38
You save:  ₲223,256.64
$U2,703.34
List Price:  $U3,862.08
You save:  $U1,158.74
zł282.38
List Price:  zł403.41
You save:  zł121.03
Already have an account? Log In

Transcript

As I said in the intro, this course is not about designing a character but drawing a character and then animate it. I will focus mostly on the animation. But before that, we need a character. So I will draw a simple night together with you. And we can animate it later on, I will show you how to export it, how to build it appropriately, so it will be a perfect fit to animate it in Dragon bones. When I set up my Inkscape, and I open it, I go to File, document properties.

And make sure that the page border is not shown. I don't like it, I don't need it. Now. I can draw anywhere I want. So just turn that off. The first thing I draw when I know what I want to draw, so I went through the process and figured out my character and what is his motivation and how I want to do it.

The first thing I do, I usually draw a very simple shape. It can be any color, it can be orange, it can be yellow, whatever. I draw the corrector very simple shapes just to get the proportions. So in this time, it's gonna be a little night. It's gonna be a sweet cartoon like characters gonna be a friendly night gonna be our hero for let's say a mobile game. So it's going to be tiny with a big head.

This is a proportion good for children and mobile games. And that's it a big square head tinier body and it's gonna have arms and legs, very small was enjoy in sport. When I have my little corruptor build, I think about the size, size matters and size doesn't matter. It matters because there are different devices, different screens, mobile devices, etc. Where you want to know what size your corrector has to be. This case, I will aim for 250 by 250 Square I will take care that my corruptor feet that size So I will scale it up, scale it down for whatever I need to fit 250 by 250.

Give them to be 250 by 250 if it's too small, and scale it up. If it's too big, I scaled it down. And that's it. And the rest of the animation will be designed in this size. The other thing is why it doesn't matter is because it's vector. It's so easy to scale up and scale down.

You did your whole drawing in a bad size, it's too big. just scale it down. It's too big, too small, just scale it up. Take care only about one thing when you scale do it proportionally. And the only thing you can do you have to do is click this little lock here. So the width is going with the height That's it.

No other trick. Okay, so this is what I drew. And I like the proportion so let's draw the helmet can be a bit wider. I go to path, object to path, control click. I turn all the edges into curves and then I set it so it's curvy and not have and doesn't have it doesn't have a very sharp edge. With these, I make sure that my characters friendly pink about buttons online friendly buttons are the rounded ones.

So okay, this is the more or less it's a typical bucket or not I would say okay, if this is the helmet Let's give it a lighter bluish color. Shift Ctrl S I opened the Fill and Stroke window where I set the colors and I go lighter color more gray. Okay, because he's wearing a Full Metal Gear a full metal arm or it could be just gray, but I want a colorful game so I'm making blue which at least alright if this is the helmet, I can add a visor which is justice. Square again, object to path. Control click these two nodes so the front is a bit curved. Again this is the place where the knight is watching out of the armor.

I select these two nodes, put them together with these two can come in again. Okay? If you make it a different color, just so I see what I'm doing. Select these nodes again. I mean this plus sign, I insert another node and move out. This is usually how I draw So draw pencil, very easy.

Or an arrow for websites or something or icons it's great thing. All right, so far, so good. I select this circle which is going to be the hinge and with the shift control AI opened the line and distribute window and then aligned the middle of these two elements. I come through the control of the dublicate. Again they make a darker element not so dark. Okay now I have the hinge around the divisor so it can flip up and down already know I make the holes on it.

We'll talk through how I do that is I draw a simple line and I bend it. Again in the field and stroke window, I can set that it doesn't have a field but it has a stroke. And they want the stroke to be this dark blue. And they want the stroke style to be much bigger. So 26 it's up to you. It's up to you how big you are growing Yeah probably drew in a giant size.

You can always check the size of your character of what you're doing when you push one on the keyboard one is setting the zoom to 100%. Okay, so now if I check it it's already smaller. Okay, almost. About this is fine. This will be here in the front end applicated with Ctrl D put it here and I want to keep the same band. So I do that with the Double click I add nodes and delete the n nodes.

Once again, duplicate the whole and double click inside like here, here and I delete these nice shift control a again I opened on the line and distribute window and distribute these elements horizontally. So the distance is the same between them. What I also want to do is duplicate this and cut it half ways. no sorrow pain. I need to feel this time. I deprecated it.

Got it half ways just off the fence. Perfect, this will be a darker shadowy part of the visor. This one I colored the same as the helmet. Now, this is my shadow color, what they're gonna do color wise with descriptor, I leave this page up. What I want to do color wise with this corruptor is that I gonna use not many colors. So we're going to create the same few colors all the time.

So I have a very dark color, a light color and the medium color. This is what I can do now. I can select all of the elements of the wiser or not yet. I selected the base of divisor together with the circle, control D. Now with union, I push them together, Union and the page down Move them back. What I'm doing now is giving it a cartoon shade line around the corrector. So I'm holding Shift and picking this color.

Perfect. One more down. Okay, this is what we have. Now, as you look at it, it has a nice outline why I didn't do it like simply only giving it to this because this would happen because these doesn't have an outline, and they don't want a line going through. That's why I made another shape. Now I can select all of this Ctrl G, and I have divisor I can move this rotation point and already see how we're gonna move into animation and my character is running around.

Perfect. I add one more little light to micro doctor and maybe make it darker And use this as the lighter part I just seem to be deprecated and now I do the same. Select these two elements Ctrl G and I gave a stroke to this one. Now because nothing is covering this it has to be a lighter stroke. So if that one was 18 This one has to be like 10 almost it can be like nine and then it's the same line with everywhere. So this is the helmet now you get the colors and now we're gonna make the body and the rest of the little night

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.