Difference between revisions of "Inkscape/C2/Create-and-Format-Text/English"

Revision as of 14:28, 28 August 2014

Title of script: Create and format Text

Author: Priya K and Arthi.A

Keywords: Inkscape, Text tool, Regular and Flowed text, Aligning and Formatting text, Spacing and bullet

Visual cue	Narration
Opening Slide	Welcome to the Spoken Tutorial on “Create and format text” using Inkscape.
Learning Objectives (Slide)	In this tutorial, we will learn about Inserting text Formatting and aligning text Spacing and bullet We will also learn how to create a simple flyer at the end.
System requirement (Slide)	To record this tutorial, I am using Ubuntu Linux 12.04 OS Inkscape version 0.48.4
Go to Dash home >> Type Inkscape >>Click on the logo	Let us open Inkscape.
Point to Text tool	Text can be inserted using the Text tool from the Tool box.
Slide	We can add text in two ways- Regular Text Flowed Text
Click on the Text tool >> Click on the canvas	First we will learn about Regular Text. Click on the Text tool and then click on the canvas.
Type “Spoken”	Type the word “Spoken”. Observe the text box grows to accommodate the text.
Press Enter >> Type Tutorial >> Press Backspace	Line breaks have to be added manually. So, press Enter to go to the next line and type “Tutorial”. 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.
Type “http://spoken-tutorial.org”	In a similar way, type “http://spoken-tutorial.org” on a new line below Spoken Tutorial. <<PAUSE>>
Point to Text tool	Next we will learn to insert text through Flowed text.
Open LO Writer >> Press Ctrl + A >> Press Ctrl + A	This time I will copy text from a LibreOffice Writer file that I had saved earlier. Press Ctrl + A to select the entire text and press Ctrl + C to copy them.
Switch to Inkscape >> Click on or point to the Text tool	Now, come back to Inkscape. Make sure the Text tool is selected.
Click on the canvas, hold and drag	Click on the canvas and drag to form a rectangular or square text area.
Point to rectangle box >>	Notice a blue rectangle box is formed on the canvas on releasing the mouse button.
Click and press Ctrl + V	Now inside the text box, notice the text prompt which is blinking on the extreme top left corner. Press Ctrl + V to paste the copied text.
Point to the rectangle	Observe the color of the text box changed to red. This is because the inserted text exceeds the boundaries of the text box.
Point to the diamond handle >> Click and drag	We can correct this using the small diamond handle at the right corner of the text box. Click and drag it till the text box color changes to blue. <<PAUSE>>
Press enter before the last sentence	The last sentence of the text, is clubbed with the first. Press Enter twice at the beginning of the last sentence to separate it.
Double click on “Spoken Tutorial”	Next let us learn the various formatting options available for texts. Click on the word “Spoken Tutorial”
Go to Object menu. Click on Text and Text and Font	Go to Main menu. Click on Text and then on Text and Font option. A dialog box appears with two options – Font and Text. Under the Font tab there are several options.
Point to the available fonts	Font family lists all the available fonts. You can select any of the available font of your choice.
Click on Bitstream Charter >> Point to the text	We can preview the selected font in the preview box here. My choice is Bitstream Charter font. <<PAUSE>>
Change Style to Bold	There are four Style options- Normal, Italic, Bold and Bold Italic. Choose the style as per your requirement. I will choose Bold.
Change Font size to 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.
Point to Layout	Next is the Layout. We will learn about this in a while as the preview is not visible for this option.
Click on the Text tab >> Point to the text	Now, click on the Text tab next to the Font tab. Here a preview window is seen with the text inside it. Any modifications to the text can be done here.
Click on Apply >> Close	Click on Apply and close the dialog box. Observe the text is now formatted.
Point to color palette >> Click on maroon	We can change the text color using color palette at the bottom. Let me click on maroon color. <<PAUSE>>
Double click http://spoken-tutorial.org	Next select the text for the URL i.e. http://spoken-tutorial.org
Point to Tool controls bar	Text formatting options are available in the Tool controls bar, too.
Change font to Bitstream charter >> Font size to 28	I will change the font to Bitstream charter, Font size to 28 and color to Blue.
Point to text in the box >> Double click on it	Now, let us choose the paragraph text. If the Text tool is already selected, you can simply click on the text to go inside the text box. I will change the Font size of the text to 25.
Click and drag the diamond handle	Click and drag the diamond handle to move the text inside the canvas. <<PAUSE>>
Point to the Alignment options and click on Left-Centre-Right and Justify, as per narration	Next let us align the texts. The four icons next to Italic icon on the Tool controls bar helps to align the text to the Left Center OR Right of the text box. The fourth option will justify the text within the boundaries of the text box. I will click on Align left before proceeding further.
Go to Object menu >> Click on Align and Distribute.	We can align text using the Align and distribute option too. Go to the Main menu and then click on Object menu. Then click on Align and Distribute option.
Click on Centre on vertical axis. Set Relative to parameter to Page	Now we will move the word “Spoken Tutorial” to the centre. So click on it First check if the Relative to parameter is set to Page. So, click on Centre on vertical axis. Observe the text is now aligned to the centre. <<PAUSE>>
Point to the empty space	Let us add some more text in the empty space at the bottom.
Type “FOSS Categories” Click on Centre on vertical axis	Type “FOSS Categories” Now align it to the centre of the page by clicking on Centre on vertical axis.
Type Linux, LaTeX, Scilab, Python randomly in the empty space	Type some FOSS names such as Linux, LaTeX, Scilab, Python separately and randomly on the canvas.
Point to text option in Align and Distribute	Now let us align all these texts in a single row with equal space.
Click on Align baseline of text and Distribute baseline of text horizontally.	Select the 4 texts using the Shift key. Click on Align baseline of text and Distribute baseline of text horizontally.
Point to gaps between the texts	Notice the gaps between the words are not equal. 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.
Point to horizontal text alignment option	This works in a similar way for vertical texts, too. These options may be useful in certain situations. <<PAUSE>>
Click on Make horizontal gaps between objects equal	We will make the spaces between the words equal. To do so, click on the fourth icon in the first row under Distribute. Now the spacing is equal between the words.
Point to the middle paragraph >> Double click on it	Next, we will learn to adjust the space between the lines of the paragraph text. Double click on the paragraph text to go inside the text box.
Point to Spacing between lines icon in the Tool controls bar >> Click on up and down arrow	The Spacing between lines icon on the Tool controls bar helps reduce or increase space between lines. Observe what happens when I increase the spacing.
Line spacing as 1.50	Let me keep the line spacing as 1.50 <<PAUSE>>
Point to the Spacing between letters icon Click on Up and down arrow	The next icon helps to adjust space between letters. Again, click on the up and down arrows and observe the changes. Let me keep the space parameter as 0.
Point to the empty space	Observe there is an empty space in both the vertical corners of the canvas. We can fill them with some text.
Type a sentence “Learn Open Source Software”	Type a sentence “Learn Open Source Software for free” somewhere outside the canvas.
Change the Font to Georgia. Font size to 22. Make it Bold.	Change the Font to Ubuntu. Font size to 22 and make it Bold.
Click on Vertical text	Now click on the last icon i.e. Vertical text on the Tool controls bar. Notice that the text is now aligned in vertical direction.
Move the text to the left corner	Click on the text using the Selector tool and move it to the left corner of the canvas.
Press Ctrl + D >> Press Shift key and move the text to other corner	Press Ctrl + D to duplicate it. And move the copy to the other corner of the page, using the Ctrl key.
Point to the middle paragraph	Now, we will add bullet points to the text within the paragraph.
Point to the middle paragraph	Inkscape does not provide bullet or number lists for text. So one has to create bullet points manually.
Draw a circle of red color and black stroke	Click on the ellipse tool. Draw a small circle of red color.
Press Ctrl + D >> Move to starting line	Now move this bullet to the first line of the paragraph. Duplicate it and move its copy to the next sentence. Repeat this for all sentences.
	Now we have all our text as per our requirement. Lastly, let us do some beautification to make it look like a flyer.
