Foreground and background relation

Create 2D Video Game Art with Inkscape Create 2D video game art with Inkscape
19 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

We have a tiling background now. And I just put the corrector and the platform on it just to see how they match. And they are quite okay because you see that the corrector in the platform is quite bright. And it has a lot of little details, as the background doesn't have much. I mean, the clouds and the trees have some but they are still in significantly lower in detail and variation, then the foreground elements and the active elements. The only thing I miss from this picture is some middle ground elements to build some even more distance if you remember the picture and how it was made in Sonic or if you check in other games, middle ground elements can add a lot of that to another wise to the game.

So how we do that is we are very resourceful again and we will create some object, which can be reused along the game. How I imagine and I'm just doing I'm just doing some sketches. Imagine them as sketches. I imagine that the little finger is jumping in front of big trees or under big trees. So what we've done the background, then this is the, this is the middle ground. So my collector is still visible.

My collector is still visible, he can jump. Let's say like these, you know, just just playing around. It can jump to place to play from place to place and have these three behind. And that's it. So let's make some big three How we usually create a tree is I make a sketch like you what you saw before. So a tree has a trunk and it has a the leaves on the top with Shift Ctrl C I create a path.

Remember object to path, I create a path from the square I just drew. I make some modifications so it's a bit thinner on the top than it is on the bottom. Not much really just a bit. And then I duplicated duplicated again. I'm basically roughly buildings branches. You know, the basic rule of a tree, if you want to draw a tree is it looks very random.

That's one thing, but it has a lot of small rules that keep this seemingly random thing into a neat algorithm actually. So I guess it's more or less happening. This is a bit low higher, Yes, fine. And here will be just the top of the tree, I can make the tree going from this background green. into another green, you see, and what I usually do to make to draw my object I save now I duplicate this, I select all the elements I duplicated, and I merge these together with both union, so they are one object and I can easily modify And for example here I want to make a bit of you know this we call this like an armpit for the three branch you know like it has a thicker lower part, I can make a band. I can make this branch coming lower finishing.

See branches are always thinner towards the end because they grow from a base which is thicker and then they go thinner. So, I'm just modifying now with the no that tool I just modified the tree a bit. I take all the nodes up to this level and say it's okay. And I have still the one which I just edited. So what I do duplicate that again. And I just play around.

I flip this. I select both of them and they flip them together, I delete this part, make this one longer. I bend the three a bit. And again, I merged them together and delete the nodes I don't need I don't need these. So I have one continuous line. And I try to put up everything at least this height again.

I'm just working very roughly here because I know that until Here I will cover it with the leaves of the tree. That's it but this one I have to make very proper because this will be always visible. Nice. So now what I have is two different type of trees and I will add with the spray tool again. I will add some leafy bushy parts on the top first now just roughly looks like a broccoli I know but threes are big broccolis. Anyway don't make the tough part.

I can feel To shoot and I can make it but I don't need it now because I imagine this tree is visible only around here. And that's it I have the trunk I have two branches. Let's move everything a bit sideways. Okay, same goes again, I select this object and let's play another nice broccoli and one more thing I do is I create a leaf it Ctrl click I delete the nodes if the node handles so I have an edge and it looks like a water drop. And I select these push them together. I have a shape of a leaf.

And this is how the spray tool is working. You see the rotation, if I set it to 14, they are a bit random. If I set to 56 they go around everywhere. I don't want that. What I want I wanted a bit randomness. So what I can create is less.

It was like 15 or something. I went this direction and just a few leaves So it's visible that it's a tree. And then I individually can turn them that just to make it visible that it's a tree. So sometimes I can spray in some more leaves. And then I select another leaf I want and I do the same on the other side. Just a few can even do it by hand duplicate and create some other, please.

Yes, I play the same game here. Select a leaf, leaf. Yeah, too much. Nice. can even play the piano touching the tree. Nice.

And then I select this one and I do this here. I cannot even more on the top just read it and digest a bit more so I have the feeling that it's a three and and that is a three and it has some leaves some loose leaves. And I also do this here a bit. Just here and there you see just for showing. doesn't have to be perfect. It doesn't have to be everywhere.

And I will do the same thing here. This tiny one nice bit. You see I'm doing what I'm doing now is exactly what I always talk about why Inkscape is great for you as a game designer because You created something, reused it and modified it to give the trunk and the branches and then you you then created the leaves by making them totally random looking. Now I merge everything of this together I don't need them anymore. Just quantal plus a lot will take some time yes and no I made the branches and the trunks. So I just I know how my threes will look more or less about the side size.

So then I know that I have to make it lower because I want them higher. Same goes for these three. Make feel free. Make free to create as much trees as you want. Of course, modify The ones I will also show us everything I will give you also this flat in this file. So you can modify build, create your own trees, so a lot of fun in Inkscape that's it.

I also make it lower and how I color it is starting from his bottom color into a darker three branch color. three branches are not always or necessarily brown as we know it. And they are more of a dark green or it depends on the lightning they can even be blue whatever you like to go with. This seems like a shadowy three. I use the same perfect. So now I just have two trees standing let's see how that looks.

Just open it and merge it into one group. So I just Have a group up my trees just to see what I do. I deprecated Shift Ctrl G Ctrl plus. So I have one exact the same position is it the same size flat surface and I use it as a clip. So I see okay my game is looking like now and I move my trees as I want and I see that I can change the top so they are covering more and the bottom can be nice and neat. This little guy is in the front.

Let's see how he looks and he's jumping in front of the Trees you see he's standing out nicely. So my point is that I created some trees for the middle and these trees Feel free to use them anyway. So the point is, now I have this little one I finished them in the way the big ones are just giving them this nice gradient. You can use any color you can have them your way. That's for now I made them like this. And also in the in the top I can add some additional more middle ground elements, which are some other trees.

If I say these are this type of lighter color, then I can use this type of darker to create a feeling of that the tree is still continuing the leaves are still continuing in the back We'll see in a second what I mean is justice. See, and then I just fit this part as well. So my tree will look like it's also continuing in the back and had some left like this. So this is my three. I will play the same game here. So you understand what I'm creating, I'm creating more depth with my three In a way that unless and it's too dark, so I create a middle color.

If I remove my trees and I add them again, I can make them one group. You can make more trees also. just replicate them. That's why Jon Burge like this, they are like, you see You have the feeling that the trees are covered perfectly good. And then there is some background steel, so that's good. More I can create I can create some stones in the style of this one and I can create some bushes.

But what I'm also missing is some foreground. So if I know that this part of the background is this big, then I just copy it out. Shift Ctrl A, I call the alignment window. And that's it. We have some grass apart and I will align the same sign the same color which I have here which is a bit yellowish greenish but to help me To create little bumps and little grass species what is the point of being resourceful is what I said in the beginning of this lesson is that I can have these elements separately and I can use them is just a little rock and some stone or some grass I created. I can have two little trees.

I can create another piece of rock using the same color which is here. And another type of role could be tired one. See, I'm just using the Bezier tool just to create some lighter parts and darker parts and such and some little broken off rocks again. And I group it so so we have some tiny resources or stones and rock. And if we use this we can have a feeling of really something going on.

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.