Lesson video

Hi, I'm Rebecca, your computing teacher for the vector graphics unit.

Now for this unit, you're going to need to download some software.

The software is called Inkscape and you can download it from inkscape.

org.

Now you must ask your parents or carers permission before installing any software on your computer.

You might also want them to help you instal that software too.

Please note that this software only works on desktop computers or laptops.

For this lesson you need to make sure that your Inkscape software is working and you're also going to need to make sure that you remove as many distractions as possible so that you can really focus in this lesson.

Once you've got all of that ready, we can begin.

In this lesson, you will draw basic shapes and you'll manipulate objects.

To get started, what I'd like you to do is find a pen and paper and see if you can draw a robot using only squares and rectangles.

Give it a go pause the video.

Awesome so if you've got your robot ready.

Brilliant.

Now we can make an image with a series of shapes.

Like you've just done there.

Might of find it a little bit tricky, only having those two shapes to work with but we can actually draw an image with multiple shapes.

Now vector graphics are similar to that.

So we're going to be learning about vector graphics in this unit.

Vector graphics are digital images that are created using paths.

A path can be a line or many paths can be combined to create shapes.

Lines and shapes can be altered, allowing vector graphics to be easily edited.

This arrow shape has two main properties that can easily be edited.

The fill which is the colour inside so the grey colour and the stroke which is the border colour so the black outline.

Inkscape is the software that we're going to be using for this whole unit and it's an open source and cross-platform application for editing vector graphics.

We are going to use Inkscape to create and manipulate some basic vector shapes.

Now to get you started, I'm going to give you a quick demonstration.

When you first open up Inkscape, it's going to look something like this.

In front of you, you can see this rectangle shape which is your canvas.

Your canvas is where you do all of your drawings.

It's quite small at the moment.

I'll show you how to sort that out in a minute.

Now also very basic thing is just knowing how to save and open your files.

So if we go up here at the moment is just calling this document new documents seven which isn't a sensible name.

I want to give it a sensible name and save it properly.

So I'm going to go to file.

Then I'm going to click on save as and then I'm going to go to my folder which is the vector graphics folder.

You might want to make your own folder to save all of your work.

So if you wanted to do that, you could just create a new folder.

So I'm going to save it in the vector graphics folder and I'm going to call it a first, not in capital's, first oh I can't even spell, first drawing.

And you'll notice it says says, save as type and it's saving it as an SVG file that stands for scalable vector graphic.

And that means that we're going to be creating vector graphics using this drawing package.

So when you happy that you've named it properly, you just press save.

And then you can check that it's worked by looking in the top left hand corner and now it says first drawing.

SVG instead.

Now if this was closed and I wanted to open it up, So I've closed it now and it's just saying new document eight.

If you're wanting to open the file, I just go to file open.

And there's my file there, first drawing.

So I just double click on it and I open it up.

It was a very boring file though is blank.

So it's very difficult to see what it was actually doing.

So here is my canvas then.

And the other thing I want to show you is zooming in and out.

Now my mouse has got a scroll wheel on it.

Now yours might have one too and if it does then there's quite a quick way that you can zoom in and out.

Now on my keyboard if you hold down control, it allows you to zoom in and out.

But on other people's keyboards, sometimes it's shift that you have to use but on mine it is control.

So you can see there that when I'm scrolling up, I'm holding down control on my keyboard.

So it's this one here control.

You see that control.

I'm holding that down and I'm scrolling up and down with my maps and it's allowing me to zoom in and out.

So that's one way.

Another way is to press the plus and minus on your keyboard.

Like so.

Again you might need to press a shift to do that on your keyboard.

If you don't have a number pad like mines.

I've got a number pad but you might not have a number pad.

And if you don't have a number pad then you have to hold down shift and press plus.

So that's two ways of doing it.

There's another way.

There's quite a few ways really then there's view and there's zoom.

So there's different things here that you can take a look at different options.

And then also there's a tool in the tool bar down the left hand side here which is a magnifying glass that gives you a little clue about what it's going to do.

That's going to let you zoom as well.

And this one's quite useful if you want to zoom into specific place.

So I could zoom into just this part of the page by clicking, selecting that tool and then clicking and dragging over that area.

And then it jumps me right to just that area that I want to look at.

