Difference between revisions of "Inkscape/C2/Text-Manipulation/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(2 intermediate revisions by one other user not shown)
Line 1: Line 1:
  
 
{| Border = 1
 
{| Border = 1
| <center>Time</center>
+
|'''Time'''
| <center>Narration</center>
+
| '''Narration'''
 
+
 
|-
 
|-
 
|00:01
 
|00:01
Line 14: Line 13:
 
|-
 
|-
 
|00:09
 
|00:09
|* Create '''text''' on '''path'''  
+
| Create '''text''' on '''path'''  
  
 
|-
 
|-
 
|00:11
 
|00:11
|* Create text on shape  
+
| Create text on shape  
  
 
|-
 
|-
 
|00:13
 
|00:13
|* Image inside text  
+
| Image inside text  
  
 
|-
 
|-
 
|00:15
 
|00:15
|* Text in perspective  
+
| Text in perspective  
  
 
|-
 
|-
 
|00:17
 
|00:17
|* '''Cut-out text'''.  
+
| '''Cut-out text'''.  
  
 
|-
 
|-
 
| 00:19
 
| 00:19
| To record this tutorial, I am using-  
+
| To record this tutorial, I am using-  
  
 
|-
 
|-
 
|00:22
 
|00:22
|* '''Ubuntu Linux''' 12.04 OS  
+
| '''Ubuntu Linux''' 12.04 OS  
  
 
|-
 
|-
 
|00:25
 
|00:25
|* '''Inkscape''' version 0.48.4  
+
| '''Inkscape''' version 0.48.4  
  
 
|-
 
|-
| 00:28
+
| 00:28
| Let us open '''Inkscape'''.  
+
| Let us open '''Inkscape'''.  
  
 
|-
 
|-
Line 54: Line 53:
 
|-
 
|-
 
| 00:36
 
| 00:36
|  Type the sentence “Spoken Tutorial is an Audio-Video tutorial” on the canvas.  
+
|  Type the sentence '''Spoken Tutorial is an Audio-Video tutorial''' on the canvas.  
  
 
|-
 
|-
 
| 00:43
 
| 00:43
| Reduce the '''font size''' to 20.
+
| Reduce the '''font size''' to 20.
  
 
|-
 
|-
 
| 00:46
 
| 00:46
| Recall that we had learnt to create '''path''' using the '''Bezier tool '''in earlier tutorial.  
+
| Recall that we had learnt to create '''path''' using the '''Bezier tool '''in earlier tutorial.  
  
 
|-
 
|-
Line 74: Line 73:
 
|-
 
|-
 
| 00:59
 
| 00:59
| Select both the '''text''' and the '''path'''.  
+
| Select both the '''text''' and the '''path'''.  
  
 
|-
 
|-
Line 98: Line 97:
 
|-
 
|-
 
| 01:28
 
| 01:28
| Now, select the '''path''' and click on '''Node tool.'''  
+
| Now, select the '''path''' and click on '''Node tool.'''  
  
 
|-
 
|-
Line 110: Line 109:
 
|-
 
|-
 
| 01:45
 
| 01:45
| To remove the text from the path, select the '''text'''.
+
| To remove the text from the path, select the '''text'''.
  
 
|-
 
|-
Line 121: Line 120:
  
 
|-
 
|-
| 01:54
+
| 01:54
| Observe that the path is now removed.  
+
| Observe that the path is now removed.  
  
 
|-
 
|-
|01:57
+
| 01:57
 
| Press '''Ctrl + Z''' to '''undo''' this action.  
 
| Press '''Ctrl + Z''' to '''undo''' this action.  
  
 
|-
 
|-
 
| 02:01
 
| 02:01
| Next, we will learn how to insert text into a shape.  
+
| Next, we will learn how to insert text into a shape.  
  
 
|-
 
|-
 
| 02:05
 
| 02:05
| Using '''Polygon tool''', create a '''hexagon. '''
+
| Using '''Polygon tool''', create a '''hexagon. '''
  
 
|-
 
|-
|02:09
+
| 02:09
 
| Now we will insert some text inside the '''hexagon.'''  
 
| Now we will insert some text inside the '''hexagon.'''  
  
 
|-
 
|-
 
| 02:14
 
| 02:14
| I will copy some text from a '''LibreOffice Writer''' file that I had saved earlier.  
+
| I will copy some text from a '''LibreOffice Writer''' file that I had saved earlier.  
  
 
|-
 
|-
|02:19
+
| 02:19
 
| Press '''Ctrl + A''' to select the text and press '''Ctrl + C''' to copy them.  
 
| Press '''Ctrl + A''' to select the text and press '''Ctrl + C''' to copy them.  
  
 
|-
 
|-
 
| 02:25
 
| 02:25
| Now, come back to '''Inkscape.'''  
+
| Now, come back to '''Inkscape.'''  
  
 
|-
 
|-
|02:27
+
| 02:27
 
| Click on the '''Text tool'''.  
 
| Click on the '''Text tool'''.  
  
 
|-
 
|-
|02:30
+
| 02:30
 
| Press '''Ctrl + V''' below the '''hexagon''' to '''paste''' the text.  
 
| Press '''Ctrl + V''' below the '''hexagon''' to '''paste''' the text.  
  
 
|-
 
|-
 
| 02:35
 
| 02:35
| Select both the text and the '''hexagon.'''  
+
| Select both the text and the '''hexagon.'''  
  
 
|-
 
|-
 
| 02:39
 
| 02:39
| Now go to '''Text''' menu.  
+
| Now go to '''Text''' menu.  
  
 
|-
 
|-
Line 250: Line 249:
 
|-
 
|-
 
| 04:21
 
| 04:21
|  Type “SPOKEN” on the '''canvas'''.  
+
|  Type '''SPOKEN''' on the '''canvas'''.  
  
 
|-
 
|-
Line 290: Line 289:
 
|-
 
|-
 
| 05:11
 
| 05:11
|  Type “TUTORIAL” on the canvas.  
+
|  Type '''TUTORIAL''' on the canvas.  
  
 
|-
 
|-
Line 298: Line 297:
 
|-
 
|-
 
| 05:19
 
| 05:19
| Draw a similar perspective rectangular path using '''Bezier tool.'''  
+
| Draw a similar perspective rectangular path using '''Bezier tool.'''  
  
 
|-
 
|-
Line 306: Line 305:
 
|-
 
|-
 
| 05:30
 
| 05:30
| First select the text and then the path.
+
| First select the text and then the path.
  
 
|-
 
|-
Line 314: Line 313:
 
|-
 
|-
 
| 05:42
 
| 05:42
| Now we see the text appears from top to bottom.  
+
| Now we see the text appears from top to bottom.  
  
 
|-
 
|-
|05:46
+
| 05:46
 
| This is because the text is aligned, based on the starting point of the path.  
 
| This is because the text is aligned, based on the starting point of the path.  
  
 
|-
 
|-
 
| 05:51
 
| 05:51
| Lastly, we will learn about '''cut-out text'''.  
+
| Lastly, we will learn about '''cut-out text'''.  
  
 
|-
 
|-
 
| 05:55
 
| 05:55
| Create a rectangle and type the word “INKSCAPE” on the top of the rectangle.  
+
| Create a rectangle and type the word '''INKSCAPE''' on the top of the rectangle.  
  
 
|-
 
|-
 
| 06:01
 
| 06:01
| Select both. Go to '''Path''' menu. Select '''Difference '''option.  
+
| Select both. Go to '''Path''' menu. Select '''Difference '''option.  
  
 
|-
 
|-
|06:08
+
| 06:08
 
| Observe what happens on the canvas.  
 
| Observe what happens on the canvas.  
  
 
|-
 
|-
 
| 06:11
 
| 06:11
| We will learn one more method of creating '''cut-out text.'''  
+
| We will learn one more method of creating '''cut-out text.'''  
  
 
|-
 
|-
 
| 06:15
 
| 06:15
| Again, type the word '''INKSCAPE”'''  
+
| Again, type the word '''INKSCAPE'''  
  
 
|-
 
|-
|06:17
+
| 06:17
 
| Go to '''Object''' menu and click on '''Fill and Stroke.'''  
 
| Go to '''Object''' menu and click on '''Fill and Stroke.'''  
  
 
|-
 
|-
 
| 06:21
 
| 06:21
| Go to''' Stroke paint''' tab, click on '''Flat color.'''  
+
| Go to''' Stroke paint''' tab, click on '''Flat color.'''  
  
 
|-
 
|-
 
| 06:25
 
| 06:25
| Go to '''Stroke style''' tab and change the width parameter to 2.  
+
| Go to '''Stroke style''' tab and change the width parameter to 2.  
  
 
|-
 
|-
 
| 06:30
 
| 06:30
| Go to '''Fill''' tab and click on '''No paint'''.  
+
| Go to '''Fill''' tab and click on '''No paint'''.  
  
 
|-
 
|-
|06:35
+
| 06:35
 
| Observe a '''cut out''' shape has formed on our text.  
 
| Observe a '''cut out''' shape has formed on our text.  
  
 
|-
 
|-
 
| 06:38
 
| 06:38
| Let us summarize.  
+
| Let us summarize.  
  
 
|-
 
|-
|06:40
+
| 06:40
 
| In this tutorial, we learnt to-  
 
| In this tutorial, we learnt to-  
  
 
|-
 
|-
|06:42
+
| 06:42
|Create text on path  
+
| Create text on path  
 +
 
 
|-
 
|-
 
|06:44
 
|06:44
|Create text on shape  
+
|Create text on shape  
 +
 
 
|-
 
|-
 
|06:46
 
|06:46
|* Image inside text  
+
|Image inside text  
 +
 
 
|-
 
|-
 
|06:48
 
|06:48
|Text in perspective and
+
|Text in perspective and '''Cut-out text'''.  
|-
+
|06:49
+
|* '''Cut-out text'''.  
+
  
 
|-
 
|-
 
| 06:51
 
| 06:51
| Here are a few assignments for you.  
+
| Here are a few assignments for you.  
  
 
|-
 
|-
 
|06:54
 
|06:54
| Create the text “Learn FOSS using Spoken Tutorial” in a wavy path.  
+
|Create the text '''Learn FOSS using Spoken Tutorial''' in a wavy path.  
 +
 
 
|-
 
|-
 
|06:59
 
|06:59
| Draw a '''Trapezoid''' using '''Bezier tool'''.  
+
|Draw a '''Trapezoid''' using '''Bezier tool'''.  
 +
 
 
|-
 
|-
 
|07:02
 
|07:02
| Copy the text from the code file and paste it inside the '''Trapezoid'''.  
+
|Copy the text from the code file and paste it inside the '''Trapezoid'''.  
 +
 
 
|-
 
|-
 
|07:07
 
|07:07
| Insert the text “INKSCAPE” on a colorful image.  
+
| Insert the text '''INKSCAPE''' on a colorful image.  
 +
 
 
|-
 
|-
 
|07:10
 
|07:10
| Create the text “INKSCAPE” in perspective.  
+
| Create the text '''INKSCAPE''' in perspective.  
 +
 
 
|-
 
|-
 
|07:13
 
|07:13
| Create a '''cut-out text''' for “SPOKEN TUTORIAL”.  
+
| Create a '''cut-out text''' for '''SPOKEN TUTORIAL'''.  
  
 
|-
 
|-
 
| 07:17
 
| 07:17
| Your completed assignment should look like this.  
+
| Your completed assignment should look like this.  
  
 
|-
 
|-
 
|07:21
 
|07:21
| The video available at the following link summarizes the Spoken Tutorial project. Please watch it.  
+
| The video available at the following link summarizes the Spoken Tutorial project. Please watch it.  
  
 
|-
 
|-
 
| 07:27
 
| 07:27
| The Spoken Tutorial Project team conducts workshops and gives certificates for those who pass an online test.  
+
| The Spoken Tutorial Project team conducts workshops and gives certificates for those who pass an online test.  
  
 
|-
 
|-
Line 428: Line 432:
  
 
|-
 
|-
| 07:36
+
|07:36
| Spoken Tutorial Project is supported by NMEICT, MHRD, Government of India.  
+
| Spoken Tutorial Project is supported by NMEICT, MHRD, Government of India.  
  
 
|-
 
|-
Line 437: Line 441:
 
|-
 
|-
 
|07:47
 
|07:47
| We have come to the end of this tutorial.  
+
| We have come to the end of this tutorial. This is Arthi and Priya from IIT Bombay, signing off. Thanks for joining.  
 
+
This is Arthi and Priya from IIT Bombay, signing off. Thanks for joining.  
+
  
 
|}
 
|}

