Difference between revisions of "Inkscape/C2/Create-and-edit-shapes/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "{| Border =1 | Time | Narration |- | 00:01 | Welcome to the Spoken Tutorial on '''“Create and edit multiple objects” '''using '''Inkscape.''' |- | 00:08 | In this tutor...")
 
Line 1: Line 1:
 
{| Border =1
 
{| Border =1
 
| Time
 
| Time
| Narration
+
| Narration
  
 
|-
 
|-
| 00:01
+
| 00:00
| Welcome to the Spoken Tutorial on '''“Create and edit multiple objects” '''using '''Inkscape.'''
+
| Welcome to the Spoken Tutorial on '''“Create and edit shapes” '''using '''Inkscape.'''
  
 
|-
 
|-
| 00:08
+
| 00:06
| In this tutorial, we will learn to Copy and paste objects
+
|In this tutorial we will familiarize ourselves with '''Inkscape.'''
  
 
|-
 
|-
| 00:13
+
| 00:10
Duplicate and '''clone''' objects
+
| We will learn about Inkscape interface and how to  Create basic shapes
  
 
|-
 
|-
 
| 00:16
 
| 00:16
Group and Order various objects
+
Fill color and Modify shapes using '''handles'''
  
 
|-
 
|-
| 00:19
+
| 00:20
| Multiple selection and invert selection
+
|For this tutorial, I am using  '''Ubuntu Linux''' 12.04 OS
  
 
|-
 
|-
| 00:22
+
| 00:25
|  '''Clipping''' and '''Masking'''
+
|  '''Inkscape''' version 0.48.4
  
 
|-
 
|-
|00:25
+
| 00:29
| To record this tutorial, I am using '''Ubuntu Linux''' 12.04 OS
+
| Go to '''Dash home '''and type '''Inkscape'''.
  
 
|-
 
|-
| 00:31
+
| 00:34
| '''Inkscape''' version 0.48.4
+
| You can open '''Inkscape''' by double-clicking on the '''logo.'''
  
 
|-
 
|-
| 00:35
+
| 00:38
| Go to '''Dash home '''and type '''Inkscape.'''
+
|On the top of the interface, you will find the '''Menu bar '''and''' Tool controls bar.'''
  
 
|-
 
|-
| 00:39
+
| 00:44
| You can open '''Inkscape''' by clicking on the logo.
+
| This is followed by '''rulers '''at the top and at the side.
  
 
|-
 
|-
| 00:42
+
| 00:48
| Let's open the '''Assignment_1.svg '''file that we created earlier.  
+
|On the right side of the interface, you will find the '''Command bar''' and '''Snap controls bar.'''
  
 
|-
 
|-
| 00:49
+
| 00:54
| I had saved it in my '''Documents''' folder.  
+
|The '''Tool box '''is located on the left side of the interface.
  
 
|-
 
|-
| 00:52
+
| 00:58
| First we will learn how to copy and paste an object.  
+
|In the centre, is the '''canvas'''. This is where you will draw your graphics.
  
 
|-
 
|-
| 00:56
+
| 01:03
| To do so, we should first select an object. So, click on the pentagon.
+
|At the bottom of the interface, we can see the '''color palette '''and the '''status bar.'''
  
 
|-
 
|-
| 01:02
+
| 01:09
| Now, press '''Ctrl + C''' on your keyboard to copy it.
+
|Now, let us learn to create and edit some basic shapes in '''Inkscape'''.
  
 
|-
 
|-
| 01:07
+
| 01:14
| Now press '''Ctrl + V''' to paste the object. You can see a copy of the pentagon on the canvas.
+
|First of all, we will learn about '''Select and Transform tool. '''It is commonly called as''' Selector tool.'''
  
 
|-
 
|-
| 01:17
+
| 01:22
| There are 3 other ways of creating copies of objects.  
+
| It's a very important tool. You will find it on the left hand side of the '''Tool box.'''
  
 
|-
 
|-
| 01:21
+
| 01:28
| In all these 3 methods, a copy of the object is created exactly above the original one.
+
|With this tool, you can select objects, transform and move them around on the '''canvas.'''
  
 
|-
 
|-
| 01:29
+
| 01:34
| The first method is called '''Paste Special.'''
+
|To open a new '''Inkscape''' document, click on '''File''' and then choose '''New''' and click on '''Default'''.
  
 
|-
 
|-
| 01:32
+
| 01:41
| Recall that we had already pressed '''Ctrl + C''' to copy the object.
+
|To open an existing '''Inkscape''' document, click on '''File''' and then choose '''Open.'''
  
 
|-
 
|-
| 01:38
+
| 01:47
| To paste the object in the exact location from where it was copied, press '''Ctrl + Alt + V '''keys.
+
|Let's open the '''drawing_1.svg '''file that we created earlier.
  
 
|-
 
|-
| 01:47
+
| 01:53
| Move the copied object to see the original object right below it.  
+
|I had saved in '''Documents''' folder. Click on '''Open''' button at the bottom right.  
  
 
|-
 
|-
| 01:54
+
| 02:01
| Let us move these two objects and keep it aside.
+
|We created a rectangle earlier.  
  
 
|-
 
|-
| 01:57
+
| 02:04
| The second method is called '''Duplication'''. For duplication, we do not need to copy the object first.
+
|Now, click on the rectangle.
  
 
|-
 
|-
| 02:05
+
| 02:06
| Select the pentagon and press '''Ctrl + D '''keys on your keyboard.
+
|By default, the color of the rectangle is green.  
  
 
|-
 
|-
| 02:13
+
| 02:09
| Now a duplicate pentagon is created exactly on the top of the original one.
+
|To change the color to red, we will use the '''color palette''' at the bottom.
  
 
|-
 
|-
| 02:19
+
| 02:14
| Let us move the duplicated object to see the original one below it.
+
| So, I will move the cursor to the bottom and click on red color.
  
 
|-
 
|-
| 02:25
+
| 02:18
| The changes made on the duplicated object does not affect the original object.
+
| Observe the color change in the rectangle.
  
 
|-
 
|-
| 02:32
+
| 02:22
| Let us check this by changing its color to green and reducing its size.
+
| Let us now move the rectangle.
  
 
|-
 
|-
| 02:40
+
| 02:23
| The third method is called '''Cloning.'''
+
|To do so, you should click anywhere on the rectangle.
  
 
|-
 
|-
| 02:44
+
| 02:27
| Click on the '''ellipse''' and press '''Alt + D''' to create a '''clone'''.
+
|Now, without releasing the mouse button, drag it wherever you want on the '''canvas.'''
  
 
|-
 
|-
| 02:49
+
| 02:33
| As before, the '''cloned''' object is created exactly above the original one.  
+
|Then release the mouse button.
  
 
|-
 
|-
| 02:55
+
| 02:37
| Let us move it aside to make it visible.
+
|Let us zoom in for a better view. To do so, press '''ctrl key '''and use the''' scroll button '''on the mouse
  
 
|-
 
|-
| 02:58
+
| 02:46
| Please note that the '''cloned''' object will always be linked to the original object.
+
|Notice arrows around the rectangle. These are called '''handles, '''which we can use for scaling and rotating.  
  
 
|-
 
|-
| 03:04
+
| 02:57
| The original object is also known as its parent.  
+
|When the '''cursor''' is kept on any of the '''handles, '''the color of the '''handle '''changes.
 +
 
 +
|-
 +
| 03:02
 +
|This indicates that particular '''handle '''is selected and ready for resizing.
  
 
|-
 
|-
 
| 03:08
 
| 03:08
| Any modifications on the original object, that is, in size, color etc. will affect its '''clone'''.  
+
|To scale or resize the rectangle, click and drag on any one of the corner '''handles'''.
 +
 
 +
|-
 +
| 03:17
 +
|If you want to keep the aspect ratio same, hold the '''ctrl key''' while resizing.
 +
 
 +
|-
 +
|03:24
 +
|To change the length or the width of the rectangle, use one of the '''handles''' on the sides of the rectangle.
  
 
|-
 
|-
|03:16
+
| 03:32
| Let us check this by changing the original objects's color to pink, rotating it and reducing its size.  
+
|Click and drag the '''handle, '''either to the left or to the right.
  
 
|-
 
|-
| 03:30
+
| 03:39
| Observe that the exact same changes are replicated in the '''cloned''' object automatically.
+
|Observe the change in the width of the rectangle.
  
 
|-
 
|-
| 03:36
+
| 03:43
| To unlink the '''clone''' from the original object, first select the '''clone''' and then press '''Shift + Alt + D. '''
+
|Now let's change the height of the rectangle.
  
 
|-
 
|-
| 03:44
+
| 03:46
| Now, select the original object again and change its size.
+
|So, we will click and drag on either the top or the bottom '''handle.'''
  
 
|-
 
|-
| 03:50
+
| 03:51
| Observe that the cloned object does not get affected.
+
|Observe the change in the height of the rectangle.
  
 
|-
 
|-
 
| 03:54
 
| 03:54
| The short-cut icons for these operations are present in the '''command bar,''' as shown.
+
|We can also change the width and height of the rectangle manually, by changing the '''width''' and '''height''' parameters on the''' Tool controls bar.'''
  
 
|-
 
|-
|04:01
+
|04:03
| To select multiple objects hold the '''Shift key''' and click on the objects that you want to select.  
+
|I will change the '''width''' to 400 and '''height''' to 200.
  
 
|-
 
|-
| 04:08
+
| 04:07
| I will select one ellipse first. Then I will hold the '''Shift key '''and select the other ellipse.
+
|Notice the change in the size of the rectangle.
  
 
|-
 
|-
| 04:15
+
| 04:10
| Notice that both the objects are now selected.
+
|In a similar way, you can also move the object by changing the X and Y axes positions.
  
 
|-
 
|-
 
| 04:19
 
| 04:19
| We can now group them by pressing '''Ctrl + G '''keys together.
+
|Now, let's learn how to rotate the rectangle.
  
 
|-
 
|-
 
| 04:24
 
| 04:24
| Notice the ellipses are now grouped as a single object.
+
|To do so, click on the rectangle once again.  
  
 
|-
 
|-
| 04:28
+
| 04:27
| You can move them around and you will notice that both the objects move together as one object.
+
|Notice that now, the shape of the corner '''handles '''has changed, to indicate that it is ready for rotation.
  
 
|-
 
|-
| 04:35
+
| 04:34
| Try resizing the group and you will notice that both the objects get resized proportionately.
+
|I will click on the top right corner '''handle''' and rotate the rectangle.  
  
 
|-
 
|-
| 04:43
+
|04:44
| Change the colour to blue and observe that both the objects change to the same colour.
+
|You can also skew the rectangle by clicking and dragging any of the side '''handles'''.  
  
 
|-
 
|-
| 04:53
+
| 04:50
| What do we do if we want to change the properties of only one of the objects in a group?
+
|I am clicking the left middle '''handle''' and dragging it up and down to skew the rectangle.
  
 
|-
 
|-
| 05:01
+
| 04:56
| To select an object within a group, press the '''Ctrl '''button and''' click '''on the object'''. '''
+
|Observe the changes as I do so.
  
 
|-
 
|-
| 05:08
+
| 04:59
| By this action, we can enter inside the group and select individual objects.
+
|We will learn some more details on using these '''handles''' in another tutorial.
  
 
|-
 
|-
| 05:13
+
| 05:04
| To exit the group, click anywhere on the blank space on the canvas.
+
|Let us unselect this shape now.  
  
 
|-
 
|-
| 05:18
+
| 05:06
| To ungroup objects, first select the group and press either''' Ctrl + Shift + G '''keys or''' Ctrl + U '''keys'''. '''
+
|To do so, click anywhere in the '''canvas''' area or outside the '''canvas''' boundary.
  
 
|-
 
|-
| 05:28
+
| 05:11
| Now the ellipses are ungrouped.
+
|Let me move the mouse back to the '''Tool box''' and over the same rectangle tool.
  
 
|-
 
|-
| 05:31
+
| 05:17
| The short-cut icons for these operations are present in the command bar, as shown.
+
|The tool tip says that we can draw rectangles and squares using this tool.
  
 
|-
 
|-
| 05:36
+
| 05:22
| To select all the objects on the canvas, press '''Ctrl + A''' keys'''.'''
+
|So, first let me click on this tool.
  
 
|-
 
|-
| 05:42
+
| 05:25
| To unselect all the objects, click anywhere on the blank space on the canvas.
+
|To draw a square, simply hold the '''ctrl key''' and drag on the '''canvas.'''
 +
 
  
 
|-
 
|-
| 05:48
+
| 05:30
| If we want to select all objects except a particular one, we can use the '''Invert Selection '''option.
+
|Let me change its color to pink.
  
 
|-
 
|-
| 05:55
+
| 05:32
| Let's say, we want to select all the objects except the arrow.  
+
|An assignment for you.
  
 
|-
 
|-
| 05:59
+
| 05:34
| So, first click on the arrow. Now go to '''Edit menu '''and click on '''Invert selection.'''
+
|Select the '''Create''' '''circles and ellipses '''tool from the '''Tool box'''.
 
+
  
 
|-
 
|-
| 06:08
+
| 05:38
| Notice that all the objects in the '''canvas''' are now selected except the arrow.
+
| Use the '''ctrl key''', draw a circle on the canvas.
  
 
|-
 
|-
| 06:16
+
| 05:42
| Now let us learn how to order the objects.
+
| Color it blue.
  
 
|-
 
|-
| 06:20
+
| 05:44
| Let me move the smaller pentagon on top of the larger pentagon.  
+
|This is my circle.
  
 
|-
 
|-
| 06:25
+
| 05:46
| Now let us draw a star and keep it on top of the smaller pentagon.
+
|Now let us learn how to modify this circle.
  
 
|-
 
|-
| 06:36
+
| 05:49
| Select the smaller pentagon. Go to '''Object menu '''and click on '''Raise. '''
+
|You can change the start and the end parameters to alter the shape of the circle to an '''arc''' or a '''segment'''.
  
 
|-
 
|-
| 06:42
+
| 05:56
| Notice the smaller pentagon is now raised and is above the star.
+
|There are 3 options here on the '''Tool controls bar,''' which helps to switch between the shapes.  
  
 
|-
 
|-
| 06:47
+
| 06:03
| Now click on the star. Go to '''Object menu.''' Click on '''Lower.'''
+
|Let me change the '''Start''' parameter to 100 and '''End''' parameter to -50.
  
 
|-
 
|-
| 06:53
+
| 06:09
| Now the star is moved down or lowered and the larger pentagon now appears above it.
+
|We see that the circle shape has now changed to a segment shape.  
  
 
|-
 
|-
| 07:00
+
| 06:14
| Now let me click on the larger pentagon. Go to '''Object menu '''and click on '''Raise to top. '''Now the larger pentagon appears on top.
+
|Now I will click on '''arc icon''' and we see the change in the shape.
  
 
|-
 
|-
| 07:11
+
| 06:19
| Now again Go to '''Object menu.''' Click on '''Lower to bottom.''' Notice the larger pentagon is now moved to the bottom.
+
|We can change back to circle shape again, by clicking on the '''circle''' '''icon.'''
  
 
|-
 
|-
| 07:20
+
| 06:25
| We can find these options in the '''Tool controls bar''' too.  
+
|Now, let's take a closer look at the circle shape on our '''canvas'''.
  
 
|-
 
|-
| 07:25
+
| 06:30
| Next let us learn how to do '''Clipping. '''
+
|Notice 2 '''square handles '''and 2 circular '''handles '''called '''arc handles, '''on the shape.
  
 
|-
 
|-
| 07:28
+
| 06:37
| Clipping can make your complicated objects
+
|The 2 '''square handles '''can be used to alter the shape of the circle to an ellipse shape.
  
 
|-
 
|-
| 07:31
+
| 06:44
| conform to another element or shape of your design
+
|Just drag these '''handles''' in the up-down or left-right directions.
|-
+
| 07:35
+
| by changing their entire shape quickly and easily.
+
  
 
|-
 
|-
| 07:39
+
| 06:53
| I will use an image for this demonstration. I have an image here in a new Inkscape file.
+
|Observe the change in the shape.
  
 
|-
 
|-
| 07:45
+
| 06:56
| On this image I will draw an ellipse shape.
+
|The 2 '''arc handles '''overlap each other. Click on the '''arc handle '''and move it anti-clockwise.
  
 
|-
 
|-
|07:49
+
| 07:04
| Now, select the image and the ellipse.
+
|We can now see both the '''arc handles.'''
  
 
|-
 
|-
| 07:53
+
|07:08
| Go to '''Object menu.''' Click on '''Clip '''and then on '''Set.'''  
+
|We can modify the circle shape into arc or segment shape using these '''arc handles.'''
  
 
|-
 
|-
| 07:59
+
| 07:14
| Notice that the image is now clipped to the shape of the ellipse.
+
|Just by moving them in clockwise or anti-clockwise directions and observe the change in the shape.
  
 
|-
 
|-
| 08:04
+
| 07:24
| In Clipping, the shape of the object used as a clip, defines the area that is visible.  
+
|Now, we will click on the '''rectangle tool''' in the''' Tool box '''and then click on the square.
  
 
|-
 
|-
| 08:09
+
| 07:30
| We can remove the clip by going back to '''Object menu.''' Click on '''Clip''' and then click on '''Release.'''
+
|Notice 2 '''resize handles''' and 2 '''arc handles '''on the top right corner of the shape.
  
 
|-
 
|-
| 08:17
+
| 07:40
| Now the clip is released.
+
|As before, the 2 '''arc handles '''overlap each other.  
  
 
|-
 
|-
| 08:19
+
| 07:43
| Next let us learn to do '''Masking'''.
+
|Click on one of the '''arc handle '''and move it clockwise.
  
 
|-
 
|-
| 08:22
+
| 07:48
| '''Masking''' is very similar to '''Clipping'''.
+
|Now, we can see both the '''arc handles.'''
  
 
|-
 
|-
| 08:25
+
| 07:51
| In '''Masking''', the ''transparency'' or ''lightness'' of one object determines the opacity of the second object.
+
|We can give rounded edges to the square using these '''handles.'''
  
 
|-
 
|-
| 08:32
+
| 07:56
| To demonstrate '''Masking''', I will first make the ellipse semi-transparent using the gradient tool.
+
|Move them in clockwise or anti-clockwise directions and observe the change in the shape.
  
 
|-
 
|-
| 08:38
+
| 08:02
| Now select the ellipse.
+
|Now, let us create a polygon by clicking on the '''Stars and polygons tool '''from the '''Tool box.'''
  
 
|-
 
|-
| 08:40
+
| 08:08
| Go to '''Object menu.''' Click on '''Fill and stroke.'''
+
|This is right below the '''circle '''tool. So, click on it.
  
 
|-
 
|-
| 08:44
+
| 08:13
| Click on '''Radial gradient '''and then on '''Edit. '''
+
|We will draw a polygon in a similar way and change the color to green.
  
 
|-
 
|-
| 08:50
+
| 08:20
| Move the '''RGB sliders''' to the extreme right to change the color to white.
+
|By default, a 5-sided polygon i.e. a pentagon,''' '''is drawn.
  
 
|-
 
|-
| 09:00
+
| 08:24
| Click on the '''Stop''' drop down arrow and select the other stop.  
+
|Look at the '''Tool controls bar'''. Here, it says the number of corners of the polygon is 5.  
  
 
|-
 
|-
| 09:05
+
| 08:32
| Move the RGB sliders to the extreme left to change the color to black and change the alpha value to 255.
+
|You can create a square by decreasing the number to 4 and a triangle by decreasing it to 3.  
  
 
|-
 
|-
| 09:15
+
| 08:39
| Click on '''Add stop '''to add one more color in between.  
+
|By increasing it, we can create a pentagon, hexagon and so on.  
  
 
|-
 
|-
| 09:20
+
| 08:44
| Click on the '''Node tool''' and move the diamond handle towards the top.
+
|Notice a '''resize handle''' on the polygon.  
  
 
|-
 
|-
| 09:27
+
| 08:47
| Now, select the image and the ellipse.
+
|We can use it to resize or rotate the polygon.
  
 
|-
 
|-
| 09:30
+
| 08:52
| Go to '''Object menu. '''
+
|Convert this shape into a star shape, by clicking on the '''star icon '''next to '''polygon icon, '''in the '''Tool controls bar'''.
  
 
|-
 
|-
| 09:32
+
| 09:00
| Click on '''Mask '''and then on '''Set.'''
+
|Notice 2 '''handles''' on the star shape – one at the tip and one at the joint.
  
 
|-
 
|-
| 09:36
+
| 09:06
| Observe that the '''mask''' is formed on the image.
+
|Click and drag the handle at the tip of the star to resize or rotate it.
  
 
|-
 
|-
| 09:40
+
| 09:12
| Notice that the image takes on the transparency properties of the '''masking''' object, which is the ellipse.
+
|We can resize and skew the shape of the star using the other '''handle'''.  
  
 
|-
 
|-
| 09:47
+
| 09:17
| To remove the mask, go back to''' Object menu. '''
+
|Click on it and move in clockwise or anti-clockwise directions and observe the change in the shape and size.
  
 
|-
 
|-
| 09:51
+
| 09:25
| Click on '''Mask''' and then on '''Release.'''
+
|We have come to the end of this tutorial. Let us summarize.
  
 
|-
 
|-
| 09:54
+
| 09:30
| The '''mask''' is now removed.
+
|In this tutorial we learnt about '''Inkscape''' interface.
  
 
|-
 
|-
| 09:56
+
| 09:34
| Let us summarize.
+
|We also learnt to  Create basic shapes like rectangle, square, circle, ellipse, polygon and star.
  
 
|-
 
|-
| 09:57
+
| 09:42
| In this tutorial, we learnt to  Copy and paste objects
+
| Fill color into the shapes and Modify the shapes using '''handles'''
  
 
|-
 
|-
| 10:02
+
| 09:46
| Duplicate and '''clone''' objects
+
|Here is an assignment for you
  
 
|-
 
|-
| 10:05
+
| 09:49
| Group and Order various objects
+
|Create  a rectangle shape filled with blue color,
  
 
|-
 
|-
| 10:08
+
| 09:52
| Multiple selection and invert selection
+
|a circle shape with red color,
  
 
|-
 
|-
| 10:10
+
| 09:54
| '''Clipping''' and '''Masking'''
+
|a star with 7 sides in green color.
  
 
|-
 
|-
| 10:12
+
| 09:58
| Here are 2 assignments for you
+
|Your completed assignment should look like this.
  
 
|-
 
|-
| 10:15
+
|10:03
| Create a vertical ellipse in grey color and a circle in black color.
+
|Watch the video available at the following link, It summarizes the Spoken Tutorial project.
  
 
|-
 
|-
| 10:20
+
| 10:09
| Place the circle centrally on top of the ellipse.
+
|If you do not have good bandwidth you can download and watch it.
|-
+
| 10:23
+
|  It should look like an eye shape.
+
|-
+
| 10:25
+
|  Now group them.
+
|-
+
| 10:27
+
|  Next create a '''clone''' to make another eye.
+
|-
+
| 10:31
+
| Move it to the side to make both the eyes visible.  
+
  
 
|-
 
|-
| 10:35
+
| 10:13
| Create a circle in blue color and a square in red color.
+
|The Spoken Tutorial Project Team conducts workshops using spoken tutorial and gives certificates for those who pass an online test.
|-
+
| 10:40
+
|  Duplicate the square and keep both the squares in diagonally opposite direction.
+
|-
+
| 10:45
+
|  Select both the squares and group them into a single object.
+
|-
+
| 10:50
+
|  Place the circle centrally on top of the grouped squares.
+
|-
+
| 10:54
+
Select both and create a '''clip'''. It should look like a bow.
+
  
 
|-
 
|-
| 11:00
+
| 10:22
| Your completed assignment should look like this.
+
|For more details, please write to contact@spoken-tutorial.org
  
 
|-
 
|-
| 11:03
+
| 10:28
| The video available at the following link summarizes the Spoken Tutorial project.  If you do not have good bandwidth, you can download and watch it
+
|Spoken tutorial Project is a part of the Talk to a Teacher project
|-
+
| 11:12
+
| The Spoken Tutorial Project Team conducts workshops and gives certificates for those who pass an online test.
+
  
 
|-
 
|-
| 11:21
+
| 10:32
| For more details, please write to us.
+
|It  is supported by the NMEICT, MHRD, Government of India.
  
 
|-
 
|-
| 11:23
+
| 10:38
| Spoken Tutorial Project is supported by the NMEICT, MHRD, Government of India.
+
|More information on this Mission is available at http://spoken-tutorial.org/NMEICT-Intro
  
 
|-
 
|-
| 11:31
+
| 10:47
| More information on this Mission is available at this link.
+
|We have come to the end of this tutorial.
  
 
|-
 
|-
| 11:35
+
| 10:50
| We have come to the end of this tutorial.
+
|This is Arthi and Saurabh from IIT Bombay, signing off.  
  
|-
 
| 11:38
 
| This is Arthi and Saurabh from IIT Bombay, signing off.
 
  
 
Thanks for joining.
 
Thanks for joining.
  
 
|}
 
|}

Revision as of 16:16, 26 March 2015

Time Narration
00:00 Welcome to the Spoken Tutorial on “Create and edit shapes” using Inkscape.
00:06 In this tutorial we will familiarize ourselves with Inkscape.
00:10 We will learn about Inkscape interface and how to Create basic shapes
00:16 Fill color and Modify shapes using handles
00:20 For this tutorial, I am using Ubuntu Linux 12.04 OS
00:25 Inkscape version 0.48.4
00:29 Go to Dash home and type Inkscape.
00:34 You can open Inkscape by double-clicking on the logo.
00:38 On the top of the interface, you will find the Menu bar and Tool controls bar.
00:44 This is followed by rulers at the top and at the side.
00:48 On the right side of the interface, you will find the Command bar and Snap controls bar.
00:54 The Tool box is located on the left side of the interface.
00:58 In the centre, is the canvas. This is where you will draw your graphics.
01:03 At the bottom of the interface, we can see the color palette and the status bar.
01:09 Now, let us learn to create and edit some basic shapes in Inkscape.
01:14 First of all, we will learn about Select and Transform tool. It is commonly called as Selector tool.
01:22 It's a very important tool. You will find it on the left hand side of the Tool box.
01:28 With this tool, you can select objects, transform and move them around on the canvas.
01:34 To open a new Inkscape document, click on File and then choose New and click on Default.
01:41 To open an existing Inkscape document, click on File and then choose Open.
01:47 Let's open the drawing_1.svg file that we created earlier.
01:53 I had saved in Documents folder. Click on Open button at the bottom right.
02:01 We created a rectangle earlier.
02:04 Now, click on the rectangle.
02:06 By default, the color of the rectangle is green.
02:09 To change the color to red, we will use the color palette at the bottom.
02:14 So, I will move the cursor to the bottom and click on red color.
02:18 Observe the color change in the rectangle.
02:22 Let us now move the rectangle.
02:23 To do so, you should click anywhere on the rectangle.
02:27 Now, without releasing the mouse button, drag it wherever you want on the canvas.
02:33 Then release the mouse button.
02:37 Let us zoom in for a better view. To do so, press ctrl key and use the scroll button on the mouse
02:46 Notice arrows around the rectangle. These are called handles, which we can use for scaling and rotating.
02:57 When the cursor is kept on any of the handles, the color of the handle changes.
03:02 This indicates that particular handle is selected and ready for resizing.
03:08 To scale or resize the rectangle, click and drag on any one of the corner handles.
03:17 If you want to keep the aspect ratio same, hold the ctrl key while resizing.
03:24 To change the length or the width of the rectangle, use one of the handles on the sides of the rectangle.
03:32 Click and drag the handle, either to the left or to the right.
03:39 Observe the change in the width of the rectangle.
03:43 Now let's change the height of the rectangle.
03:46 So, we will click and drag on either the top or the bottom handle.
03:51 Observe the change in the height of the rectangle.
03:54 We can also change the width and height of the rectangle manually, by changing the width and height parameters on the Tool controls bar.
04:03 I will change the width to 400 and height to 200.
04:07 Notice the change in the size of the rectangle.
04:10 In a similar way, you can also move the object by changing the X and Y axes positions.
04:19 Now, let's learn how to rotate the rectangle.
04:24 To do so, click on the rectangle once again.
04:27 Notice that now, the shape of the corner handles has changed, to indicate that it is ready for rotation.
04:34 I will click on the top right corner handle and rotate the rectangle.
04:44 You can also skew the rectangle by clicking and dragging any of the side handles.
04:50 I am clicking the left middle handle and dragging it up and down to skew the rectangle.
04:56 Observe the changes as I do so.
04:59 We will learn some more details on using these handles in another tutorial.
05:04 Let us unselect this shape now.
05:06 To do so, click anywhere in the canvas area or outside the canvas boundary.
05:11 Let me move the mouse back to the Tool box and over the same rectangle tool.
05:17 The tool tip says that we can draw rectangles and squares using this tool.
05:22 So, first let me click on this tool.
05:25 To draw a square, simply hold the ctrl key and drag on the canvas.


05:30 Let me change its color to pink.
05:32 An assignment for you.
05:34 Select the Create circles and ellipses tool from the Tool box.
05:38 Use the ctrl key, draw a circle on the canvas.
05:42 Color it blue.
05:44 This is my circle.
05:46 Now let us learn how to modify this circle.
05:49 You can change the start and the end parameters to alter the shape of the circle to an arc or a segment.
05:56 There are 3 options here on the Tool controls bar, which helps to switch between the shapes.
06:03 Let me change the Start parameter to 100 and End parameter to -50.
06:09 We see that the circle shape has now changed to a segment shape.
06:14 Now I will click on arc icon and we see the change in the shape.
06:19 We can change back to circle shape again, by clicking on the circle icon.
06:25 Now, let's take a closer look at the circle shape on our canvas.
06:30 Notice 2 square handles and 2 circular handles called arc handles, on the shape.
06:37 The 2 square handles can be used to alter the shape of the circle to an ellipse shape.
06:44 Just drag these handles in the up-down or left-right directions.
06:53 Observe the change in the shape.
06:56 The 2 arc handles overlap each other. Click on the arc handle and move it anti-clockwise.
07:04 We can now see both the arc handles.
07:08 We can modify the circle shape into arc or segment shape using these arc handles.
07:14 Just by moving them in clockwise or anti-clockwise directions and observe the change in the shape.
07:24 Now, we will click on the rectangle tool in the Tool box and then click on the square.
07:30 Notice 2 resize handles and 2 arc handles on the top right corner of the shape.
07:40 As before, the 2 arc handles overlap each other.
07:43 Click on one of the arc handle and move it clockwise.
07:48 Now, we can see both the arc handles.
07:51 We can give rounded edges to the square using these handles.
07:56 Move them in clockwise or anti-clockwise directions and observe the change in the shape.
08:02 Now, let us create a polygon by clicking on the Stars and polygons tool from the Tool box.
08:08 This is right below the circle tool. So, click on it.
08:13 We will draw a polygon in a similar way and change the color to green.
08:20 By default, a 5-sided polygon i.e. a pentagon, is drawn.
08:24 Look at the Tool controls bar. Here, it says the number of corners of the polygon is 5.
08:32 You can create a square by decreasing the number to 4 and a triangle by decreasing it to 3.
08:39 By increasing it, we can create a pentagon, hexagon and so on.
08:44 Notice a resize handle on the polygon.
08:47 We can use it to resize or rotate the polygon.
08:52 Convert this shape into a star shape, by clicking on the star icon next to polygon icon, in the Tool controls bar.
09:00 Notice 2 handles on the star shape – one at the tip and one at the joint.
09:06 Click and drag the handle at the tip of the star to resize or rotate it.
09:12 We can resize and skew the shape of the star using the other handle.
09:17 Click on it and move in clockwise or anti-clockwise directions and observe the change in the shape and size.
09:25 We have come to the end of this tutorial. Let us summarize.
09:30 In this tutorial we learnt about Inkscape interface.
09:34 We also learnt to Create basic shapes like rectangle, square, circle, ellipse, polygon and star.
09:42 Fill color into the shapes and Modify the shapes using handles
09:46 Here is an assignment for you
09:49 Create a rectangle shape filled with blue color,
09:52 a circle shape with red color,
09:54 a star with 7 sides in green color.
09:58 Your completed assignment should look like this.
10:03 Watch the video available at the following link, It summarizes the Spoken Tutorial project.
10:09 If you do not have good bandwidth you can download and watch it.
10:13 The Spoken Tutorial Project Team conducts workshops using spoken tutorial and gives certificates for those who pass an online test.
10:22 For more details, please write to contact@spoken-tutorial.org
10:28 Spoken tutorial Project is a part of the Talk to a Teacher project
10:32 It is supported by the NMEICT, MHRD, Government of India.
10:38 More information on this Mission is available at http://spoken-tutorial.org/NMEICT-Intro
10:47 We have come to the end of this tutorial.
10:50 This is Arthi and Saurabh from IIT Bombay, signing off.


Thanks for joining.

Contributors and Content Editors

Gaurav, PoojaMoolya, Pratik kamble, Sandhya.np14