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

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(7 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{| Border =1
 
{| Border =1
| Time
+
| '''Time'''
| Narration
+
| '''Narration'''
  
 
|-
 
|-
 
| 00:00
 
| 00:00
| Welcome to the Spoken Tutorial on '''“Create and edit shapes” '''using '''Inkscape.'''
+
| Welcome to the '''Spoken Tutorial''' on '''Create and edit shapes '''using '''Inkscape.'''
  
 
|-
 
|-
 
| 00:06
 
| 00:06
|In this tutorial we will familiarize ourselves with '''Inkscape.'''
+
|In this tutorial, we will familiarize ourselves with '''Inkscape.'''
  
 
|-
 
|-
 
| 00:10
 
| 00:10
| We will learn about Inkscape interface and how to Create basic shapes
+
| We will learn about Inkscape interface and how to: Create basic shapes
  
 
|-
 
|-
 
| 00:16
 
| 00:16
| Fill color and Modify shapes using '''handles'''
+
| Fill color and Modify shapes using '''handles'''.
  
 
|-
 
|-
 
| 00:20
 
| 00:20
|For this tutorial, I am using  '''Ubuntu Linux''' 12.04 OS
+
|For this tutorial, I am using: '''Ubuntu Linux''' 12.04 OS
  
 
|-
 
|-
 
| 00:25
 
| 00:25
| '''Inkscape''' version 0.48.4
+
| '''Inkscape''' version 0.48.4
  
 
|-
 
|-
 
| 00:29
 
| 00:29
| Go to '''Dash home '''and type '''Inkscape'''.
+
| Go to '''Dash home '''and type: '''Inkscape'''.
  
 
|-
 
|-
Line 37: Line 37:
 
|-
 
|-
 
| 00:38
 
| 00:38
|On the top of the interface, you will find the '''Menu bar '''and''' Tool controls bar.'''
+
|On the top of the interface, you will find the '''menu bar '''and''' Tool controls''' bar.
  
 
|-
 
|-
 
| 00:44
 
| 00:44
| This is followed by '''rulers '''at the top and at the side.
+
| This is followed by the '''rulers '''at the top and at the side.
  
 
|-
 
|-
Line 53: Line 53:
 
|-
 
|-
 
| 00:58
 
| 00:58
|In the centre, is the '''canvas'''. This is where you will draw your graphics.
+
|In the centre, is the '''canvas'''. This is where you will draw your '''graphics'''.
  
 
|-
 
|-
Line 61: Line 61:
 
|-
 
|-
 
| 01:09
 
| 01:09
|Now, let us learn to create and edit some basic shapes in '''Inkscape'''.
+
|Now, let us learn to create and '''edit''' some basic shapes in '''Inkscape'''.
  
 
|-
 
|-
Line 81: Line 81:
 
|-
 
|-
 
| 01:41
 
| 01:41
|To open an existing '''Inkscape''' document, click on '''File''' and then choose '''Open.'''
+
|To open an existing '''Inkscape document''', click on '''File''' and then choose '''Open.'''
  
 
|-
 
|-
 
| 01:47
 
| 01:47
|Let's open the '''drawing_1.svg '''file that we created earlier.
+
|Let's open the '''drawing_1.svg''' file that we created earlier.
  
 
|-
 
|-
 
| 01:53
 
| 01:53
|I had saved in '''Documents''' folder. Click on '''Open''' button at the bottom right.  
+
|I had saved it in '''Documents''' folder. Click on '''Open''' button at the bottom right.  
  
 
|-
 
|-
Line 117: Line 117:
 
|-
 
|-
 
| 02:22
 
| 02:22
| Let us now move the rectangle.
+
| Let us now move the rectangle.To do so, you should click anywhere on the rectangle.
 
+
|-
+
| 02:23
+
|To do so, you should click anywhere on the rectangle.
+
  
 
|-
 
|-
 
| 02:27
 
| 02:27
|Now, without releasing the mouse button, drag it wherever you want on the '''canvas.'''
+
|Now, without releasing the '''mouse button''', drag it wherever you want on the '''canvas.'''
  
 
|-
 
|-
 
| 02:33
 
| 02:33
|Then release the mouse button.
+
|Then release the '''mouse-button'''.
  
 
|-
 
|-
 
| 02:37
 
| 02:37
|Let us zoom in for a better view. To do so, press '''ctrl key '''and use the''' scroll button '''on the mouse
+
|Let us '''zoom in''' for a better view. To do so, press '''Ctrl''' key and use the''' scroll button '''on the '''mouse'''.
  
 
|-
 
|-
 
| 02:46
 
| 02:46
|Notice arrows around the rectangle. These are called '''handles, '''which we can use for scaling and rotating.  
+
|Notice arrows around the rectangle. These are called '''handles '''which we can use for scaling and rotating.  
  
 
|-
 
|-
 
| 02:57
 
| 02:57
|When the '''cursor''' is kept on any of the '''handles, '''the color of the '''handle '''changes.
+
|When the cursor is kept on any of the '''handles, '''the color of the '''handle '''changes.
  
 
|-
 
|-
Line 149: Line 145:
 
|-
 
|-
 
| 03:08
 
| 03:08
|To scale or resize the rectangle, click and drag on any one of the corner '''handles'''.
+
|To '''scale''' or resize the rectangle, click and drag on any one of the corner '''handles'''.
  
 
|-
 
|-
 
| 03:17
 
| 03:17
|If you want to keep the aspect ratio same, hold the '''ctrl key''' while resizing.
+
|If you want to keep the '''aspect ratio''' same, hold the '''Ctrl key''' while resizing.
  
 
|-
 
|-
Line 161: Line 157:
 
|-
 
|-
 
| 03:32
 
| 03:32
|Click and drag the '''handle, '''either to the left or to the right.
+
|Click and drag the '''handle''', either to the left or to the right.
  
 
|-
 
|-
Line 169: Line 165:
 
|-
 
|-
 
| 03:43
 
| 03:43
|Now let's change the height of the rectangle.
+
|Now, let's change the height of the rectangle.
  
 
|-
 
|-
Line 181: Line 177:
 
|-
 
|-
 
| 03:54
 
| 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.'''  
+
|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
 
|04:03
|I will change the '''width''' to 400 and '''height''' to 200.
+
|I will change the '''Width''' to 400 and '''Height''' to 200.
  
 
|-
 
|-
Line 205: Line 201:
 
|-
 
|-
 
| 04:27
 
| 04:27
|Notice that now, the shape of the corner '''handles '''has changed, to indicate that it is ready for rotation.
+
|Notice that now the shape of the corner '''handles '''has changed to indicate that it is ready for rotation.
  
 
|-
 
|-
Line 213: Line 209:
 
|-
 
|-
 
|04:44
 
|04:44
|You can also skew the rectangle by clicking and dragging any of the side '''handles'''.  
+
|You can also '''skew''' the rectangle by clicking and dragging any of the side '''handles'''.  
  
 
|-
 
|-
 
| 04:50
 
| 04:50
|I am clicking the left middle '''handle''' and dragging it up and down to skew the rectangle.
+
|I am clicking the left middle '''handle''' and dragging it up and down to '''skew''' the rectangle.
  
 
|-
 
|-
Line 233: Line 229:
 
|-
 
|-
 
| 05:06
 
| 05:06
|To do so, click anywhere in the '''canvas''' area or outside the '''canvas''' boundary.
+
|To do so, click anywhere in the '''canvas''' area or outside the canvas boundary.
  
 
|-
 
|-
 
| 05:11
 
| 05:11
|Let me move the mouse back to the '''Tool box''' and over the same rectangle tool.
+
|Let me move the '''mouse''' back to the '''Tool box''' and over the same '''rectangle''' tool.
  
 
|-
 
|-
Line 249: Line 245:
 
|-
 
|-
 
| 05:25
 
| 05:25
|To draw a square, simply hold the '''ctrl key''' and drag on the '''canvas.'''
+
|To draw a square, simply hold the '''Ctrl''' key and drag on the '''Canvas.'''
 
+
  
 
|-
 
|-
Line 262: Line 257:
 
|-
 
|-
 
| 05:34
 
| 05:34
|Select the '''Create''' '''circles and ellipses '''tool from the '''Tool box'''.
+
|Select the '''Create circles and ellipses '''tool from the '''Tool box'''.
  
 
|-
 
|-
 
| 05:38
 
| 05:38
| Use the '''ctrl key''', draw a circle on the canvas.
+
| Use the '''Ctrl''' key, draw a circle on the canvas.
  
 
|-
 
|-
Line 282: Line 277:
 
|-
 
|-
 
| 05:49
 
| 05:49
|You can change the start and the end parameters to alter the shape of the circle to an '''arc''' or a '''segment'''.  
+
|You can change the '''Start''' and the '''End''' parameters to alter the shape of the circle to an '''arc''' or a '''segment'''.  
  
 
|-
 
|-
 
| 05:56
 
| 05:56
|There are 3 options here on the '''Tool controls bar,''' which helps to switch between the shapes.  
+
|There are 3 options here on the '''Tool controls bar''' which help to switch between the shapes.  
  
 
|-
 
|-
 
| 06:03
 
| 06:03
|Let me change the '''Start''' parameter to 100 and '''End''' parameter to -50.  
+
|Let me change the '''Start''' parameter to 100 and '''End''' parameter to -50.  
  
 
|-
 
|-
Line 298: Line 293:
 
|-
 
|-
 
| 06:14
 
| 06:14
|Now I will click on '''arc icon''' and we see the change in the shape.
+
|Now I will click on '''Arc''' icon and we see the change in the shape.
  
 
|-
 
|-
 
| 06:19
 
| 06:19
|We can change back to circle shape again, by clicking on the '''circle''' '''icon.'''
+
|We can change back to circle shape again by clicking on the '''Circle''' '''icon.'''
  
 
|-
 
|-
Line 310: Line 305:
 
|-
 
|-
 
| 06:30
 
| 06:30
|Notice 2 '''square handles '''and 2 circular '''handles '''called '''arc handles, '''on the shape.
+
|Notice 2 '''resize handles '''and 2 circular '''handles '''called '''arc handles, '''on the shape.
  
 
|-
 
|-
 
| 06:37
 
| 06:37
|The 2 '''square handles '''can be used to alter the shape of the circle to an ellipse shape.
+
|The 2 '''resize handles '''can be used to alter the shape of the circle to an ellipse shape.
  
 
|-
 
|-
Line 322: Line 317:
 
|-
 
|-
 
| 06:53
 
| 06:53
|Observe the change in the shape.
+
|Observe the changes in the shape.
  
 
|-
 
|-
Line 382: Line 377:
 
|-
 
|-
 
| 08:20
 
| 08:20
|By default, a 5-sided polygon i.e. a pentagon,''' '''is drawn.
+
|By default, a 5-sided polygon i.e. a pentagon is drawn.
  
 
|-
 
|-
Line 406: Line 401:
 
|-
 
|-
 
| 08:52
 
| 08:52
|Convert this shape into a star shape, by clicking on the '''star icon '''next to '''polygon icon, '''in the '''Tool controls bar'''.  
+
|Convert this shape into a star shape by clicking on the '''star''' icon next to the '''polygon''' icon, in the '''Tool controls bar'''.  
  
 
|-
 
|-
Line 418: Line 413:
 
|-
 
|-
 
| 09:12
 
| 09:12
|We can resize and skew the shape of the star using the other '''handle'''.  
+
|We can '''resize''' and '''skew''' the shape of the star using the other '''handle'''.  
  
 
|-
 
|-
Line 430: Line 425:
 
|-
 
|-
 
| 09:30
 
| 09:30
|In this tutorial we learnt about '''Inkscape''' interface.
+
|In this tutorial, we learnt about '''Inkscape''' interface.
  
 
|-
 
|-
 
| 09:34
 
| 09:34
|We also learnt to  Create basic shapes like rectangle, square, circle, ellipse, polygon and star.
+
|We also learnt to- Create basic shapes like rectangle, square, circle, ellipse, polygon and star.
  
 
|-
 
|-
 
| 09:42
 
| 09:42
| Fill color into the shapes and  Modify the shapes using '''handles'''
+
| Fill color into the shapes and  modify the shapes using '''handles'''.
  
 
|-
 
|-
 
| 09:46
 
| 09:46
|Here is an assignment for you
+
|Here is an assignment for you.
  
 
|-
 
|-
Line 462: Line 457:
 
|-
 
|-
 
|10:03
 
|10:03
|Watch the video available at the following link, It summarizes the Spoken Tutorial project.   
+
|Watch the video available at the following link. It summarizes the Spoken Tutorial project.   
  
 
|-
 
|-
 
| 10:09
 
| 10:09
|If you do not have good bandwidth you can download and watch it.
+
|If you do not have good bandwidth, you can download and watch it.
  
 
|-
 
|-
 
| 10:13
 
| 10:13
|The Spoken Tutorial Project Team conducts workshops  using spoken tutorial and gives certificates for those who pass an online test.
+
|The Spoken Tutorial Project team: conducts workshops  using spoken tutorial and gives certificates for those who pass an online test.
  
 
|-
 
|-
 
| 10:22
 
| 10:22
|For more details, please write to contact@spoken-tutorial.org
+
|For more details, please write to: contact@spoken-tutorial.org
  
 
|-
 
|-
 
| 10:28
 
| 10:28
|Spoken tutorial Project is a part of the Talk to a Teacher project
+
|'''Spoken tutorial''' Project is a part of the '''Talk to a Teacher''' project.
  
 
|-
 
|-
| 10:32
+
|10:32
|It is supported by the NMEICT, MHRD, Government of India.
+
|It is supported by the NMEICT, MHRD, Government of India.
  
 
|-
 
|-
 
| 10:38
 
| 10:38
|More information on this Mission is available at http://spoken-tutorial.org/NMEICT-Intro
+
|More information on this mission is available at: http://spoken-tutorial.org/NMEICT-Intro.
  
 
|-
 
|-
Line 494: Line 489:
 
|-
 
|-
 
| 10:50
 
| 10:50
|This is Arthi and Saurabh from IIT Bombay, signing off.  
+
|This is Arthi and Saurabh from IIT Bombay, signing off. Thanks for joining.
 
+
 
+
Thanks for joining.
+
  
 
|}
 
|}

Latest revision as of 19:58, 8 March 2017

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 the 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 it 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.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 help 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 resize handles and 2 circular handles called arc handles, on the shape.
06:37 The 2 resize 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 changes 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 the 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