So that's quite useful, but then you can sometimes get stuck with this zooming you start pressing plus and you're not quite sure what goes on.

And sometimes you can press, you can right click with your mouse as well on it.

Makes you like to go out and end and then it just gets stuck and you're like, what do I do? I've got the zoom tools stuck to my, my cursor, my mouse I don't know what to do with it.

If that happens then you just go up here to the pointer tool like that.

And that just brings it back to the normal, this the select tool or the pointer tool that you've got there.

So if you get stuck in the plus with the magnifying glass on then you just go to the arrow there at the top and it brings it back to how it was.

Now you're going to have a little practise at doing that now.

Just so you can get used to those two tools.

So saving, opening and zooming in and out.

Pause the video while you have a go at that.

Fantastic so let's start drawing something then.

Inkscape has many built in shapes for you to start your drawings with.

Let's make a rectangle and adjust the fill stroke and some other settings for that rectangle.

We're going to do a demonstration first.

In order to draw a rectangle or a square, I need to find that tool in the left hand side.

So I'm going to take a look all the way down to here and see if I can find it.

And here it is, it's the one that looks like a square and you can double check that by hovering over it and just reading what it says.

So it says create rectangles and squares.

Now don't confuse it with the one underneath, which is for 3D boxes or cubes.

You want to do the square one, which is that one just looks like a blue square.

So I'm going to click on that and then you'll notice that my mouse cursor there, it changes to a black rectangle like that.

If I've got the select tool selected, then I just get my normal mouse that you're used to seeing.

But if I change the tool, then it goes to this one you'll find them all.

We use this, you'll get used to seeing the different icons, the different curse, most pointers that come up when you're using it.

So I go to that one.

That's just my normal select one.

And this one is my drawing squares and rectangles.

Now in order to draw a square, I have to hold down control on my keyboard.

And then it allows me to draw a perfect square like that.

If I don't hold down control, then I can pretty much do what I want with that shape.

But if I hold down control that it keeps it like a square, like so.

So I want to draw a rectangle.

So I'm going to do it like that.

So now I've got a rectangle.

Now if I want to change the colour of that rectangle, I've got some different options to do that.

But first of all, I'm just going to show you some of the differences with the tool.

So if you take a look at this because I've got this square and rectangle tool selected, I've got these white tools around the shape like this, a square one, a circle one and another square one.

If I go back to the pointer tool or the select tool, then I've got different things.

And this means that I can drag the image out, the effect graphic object out, like so depending on where the arrows are going, that's where it's going to let you pull it out like that.

So that version appears when I've got the select tool selected.

But if I want the other tools which we'll look up very shortly, then we've got this one here where you've got the white tool.

So it's just important to notice that you get different things happening to your shapes when you've got different things selected.

I'm going to keep it in a select tool because I want to change the colour.

Now I can change the colour quite quickly just by going to this bar at the bottom and just selecting a colour like red, for example or green like so or blue, I like blue so I'm going to have it as blue.

So if I wanted to do that really quickly, just a quick colour, then I could do it there.

But there are lots of other options that I can choose to do with colours and where we put those colours.

So what I want to do is I want to open up a toolbar.

So I'm going to go all the way over this time to the right hand side.

Now this is quite a small icon so I'm just going to hover over it.

Where's it gone? That's not it.

There it is, that's the one I wanted.

So if I hover over it, it says edit objects, colours, gradients, arrowheads and other fill and stroke properties.

So it looks like a square and it's got a little paint brush on it.

That's the one we want so if we go all the way down to the bottom and then just work our way up there, we can see this tool.

If I click on this tool then another window opens up like this.

So if I just press it again, if I cross it off sorry then it goes like that.

But if I press it, it will come out and I can do my setting.

So let's do that one more time.

Going to cross it off cause I don't want it anymore.

And then if I want to open it up, I just go down to it and there it is.

Now by default, it will probably open up at the fill one for you.

But as you move around and as you start using this more and more, it tends to remember what you did last.

So it might open up on that one or it might open up on that one.

So you at least get used to finding the bit that you need to.

If we wanted to do the fill colour which is the bit inside the object.

Then we click on fill, you've then got different options that you can have no fill like that one.

It's completely transparent.

You can have just a plain one, a flat colour.

You can have gradients and radial gradients and things like that.

Now I'm not going to go that far.

