|
|
| (7 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | Visual cue | + | {| border=1 |
| − | Narration | + | || '''Visual Cue''' |
| − | Opening Slide
| + | || '''Narration''' |
| − | Welcome to the Spoken Tutorial on “Create and edit shapes” using Inkscape.
| + | |
| − | Learning Objectives (Slide)
| + | |
| − | In this tutorial we will familiarize ourselves with Inkscape.
| + | |
| | | | |
| − | We will learn about
| + | |- |
| − | Inkscape interface
| + | || '''Show Slide''' |
| − | and how to
| + | Welcome to the Spoken Tutorial on '''Configuring Setting in KTouch.''' |
| − | Create basic shapes
| + | || Welcome to the Spoken Tutorial on '''Configuring Setting in KTouch.''' |
| − | Fill color and
| + | |
| − | Modify shapes using handles
| + | |
| − | System requirements
| + | |
| − | (Slide)
| + | |
| − | For this tutorial, I am using
| + | |
| − | Ubuntu Linux 12.04 OS
| + | |
| − | Inkscape version 0.48.4
| + | |
| − | Go to Dash home and type “Inkscape”.
| + | |
| − | Go to Dash home and type Inkscape.
| + | |
| − | Double click on Inkscape logo
| + | |
| − | You can open Inkscape by double-clicking on the logo.
| + | |
| − | Highlight with red box and pointing with arrow
| + | |
| − | On the top of the interface, you will find the Menu bar and Tool controls bar.
| + | |
| | | | |
| − | This is followed by rulers at the top and at the side.
| + | |- |
| − | Highlight with red box and pointing with arrow
| + | || '''Show Slide''' |
| − | On the right side of the interface, you will find the Command bar and Snap controls bar.
| + | '''Learning Objectives''' |
| − | Highlight with red box and pointing with arrow
| + | |
| − | The Tool box is located on the left side of the interface.
| + | |
| − | Highlight with red box and pointing with arrow
| + | |
| − | In the centre, is the canvas. This is where you will draw your graphics.
| + | |
| − | Highlight with red box and pointing with arrow
| + | |
| − | At the bottom of the interface, we can see the color palette and the status bar.
| + | |
| | | | |
| − | Now, let us learn to create and edit some basic shapes in Inkscape.
| + | * Change the level of training |
| − | Pointing to Select and Transform tool
| + | * Adjust the speed of typing. |
| − | First of all, we will learn about Select and Transform tool. It is commonly called as Selection tool
| + | * Configure short cut keys. |
| | + | * Configure the toolbars. |
| | + | * View typing metrics. |
| | + | || In this tutorial, you will learn how to: |
| | + | * Change the level of training |
| | + | * Adjust the speed of typing. |
| | + | * Configure short cut keys. |
| | + | * Configure the toolbars. |
| | + | * View typing metrics. |
| | | | |
| − | It's a very important tool. You will find it on the left hand side of the Tool box.
| |
| − | Click on Select and Transform tool >> move the cursor on the canvas
| |
| − | With this tool, you can select objects, transform and move them around on the canvas.
| |
| − | Click on File >> choose New >> click on Default.
| |
| − | To open a new Inkscape document, click on File and then choose New and click on Default.
| |
| − | Click on File >> choose Open
| |
| − | To open an existing Inkscape document, click on File and then choose Open.
| |
| − | Select the file
| |
| − | Let's open the drawing_1.svg file that we created earlier.
| |
| − | Open the file
| |
| − | I had saved in documents folder. Click on Open button at the bottom right.
| |
| − | Pointing to the rectangle shape
| |
| − | We created a rectangle earlier.
| |
| − | Click on the rectangle
| |
| − | Now, click on the rectangle.
| |
| − | Point to the rectangle
| |
| − | By default, the color of the rectangle is green.
| |
| − | Move mouse to color palette at the bottom >> click on red
| |
| − | To change the color to red, we will use the color palette at the bottom.
| |
| | | | |
| − | So, I will move the cursor to the bottom and click on red color.
| + | |- |
| | + | || '''Show Slide ''' |
| | + | '''Systems Requirements''' |
| | + | * KTouch 1.7.1 |
| | + | * Ubuntu Linux version 11.10. |
| | + | || Here, we are using KTouch 1.7.1 on Ubuntu Linux 11.10. |
| | | | |
| − | Observe the color change in the rectangle.
| |
| | | | |
| − | Let us now move the rectangle.
| + | |- |
| − | Click on the rectangle >> move
| + | || Open '''KTouch'''. |
| − | To do so, you should click anywhere on the rectangle.
| + | || Let’s open '''KTouch'''. |
| | | | |
| − | Now, without releasing the mouse button, drag it wherever you want on the canvas.
| + | |- |
| | + | || Point to 1 on '''Level''' field. |
| | + | || We are at L'''evel''' 1. |
| | + | Let us move on to the second level that is 2. |
| | | | |
| − | Then release the mouse button.
| + | |- |
| | + | || Select the triangle and click to increase the level to '''2'''. |
| | + | || To increase the level of the training to '''2''', click on the top triangle symbol, next to the Level field. |
| | | | |
| − | <<PAUSE>>
| + | |- |
| − | Zooming and scrolling
| + | || Point to the characters in the '''Teacher’s Line'''. |
| − | Let us zoom in for a better view. To do so, press ctrl key and use the scroll button on the mouse
| + | || Notice what happens when we change the level to 2? |
| − | Point to the arrows on the object | + | The characters in the '''Teacher’s Line '''change! |
| − | Notice arrows around the rectangle. These are called handles, which we can use for scaling and rotating. | + | |
| − | Keep mouse on one of the handles.
| + | |
| − | When the cursor is kept on any of the handles, the color of the handle changes.
| + | |
| | | | |
| − | This indicates that particular handle is selected and ready for resizing.
| + | |- |
| − | 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.
| + | |
| − | Hold on ctrl key and resize
| + | |
| − | If you want to keep the aspect ratio same, hold the Ctrl key while resizing.
| + | |
| − | Point to the side handle
| + | |
| − | To change the length or the width of the rectangle, use one of the handles on the sides of the rectangle.
| + | |
| − | Click on side handle >> resize the rectangle
| + | |
| − | Click and drag the handle, either to the left or to the right.
| + | |
| − | | + | |
| − | Observe the change in the width of the rectangle.
| + | |
| − | Click on top handle >> resize the rectangle
| + | |
| − | Now let's change the height of the rectangle.
| + | |
| − | | + | |
| − | So, we will click and drag on either the top or the bottom handle.
| + | |
| − | | + | |
| − | Observe the change in the height of the rectangle.
| + | |
| − | Point to 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.
| + | |
| − | | + | |
| − | Change the width to 50 and height to 100.
| + | |
| − | I will change the width to 400 and height to 200.
| + | |
| − | | + | |
| − | Notice the change in the size of the rectangle.
| + | |
| − | Point to the X and Y axes
| + | |
| − | In a similar way, you can also move the object by changing the X and Y axes positions.
| + | |
| − | | + | |
| − | <PAUSE>
| + | |
| − | Now, let's learn how to rotate the rectangle.
| + | |
| − | Click on the rectangle
| + | |
| − | | + | |
| − | Point to the corner handles
| + | |
| − | To do so, click on the rectangle once again.
| + | |
| − | | + | |
| − | Notice that now, the shape of the corner handles has changed, to indicate that it is ready for rotation.
| + | |
| − | Click on the top right corner handle >> rotate the rectangle
| + | |
| − | I will click on the top right corner handle and rotate the rectangle.
| + | |
| − | | + | |
| − | <<PAUSE>>
| + | |
| − | Click on left middle handle and drag >> skew the rectangle
| + | |
| − | You can also skew the rectangle by clicking and dragging any of the side handles.
| + | |
| − | | + | |
| − | I am clicking the left middle handle and dragging it up and down to skew the rectangle.
| + | |
| − | | + | |
| − | Observe the changes as I do so.
| + | |
| − | Pointing to handles
| + | |
| − | We will learn some more details on using these handles in another tutorial.
| + | |
| − | Unselect this shape >> Click anywhere in the canvas area or outside
| + | |
| − | Let us unselect this shape now.
| + | |
| − | | + | |
| − | To do so, click anywhere in the canvas area or outside the canvas boundary.
| + | |
| − | Point to the rectangle tool in the Tool box
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | Click on it
| + | |
| − | Let me move the mouse back to the Tool box and over the same rectangle tool.
| + | |
| − | | + | |
| − | The tool tip says that we can draw rectangles and squares using this tool.
| + | |
| − | | + | |
| − | So, first let me click on this tool.
| + | |
| − | Hold on ctrl key >> draw a square >> move to color palette >> change color to pink
| + | |
| − | To draw a square, simply hold the Ctrl key and drag on the canvas.
| + | |
| − | | + | |
| − | Let me change its color to pink.
| + | |
| − | Assignment (Slide)
| + | |
| − | An assignment for you.
| + | |
| − | | + | |
| − | 1. Select the Create circles and ellipses tool from the Tool box.
| + | |
| − | 2. Use the Ctrl key, draw a circle on the canvas.
| + | |
| − | 3. Color it blue.
| + | |
| − | | + | |
| − | Pointing to the circle
| + | |
| − | This is my circle.
| + | |
| − | | + | |
| − | Now let us learn how to modify this circle.
| + | |
| − | Point to Start and End parameters
| + | |
| − | | + | |
| − | Point to 3 icons on the
| + | |
| − | Tool controls bar
| + | |
| − | You can change the start and the end parameters to alter the shape of the circle to an arc or a segment.
| + | |
| − | | + | |
| − | There are 3 options here on the Tool controls bar, which helps to switch between the shapes.
| + | |
| − | Change the Start parameter to 100 and End parameter to -50
| + | |
| − | Let me change the Start parameter to 100 and End parameter to -50.
| + | |
| − | | + | |
| − | We see that the circle shape has now changed to a segment shape.
| + | |
| − | Switch to arc icon
| + | |
| − | Now I will click on arc icon and we see the change in the shape.
| + | |
| − | Click on the circle icon
| + | |
| − | We can change back to circle shape again, by clicking on the circle icon.
| + | |
| − | | + | |
| − | Now, let's take a closer look at the circle shape on our canvas.
| + | |
| − | Point to the 2 square handles and 2 circular handles
| + | |
| − | Notice 2 square handles and 2 circular handles called arc handles, on the shape.
| + | |
| − | Drag these handles in the up-down or left-right directions
| + | |
| − | The 2 square handles can be used to alter the shape of the circle to an ellipse shape.
| + | |
| − | | + | |
| − | Just drag these handles in the up-down or left-right directions.
| + | |
| − | | + | |
| − | Observe the change in the shape.
| + | |
| − | Click on the arc handle and move it anti-clockwise.
| + | |
| − | Pointing to the 2 arc handles
| + | |
| − | The 2 arc handles overlap each other. Click on the arc handle and move it anti-clockwise.
| + | |
| − | | + | |
| − | We can now see both the arc handles.
| + | |
| − | Move the arc handles in clockwise or anti-clockwise directions
| + | |
| − | We can modify the circle shape into arc or segment shape using these arc handles.
| + | |
| − | | + | |
| − | Just by moving them in clockwise or anti-clockwise directions and observe the change in the shape.
| + | |
| − | | + | |
| − | <<PAUSE>>
| + | |
| − | Click on the rectangle tool in the Tool box and then click on the rectangle.
| + | |
| − | Now, we will click on the rectangle tool in the Tool box and then click on the square.
| + | |
| − | Point to the 2 resize handles and 2 arc handles
| + | |
| − | | + | |
| − | Click on the arc handle and move it anti-clockwise.
| + | |
| − | Notice 2 resize handles and 2 arc handles on the top right corner of the shape.
| + | |
| − | | + | |
| − | As before, the 2 arc handles overlap each other.
| + | |
| − | Click on one of the arc handle and move it clockwise.
| + | |
| − | | + | |
| − | Now, we can see both the arc handles.
| + | |
| − | Move the arc handles in clockwise or anti-clockwise directions
| + | |
| − | We can give rounded edges to the square using these handles.
| + | |
| − | | + | |
| − | Move them in clockwise or anti-clockwise directions and observe the change in the shape.
| + | |
| − | | + | |
| − | <<PAUSE>>
| + | |
| − | Click on Stars and Polygons tools on the Tool box
| + | |
| − | Now, let us create a polygon by clicking on the Stars and polygons tool from the Tool box.
| + | |
| − | | + | |
| − | This is right below the circle tool. So, click on it.
| + | |
| − | Draw a polygon >> move to color palette >> change color to green
| + | |
| − | We will draw a polygon in a similar way and change the color to green.
| + | |
| − | | + | |
| − | By default, a 5-sided polygon i.e. a pentagon, is drawn.
| + | |
| − | Point to the number of corners on the Tool controls bar
| + | |
| − | Look at the Tool controls bar. Here, it says the number of corners of the polygon is 5.
| + | |
| − | Decrease the number to 4, 3 >> increase the number to 5, 6
| + | |
| − | You can create a square by decreasing the number to 4 and a triangle by decreasing it to 3.
| + | |
| − | | + | |
| − | By increasing it, we can create a pentagon, hexagon and so on.
| + | |
| − | Point to resize handle on the polygon
| + | |
| − | Notice a resize handle on the polygon.
| + | |
| − | | + | |
| − | We can use it to resize or rotate the polygon.
| + | |
| − | <PAUSE>
| + | |
| − | Click on the star icon
| + | |
| − | Convert this shape into a star shape, by clicking on the star icon next to polygon icon, in the Tool controls bar.
| + | |
| − | Point to the 2 handles on the star shape
| + | |
| − | Notice 2 handles on the star shape – one at the tip and one at the joint.
| + | |
| − | Click and drag the tip handle to resize and rotate
| + | |
| − | Click and drag the handle at the tip of the star to resize or rotate it.
| + | |
| − | Click on it and move in clockwise or anti-clockwise directions >> skew the shape
| + | |
| − | We can resize and skew the shape of the star using the other handle.
| + | |
| − | | + | |
| − | Click on it and move in clockwise or anti-clockwise directions and observe the change in the shape and size.
| + | |
| − | <<PAUSE>>
| + | |
| − | | + | |
| − | Summary (Slide)
| + | |
| − | We have come to the end of this tutorial. Let us summarize.
| + | |
| − | | + | |
| − | In this tutorial we learnt about Inkscape interface.
| + | |
| − | | + | |
| − | We also learnt to
| + | |
| − | Create basic shapes like rectangle, square, circle, ellipse, polygon and star.
| + | |
| − | Fill color into the shapes and
| + | |
| − | Modify the shapes using handles
| + | |
| − | Assignment
| + | |
| − | (Slide)
| + | |
| − | Here is an assignment for you
| + | |
| − | | + | |
| − | Create
| + | |
| − | a rectangle shape filled with blue color,
| + | |
| − | a circle shape with red color,
| + | |
| − | a star with 7 sides in green color.
| + | |
| − | Completed assignment
| + | |
| − | Your completed assignment should look like this.
| + | |
| − | About Slide
| + | |
| − | Watch the video available at
| + | |
| − | http://spoken-tutorial.org/What_is_a_Spoken_Tutorial
| + | |
| − | | + | |
| − | • It summarizes the Spoken Tutorial project
| + | |
| − | | + | |
| − | • If you do not have good bandwidth, you can
| + | |
| − | download and watch it
| + | |
| − | | + | |
| − | About Slide
| + | |
| − | The Spoken Tutorial Project Team
| + | |
| − | | + | |
| − | • Conducts workshops using spoken tutorials
| + | |
| − | | + | |
| − | • Gives certificates for those who pass an online
| + | |
| − | test
| + | |
| − | | + | |
| − | • For more details, please write to
| + | |
| − | contact@spoken-tutorial.org
| + | |
| − | | + | |
| − | About Slide
| + | |
| − | Spoken Tutorial Project is a part of the Talk to a
| + | |
| − | Teacher project
| + | |
| − | | + | |
| − | • It is supported by the National Mission on
| + | |
| − | Education through ICT, MHRD, Government
| + | |
| − | of India
| + | |
| − | | + | |
| − | • More information on this Mission is available at
| + | |
| − | http://spoken-tutorial.org/NMEICT-Intro
| + | |
| − | | + | |
| − | Acknowledgment
| + | |
| − | We have come to the end of this tutorial.
| + | |
| − | | + | |
| − | This is Arthi and Saurabh from IIT Bombay, signing off.
| + | |
| − | | + | |
| − | Thanks for joining.
| + | |
