Gradient and group

Create 2D Video Game Art with Inkscape Create 2D video game art with Inkscape
10 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
€46.64
List Price:  €65.30
You save:  €18.66
£39.89
List Price:  £55.85
You save:  £15.96
CA$68.25
List Price:  CA$95.55
You save:  CA$27.30
A$76.15
List Price:  A$106.62
You save:  A$30.46
S$67.98
List Price:  S$95.18
You save:  S$27.19
HK$391.26
List Price:  HK$547.80
You save:  HK$156.53
CHF 45.56
List Price:  CHF 63.79
You save:  CHF 18.23
NOK kr549.77
List Price:  NOK kr769.72
You save:  NOK kr219.95
DKK kr347.88
List Price:  DKK kr487.07
You save:  DKK kr139.18
NZ$83.68
List Price:  NZ$117.16
You save:  NZ$33.47
د.إ183.60
List Price:  د.إ257.06
You save:  د.إ73.45
৳5,493.12
List Price:  ৳7,690.80
You save:  ৳2,197.68
₹4,172.34
List Price:  ₹5,841.61
You save:  ₹1,669.27
RM238.42
List Price:  RM333.81
You save:  RM95.39
₦66,243.24
List Price:  ₦92,745.84
You save:  ₦26,502.60
₨13,934.07
List Price:  ₨19,508.81
You save:  ₨5,574.74
฿1,850.39
List Price:  ฿2,590.69
You save:  ฿740.30
₺1,617.84
List Price:  ₺2,265.11
You save:  ₺647.26
B$255.79
List Price:  B$358.13
You save:  B$102.34
R936.97
List Price:  R1,311.83
You save:  R374.86
Лв91.24
List Price:  Лв127.74
You save:  Лв36.50
₩68,826.74
List Price:  ₩96,362.95
You save:  ₩27,536.20
₪188.13
List Price:  ₪263.40
You save:  ₪75.26
₱2,884.49
List Price:  ₱4,038.52
You save:  ₱1,154.02
¥7,792.89
List Price:  ¥10,910.67
You save:  ¥3,117.78
MX$856.20
List Price:  MX$1,198.75
You save:  MX$342.54
QR182.49
List Price:  QR255.51
You save:  QR73.01
P688.94
List Price:  P964.58
You save:  P275.63
KSh6,748.65
List Price:  KSh9,448.65
You save:  KSh2,700
E£2,392.02
List Price:  E£3,349.02
You save:  E£957
ብር2,872.52
List Price:  ብር4,021.76
You save:  ብር1,149.23
Kz41,694.65
List Price:  Kz58,375.85
You save:  Kz16,681.20
CLP$47,530.99
List Price:  CLP$66,547.19
You save:  CLP$19,016.20
CN¥362.03
List Price:  CN¥506.87
You save:  CN¥144.84
RD$2,934.22
List Price:  RD$4,108.14
You save:  RD$1,173.92
DA6,720.10
List Price:  DA9,408.68
You save:  DA2,688.58
FJ$112.74
List Price:  FJ$157.85
You save:  FJ$45.10
Q389.28
List Price:  Q545.03
You save:  Q155.74
GY$10,471.17
List Price:  GY$14,660.48
You save:  GY$4,189.30
ISK kr7,010.59
List Price:  ISK kr9,815.39
You save:  ISK kr2,804.80
DH505.57
List Price:  DH707.84
You save:  DH202.26
L884.78
List Price:  L1,238.76
You save:  L353.98
ден2,871.74
List Price:  ден4,020.67
You save:  ден1,148.92
MOP$403.59
List Price:  MOP$565.05
You save:  MOP$161.46
N$944.34
List Price:  N$1,322.15
You save:  N$377.81
C$1,841.99
List Price:  C$2,578.94
You save:  C$736.94
रु6,672.93
List Price:  रु9,342.64
You save:  रु2,669.70
S/188.02
List Price:  S/263.24
You save:  S/75.22
K193.20
List Price:  K270.50
You save:  K77.29
SAR187.49
List Price:  SAR262.50
You save:  SAR75.01
ZK1,326.34
List Price:  ZK1,856.98
You save:  ZK530.64
L232.07
List Price:  L324.92
You save:  L92.85
Kč1,174
List Price:  Kč1,643.69
You save:  Kč469.69
Ft18,283.73
List Price:  Ft25,598.69
You save:  Ft7,314.95
SEK kr545.79
List Price:  SEK kr764.15
You save:  SEK kr218.36
ARS$43,729
List Price:  ARS$61,224.11
You save:  ARS$17,495.10
Bs347.11
List Price:  Bs485.98
You save:  Bs138.87
COP$197,925.35
List Price:  COP$277,111.33
You save:  COP$79,185.97
₡25,432.40
List Price:  ₡35,607.40
You save:  ₡10,174.99
L1,235.97
List Price:  L1,730.46
You save:  L494.48
₲372,674.68
List Price:  ₲521,774.38
You save:  ₲149,099.69
$U1,931.55
List Price:  $U2,704.33
You save:  $U772.77
zł201.70
List Price:  zł282.40
You save:  zł80.69
Already have an account? Log In

Transcript