Completed flyer	Here is the completed flyer. I have added borders to the top and bottom. And covered the texts with a rounded rectangle and ellipse shapes. You can use your creativity to create different layouts and designs for your flyer. <<PAUSE>>
Summary (Slide)	Let us summarize. In this tutorial we learnt to Insert text Format and align text Spacing and bullet lists We also learnt to create a simple flyer.
Completed assignment	Here is an assignment for you Create a flyer like this. Use the text tool to type texts Create bullets and boxes using the rectangle tool Create star using star tool with 10 corners Use color palette and Fill and stroke to change colors Align the text using Align and distribute.
About Slide	The video at the link shown, 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 and gives certificates on passing online tests. For more details, please write to us.
About Slide	Spoken Tutorial Project is supported by the National Mission on Education through ICT, MHRD, Government of India. More information on this Mission is available at the link shown.
Acknowledgment	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

Arthi, Nancyvarkey

@@ Line 22: / Line 22: @@
 * Formatting and aligning text
 * Spacing and bullet
 We will also learn how to create a simple flyer at the end.
@@ Line 31: / Line 32: @@
 * '''Ubuntu Linux''' 12.04 OS
 * '''Inkscape''' version 0.48.4
 |-
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| Go to '''Dash home >>''' Type '''Inkscape >>'''Click on the logo
-| style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Let us open Inkscape.
+| style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Let us open '''Inkscape'''.
 |-
