Video: Icon challenges

﻿I'm Rebecca, your computing teacher for the vector graphics unit, for this lesson, you're going to need the Inkscape software that you should have already downloaded and installed in lesson one with your parent or carer as permission. You also might want to make notes using your pen and paper if you need to, then you're going to have to make sure that you've tried really hard to remove any distractions out of the way so that you can really focus in this lesson. Once you've done all of that we can begin. In this lesson we will convert objects to paths, draw paths and edits path nodes. What would happen then, explain what would happen to these shapes if Align Left edges relative to the page was applied to them, have a think about that? Well, this would happen they would all move to the left side of the page. Objects, shapes, paths and nodes in Inkscape. Vector graphics are made up of paths. A path can be a line or a shape. When you first create a shape using Inkscape, the programme refers to the shape as an object. In order to edit the path within an object, it must first be converted to a path. Let's find out how to convert objects to paths. In order for me to do this, I'm going to to have to draw a object on the page, so I'm going to go to my star, And I'm going to to draw a star on that page. So this is still an object coz I've just drawn it from here. And I can do all sorts of things with this object. If I double click on it, it takes me to the object tools and you can see up the top here, I've still got all those object options so I can add extra, points to this star or can have less, I can change the spoke ratio, the rounded and the randomise, so I can still do all of those different options with this star, because it's still classed as an object, and just all these sorts of things and moving these around. Now, if I convert it to a path, I won't be able to do those things anymore, because it will just be a path that I can edit, it won't have all these extra tools at the top, so if I go to here, and I actually convert it to a path, then you'll see what I mean. So before i convert it to a path, when I double click, i get these options that appear at the top. But after it's a path, it does something different. So I've selected it, i go to path and I go object to path, and then it doesn't look like very much has happened. But what has happened is this time when I double click, it doesn't take me to those options anymore. I've actually got some new options at the top. And these are all to do with the path and the nodes that are being used here. So if you can see I've got these tiny little grey tools now that I can grab on to, and I can actually take those individually those paths and edit them however I like. So move them in all sorts of directions. So it's quite bizarre what I can actually do now, to that star object because now I've converted it to a path. Now another thing that I can do is just take the stroke of that object so I can draw another object, I'm going to put it in the middle and if I just do the stroke, so path, stroke to path, what it does is it takes this outline and that outline is now a path. And if I try and move this, it becomes much trickier because actually, there is no part of this object that is here on this fill bit, so if you look here, that is part of that object there. But here it's not. And you have to actually grab the edge like this in order to move it around. Also, if I want to change the path of this, if I double click done it, no. Try again. Oh, it's because I was clicking in the middle. So double click, and now I can get the path. And if you look very, very closely, I know it's very tiny, but you've now got these two nodes on the edge. And that's because it's either side of the path. And I can stretch this out a little bits so you can see what I mean and then stretch this out. And what that's doing is it's making that path for that object for this remember how tiny that stroke was it's making that path wider so again, I can do all sorts of things with this path. Now that I'm now with this object, now I've converted just the stroke part to a path so i can start to do all sorts of mad drawings with it like this, Okay so what I'd like you to do is have a go at doing something similar. Draw your own objects then and convert them to a path. Pause the video while you do that. Brilliant, so what we're going to to do next then, we're going to now discover how to draw our own paths. Let's have a look, let's have a go at some freehand then. So if you look all the way over here, you've got draw freehand lines, so if you click on that, then what you can do is draw your own lines like so. Just draw whatever you like, and you can see the different nodes that are used for that pattern by clicking on the edit path nodes, and you can actually see, look how many nodes have been created just from that simple drawing there and you can pull those nodes out and change the path of the object as well, like so, So I click off it has made quite a crazy picture a crazy snail picture like that. You can also make your object so that they're joined together, so if I was doing a free hand heart, for example, Oh, that's fairly accurate, to be fair, what I did is I made sure that that start point and that end point that it joined together at the very end, let me just draw another one and I'll do try and do it slowly, but I can't do it as neat, but I'm doing it slowly. So but just draw another one, oh watch what happens as I get to the end, so when I get to the end, it turns red. Then when I let go, I know that it's a full shape. So if I click on that, now remember, I can't click on it, coz there's nothing on the inside so I have to go to the edge, and I can actually change the fill colour and have a heart now, so I've made my own vector graphic path, and I filled it as well and I can just I can change the stroke, just like I've done before with the objects, I can have a stroke on there, and I can have different thicknesses, just like I did before, so that's a freehand one. And then I can edit and change that however I like. But also, we've got straight lines too. So if we click on that, if I just click once there, once they're and once there, and then when I'm happy, I just double click, and that ends the drawing there. So that's the the end of the path. And again, I can do things with the thickness as well, if I want to, so that's just made a line. And also if I want to do it so that they're joined together. So if I wanted to do do my own irregular polygon, what I could do is I could make sure that it gets to that red bit there, click on it, and now it's an object that I can fill like so. So see if we can have a go at your own drawings. So pause the video while you have a go your own drawing, you could draw something like a face if you want to or my hearts or whatever you like, take inspiration from wherever you want to pause the video while you have a go at that. Excellent, so what we're going to do now is we're going to look at editing those path nodes, so let's see how that works. There are loads of different ways that we can edit path nodes, so first of all, I'm going draw a simple shape like this one, so I've now got my shape that I've chosen. And then we've got up here, edit path nodes. Now if I want to just edit one like this, then I can just move it around like this, like so, you've already seen that. Now these sections here these lines are called segments they're between the two nodes. If I click on a segment, then either side the nodes that are either side of that path are selected blue. And then what I can do is I can actually add more nodes to it, so if I want to insert a new node into the selected segment, then I click on it there, and one comes in the middle, like this. Now at the moment, all three are selected, so all three are moving, but if I double click, I can now just move that one, like so. So if I wanted another segment, to have another node in it, I can click on that segment, or go to plus and then if they're all selected, then they'll all move or if I just want that one, then it will move like that. If I didn't like that node and I wanted to get rid of it, then I just need to make sure that it's selected which it is and then I press the delete one, and then it disappears. And it stayed roughly where it is, but this time We've now got this curved line here, because it's trying to fill in that information. And now I can actually curve it as well, using these handles can also break apart nodes, so if I look at this one here, I can find the break apart, so that's join here we go break path at selected nodes, so if I click on that doesn't look like much has happened at the moment. But what I can do now is I can actually separate those two paths, and now it's just an outline here, and this is broken, so it's not a full object anymore, so it's been broken apart. If we're wanted to join them together again, then what I can do is I can select either like that to make sure that they're both blue, or I can hold down the shift key and select two like that. So a little bit like when we were selecting whole objects on the page, so I've selected those two now and then I'm going to to join them together and find that one. Join selected nodes and there we go, it's joined it together can delete a segment if I didn't want a whole segment. So that whole line there, if I wanted to delete it, then I can go to let's have a Look, there we go delete segment between two non endpoint nodes. So there we go, and now I've deleted a segment like that. And then if I wanted to create a segment or put that one back in, I just need to make sure that those two nodes are selected where you want that segment to go and I find that tool join selected end nodes there we go. And then it joins back together. Can make the selected nodes smooth. So I've got two selected nodes there, If I go up here, and it says make selected nodes smooth, then you can see now these two handles appear on either side of blue nodes and I can actually move these around. I've to add a curve to the image, I can really start editing out and pulling that curve where I'd like it to go. I can make a segment a curve, so I think there's only two left that aren't curves on this. So if I click on that one that then I've selected that segment, and then I just need to go up to where are you think it's one of these, there it goes. So make selected segments curves, and doesn't look like much has happened apart from you've got these two new handles here now so what I can do is I can start pulling this out. And now I've got a curve, so there's all sorts of things that you can do to these paths. And all you're doing is just changing the path of this shape here and there's lots of options for you to play around with when you're experimenting yourself. Brilliant so want you to have a go now at doing that yourselves, so edit the path nodes on your own image, so don't just stick with my boring one. You could think of something a bit more exciting that you might want to try and draw, and practise editing those path nodes. Pause the video while you do that. Excellent, right, I've got a challenge for you now. So it's an icon challenge, you've got four icons there, and I want you to just pick one of them. To recreate yourself, see if you can have a go at them. You can do all four if you want to but this is using all of the skills that you've developed so far in this unit, and see if you can use them to create those icons. So create recreate one of the icons and they're also on the worksheet as well for you to have a look at. Pause the video while you do that. Brilliant, that is the end of this lesson. So you've learned all sorts about those paths and how to turn objects to paths and how to edit those paths and make those objects more sort of personalised, and do exactly what we want with them. So there's a lot lot covered in this lesson. Now, if you'd like to, please ask your parent or carer to share your work on Instagram, Facebook or Twitter, tagging @OakNational and hashtag learn with Oak coz I'd love to see those icons that you've had to go at this lesson, see how far you got be really good. And I'll see you soon for the next lesson.

Worksheet: Icon challenges

Exit Quiz: Icon challenges

Completed: Icon challenges

This unit requires that you have a computer that has Inkscape version 0.92 installed on it. This is free and open source and is available from Inkscape.org. Ask your parent or carer for permission and support to install this software.
In this lesson you will be presented with a set of monochrome icons and be challenged to create some of them from scratch, starting from elementary shapes and combining them with path operations. The icons are carefully selected to range from simple ones that are straightforward to produce to more complex ones that require some creative thinking.

Computing

Icon challenges

Video

Worksheet

Final Quiz

Lesson Complete