In this lesson we will talk about the colors a bit more how to make our game elements more 3d looking and more alive. And to achieve that we use gradients gradient is basically one color seamlessly changing into another one. So your objects are one color in one end and turn into another one on the other and then in between the colors are mixing. So it's easier if I just show you this is my heart and I want the light on the top. So I want the top part lighter and the bottom on darker. I use the gradient tool is this one selected and I pull it downwards.

It's creating a gradient from full color to fully transparency the opacity zero and is the same color still is just No transparent. See it has two little heads. These two little nodes one a square on a circle. The selected one turns blue and the selected one is the one I'm operating on. So this one is showing now it's hundred percent opacity, this type of red, and this one is the same red zero opacity, so no This one is selected. I click on a darker red.

And here I have a nice neat gradient. The further they are, the smoother the gradient the closer they are, the sharper it is. You see it's a very short gradient here. It's almost like a thin line. But if I pull them apart, it's nice and seamless. And my little heart is not flat anymore.

Check it was like this before and now it's this much to see the difference. This one is not flat anymore. So it looks a bit more 3d It looks a bit more standing out of the background. And I wanted to show you also the star tool I was talking about. And I know you're the play with it because this is what everyone is doing the first time they open Inkscape. So, how the star tool is operating is it throws a star or polygon.

It's you can switch between the two here. Let's stick to the star you can give how many corners it have. I want five that's the most common one. And spoke radio can be changed this one. It's like how spiky it is. and rounded.

I set it to point two and you see the edge getting wrong and it looks like Patrick So, if I have my little star and I want to make the better, I also put down this the gradient tool and give it a bit of yellow orange gradient. When I select this one, I can use the color picker and get a color from in between, make the gradient even smoother. And what I will do now, hide applicate the star color it white and make a vie to nothing gradient on the top mind that the gradient and those can be out of the objects to you see now it's hundred percent white. I pull it out. It's getting in between of the zero and 100. So now here is about 50% transparency See, unlike this, we make our star like it's shiny.

I see so I can turn the gradient so we can come to us from other direction as well. Now I want it from the top left because usually this is where the lights are coming from. So I have my little star also was in the previous one I can make my star like this is turned off and this is turn on. If I want to make a system for like rating like in this level you only got one star. This is how you make it visible these are turned off this is turned on you earned one star congratulation is the same what I did with the heart in the previous lesson. Selected it's like optimal be inactive.

One more thing I want to show you in this lesson, apart from the gradients is groups. A group is imagine it is like a plastic bag where I put all my objects which I want to handle together. So it's not like what you were showing previously, that you merge objects together with the path operation union, because if I do that, they will become one color one object. But I select them. And I go object and group or as it says Ctrl G. If it's a group, it works together as one. I can double click it, and then I'm inside that group.

So I can still modify the different elements. I can recolor it, I can play with them. whatever I want to do. I can them around. I can copy and paste to group, I can do whatever I want to the group. What I want to do with what I can do with a simple selected object, there's the point of a whole group.

Think about the group selection in the plastic bag really, because if I just select different objects together, as in the first first lesson, I can move them together in a group, I put them together for a longer time, if I don't need them as a group anymore, then I just go ungroup or Shift Ctrl G, and they are separate objects again. When I'm creating character, for example, I'm caring for drawings or or games or whatever, I'm creating the head. Then I group the head together then I group the arms together. You will see later on when we are creating a character design and animation, that using groups is very, very convenient. One more thing about gradients and then I let you go and play around and create your own hearts and stars with gradient is that there is two type of gradient. So, the one I used is the cleaner one, which means from one object straightly going to the other, but there is another type of gradient, which is circular or radial one.

And I can do that if I made this one flat color I can use that by when creating a gradient. He had a special you know the special tools for the gradient tools, special comments, and I can set if I want a linear or radial or if I want it on the field or the stroke because you can also give gradients to the stroke. So, now I just select radio and you see it has three handles because It's like an elliptical gradient, it has a middle color, which for me, I was had this bright yellow one, and it has an outside color which are gonna make the dark one darker orange. And this is what I can create. I can make it elliptical as much as I want. So I can make it even like this, or I can make it more circular.

See, it's a different type of gradient. how it happens to appear is also that if I select the object, it says radio. That's why they are and it shows what is the gradient. If I double click you remember in the colors, tutorial, the colors lesson I didn't talk about all of these. This is like no color, flat color. And this is the two type of gradients we can use.

So I can switch between the two all the time. receipt switching from linear to radio if I want to give the same gradient for another object, so for example, I have this red one and I want a red star with the same colors, I can go and you know, pick up the colors and play around with it, or I can assign the same gradient to the subject. How I do that is I select this object, and I check the number of this gradient. If I check the drop down all the gradients are here. And I check this number 3078 from the drop down, I select that and that's it. I have the same colors for my star as I had for my heart.

So gradients are really great fun. Only thing I would say is applied them with care. So don't make some very, very colorful, crazy gradients. Most of the time how we use it in illustration is creating feeling of light and shadow. So exactly what I did here is like the top part is lighter, the bottom part is darker in between. You see it's creating a lightning effect.

So like the light is coming from the top gradients are great for that. It's emphasized they emphasize the the lightning coming from a certain direction. So go and play around with the gradients and we will move on to something next one in the next lesson.

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.