@@ Line 48: / Line 47: @@
 * '''Regular Text'''
 * '''Flowed Text'''
 |-
@@ Line 92: / Line 89: @@
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| Point to '''Text''' '''tool'''
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Next we will learn to insert text through '''Flowed text.'''
 |-
@@ Line 168: / Line 162: @@
 |-
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| Point to the available fonts
-| style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| '''Font family''' lists all the available fonts. You can select any of the available font of your choice.
+| style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| '''Font family''' lists all the available fonts.
+You can select any of the available font of your choice.
 |-
@@ Line 189: / Line 185: @@
 Choose the style as per your requirement. I will choose '''Bold.'''
 |-
@@ Line 238: / Line 231: @@
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| Point to '''Tool controls bar'''
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Text formatting options are available in the '''Tool controls bar,''' too.
 |-
@@ Line 254: / Line 244: @@
-If the Text tool is already selected, you can simply click on the text to go inside the text box.
+If the '''Text tool''' is already selected, you can simply click on the text to go inside the text box.
@@ Line 282: / Line 272: @@
 The fourth option will justify the text within the boundaries of the text box.
+I will click on '''Align left''' before proceeding further.
 |-
@@ Line 291: / Line 284: @@
 Go to the '''Main menu''' and then click on '''Object menu.''' Then click on '''Align and Distribute '''option'''.'''
 |-
@@ Line 328: / Line 318: @@
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| Type '''Linux, LaTeX, Scilab, Python''' randomly in the empty space
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Type some '''FOSS''' names such as '''Linux, LaTeX, Scilab, Python '''separately and randomly on the '''canvas'''.
 |-
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| Point to text option in '''Align and Distribute'''
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Now let us align all these texts in a single row with equal space.
 |-
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| Click on '''Align baseline of text '''and '''Distribute baseline of text horizontally. '''
-| style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Select the 4 texts using the '''Shift''' key. Click on
+| style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Select the 4 texts using the '''Shift''' key.
+Click on
 * '''Align baseline of text '''and
 * '''Distribute baseline of text horizontally. '''
 |-
@@ Line 360: / Line 344: @@
 |-
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| Point to horizontal text alignment option
-| style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| This works in a similar way for vertical texts too.
+| style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| This works in a similar way for vertical texts, too.
@@ Line 396: / Line 380: @@
-Observe what happens when I increarse the spacing.
+Observe what happens when I increase the spacing.
 |-
@@ Line 427: / Line 411: @@
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| Type a sentence''' “Learn Open Source Software”'''
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Type a sentence '''“Learn Open Source Software for free”''' somewhere outside the canvas.
 |-
@@ Line 445: / Line 426: @@
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| Move the text to the left corner
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Click on the text using the '''Selector tool''' and move it to the left corner of the canvas.
 |-
@@ Line 453: / Line 431: @@
 Press '''Shift key''' and move the text to other corner
-| style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Press '''Ctrl + D''' to duplicate it and move the copy to the other corner of the page, using the '''Ctrl key.'''
+| style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Press '''Ctrl + D''' to duplicate it.
+And move the copy to the other corner of the page, using the '''Ctrl key.'''
 |-
 | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| Point to the middle paragraph
-| style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Next we will add bullet points to the text within the paragraph.
+| style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Now, we will add bullet points to the text within the paragraph.
 |-
@@ Line 526: / Line 507: @@
 Create a flyer like this.
-* Use the text tool to type texts
+* Use the '''text tool''' to type texts
-* Create bullets and boxes using the rectangle tool
+* Create bullets and boxes using the '''rectangle tool'''
-* Create star using star tool with 10 corners
+* Create star using '''star tool''' with 10 corners
-* Use color palette and '''Fill and stroke''' to change colors
+* Use '''color palette''' and '''Fill and stroke''' to change colors
 * Align the text using '''Align and distribute'''.
 |-

Difference between revisions of "Inkscape/C2/Create-and-Format-Text/English"

Revision as of 14:28, 28 August 2014

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools