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

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(3 intermediate revisions by 2 users 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'''.  
  
 
|-
 
|-
 
| 01:03
 
| 01:03
−
|  Go to '''Text menu''' and click on '''Put on Path''' option.  
+
|  Go to '''Text''' menu and click on '''Put on Path''' option.  
  
 
|-
 
|-
 
|01:08
 
|01:08
−
| Observe our text is formed on the path.  
+
| Observe our text is formed on 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.'''  
  
 
|-
 
|-
 
|01:35
 
|01:35
−
| Using the '''handles''', resize the path.  
+
| Using the '''handles''', '''resize''' the path.  
  
 
|-
 
|-
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'''.
  
 
|-
 
|-
 
|01:49
 
|01:49
−
| Go to '''Text menu.'''  
+
| Go to '''Text''' menu.
  
 
|-
 
|-
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 190: Line 189:
 
|-
 
|-
 
| 03:07
 
| 03:07
−
|  Now we will learn how to create text on an image.  
+
|  Now we will learn how to create text on an '''image'''.  
  
 
|-
 
|-
Line 202: Line 201:
 
|-
 
|-
 
| 03:25
 
| 03:25
−
|  Now we have the image on our '''canvas.'''  
+
|  Now, we have an image on our '''canvas.'''  
  
 
|-
 
|-
 
|03:29
 
|03:29
−
| Select it and go to '''Object''' menu.  
+
| Select it and go to the '''Object''' menu.  
  
 
|-
 
|-
Line 214: Line 213:
 
|-
 
|-
 
| 03:38
 
| 03:38
−
|  Using the '''Text''' tool, type: “'''SPOKEN TUTORIAL” '''under the '''image'''.  
+
|  Using the '''Text''' tool, type: “SPOKEN TUTORIAL” under the '''image'''.  
  
 
|-
 
|-
Line 222: Line 221:
 
|-
 
|-
 
| 03:47
 
| 03:47
−
|  Go to '''Object menu. '''Click on '''Fill and Stroke''' option.  
+
|  Go to '''Object''' menu and click on '''Fill and Stroke''' option.  
  
 
|-
 
|-
Line 250: Line 249:
 
|-
 
|-
 
| 04:21
 
| 04:21
−
|  Type “'''SPOKEN'''” on the '''canvas'''.  
+
|  Type '''SPOKEN''' on the '''canvas'''.  
  
 
|-
 
|-
 
|04:24
 
|04:24
−
| Go to '''Path menu''' and click on '''Object to Path.'''  
+
| Go to '''Path''' menu and click on '''Object to Path.'''  
  
 
|-
 
|-
 
| 04:30
 
| 04:30
−
|  Next, let us draw the path by selecting '''Bezier curve.'''  
+
|  Next, let us draw the path by selecting the '''Bezier curve.'''  
  
 
|-
 
|-
Line 282: Line 281:
 
|-
 
|-
 
|05:01
 
|05:01
−
| Note the text takes the starting point and direction of the path.  
+
| Note, the text takes the starting point and direction of the path.  
  
 
|-
 
|-
Line 290: Line 289:
 
|-
 
|-
 
| 05:11
 
| 05:11
−
|  Type “'''TUTORIAL'''” on the canvas.  
+
|  Type '''TUTORIAL''' on the canvas.  
  
 
|-
 
|-
 
|05:15
 
|05:15
−
| Go to '''Path menu''' and click on '''Object to Path.'''  
+
| Go to '''Path''' menu and click on '''Object to Path.'''  
  
 
|-
 
|-
 
| 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.
  
 
|-
 
|-
 
|05:34
 
|05:34
−
| Go to '''Extensions, Modify Path''' and then on '''Perspective.'''  
+
| Go to '''Extensions > Modify Path''' and then on '''Perspective.'''  
  
 
|-
 
|-
 
| 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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Inkscape/C2/Text-Manipulation/English-timed&oldid=32957"