This is an archive for all the Vector Art Lessons for Scratch School. If you have any questions, post it on the Scratch School thread.
The point of this thread is easy reference for all the lessons, without having to look through the Scratch School thread for it.

Links:
Scratch School
Homework Project
Scratch School Studio

Lesson #1

Hello and welcome to Vector Art Class. Today I will introduce you to the Vector Paint Editor. In Scratch, there are two different paint editors, Vector, and Bitmap. They are both good in different ways. Here is a comparison:

Vector
+ Smooth, less pixelated
+ Doesn't go jagged when resized
- Editor can be a bit more confusing and limited than the Bitmap one.
Bitmap
+ Editor has many features and is easy to use
+ Can be used for pixel art
- Pixelated
- Does not resize well

These are the topics I will go over in this class:

How Vector Graphics Work
The Fill Tool
The Circle and Rectangle Tools

Ok, lets get started!

How Vector Graphics Work
Unlike Bitmap, which uses regions, Vector graphics are based on shapes. All the graphics you put in are shapes, which can be selected, and from there you can; rotate them, shrink or enlarge them or delete them. This leads on to…

The Fill Tool
The fill tool in vector can be confusing for some people, as it doesn't cover closed off regions, like in bitmap. Instead, it covers your Vector shapes, like I said before. Say you make a square, the fill tool would fill the inside of the square. Tip: If you want to cover the whole screen with a single color in Vector, there are two easy ways. 1. Cover it with one big filled in rectangle. 2. Put a hollow rectangle around the screen and use the fill tool.
How to use: Press the tool icon (It looks like a paint bucket), then click on the area inside the shape you want to fill.

The Circle and Rectangle Tools
Two other very useful tools in Vector are the circle/oval tool and the square/rectangle tool. They can be used to make a shape out of those four of any size. You can edit the shape you have made afterwards by clicking on it, then dragging around the circles on its corners to change its shape. The two main types of shapes you can make using these tools are hollow shapes or filled shapes. Hollow shapes are just outlines and filled shapes are covered fully.
Tip: Hold shift while making your shape to make it a perfect circle or square. You can also fill in the area inside your new shape if it is hollow using the fill tool. Or just change the color of the whole shape.

This is all for this lesson. I hoped you learned a bit about the editor. More things to come next lesson!

Homework (Optional): Go into the sprite named “Homework” in this project and edit it in Vector. Turn it into anything you like using the tools you learned about today! Then remix it if you want to!

Quiz (Optional): Take this quiz (Link coming soon) about what you learned today!

If I didn't go into enough detail or you didn't understand something, please tell me! If you have any feedback on the lesson, post it on this thread! You can view all my other lessons here!

Lesson #2

Hello again, welcome to the second Vector Art Class lesson. By the end of this lesson you will hopefully have learned a lot about how to use the very useful and important reshape tool.

These are the topics we will go over today:

The Line and Paintbrush Tools
Reshape Tool
How to make Semicircles and other similar shapes with the Reshape Tool

Let's get started!

The Line and Paintbrush Tools
The paintbrush tool is a fairly simple tool. You select it, hold your mouse button, and drag your mouse around to draw. Like most tools, you can select a thickness, and different thicknesses are good for different jobs. A downside of this tool is it is very hard to be accurate, making its uses pretty limited. But luckily, you have the Line Tool! The Line Tool can make perfectly straight lines in any direction at any thickness. To use it, click the tool, then click and hold your mouse where you want the line to start, and move around the mouse to make your line! Test it out in your editor! This tool is useful if you are making blocky things, or need precision. It can do more than just make lines though, but only with a little help of the Reshape tool!