Latest revision as of 14:40, 9 March 2017

Time Narration
00:01 Welcome to the Spoken Tutorial on Text Manipulation using Inkscape.
00:06 In this tutorial, we will learn to-
00:09 Create text on path
00:11 Create text on shape
00:13 Image inside text
00:15 Text in perspective
00:17 Cut-out text.
00:19 To record this tutorial, I am using-
00:22 Ubuntu Linux 12.04 OS
00:25 Inkscape version 0.48.4
00:28 Let us open Inkscape.
00:31 First, we will learn how to create text on a path. Click on Text tool.
00:36 Type the sentence Spoken Tutorial is an Audio-Video tutorial on the canvas.
00:43 Reduce the font size to 20.
00:46 Recall that we had learnt to create path using the Bezier tool in earlier tutorial.
00:51 So, click on it.
00:53 Click on the canvas and draw a tilde shape like path, below the text.
00:59 Select both the text and the path.
01:03 Go to Text menu and click on Put on Path option.
01:08 Observe our text is formed on the path.
01:12 Click anywhere on the canvas to deselect all.
01:16 Select the Text tool and click on the starting point of the text.
01:21 Give some spaces by pressing space bar to adjust the text on the path.
01:28 Now, select the path and click on Node tool.
01:35 Using the handles, resize the path.
01:39 Observe that the text transforms according to the resizing of the path.
01:45 To remove the text from the path, select the text.
01:49 Go to Text menu.
01:51 Click on Remove from Path.
01:54 Observe that the path is now removed.
01:57 Press Ctrl + Z to undo this action.
02:01 Next, we will learn how to insert text into a shape.
02:05 Using Polygon tool, create a hexagon.
02:09 Now we will insert some text inside the hexagon.
02:14 I will copy some text from a LibreOffice Writer file that I had saved earlier.
02:19 Press Ctrl + A to select the text and press Ctrl + C to copy them.
02:25 Now, come back to Inkscape.
02:27 Click on the Text tool.
02:30 Press Ctrl + V below the hexagon to paste the text.
02:35 Select both the text and the hexagon.
02:39 Now go to Text menu.
02:41 Click on Flow into Frame.
02:45 Now, our text is inserted inside the hexagon.
02:49 Reduce the font size to 10 to make all the texts visible.
02:54 To remove the Flow, go to Text menu and click on Unflow.
03:00 Observe that the text has disappeared. Press Ctrl + Z to undo this action.
03:07 Now we will learn how to create text on an image.
03:11 First let us import an image. Go to File. Click on Import.
03:19 I have saved an image in the Pictures folder.
03:25 Now, we have an image on our canvas.
03:29 Select it and go to the Object menu.
03:33 Click on Pattern and Object to Pattern.
03:38 Using the Text tool, type: “SPOKEN TUTORIAL” under the image.
03:44 Make this text Bold.
03:47 Go to Object menu and click on Fill and Stroke option.
03:52 Click Pattern under the Fill tab. Now the image is formed on the text.
04:01 To adjust the image, click on the Node tool.
04:04 We can see a square handle and a circular handle on the image.
04:08 Click on the circular handle to rotate the image on the text.
04:13 Click on the square handle to resize it.
04:17 Next, we will learn how to create text in a perspective.
04:21 Type SPOKEN on the canvas.
04:24 Go to Path menu and click on Object to Path.
04:30 Next, let us draw the path by selecting the Bezier curve.
04:34 Start drawing the path from the left bottom.
04:38 Draw a rectangle in perspective with larger side at the left side and smaller side at the right.
04:46 First select the text and then the rectangular path.
04:50 Go to Extensions, click on Modify Path and then on Perspective.
04:57 Now, we can see that the text appears in perspective.
05:01 Note, the text takes the starting point and direction of the path.
05:07 Next, let us create the text in another perspective.
05:11 Type TUTORIAL on the canvas.
05:15 Go to Path menu and click on Object to Path.
05:19 Draw a similar perspective rectangular path using Bezier tool.
05:24 This time, start from left top corner and continue in a clockwise direction.
05:30 First select the text and then the path.
05:34 Go to Extensions > Modify Path and then on Perspective.
05:42 Now we see the text appears from top to bottom.
05:46 This is because the text is aligned, based on the starting point of the path.
05:51 Lastly, we will learn about cut-out text.
05:55 Create a rectangle and type the word INKSCAPE on the top of the rectangle.
06:01 Select both. Go to Path menu. Select Difference option.
06:08 Observe what happens on the canvas.
06:11 We will learn one more method of creating cut-out text.
06:15 Again, type the word INKSCAPE
06:17 Go to Object menu and click on Fill and Stroke.
06:21 Go to Stroke paint tab, click on Flat color.
06:25 Go to Stroke style tab and change the width parameter to 2.
06:30 Go to Fill tab and click on No paint.
06:35 Observe a cut out shape has formed on our text.
06:38 Let us summarize.
06:40 In this tutorial, we learnt to-
06:42 Create text on path
06:44 Create text on shape
06:46 Image inside text
06:48 Text in perspective and Cut-out text.
06:51 Here are a few assignments for you.
06:54 Create the text Learn FOSS using Spoken Tutorial in a wavy path.
06:59 Draw a Trapezoid using Bezier tool.
07:02 Copy the text from the code file and paste it inside the Trapezoid.
07:07 Insert the text INKSCAPE on a colorful image.
07:10 Create the text INKSCAPE in perspective.
07:13 Create a cut-out text for SPOKEN TUTORIAL.
07:17 Your completed assignment should look like this.
07:21 The video available at the following link summarizes the Spoken Tutorial project. Please watch it.
07:27 The Spoken Tutorial Project team conducts workshops and gives certificates for those who pass an online test.
07:34 For more details, please write to us.
07:36 Spoken Tutorial Project is supported by NMEICT, MHRD, Government of India.
07:42 More information on this mission is available at this link.
07:47 We have come to the end of this tutorial. This is Arthi and Priya from IIT Bombay, signing off. Thanks for joining.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Sandhya.np14