We're just going to stick with fill colour for this, for this lesson like so.

Now also there's different ways that you can select colours.

So you can click like this on this one, which is the RGB values.

This is probably something that you'll learn later on for GCSE where you can type in your actual RGB values to get the exact right colour you need.

Or you can go to this one which is a wheel and that allows you to just select the colour that you almost want.

So if you wanted an orangy colour like that, then you could go there and then you can just drag it around that wheel like so and you can see how it changes.

And then you can also drag this one in here to get a darker colour or a lighter colour or a grayer colour, things like that.

So this one's quite a nice one, the wheel for picking different ones.

So you can see there, that's a little bit more detailed like little, but much more colour options there than what you've got at the bottom of the screen.

So that's why it can be handy to use this tool instead.

Cause then you can get a really specific colour.

So if you did know the RGB value that you wanted to do, then you could just go to here and type those in and it will get you the exact right colour.

Or the wheels a good one because you can just select a colour that they're similar to the one you want and then you can just move it around until you get the exact colour that you want there.

I'm going to go for a blue one, lots of nice colour there.

So once I've got my nice colour, that's my fill colour.

I can actually look at the stroke as well.

Now the stroke is the outside edge of the image.

Now at the moment I haven't got any outside edge, have I ? I've just got, it's just transparent.

Like that's cause it's got the zero there or it can have a flat colour and same thing that happens, that same thing pops up and you can see because it was using the wheel on the fill one, it's remembered that and it's bought the wheel option before what it RGB.

I could just go to that.

Okay so then we've got different colours.

So I've got red like so, and I'm going to go for red, like that.

So what I want, it looks a bit odd actually.

I'm going to go for black actually.

I'm going to go for black over here.

So that's the colour that I want.

Then you've got stroke style as well.

So you've got different styles that you can use if you want it to be a little bit thicker, then you could just keep pressing that plus.

Or you could type something in like eight for example and it'll make it that thick or five.

And you could have dashes if you wanted or different patterns or dots like so.

And there's all sorts of tools that you can mess about with, but when you start playing around with this yourself then you can do that but you can just play with the width and then this one here, the dashes for now just to keep it a bit simple.

So there we go.

So that is all of those.

And then what I want to do is, I don't want this toolbar anymore.

I want to cross it off.

Now if I want to open it again, what do I do? I go all the way to here, don't I? To this one then it opens it back up if I'm going to keep it crossed.

Now I've got the select tool selected so I can drag it larger and smaller at this point in time.

But if I change it to this one, I can actually put something called a bevelled edge on my rectangle.

So if I go here into this box, this top right hand corner onto this circle, I can actually put like a bevelled edge or a curved edge around the rectangle like that.

And if it wasn't happy with it, I could just go to edit, undo and I could try something different.

So there we go that's an option that you can do.

Another thing you can do is if you knew a specific value then you could type those values in here.

So you can do the X value and the Y value there but you probably won't need to use that.

Just using this one is a good start.

Okay so that is quite a few things that you can do with that rectangle tool.

Pause the video while you have a go at playing around with the rectangle tool in Inkscape.

Fabulous.

Right let's have a look then, what we're going to look at now is the ellipse tool and see what we can do with that.

What we're going to do now then is take a look at the ellipse tool.

Now again the ellipse tool is on this left hand side and you can just hover over it until you find it.

So this one creates circles, ellipses and arcs.

So that's the tool that we're going to use.

So just showing you my mouse before is just this pointer.

If I click on that, then I now see the ellipse tool.

And what it's done is it's remember the settings that I've used on my last shape and it's replicated them now.

So don't know if you remember from before there was a black rectangle because that was the colour that I had selected.

Now that I've got a sort of lavenderly, purply rectangle with this black dotted border around it.

It's remembered those settings.

You can see that there.

Now if I want to draw a perfect circle then I hold down control with my keyboard and it allows me to draw a perfect circle.

But if I want to do a free hands of a ellipse colour like this then I can do it without holding down control.

Now I want to do a circle this time.

So I'm going to hold down control and there's my circle.

Now it's remembered my settings from before.

So if I did want to change the fill colour and the stroke colour to have it different then I just open up that window that I had before.

So all the way over here and it's remembered I was on stroke last time.

So that's when it's open so I can change the field colour to something different, maybe a lighter shade.