Reshape Tool
Finally we get to learn about the Reshape Tool! The pride and joy of the Vector editor! It greatly enhances the editors functionality. Some uses of it are; making semicircles or cut up circles, bending lines to make them curve, and general editing of the shapes you have made. Seems cool, right? Here's what it does and how it works; when you select the tool, then click on any shape you've made, it shows the points of the shape, which are shown as little white circles. You can manipulate these points by stretching/moving them, deleting them or merging them with other points. Now I'll go over how to do that. So get out your editor and make sure you have the reshape tool selected and have clicked on a shape you want to edit.
Stretching/Moving Points
To stretch or move points, click on the point you want, then drag your mouse around, watch what happens, it should alter the shape! Try and test this out and see what you can make!
Merging Points
To merge points, move them in to another point, then release your mouse. The points should merge into one. This is a good alternative for deleting points if you don't want a big gap in your shape.
Deleting Points
To delete points, hold the shift key and click on the point you wish to delete. It will remove part of the shape! Remember how to do this, as you will need it for our next topic, how to make semicircles!

How to make Semicircles and other similar shapes with the Reshape Tool
To cut up a circle into a semicircle or any other shape, get out your reshape tool, and select the circle. If you want to make a semicircle, just delete all the bottom points. If you want a closed of semicircle, just put a line at the bottom. Tip: When adding the line, you can start it by clicking on one of the points of the circle, then end it on the opposite point. This should merge the line with the circle, enabling you to use the fill tool on it!

That's all for this lesson, to test what you've learned, try out the Homework and Quiz!

Homework (Optional): Play around with the Reshape tool until you get used to it!

Quiz (Optional): Coming soon!

If I didn't go into enough detail or you didn't understand something, please tell me! If you have any feedback on the lesson, post it on this thread! View all my other lessons here!

Lesson #3

Another lesson out already! Welcome to the third Vector Art Class Lesson. Today we will learn about Layering and the Duplicate Tool.

Here are the topics we will go over today:

Layering
Duplicate Tool

Let's begin the lesson!

Layering
You know how Vector graphics are made of shapes? Well you can overlap those shapes. But what if you want to get back a shape that you have overlapped? Just click on the shape in front, then look under your tool section to find the Layering tools. You can send things back or forwards in layers. You could test it out by making a face. If you do the facial features first, then put in the head, all the features will be gone! To get them back, click on the head and press the backwards one layer button. Try and see what cool things you can make with layering!

Duplicate Tool
The Duplicate Tool, like the name implies, duplicates shapes. You click on the tool, then hover your mouse over the shape you want to duplicate. It should get outlined if you can duplicate it. Then click and hold, and let go where you want to place the duplicate. This tool can save you a lot of time. Tip: If you want to duplicate something many times in one go, hold shift, and click around, see what happens! Tip: Once you duplicate something, it's not just printed, it's it's own shape, so you can still edit it.

That concludes this lesson. Like always, there is optional homework and a quiz will be coming out soon.

Homework (Optional): Make the face of your favourite animal, try and use layering, and duplicating for the facial features like eyes, ears etc. It can be realistic or cartoony, simple or detailed, it's up to you! Use the same project as the previous homework and remix it if you want to!

Quiz (Optional): Coming soon! I know I keep saying this, but don't worry, I will make the quizzes soon.

If I didn't go into enough detail or you didn't understand something, please tell me! If you have any feedback on the lesson, post it on this thread! You can view all my other lessons here!

Lesson #4

Welcome to the fourth Vector Art Lesson. Last lesson was a bit short, so I'll make up for it in this lesson.

Today's topics:

Colour
Text and Fonts
Vector to Bitmap, Bitmap to Vector

Hope you enjoy this lesson!

