View source for LibreOffice-Suite-Draw-6.3/C3/Creating-Curves-and-Polygons/English


{| border=1
|| '''Visual Cue'''
|| '''Narration'''
|- 
|| '''Slide 1''' 

''' Title Slide'''
|| Welcome to the '''spoken tutorial '''on '''Creating Curves and Polygons''' in''' LibreOffice Draw'''.
|-
|| '''Slide 2''' 

'''Learning Objectives '''
|| In this tutorial, we will learn to,
* Draw and edit polygons and curves
* Insert text in the polygons.
|-
|| '''Slide 3'''

''' System Requirements'''
|| This tutorial is recorded using, 

* '''Ubuntu Linux''' OS version 18.04 and 
* '''LibreOffice Suite''' version 6.3.5.
|-
|| '''Slide 4'''

'''Prerequisites'''

'''https://spoken-tutorial.org'''
|| To practise this tutorial, 
* you should have basic knowledge of '''LibreOffice Draw'''.
* If not, please go through the '''Basic level Draw tutorials''' on this website.

|-
|| '''Slide 5'''

''' Route Map'''
|| We will learn to draw a map as shown in this slide, using various polygons.


This map shows the route from the '''home''' to '''school'''.
|-
|| Point to the route map.
|| At the end of the next tutorial, you will be able to draw a similar map by yourself.
|-
|| '''Open '''a new '''Draw''' file

Rename it as '''RouteMap ''' and save on '''Desktop'''
|| I have opened a new''' Draw''' file.


Let us name this file as '''RouteMap''' and save it on the '''Desktop'''.
|-
|| Cursor on the '''Draw page'''.
|| Before we begin, let us enable the '''Grid '''view.
|-
|| Click on the '''Display grid''' icon in the '''Standard toolbar'''
|| To do so, click on the '''Display grid''' icon in the '''Standard toolbar'''.
|-
|| Click on '''Helplines while moving ''' icon.
|| Also, click on '''Helplines while moving '''icon.
|-
|| Cursor on the page.
|| Now we will set the '''Page margins '''and '''Page orientation'''.
|-
|| '''Sidebar '''>> '''Properties >>

'''select '''A4 '''in the '''Format '''drop-down 

Select '''Portrait '''in '''Orientation''' drop-down
|| Click on '''Properties '''on the '''Sidebar.'''

By default '''A4 format''' and''' Portrait orientation '''are selected.

We will leave them as such.
|-
|| Close the '''Sidebar Deck.'''
|| Close the '''Sidebar Deck.'''
|-
|| Only narration
|| Let us '''set''' the default '''font size ''' for the entire drawing to 24. 
|-
|| '''Main menu''' >> '''Format '''>> '''Character'''.
|| From the''' main menu''', select '''Format ''' and click on '''Character'''.
|-
|| The '''Character '''dialog box appears.
|| The '''Character '''dialog box appears.
|-
|| Point towards the '''Fonts '''tab

'''Size '''field, select '''24 pt >> '''click '''OK'''.
|| Notice that '''Font Effects '''tab is selected by default.

Click on the '''Fonts''' tab, if not already selected.

Go to the font '''Size, '''select '''24 point (pt) ''' and click on the '''OK ''' button at the bottom.
|-
|| Point to the text in the shapes.
|| This will ensure that all the '''text''' typed inside the shapes is clearly visible.
|-
|| Point in the map slide
|| Let’s begin to draw.

The first shape in the map is '''home'''.

It is a tilted square.
|-
|| From the '''Drawing toolbar ''' >> 

click on the '''Insert Basic shapes drop-down''' >> click '''Square'''.
|| Let us insert a square''' '''to represent '''home.'''

On the '''Drawing toolbar''', click on the '''Insert Basic Shapes '''icon. 
|-
|| Press the left-'''mouse''' button, drag and draw a square
|| Select the '''Square''' option.

Press the left-'''mouse''' button, drag to draw a square on the top left of the '''page'''.
|-
|| Click on the shape once >> point to the round-shaped handles
|| To tilt it as per the map, click on the shape again. 

The '''handles''' are now green in colour and round-shaped.
|-
|| Move the cursor over the left bottom corner handle

Point to the curved arrow.

Rotate the arrow anticlockwise.
|| Move the cursor over the left bottom corner '''handle'''.

You will see a curved arrow.

Rotate the arrow slightly in anticlockwise direction.
|-
|| Point to the square.
|| The square gets tilted!
|-
|| Double-click >> type '''Home''' inside it.
|| Double-click on the square and type '''Home''' inside it.
|-
|| Click anywhere on the '''Draw page'''
|| Click anywhere on the '''Draw page''' to deselect the shape.
|-
|| Point to the '''Pages panel''' on the right
|| Notice that the '''Pages panel''' on the left shows whatever we draw.
|-
|| Point to the '''home'''.
|| Next, let’s draw a '''park ''' to the right side of the '''home'''.
|-
|| Display the slide with the '''Routemap''' once again.

Point towards width of left and right sides respectively
|| As per our map, the''' park '''is an odd-shaped''' '''polygon.

The width on the left side is greater than that on the right side.
|-
|| '''Drawing toolbar ''' >> Click on the drop down next to the '''Curve''' icon.
|| Let us use a polygon to represent it.

On the ''' Drawing toolbar''', click on the drop-down next to the '''Curve ''' icon.
|-
|| Point to the curves and polygons.
|| You would have noticed that two types of '''curves '''and '''polygons '''can be drawn.
|-
|| Point towards both the options one by one
|| One is using the '''Filled '''option and the other is without a fill.

When you use the '''Filled '''option, the '''curve ''' is filled with '''color'''.
|-
|| '''Slide 6 '''

'''Curve toolbar'''

||We can see different options in the '''Curve ''' drop-down. 

Each option has a different method of '''mouse '''operation to draw the '''curve'''.

|-
|| Click on '''Polygon, filled'''.
|| Let us select '''Polygon, filled ''' option. 
|-
|| '''Zoom in''' using the '''Zoom slider'''

Scroll up the page
|| Let us '''zoom in''' using the '''Zoom slider''' at the bottom right of the interface.


Scroll up to the area where you want to draw the polygon.
|-
|| Place the cursor on the '''Draw '''page

Hold the left '''mouse''' button and drag the cursor down. 

Release the mouse button.
|| Place the cursor on the '''page, '''next to '''Home'''.

Hold the left '''mouse''' button, drag the '''cursor ''' down and release the '''mouse '''button. 


A straight line is drawn.
|-
|| Drag the '''mouse '''to the left until the '''shape '''is that of a '''right triangle.'''

Press the left '''mouse '''button and drag the '''mouse''' upward. 

Double-click the left '''mouse '''button.
|| Move the '''mouse '''to the right until the shape is that of a right triangle.

Then press the left '''mouse '''button and move the '''mouse''' upward.


Now, double-click the left '''mouse '''button to complete the polygon.
|-
|| Type '''Park''' inside it.
|| Let’s type '''Park''' inside it.
|-
|| Display the slide with the '''Routemap '''once again.


Point towards the commercial complex named polygon.
|| In our map, below the''' park ''' there is a '''commercial complex'''.

This too is an odd-shaped polygon. 
|-
|| Cursor on the page.
|| Let us draw this using a rectangle and then modify it.
|-
|| '''Drawing toolbar''' >> select '''Rectangle '''>> draw the rectangle
|| From the''' Drawing toolbar''', select '''Rectangle'''.

Place the '''cursor''' on the '''page ''' and drag to draw the rectangle.
|-
|| Click on the '''Transformations''' icon on the '''Standard toolbar''' >> select '''Distort'''.
|| Click on the '''Transformations''' icon on the '''Standard toolbar''' and select '''Distort'''.
|-
|| Click on '''Yes'''
|| Click on the '''Yes''' button in the confirmation box.
|-
|| Move the cursor over the bottom left corner handle >> the cursor becomes a pointing finger
|| Now move the cursor over the bottom left corner '''handle'''.

Notice that the cursor has become a pointing finger.
|-
|| Press the left '''mouse''' button on the '''handle '''>> drag >> adjust the shape as per the map shape
|| Press the left '''mouse''' button on the left '''handle.'''

Drag it outward to adjust the shape. 
|-
|| Repeat the above steps >> adjust the shape as per the map shape
|| Likewise drag the bottom right '''handle''' till the desired shape is achieved.
|-
|| Once the desired shape is achieved, double-click inside it to type '''Commercial Complex'''.
|| Once done, double-click inside the shape and type '''Commercial Complex'''.
|-
|| Point to '''parking lot '''in the map
|| Next, let’s draw a parking lot.
|-
|| '''Drawing toolbar''' >> select '''Rectangle >> '''drag and draw

Type the text “'''Parking Lot'''” inside it.
|| From the''' Drawing toolbar''', once again select '''Rectangle.'''

Then place the '''cursor''' on the '''page ''' and draw the rectangle.

Type the text''' Parking Lot''' inside it.
|-
|| Click on the '''Transformations''' icon on the '''Standard toolbar''' >> select '''Distort'''.
|| Click on the '''Transformations''' icon on the '''Standard toolbar''' and select '''Distort'''.
|-
|| Click on '''Yes'''
|| Click on the '''Yes''' button in the confirmation box.
|-
|| Move the cursor over the bottom right corner '''handle''' >> the '''cursor''' becomes a pointing finger
|| Move the cursor over the bottom right corner '''handle''' till it becomes a pointing finger.
|-
|| Press the left mouse button on the '''handle '''>> drag >> adjust the shape as per the map shape
|| Press the left '''mouse''' button on the bottom right '''handle.''' 

Drag and adjust the shape as shown here.
|-
|| Point to the text
|| Notice that the text typed also gets distorted to some extent, when we do so.
|-
|| Display the '''Routemap '''slide again
|| Let us refer to our map once again.
|-
|| Point towards the''' Residential Complex'''
|| A '''residential complex''' is right below '''Home''' and is in rectangular shape.
|-
|| '''Drawing toolbar''' >> select '''Rectangle'''.
|| From the '''Drawing toolbar''', select '''Rectangle'''. 
|-
|| Place the '''mouse '''on the Draw page and drag to draw a '''rectangle'''.
|| Place the '''cursor '''on the''' page''', click and drag to draw a rectangle.
|-
|| Name it “'''Residential Complex'''”.
|| We will name it '''Residential Complex'''.
|-
|| Click on '''Fit slide to current window '''at the bottom right
|| To see the whole page, click on the '''Fit slide to current window ''' icon at the bottom right.
|-
|| Show map slide again
|| Let’s refer to our map once again.
|-
|| Display the '''Routemap '''slide again

Point towards the '''Playground'''
|| The playground is in the shape of a really wide rectangle.
|-
|| Select the park shape >> press '''Ctrl + C keys''' 
|| Select the residential complex shape and press '''Ctrl + C keys''' to copy it.
|-
|| Press '''Ctrl + V keys'''
|| Now press '''Ctrl + V keys''' to paste it.
|-
|| Select the shape >> move it below the residential complex 
|| Select the shape again and move it below the '''residential complex'''.
|-
|| Move the cursor on the right-side handle >> drag to elongate it.

Drag the '''Zoom slider '''to '''zoom in'''.
|| Move the '''cursor''' on the right side '''handle''' and drag to elongate it.

Let us adjust its shape.

Let us '''zoom in''' for a better view.
|-
|| Double-click >> press '''Ctrl + A keys''' >> type “'''Play Ground'''”.
|| Double-click inside the shape.

Press '''Ctrl''' and''' A keys''' and type '''Play Ground''' inside it.
|-
|| Point to the polygon.
|| We have drawn yet another polygon in a different way!
|-
|| Display the '''Routemap '''slide again Point towards the '''Lake'''
|| Now let’s draw the '''lake''' at the top right of the school.
|-
|| Go to the''' Drawing toolbar''' 

Drop down next to '''Curve '''icon >>''' Freeform Line, filled'''
|| Go to the '''Drawing toolbar.'''

Click on the drop-down besides '''Curve''' icon.

Then select '''Freeform Line, filled '''option.
|-
|| On the '''Draw '''page, press the left '''mouse '''button >>

'''rotate '''the '''mouse '''in an '''anti-clockwise '''direction.


Release the left '''mouse '''button.
|| On the '''Draw '''page, press the left '''mouse '''button.

Rotate the '''mouse '''in an anti-clockwise direction on the '''page.'''

Then release the left '''mouse '''button.
|-
|| Point to the lake.
|| We have drawn a lake!
|-
|| Type the text '''lake'''.
|| Let’s type '''Lake''' inside this shape.
|-
|| Show the map slide again
|| Look at the reference map once again.
|-
|| Display the '''Routemap '''slide again

Point towards the '''School'''
|| The last shape in this map is the school'''.'''

The school is in the form of an odd-shaped polygon. 
|-
|| Click on the '''Zoom and Pan''' icon >> click on the empty space. 
|| First let’s''' zoom''' in for a better view.

Click on the '''Zoom and Pan''' icon at the top and then click here on the '''page'''. 
|-
|| Go to the''' Drawing toolbar''' 


Drop down next to '''Curve''' icon >> ''' Curve, Filled'''
|| Now, go to the '''Drawing toolbar.'''

Click on the drop-down besides '''Curve''' icon and select '''Curve, Filled.'''
|-
|| Place the cursor on the '''Draw '''page
|| Bring the '''cursor''' on the '''Draw page'''.
|-
|| Press the left-'''mouse''' button >> drag straight till the lake
|| Press the left-'''mouse''' button.

Drag the '''cursor''' up to the lake in a straight path.
|-
|| Release the mouse button >> move the '''cursor''' downward
|| Now release the '''mouse''' button and move the '''cursor''' downward like this.
|-
|| Click once at this point.
|| Click once at this point.
|-
|| move the '''cursor''' to the left side >> double-click
|| Now move the '''cursor''' to the left like this and double-click to complete the shape.

|-
|| Let’s type “'''School Campus'''” inside it.
|| Let’s type the text '''School Campus''' inside it.

Let us '''zoom out''' to see the whole page.
|-
|| Cursor on the Draw page
|| We have drawn all the shapes as shown in the '''Route map'''.
|-
|| Point to the route map.
|| We will show how to edit the curves and add directions in the next tutorial.
|-
|| Press''' Ctrl + S''' to save the file
|| Let us save all the changes made and close the file.
|-
|| Only Narration
|| This brings us to the end of this tutorial.

Let us summarise.
|-
|| '''Slide 7'''

'''Summary'''
|| In this tutorial, we have learnt to,
* Draw and edit polygons and curves
* Insert text in the polygons

|-
|| '''Slide 8'''

'''Assignment'''
|| Here is an '''assignment '''for you.

* Open '''MyPractice.odg''' file and add a new page
* Draw '''curves '''and '''polygons '''using all the options in the '''Curve ''' drop down. 
* Notice how the shape of the '''cursor ''' changes''' '''during the '''mouse '''operations 
* Explore how to change the '''fill color '''in the option '''Filled'''.

|-
|| '''Slide 9''' 

'''Assignment'''
|| Here is another assignment for you,
* Add another new page
* Draw five-sided, six-sided and ten-sided polygons on this '''page'''.

|-
|| '''Slide 10'''

'''About Spoken Tutorial Project'''
|| 
* The video at the following link summarises the Spoken Tutorial project.
*Please download and watch it

|-
|| '''Slide 11''' 

''' Spoken Tutorial Workshops'''
||
* We conduct workshops using Spoken Tutorials and give certificates.
* For more details, please contact us.

|-
|| '''Slide 12'''

'''Forums'''
|| Please post your timed queries in this forum.
|-
|| '''Slide 13'''
'''Acknowledgement'''
|| The '''Spoken Tutorial''' project is funded by the '''Ministry of Education''', Govt. of India.
|-
|| '''Slide 14'''

'''Thank you'''
|| This tutorial was originally contributed by DesiCrew Solutions Pvt. Ltd. in 2011

This tutorial is contributed by Nikita Misal and Madhuri Ganapathi from IIT Bombay.

Thank you for watching.
|-
|}