I can change the stroke style to something different like dotted lines like that.

And I could make it thinner, maybe one millimetre, like so there we go.

So I've changed the settings.

I'm happy with the settings.

So I'm just going to cross them off.

So you can do that too.

You can have different colours for yours as well.

Now if you've noticed as well because I've got the ellipse tool selected, I've got these white options or tools around the edge, or if I change it to the pointer tool then just like with the rectangle, I can change it.

So then if I hold down control, it keeps that circle shape.

If I take control off then it goes to that ellipse shape so I can change the size of it there.

I don't want to change the size a bit though.

What I want to do is look at something different.

Now what I can do with a circle like this is I can actually take a segment of that circle.

So if I click on this circle, white circle icon, if I click and hold, it allows me to just take a segment out of that circle so I could just have it like that for example.

So if I wanted to have that kind of shape then I could draw the circle first but then just take a segment out of it like this.

If I wanted to go back to normal, notice that I just switched to the mouse tool so I could change the size but actually if I want to change the settings further, what I can do is you can see up here, you've got different options.

So you've got segment, you've got arc and you've got a full shape.

So if I didn't like that segment anymore and I wanted my circle back then I could just kick circle and it gets my circle back.

And if I wanted a different segment, I could do it like that.

You can drag either of those dots around now.

Cause once you draw one, another one appears so you can do it at different angles.

And I could also use something called the arc tool which is this one where if I want it to have it like an arc, I could do it like this.

So then I can draw a semicircle by dragging these down like so.

Can you see that? So there's different options again with the ellipse tool which you are going to have a go at now.

Pause the video while you have a go at doing those things yourself.

So draw your own elliptical shape and see if you can create an arc and a segment from that shape off you go.

Brilliant so let's take a look at the next shape that we're going to look at.

So now we will create manipulate polygons.

Let's see how we do that.

Let's take a look at some polygons then.

So I'm going to go to the left hand side and find the polygon tool which is this one here.

So it looks like a star and a polygon next to each other.

So if I click on that, you can see how my mouse is now changed.

My pointer is changed to a star symbol and it might draw with a star straight away or it might draw with a polygon straight away.

If I just delete that, if I wanted to do a star, I could do it like that.

But we're just going to look up polygon for a moment.

So there we go.

Now again it remembered all those settings that I did last time.

So if I didn't want to have that purple with those black dots then I can just go over to here.

I can make sure that I've got that tool selected and I can try a different colour like so.

I'm just going to keep it like that I think and if I've just got the selection tool or pointed tool selected there then I can make things larger.

Like so drag them in.

Or if I want to do specific things and change specific parts of that then I go back to the polygon tool and now I can do all sorts of things because the tool bar up here allows me to do that.

So the one of the first things you can do, you can see this one unlike the other shapes where you had a few of these white tools around it, this is only got one white tool around it.

If you click and hold on that it just allows you to adjust the size of it but also to rotate it as well.

So if you weren't quite sure, or weren't quite happy with the angle of it then you could move it around like that like so.

Now this shape has got six sides.

So one, two, three, four, five, six.

So it's a hexagon but if I wanted to have different amounts of corners like this then I could just go up here and I can have say an octagon like so.

Whoops it's drawing me another one cause I have that tool selected.

Remember if you want to change the size then I go back to the pointer tool.

I get like confused quite a bit too.

So go back to here cause I want to mess around with the actual shape.

So I've also got this option called rounded and that's like our bevelled edge that we did on the rectangle.

If I type in one for example, it's really rounding it in.

Half is quite a good one and see how it's quite sort of a bubbly shape now.

If I go over one, it looks very strange.

If I do three, it actually starts coming in on itself.

So we've start starting to find really interesting patterns here as we mess around with it and we didn't want anything just set it back to zero.

There's also this option called randomised, which just is like a random polygon size.

If I just do 0.

5 on that, then it'll just pick random edges to use and it gets crazier and crazier, the higher, the higher up you go, you look but do two.

So it's looking really, really odd now but if I didn't want that, I just select it back to zero and it puts it back to zero like that.

So time for you to have a go.

Pause the video while you have a go at making your own polygons.

Remember to try out different settings to see what they do.

Brilliant so we're now going to look at some other useful features that Inkscape has so watch this demonstration.