Colour
Note: I'm Australian so I spell it “Colour”.
We have learned about lots of tools in previous lessons, but I only quickly talked about the colour options. Well, in the Vector editor you have many different colours you can choose to colour your shapes. To colour a shape just select the colour from below. There are two different ways of picking colours. You can pick the regular palette, which has many colours to choose from, or you can choose the colour wheel, where you pick a colour from a circle. Both are good so try them out! Also, you can pick the shade (I don't know what it's called so I'll just call it that) options for some shapes. It is basically a pattern gradually getting lighter or darker in left, right, up or down directions. See it for yourself, it'll be near the colour picker for a square/rectangle.

Text and Fonts
In the Scratch Vector editor, there are many fonts to choose from, they include; Donegal, Gloria (My favourite), Helvetica, Marker, Mystery and Scratch.
In Vector, the text you input is a shape, meaning you can change its size, and even tilt it in other directions! You cannot use the reshape tool on text. Like all Vector graphics, the text appears much smoother than Bitmap text. Through experimentation, I have tried pressing the layering button on text with a shape overlapping it, but it didn't work. But if you click on text behind another shape, it will go to the front, and vice versa.

Vector to Bitmap, Bitmap to Vector
We know we have two editors, Vector and Bitmap, and they are both very different, but what happens if we switch between them? Firstly, if we switch from Vector to Bitmap, our Vector shapes will become jagged like bitmap graphics, and even if you go back to Vector, they won't auto-fix, you have to press the undo button. Also, when you go back into Vector, the graphics won't be shapes anymore! Meaning no fill tool. Ok, now, Bitmap to Vector. This doesn't really do much. Say, you make a jagged circle in bitmap, then you go to Vector. It'll stay exactly the same, except you can add Vector graphics on top of it. Now you know the consequences of switching between editors.

I hop you learned a lot in this lesson. There is no Homework or Quiz this time, as I'm trying to make the quiz ready for the next lesson.

If you didn't understand anything in this lesson, please tell me so I can clear things up. Also, post any feedback on the lesson on this thread. You can view all my other lessons here!

Lesson #5

Getting back into the routine of posting these every other day! Welcome to the fifth Vector Art Lesson. We have lots of topics this lesson.

These are today's topics:

Pick Up Colour Tool
The Flip Tools
Centering
Undo and Redo

Let's begin!

Pick Up Colour Tool
The Pick Up Colour tool is located on the right of the colour palette. With it, you can select any colour you already have in any shape, and use it again. To use it, select the tool, and move your mouse over a colour or shape. Your mouse should turn into the symbol for the tool. Then click, and you will take that colour. The selected colour will then change to the colour you picked, and the next time you make a shape it will be that colour. That's all there really is for this tool.

The Flip Tools
The Flip Tools (Flip left-right, and Flip up-down) are located in the top right corner of the editor, right under “See Project Page” and next to the Centering Tool, which we will talk about next. Flip left-right is a useful tool for flipping your sprites around and can be used for animations, etc. To use it, select the shape you want to flip, and press the tool. Tip: To get the whole thing of whatever you're making selected, click the Select Tool (The one with the mouse as an icon), and highlight the whole shape. See what happens when you press flip now, it'll flip all your shapes! The Flip Up-Down Tool is used exactly the same way so I don't think I need to explain it.

Centering
The Centering Tool is used to, as the name implies, center objects. This is very useful for bug fixing. Ever had your sprite never facing the right way when its supposed to point at something? Does you sprite go wonky when it turns? Will it appear displaced when you make it go to another sprite? Your problem can probably be fixed by centering your sprite. The Center Tool is located next to the Flip Tools, from last topic, once you have your mouse over it, keep reading. Click on the tool, and you should see two black lines, crossing over eachother, through the middle of the screen. The middle of these lines is where your sprite center is. Click on where you want the new center to be, or drag the lines. When you let go of the mouse, your shapes would have moved around. Now test out your debugged script! The sprite should be turning fine now!

Undo and Redo
Made a mistake? Don't worry, the undo tool can fix it. This tool is pretty simple. Just press the tool, located in the upper middle of the screen, and it will undo the last thing you did. If you accidently undid something, press the redo button and it will go back to what it was. No more worrying about making mistakes, you can just undo them!

There is no homework this lesson, just keep practising using the editor and making sprites!

If you didn't understand something in this lesson, please tell me and I can explain. Also, if you have any feedback on this lesson, post it on this thread! You can view all my other lessons here!

Lesson #6

Welcome to the sixth Vector Art Lesson. In this lesson, instead of learning about tools in Vector, we will learn about costumes, their uses, and how to animate your sprites.

These are today's topics:

Costumes
Animating
Scripting Effects

Let's begin!

Costumes
Ok, so we've learned how to use all the tools and make a single sprite. But what happens if you want that sprite to move, or animate? Well you need costumes. On the right of the editor, you should see a blue box with your sprite inside it, that is your first costume. Look above that and find the list of the icons to choose from to make a new costume. Like making a new sprite, you can choose a premade costume, import one or make your own. Click the make your own button for a brand new fresh costume. But what if we don't want it blank, what if we want an exact copy of the previous costume, to edit for an animation? Well then read on about animating!

Animating
Ok, first off if you want to animate, right click your current costume, then click duplicate. You should have a new costume that looks exactly the same. Now, all you need to do is edit it a little bit to make an animation!
Animating Tips:
1. If you have a sprite of a person or animal, you can just select the arm or paw, and spin it around a bit for a waving, punching, clapping etc. animation!
2. Don't edit too much at once or your animation will look too robotic. Use multiple costumes for long animations, and edit each one a little bit, then put them all together.

Scripting Effects

Changes your sprites colour.

Changes your sprites size without you needing to go and make a new costume with a smaller sprite.

Makes your sprite more transparent.
More scripting effects next lesson!

Homework: Animate one of your previously made sprites to do something when the space bar is pressed! Share your project and put it in the Scratch School studio if you want!

If you have any questions about what you learned, please tell me! Leave any feedback by posting on this thread! You can view all my other lessons in my Scratch School Vector Archive thread.

fill tool won't work! It's so annoying.

Same my fill tool isn't working either !!!!!!!! Typical

The fill tool is not exactly a fill tool, it changes the color of the border and/or the inside of a shape.

Hello!!! Can I apply for a teacher? Im pretty much advanced at Scratch, and I can also help in some art areas. Tell me If I can apply, and Ill make an application!
Thanks!

I don't know how to color full when I am on vector and so I came here but I still don't know how to color in vector. You can only color skinny things like things you draw. I tried to search for: how to color in vector and this came up but I did not learn at all from this… (not to be mean but I don't know)
so if someone will just tell me how to color full stuff in vector that would be nice but no-one is telling me.

wbpx9201 wrote:

Lesson #1

Hello and welcome to Vector Art Class. Today I will introduce you to the Vector Paint Editor. In Scratch, there are two different paint editors, Vector, and Bitmap. They are both good in different ways. Here is a comparison:

Vector
+ Smooth, less pixelated
+ Doesn't go jagged when resized
- Editor can be a bit more confusing and limited than the Bitmap one.
Bitmap
+ Editor has many features and is easy to use
+ Can be used for pixel art
- Pixelated
- Does not resize well

These are the topics I will go over in this class:

How Vector Graphics Work
The Fill Tool
The Circle and Rectangle Tools

Ok, lets get started!

How Vector Graphics Work
Unlike Bitmap, which uses regions, Vector graphics are based on shapes. All the graphics you put in are shapes, which can be selected, and from there you can; rotate them, shrink or enlarge them or delete them. This leads on to…

The Fill Tool
The fill tool in vector can be confusing for some people, as it doesn't cover closed off regions, like in bitmap. Instead, it covers your Vector shapes, like I said before. Say you make a square, the fill tool would fill the inside of the square. Tip: If you want to cover the whole screen with a single color in Vector, there are two easy ways. 1. Cover it with one big filled in rectangle. 2. Put a hollow rectangle around the screen and use the fill tool.
How to use: Press the tool icon (It looks like a paint bucket), then click on the area inside the shape you want to fill.

The Circle and Rectangle Tools
Two other very useful tools in Vector are the circle/oval tool and the square/rectangle tool. They can be used to make a shape out of those four of any size. You can edit the shape you have made afterwards by clicking on it, then dragging around the circles on its corners to change its shape. The two main types of shapes you can make using these tools are hollow shapes or filled shapes. Hollow shapes are just outlines and filled shapes are covered fully.
Tip: Hold shift while making your shape to make it a perfect circle or square. You can also fill in the area inside your new shape if it is hollow using the fill tool. Or just change the color of the whole shape.

This is all for this lesson. I hoped you learned a bit about the editor. More things to come next lesson!

Homework (Optional): Go into the sprite named “Homework” in this project and edit it in Vector. Turn it into anything you like using the tools you learned about today! Then remix it if you want to!

Quiz (Optional): Take this quiz (Link coming soon) about what you learned today!

If I didn't go into enough detail or you didn't understand something, please tell me! If you have any feedback on the lesson, post it on this thread! You can view all my other lessons here!

Is there another way to fill the insides besides converting to bitmap? Iv'e been trying to play with vector, and I have to color the inside by hand.

Sure there is:
http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html

Seems interesting. I think I'll do this, I've really never touched Vector in my life.

animalfairy06 wrote:

wbpx9201 wrote:

Lesson #1

Hello and welcome to Vector Art Class. Today I will introduce you to the Vector Paint Editor. In Scratch, there are two different paint editors, Vector, and Bitmap. They are both good in different ways. Here is a comparison:

Vector
+ Smooth, less pixelated
+ Doesn't go jagged when resized
- Editor can be a bit more confusing and limited than the Bitmap one.
Bitmap
+ Editor has many features and is easy to use
+ Can be used for pixel art
- Pixelated
- Does not resize well

These are the topics I will go over in this class:

How Vector Graphics Work
The Fill Tool
The Circle and Rectangle Tools

Ok, lets get started!

How Vector Graphics Work
Unlike Bitmap, which uses regions, Vector graphics are based on shapes. All the graphics you put in are shapes, which can be selected, and from there you can; rotate them, shrink or enlarge them or delete them. This leads on to…

The Fill Tool
The fill tool in vector can be confusing for some people, as it doesn't cover closed off regions, like in bitmap. Instead, it covers your Vector shapes, like I said before. Say you make a square, the fill tool would fill the inside of the square. Tip: If you want to cover the whole screen with a single color in Vector, there are two easy ways. 1. Cover it with one big filled in rectangle. 2. Put a hollow rectangle around the screen and use the fill tool.
How to use: Press the tool icon (It looks like a paint bucket), then click on the area inside the shape you want to fill.

The Circle and Rectangle Tools
Two other very useful tools in Vector are the circle/oval tool and the square/rectangle tool. They can be used to make a shape out of those four of any size. You can edit the shape you have made afterwards by clicking on it, then dragging around the circles on its corners to change its shape. The two main types of shapes you can make using these tools are hollow shapes or filled shapes. Hollow shapes are just outlines and filled shapes are covered fully.
Tip: Hold shift while making your shape to make it a perfect circle or square. You can also fill in the area inside your new shape if it is hollow using the fill tool. Or just change the color of the whole shape.

This is all for this lesson. I hoped you learned a bit about the editor. More things to come next lesson!

Homework (Optional): Go into the sprite named “Homework” in this project and edit it in Vector. Turn it into anything you like using the tools you learned about today! Then remix it if you want to!

Quiz (Optional): Take this quiz (Link coming soon) about what you learned today!

If I didn't go into enough detail or you didn't understand something, please tell me! If you have any feedback on the lesson, post it on this thread! You can view all my other lessons here!

Is there another way to fill the insides besides converting to bitmap? Iv'e been trying to play with vector, and I have to color the inside by hand.

The other option is to simply use circles for everything and then re-shape it. That's what I do and it works splendidly.

wbpx9201 wrote:

Also, you can pick the shade (I don't know what it's called so I'll just call it that) options for some shapes. It is basically a pattern gradually getting lighter or darker in left, right, up or down directions.

It's called a gradient. I believe you're talking about a gradient between a brighter and darker color.

I STILL HAVE NO ABSOLUTE IDEA HOW TO ERASE IN VECTOR!!!
IT'S SO ANNOYING!


can anyone help, plz?

How do you make something in vector clear?

If by clear you mean transparent, vector shapes are automatically transparent if you select the “outline” version at the bottom left. I'm talking about for circles and rectangles which is what you should always start with when you draw in vector. Never use the pencil tool.