Difference between revisions of "Inkscape/C2/Create-and-Format-Text/English-timed"
From Script | Spoken-Tutorial
Sandhya.np14 (Talk | contribs) |
Sandhya.np14 (Talk | contribs) |
||
| Line 39: | Line 39: | ||
| 00:45 | | 00:45 | ||
| We can add text in two ways- | | We can add text in two ways- | ||
| − | * '''Regular Text''' | + | * '''Regular Text''' and |
* '''Flowed Text'''. | * '''Flowed Text'''. | ||
| Line 48: | Line 48: | ||
|- | |- | ||
|00:57 | |00:57 | ||
| − | | Type the word | + | | Type the word "Spoken". Observe the text box grows to accommodate the text. |
|- | |- | ||
| 01:03 | | 01:03 | ||
| − | | '''Line break'''s have to be added manually. So, press '''Enter''' to go to the next line and type | + | | '''Line break'''s have to be added manually. So, press '''Enter''' to go to the next line and type “Tutorial”. |
|- | |- | ||
|01:11 | |01:11 | ||
| − | |To move the word to the previous line, keep the cursor before the alphabet '' | + | |To move the word to the previous line, keep the cursor before the alphabet 'T'. Now press '''backspace '''and add a space between the 2 words. |
|- | |- | ||
| 01:22 | | 01:22 | ||
| − | | In a similar way, type: '''http://spoken-tutorial.org/''' on a new line, below | + | | In a similar way, type: '''http://spoken-tutorial.org/''' on a new line, below "Spoken Tutorial". |
|- | |- | ||
| Line 68: | Line 68: | ||
|- | |- | ||
| 01:38 | | 01:38 | ||
| − | | This time I will copy text from a '''LibreOffice Writer''' file that I had saved earlier. | + | | This time, I will copy text from a '''LibreOffice Writer''' file that I had saved earlier. |
|- | |- | ||
|01:45 | |01:45 | ||
| − | |Press '''Ctrl + A''' to select the entire text and press '''Ctrl + C''' to copy | + | |Press '''Ctrl + A''' to select the entire text and press '''Ctrl + C''' to copy that. |
|- | |- | ||
| Line 84: | Line 84: | ||
|- | |- | ||
| 02:03 | | 02:03 | ||
| − | | Notice a blue rectangle box is formed on the '''canvas''' on releasing the '''mouse''' button. | + | | Notice, a blue rectangle box is formed on the '''canvas''' on releasing the '''mouse''' button. |
|- | |- | ||
| Line 96: | Line 96: | ||
|- | |- | ||
| 02:22 | | 02:22 | ||
| − | | Observe the color of the text box changed to red. | + | | Observe, the color of the text box changed to red. |
|- | |- | ||
| Line 112: | Line 112: | ||
|- | |- | ||
| 02:44 | | 02:44 | ||
| − | | The last sentence of the text | + | | The last sentence of the text is clubbed with the previous sentence. |
|- | |- | ||
| Line 132: | Line 132: | ||
|- | |- | ||
| 03:17 | | 03:17 | ||
| − | | '''Font family''' lists all the available fonts. You can select any of the available | + | | '''Font family''' lists all the available fonts. You can select any of the available fonts of your choice. |
|- | |- | ||
| Line 144: | Line 144: | ||
|- | |- | ||
| 03:46 | | 03:46 | ||
| − | | To change the '''Font size''', simply click on the drop down arrow and select the size. Since this is the title, I will select a bigger font, say 64. | + | | To change the '''Font size''', simply click on the drop-down arrow and select the size. Since this is the title, I will select a bigger font, say 64. |
|- | |- | ||
| Line 156: | Line 156: | ||
|- | |- | ||
| 04:04 | | 04:04 | ||
| − | | Now, click on the '''Text | + | | Now, click on the '''Text''' tab next to the '''Font''' tab. Here, a '''preview window''' is seen with the text inside it. |
|- | |- | ||
| Line 168: | Line 168: | ||
|- | |- | ||
| 04:23 | | 04:23 | ||
| − | | We can change the text color using '''color palette''' at the bottom. Let me click on maroon color. | + | | We can change the text color using the '''color palette''' at the bottom. Let me click on maroon color. |
|- | |- | ||
| 04:30 | | 04:30 | ||
| − | | Next, select the text for the URL i.e. | + | | Next, select the text for the URL i.e. http://spoken-tutorial.org |
|- | |- | ||
| Line 200: | Line 200: | ||
|- | |- | ||
| 05:15 | | 05:15 | ||
| − | | Next let us align the texts. | + | | Next, let us align the texts. |
|- | |- | ||
|05:19 | |05:19 | ||
| − | |The four icons next to '''Italic icon''' on the '''Tool controls bar''' help to align the text to the | + | |The four icons next to the '''Italic icon''' on the '''Tool controls bar''' help to align the text to the |
* Left | * Left | ||
* Center OR | * Center OR | ||
| Line 215: | Line 215: | ||
|- | |- | ||
|05:39 | |05:39 | ||
| − | | We can align text using the '''Align and distribute''' option too. | + | | We can align the text using the '''Align and distribute''' option too. |
|- | |- | ||
|05:43 | |05:43 | ||
| − | |Go to the '''Main menu''' and then click on '''Object | + | |Go to the '''Main menu''' and then click on '''Object''' menu. Then click on '''Align and Distribute '''option. |
|- | |- | ||
| 05:51 | | 05:51 | ||
| − | | Now we will move the word '''Spoken Tutorial''' to the centre. So click on it. | + | | Now, we will move the word '''Spoken Tutorial''' to the centre. So click on it. |
|- | |- | ||
| Line 239: | Line 239: | ||
|- | |- | ||
| 06:13 | | 06:13 | ||
| − | | Type | + | | Type "FOSS Categories". Now, align it to the centre of the page by clicking on '''Centre on vertical axis.''' |
|- | |- | ||
| Line 303: | Line 303: | ||
|- | |- | ||
|08:07 | |08:07 | ||
| − | | Let me keep the space parameter as 0. | + | | Let me keep the '''space parameter''' as 0. |
|- | |- | ||
| Line 335: | Line 335: | ||
|- | |- | ||
| 08:59 | | 08:59 | ||
| − | | Now we will add '''bullet points''' to the text within the paragraph. | + | | Now, we will add '''bullet points''' to the text within the paragraph. |
|- | |- | ||
| Line 355: | Line 355: | ||
|- | |- | ||
| 09:32 | | 09:32 | ||
| − | | Now we have all our text as per our requirement. | + | | Now, we have all our text as per our requirement. |
|- | |- | ||
| Line 363: | Line 363: | ||
|- | |- | ||
| 09:41 | | 09:41 | ||
| − | | Here is the completed flyer. | + | | Here is the completed '''flyer'''. |
|- | |- | ||
| Line 386: | Line 386: | ||
|- | |- | ||
|10:06 | |10:06 | ||
| − | | We also | + | | We also learned to create a simple '''flyer'''. |
|- | |- | ||
Revision as of 19:01, 10 September 2015
| Time | Narration |
| 00:01 | Welcome to the Spoken Tutorial on Create and format text using Inkscape. |
| 00:06 | In this tutorial, we will learn about:
|
| 00:15 | We will also learn how to create a simple flyer at the end. |
| 00:19 | To record this tutorial, I am using:
|
| 00:29 | I will be recording this tutorial in maximum resolution mode. This is to accommodate all the tools that will be demonstrated. |
| 00:38 | Let us open Inkscape. |
| 00:40 | Text can be inserted using the Text tool from the Tool box. |
| 00:45 | We can add text in two ways-
|
| 00:50 | First we will learn about Regular Text. Click on the Text tool and then click on the canvas. |
| 00:57 | Type the word "Spoken". Observe the text box grows to accommodate the text. |
| 01:03 | Line breaks have to be added manually. So, press Enter to go to the next line and type “Tutorial”. |
| 01:11 | To move the word to the previous line, keep the cursor before the alphabet 'T'. Now press backspace and add a space between the 2 words. |
| 01:22 | In a similar way, type: http://spoken-tutorial.org/ on a new line, below "Spoken Tutorial". |
| 01:33 | Next, we will learn to insert text through Flowed text. |
| 01:38 | This time, I will copy text from a LibreOffice Writer file that I had saved earlier. |
| 01:45 | Press Ctrl + A to select the entire text and press Ctrl + C to copy that. |
| 01:52 | Now, come back to Inkscape. Make sure the Text tool is selected. |
| 01:58 | Click on the canvas and drag to form a rectangular or square text area. |
| 02:03 | Notice, a blue rectangle box is formed on the canvas on releasing the mouse button. |
| 02:10 | Now, inside the text box, notice the text prompt which is blinking on the extreme top left corner. |
| 02:17 | Press Ctrl + V to paste the copied text. |
| 02:22 | Observe, the color of the text box changed to red. |
| 02:25 | This is because the inserted text exceeds the boundaries of the text box. |
| 02:31 | We can correct this using the small diamond handle at the right corner of the text box. |
| 02:38 | Click and drag it till the text box color changes to blue. |
| 02:44 | The last sentence of the text is clubbed with the previous sentence. |
| 02:48 | Press Enter twice at the beginning of the last sentence to separate it. |
| 02:53 | Next, let us learn the various formatting options available for texts. Click on the word “Spoken Tutorial” |
| 03:01 | Go to Main menu. Click on Text and then on Text and Font option. |
| 03:09 | A dialog box appears with two options – Font and Text. Under the Font tab there are several options. |
| 03:17 | Font family lists all the available fonts. You can select any of the available fonts of your choice. |
| 03:25 | We can preview the selected font in the preview box here. My choice is Bitstream Charter font. |
| 03:33 | There are four Style options- Normal, Italic, Bold and Bold Italic. Choose the style as per your requirement. I will choose Bold. |
| 03:46 | To change the Font size, simply click on the drop-down arrow and select the size. Since this is the title, I will select a bigger font, say 64. |
| 03:57 | Next is the Layout. |
| 03:59 | We will learn about this in a while as the preview is not visible for this option. |
| 04:04 | Now, click on the Text tab next to the Font tab. Here, a preview window is seen with the text inside it. |
| 04:12 | Any modifications to the text can be done here. |
| 04:16 | Click on Apply and close the dialog box. Observe the text is now formatted. |
| 04:23 | We can change the text color using the color palette at the bottom. Let me click on maroon color. |
| 04:30 | Next, select the text for the URL i.e. http://spoken-tutorial.org |
| 04:40 | Text formatting options are available in the Tool controls bar too. |
| 04:44 | I will change the font to Bitstream charter, Font size to 28 and color to Blue. |
| 04:57 | Now, let us choose the paragraph text. |
| 04:56 | If the Text tool is already selected, you can simply click on the text to go inside the text box. |
| 05:04 | I will change the Font size of the text to 25. |
| 05:08 | Click and drag the diamond handle to move the text inside the canvas. |
| 05:15 | Next, let us align the texts. |
| 05:19 | The four icons next to the Italic icon on the Tool controls bar help to align the text to the
|
| 05:30 | The fourth option will justify the text within the boundaries of the text box. I will click on left align before proceeding further. |
| 05:39 | We can align the text using the Align and distribute option too. |
| 05:43 | Go to the Main menu and then click on Object menu. Then click on Align and Distribute option. |
| 05:51 | Now, we will move the word Spoken Tutorial to the centre. So click on it. |
| 05:57 | First check if the Relative to parameter is set to Page. |
| 06:01 | So, click on Centre on vertical axis. Observe the text is now aligned to the centre. |
| 06:10 | Let us add some more text in the empty space at the bottom. |
| 06:13 | Type "FOSS Categories". Now, align it to the centre of the page by clicking on Centre on vertical axis. |
| 06:25 | Type some FOSS names such as Linux, LaTeX, Scilab, Python separately and randomly on the canvas. |
| 06:39 | Now, let us align all these texts in a single row with equal space. |
| 06:44 | Select the 4 texts using the Shift key. Click on Align baseline of text and Distribute baseline of text horizontally. |
| 06:58 | Notice the gaps between the words are not equal. |
| 07:02 | The first letter of the first word and the first letter of the second word are equally spaced. But the words themselves are not equally spaced. |
| 07:10 | This works in a similar way for vertical texts too. |
| 07:15 | These options may be useful in certain situations. |
| 07:20 | We will make the spaces between the words equal. |
| 07:23 | To do so, click on the fourth icon in the first row under Distribute. Now the spacing is equal between the words. |
| 07:32 | Next, we will learn to adjust the space between the lines of the paragraph text. |
| 07:38 | Double-click on the paragraph text to go inside the text box. |
| 07:44 | The Spacing between lines icon on the Tool controls bar helps reduce or increase space between lines. |
| 07:50 | Observe what happens when I increase the spacing. |
| 07:55 | Let me keep the line spacing as 1.50. |
| 07:59 | The next icon helps to adjust space between letters. Again, click on the up and down arrows and observe the changes. |
| 08:07 | Let me keep the space parameter as 0. |
| 08:12 | Observe there is an empty space in both the vertical corners of the canvas. We can fill them with some text. |
| 08:19 | Type a sentence: "Learn Open Source Software for free". somewhere outside the canvas. |
| 08:24 | Change the Font to Ubuntu. Font size to 22 and make it Bold. |
| 08:34 | Now click on the last icon i.e. Vertical text on the Tool controls bar. |
| 08:39 | Notice that the text is now aligned in vertical direction. |
| 08:43 | Click on the text using the Selector tool and move it to the left corner of the canvas. |
| 08:49 | Press Ctrl + D to duplicate it and move the copy to the other corner of the page using the Ctrl key. |
| 08:59 | Now, we will add bullet points to the text within the paragraph. |
| 09:03 | Inkscape does not provide bullet or number lists for text. So one has to create bullet points manually. |
| 09:11 | Click on the ellipse tool. Draw a small circle of red color. |
| 09:17 | Now move this bullet to the first line of the paragraph. Duplicate it and move its copy to the next sentence. |
| 09:27 | Repeat this for all sentences. |
| 09:32 | Now, we have all our text as per our requirement. |
| 09:36 | Lastly, let us do some beautification to make it look like a flyer. |
| 09:41 | Here is the completed flyer. |
| 09:45 | I have added borders to the top and bottom. And covered the texts with a rounded rectangle and ellipse shapes. |
| 09:51 | You can use your creativity to create different layouts and designs for your flyer. |
| 09:57 | Let us summarize. |
| 09:59 | In this tutorial, we learnt to:
|
| 10:06 | We also learned to create a simple flyer. |
| 10:09 | Here is an assignment for you- |
| 10:11 | Create a flyer like this.
|
| 10:19 | Create star using star tool with 10 corners.
|
| 10:31 | The video at the link shown, summarizes the Spoken Tutorial project. If you do not have good bandwidth, you can download and watch it. |
| 10:39 | The Spoken Tutorial Project team conducts workshops using spoken tutorials and gives certificates on passing online tests. |
| 10:47 | For more details, please write to us. Spoken Tutorial Project is supported by the National Mission on Education through ICT, MHRD, Government of India. |
| 10:57 | More information on this mission is available at the link shown. |
| 11:01 | We have come to the end of this tutorial. |
| 11:03 | This is Arthi and Priya from IIT Bombay, signing off. Thanks for joining. |