Now you already know how to alter the size of an object but actually if you have the point tool selected on an object you can change the height through clicking on the options here.

So just clicking takes a very long time.

So I'm going to put 150 so you can see the difference.

So I can actually change the height there and I can change the width here.

So if you wanted a very specific size and you knew exactly the size that you wanted, then you could type in the width box and the height box, the different sizes that you would like.

You could also say the exact position, the X Y position that you want your object to be.

So if you want it to be at the X-axis zero, you could just press zero and it puts it all the way to the left and with the Y as well, if you wanted that to be zero, then that's going to put it all the way down at the bottom too.

So you can see there that I can actually manually enter numbers to make things a bit more specific.

Now other things that I can do are rotating.

So if I wanted to rotate this object, I can double click and it gets me.

Not done yet.

Hold on, there we go.

So I've double clicked and it's allowing me to do that.

Now this was double-clicking is very similar to just selecting the tool over there, on there on the left hand side.

So if I was there and I wanted to quickly rotate that object I can double click and you can see how it changes.

Oops getting in a right pickle here, Press delete click back, get my pointer tool and then go to double click.

There we go and then that little white box comes up so that I can rotate.

I know the thing that you might want to do is duplicate the object so you can right click and duplicate.

And now I've got two of them.

And if I wanted three or four, I can just keep duplicating like that.

There's other options at the top here as well for different rotations and flipping and things like that.

So if I wanted to just rotate it 90 degrees then I could choose that one or the other way.

I can choose the different options there.

If I wanted to flip it, it's probably the wrong one to do this with.

Lets do it with that one.

So I'm going to flip it that way and that way or that way and that way it's hard to tell with that one.

So that's some options.

Also you might have noticed that you can stack these objects on top of each other and if you wanted say for example, this object to be on the very top then you've got these options up here.

So if I wanted it to be on the top, raise selection to top and now it's right at the top.

If I wanted it to do be at the bottom, move it to the bottom.

And if I just wanted to move it one place for one place down then I've got those options there.

You can see the more I click, the more it changes.

So they're just some other options that you can do with all of the objects that you've got on your canvas.

So just spend some time now exploring those features that I just showed you there.

Pause the video while you do that.

Excellent, right we're going to look at the star now and see how we can create and manipulate stars of we go.

So the star is just in the same place that the polygons were so if I go over to here, I've got this stars and polygons section.

I click on there and I can select the star shape from the top.

And I can just draw my star.

There we go.

Now for my selection you can see that you've got similar options to what you had with the polygon.

So I've got different corners.

So if I wanted more edges on my star then I can increase or decrease those corners.

There we go.

You've then got things like the spoke ratio.

So I can increase that to look at the size of the star.

I can also do that by dragging this in and out as well.

I can do that.

You've got rounded too.

So you can do some quite interesting things with this.

You can see how it started to become a bit more like a splatter almost.

Oh gosh all sorts of things happen.

So try not to hold it down to long.

That's quite a nice one.

Like a splat.

You still can use that randomise too where it'll start randomly doing different shapes.

That's quite cool as well if you wanted some random splat on the page.

Then if I just want to move it.

I can just slip use that selection tool, move it around.

And again I can use this tool over here to change the fill colour and the stroke colour and all of those things.

So it's time for you to have a go of that too.

Pause the video then while you create and manipulate your own star shapes.

Off you go.

Awesome, right let's have a look at this then.

So I want you to describe this shape.

So think about all of those things that you've learned in this lesson.

Take a look at that shape that's there and see if you can describe what's happened to that shape.

So describe the properties that have been applied to that shape.

You just be a list of things if you want to.

That's fine.

So pause the video while you have a think about that.

Let's look at the answers then.

So it's a three cornered polygon.

It's got rounded corners, it's got a yellow fill and it's got a blue dashed stroke around the edge.

Did you get all of those? Brilliant that was your first lesson then your introduction into Inkscape.

I hope you've managed to figure out how to draw all of those shapes and how to change the properties and feel free to carry on playing around with those shapes and see what you can do with those.

And if you'd like to please ask your parent or carer to share your work on Instagram, Facebook or Twitter tagging @OakNational and #LearnwithOak because I'd really love to see the fantastic drawings that you've been getting up to in this lesson.

I'll see you soon for the next lesson.