Difference between revisions of "LibreOffice-Suite-Draw-6.3/C2/Fill-Objects-with-Color/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with " {|border=1 ||'''Visual Cue''' ||'''Narration''' |- || '''Slide''': '''Title Slide''' || Welcome to the '''Spoken Tutorial''' on '''Fill Objects with Color''' in '''LibreOffi...")
 
Line 9: Line 9:
 
|| '''Slide''':''' Learning Objectives'''
 
|| '''Slide''':''' Learning Objectives'''
 
|| In this tutorial, we will learn how to:
 
|| In this tutorial, we will learn how to:
 
+
*Fill''' objects''' with '''color, gradients, hatching '''and '''bitmaps'''
*Fill''' objects''' with '''color''', '''gradients''', '''hatching '''and '''bitmaps'''
+
 
*Set '''page backgrounds'''
 
*Set '''page backgrounds'''
 
*Create new colors
 
*Create new colors
 
  
 
|-
 
|-
 
|| '''Slide''': '''System Requirements'''
 
|| '''Slide''': '''System Requirements'''
 
|| This tutorial is recorded using,  
 
|| This tutorial is recorded using,  
 
 
* '''Ubuntu Linux '''OS version 18.04 and  
 
* '''Ubuntu Linux '''OS version 18.04 and  
 
* '''LibreOffice Suite''' version 6.3.5
 
* '''LibreOffice Suite''' version 6.3.5
 
  
 
|-
 
|-
 
|| Switch to '''Water-Cycle'''.odg
 
|| Switch to '''Water-Cycle'''.odg
|| Let us open our '''Water'''-'''Cycle'''.'''odg''' file which we created earlier in this series.
+
|| Let us open our '''Water-Cycle.odg''' file which we created earlier in this series.
 
|-  
 
|-  
 
|| '''Slide: Code Files'''
 
|| '''Slide: Code Files'''
Line 32: Line 28:
 
* Please download and extract the files.
 
* Please download and extract the files.
 
* Make a copy and then use them for practising.
 
* Make a copy and then use them for practising.
 
  
 
|-
 
|-
|| Point to the '''clouds '''on the right.
+
|| Point to the clouds on the right.
|| First, let us colour''' '''the two clouds''' '''next to the sun.  
+
|| First, let us colour the two clouds next to the sun.  
  
  
Line 44: Line 39:
 
|| Select both the clouds next to the sun by pressing the '''Shift key''' and clicking on each cloud.
 
|| Select both the clouds next to the sun by pressing the '''Shift key''' and clicking on each cloud.
 
|-
 
|-
|| Go to the '''Drawing toolbar''' >> click on the drop down of '''Fill color''' icon >> Click on white color
+
|| Go to the '''Drawing toolbar''' >> click on the drop down of '''Fill color''' icon >> Click on white colour
|| Now go to the '''Drawing toolbar''' and click on the drop down next to the''' Fill color''' icon.
+
|| Now go to the '''Drawing toolbar''' and click on the drop-down next to the''' Fill color''' icon.
  
  
From the color '''palette, '''click on the white color.
+
From the colour '''palette, '''click on the white colour.
 
|-
 
|-
 
|| Point to the clouds.
 
|| Point to the clouds.
Line 60: Line 55:
 
|-
 
|-
 
|| Press''' CTRL+S '''keys
 
|| Press''' CTRL+S '''keys
|| Remember to '''save '''the file by pressing''' CTRL+ S '''keys together, every time you make a change.
+
|| Remember to '''save '''the file by pressing''' CTRL+ S '''keys together every time you make a change.
 
|-
 
|-
 
|| Point to the '''clouds '''on the left.
 
|| Point to the '''clouds '''on the left.
|| Let’s color the other two '''clouds''', in '''gray '''as they are rain-bearing clouds.
+
|| Let us colour the other two clouds, in gray as they are rain-bearing clouds.
 
|-
 
|-
 
|| Press Ctrl key >> click on each cloud.
 
|| Press Ctrl key >> click on each cloud.
 
|| Select both the clouds by pressing the '''Shift '''key and clicking on each cloud.
 
|| Select both the clouds by pressing the '''Shift '''key and clicking on each cloud.
 
|-
 
|-
|| Go to the '''Drawing toolbar''' >> click on the drop down of '''Fill color''' icon >> Click on '''Light Gray 2''' color
+
|| Go to the '''Drawing toolbar''' >> click on the drop down of '''Fill color''' icon >> Click on '''Light Gray 2''' colour
 
|| On the '''Drawing toolbar,''' click on the drop down next to the''' Fill color''' icon.
 
|| On the '''Drawing toolbar,''' click on the drop down next to the''' Fill color''' icon.
  
  
From the color '''palette, '''click on the '''Light Gray 2''' color.
+
From the colour '''palette, '''click on the '''Light Gray 2''' colour.
 
|-
 
|-
 
|| Point to the clouds
 
|| Point to the clouds
Line 89: Line 84:
 
That way your changes are saved automatically.
 
That way your changes are saved automatically.
 
|-
 
|-
|| Go to the '''Drawing toolbar''' >> click on the drop down of '''Fill color''' icon >> Click on '''Dark Brick 3 '''color.
+
|| Go to the '''Drawing toolbar''' >> click on the drop down of '''Fill color''' icon >> Click on '''Dark Brick 3 '''colour.
|| Let us color the triangle''' '''as '''Dark Brick 3''' in the same way.
+
|| Let us colour the triangle''' '''as '''Dark Brick 3''' in the same way.
 
|-
 
|-
|| Go to the '''Drawing toolbar''' >> click on the drop down of '''Fill color''' icon >> Click on '''Dark Brick 4 '''color.
+
|| Go to the '''Drawing toolbar''' >> click on the drop down of '''Fill color''' icon >> Click on '''Dark Brick 4 '''colour.
|| Then color the rectangle''' '''in '''Dark Brick 4''' in the same way, again.
+
|| Then colour the rectangle in '''Dark Brick 4''' in the same way, again.
 
|-
 
|-
|| Go to the '''Drawing toolbar''' >> click on the drop down of '''Fill color''' icon >> Click on '''yellow '''color.
+
|| Go to the '''Drawing toolbar''' >> click on the drop down of '''Fill color''' icon >> Click on '''yellow '''colour.
 
|| Next colour the sun yellow.
 
|| Next colour the sun yellow.
 
|-
 
|-
 
|| Select triangle and curve>>Right click for '''context menu '''>> '''Area'''>>'''Palette'''>>'''Light Blue 1'''
 
|| Select triangle and curve>>Right click for '''context menu '''>> '''Area'''>>'''Palette'''>>'''Light Blue 1'''
|| Let us color the other triangle and curve that represent water with the colour '''Light Blue 1'''
+
|| Let us colour the other triangle and curve that represent water with the colour '''Light Blue 1'''
 
|-
 
|-
 
|| Point to the outlines of the '''curve '''and the '''triangle'''.
 
|| Point to the outlines of the '''curve '''and the '''triangle'''.
Line 105: Line 100:
  
  
Let’s make these outlines invisible''' '''so that the '''object''' looks better.
+
Let’s make these outlines invisible so that the '''object''' looks better.
 
|-
 
|-
 
|| Select the triangle and the curve
 
|| Select the triangle and the curve
Line 128: Line 123:
  
  
Click OK.
+
Click '''OK'''.
  
 
Point to '''water object.'''
 
Point to '''water object.'''
Line 142: Line 137:
 
|-
 
|-
 
|| Point to the trees.
 
|| Point to the trees.
|| Now, let us color the trees.
+
|| Now, let us colour the trees.
 
|-
 
|-
|| Select the left-most '''tree'''.
+
|| Select the left-most tree.
  
  
Line 156: Line 151:
 
Now, let’s edit the tree.
 
Now, let’s edit the tree.
 
|-
 
|-
||Color the leaves
+
||Colour the leaves
||Let’s color the leaves''' '''as '''Dark Lime 3''', as shown.
+
||Let us colour the leaves as '''Dark Lime 3''', as shown.
 
|-
 
|-
|| Color the '''trunk '''of the '''tree'''
+
|| Colour the trunk of the tree  
|| Then let’s color the trunk''' '''of the tree as''' Dark Brick 4''' in a similar way.
+
|| Then let’s colour the trunk of the tree as''' Dark Brick 4''' in a similar way.
 
|-
 
|-
 
|| Right-click >> select '''Exit Group'''
 
|| Right-click >> select '''Exit Group'''
Line 166: Line 161:
 
|-
 
|-
 
|| Point to the trees.
 
|| Point to the trees.
|| We can color the other trees in the same way.
+
|| We can colour the other trees in the same way.
 
|-
 
|-
|| Select and delete the other trees and copy paste three more trees.
+
|| Select and delete the other trees and copy-paste three more trees.
|| Or we can delete''' '''the other trees, and then '''copy''', '''paste '''the colored '''tree '''three times'''. '''
+
|| Or we can delete the other trees, and then '''copy, paste '''the coloured tree three times.
  
  
Now move''' '''it to the desired location.
+
Now move it to the desired location.
  
  
Line 184: Line 179:
 
|-
 
|-
 
|| Group the clouds next to the sun
 
|| Group the clouds next to the sun
|| So, select the clouds''' '''next to the sun and '''group '''them as explained earlier.
+
|| So, select the clouds next to the sun and '''group '''them as explained earlier.
 
|-
 
|-
 
|| Select the '''white '''cloud group >> click on '''Properties '''icon  
 
|| Select the '''white '''cloud group >> click on '''Properties '''icon  
Line 197: Line 192:
  
  
Immediately, various options to adjust the shadow''' '''become visible.  
+
Immediately, various options to adjust the shadow become visible.  
 
|-
 
|-
 
|| Point to the '''shadow '''behind each white cloud.
 
|| Point to the '''shadow '''behind each white cloud.
Line 209: Line 204:
 
|-
 
|-
 
|| Point to the gray clouds.
 
|| Point to the gray clouds.
|| Now let’s make the gray clouds''' '''look more realistic.
+
|| Now let’s make the gray clouds look more realistic.
 
|-
 
|-
 
|| Select the gray clouds>> right-click for and select '''Group'''.
 
|| Select the gray clouds>> right-click for and select '''Group'''.
Line 220: Line 215:
  
  
Under '''Area, '''click on the down arrow next to '''Fill''' and select''' Gradient.'''
+
Under '''Area, '''click on the drop-down next to '''Fill''' and select''' Gradient.'''
  
 
|-  
 
|-  
 
|| Change the drop down box with''' Linear '''to '''Ellipsoid'''
 
|| Change the drop down box with''' Linear '''to '''Ellipsoid'''
  
Select the colors as '''light gray 1 '''and''' dark gray 1'''
+
Select the colours as '''light gray 1 '''and''' dark gray 1'''
  
 
|| In the drop-down box change the '''gradient style''' from '''Linear''' to '''Ellipsoid.'''
 
|| In the drop-down box change the '''gradient style''' from '''Linear''' to '''Ellipsoid.'''
  
Select the colors as''' Light Gray 3 '''and D'''ark Gray 1.'''
+
Select the colours as''' Light Gray 3 '''and '''Dark Gray 1.'''
 
|-  
 
|-  
 
|| Change the angle from''' 30 '''to '''35 degree'''
 
|| Change the angle from''' 30 '''to '''35 degree'''
|| And change the '''gradient''' '''angle''' from''' 30 '''to '''35 degrees.'''
+
|| And change the '''gradient angle''' from''' 30 '''to '''35 degrees.'''
 
|-
 
|-
 
|| Close the '''Sidebar deck'''.
 
|| Close the '''Sidebar deck'''.
Line 238: Line 233:
  
  
The clouds now have a more realistic '''shade '''of '''gray'''!
+
The clouds now have a more realistic shade of gray!
 
|-
 
|-
 
|| Press''' CTRL+S '''keys
 
|| Press''' CTRL+S '''keys
Line 252: Line 247:
  
 
select Area
 
select Area
|| Select an '''object''', say the white cloud''' '''group.  
+
|| Select an '''object''', say the white cloud '''group'''.  
  
  
Line 260: Line 255:
 
|| The '''Area''' dialog box opens up.
 
|| The '''Area''' dialog box opens up.
  
The '''Area '''tab options''' '''are visible, by default.
+
The '''Area '''tab options are visible, by default.
 
|-
 
|-
 
|| Click on 6 sub-tabs.
 
|| Click on 6 sub-tabs.
|| There are six sub-tabs – '''None''', '''Color''', '''Gradient''', '''Bitmap''', '''Pattern '''and '''Hatch.'''
+
|| There are six sub-tabs – '''None, Color, Gradient, Bitmap, Pattern '''and '''Hatch.'''
 
|-
 
|-
 
|| Point to the tabs
 
|| Point to the tabs
|| These tabs allow us to create''' '''and save new''' styles'''.
+
|| These tabs allow us to create and save new''' styles'''.
 
|-
 
|-
 
|| Click on the '''Color tab'''.
 
|| Click on the '''Color tab'''.
|| Let’s click on the''' Color '''tab.
+
|| Let us click on the''' Color '''tab.
 
|-
 
|-
 
|| Point to '''Colors'''  
 
|| Point to '''Colors'''  
Line 275: Line 270:
 
'''Palette >> standard'''
 
'''Palette >> standard'''
  
|| Here we can see the '''Colors '''section''' '''on the left side.
+
|| Here we can see the '''Colors '''section on the left side.
  
 
'''Palette '''shows '''standard''', by default.
 
'''Palette '''shows '''standard''', by default.
Line 282: Line 277:
 
|| '''Active '''and '''New '''sections are seen on the right side of the dialog box.
 
|| '''Active '''and '''New '''sections are seen on the right side of the dialog box.
 
|-
 
|-
|| Select color''' Red '''from the''' palette.'''
+
|| Select colour''' Red '''from the''' palette.'''
|| Let us select color red''' '''from the '''palette.'''
+
|| Let us select red colour from the '''palette.'''
 
|-
 
|-
 
|| Point to '''Active '''option '''preview'''
 
|| Point to '''Active '''option '''preview'''
Line 289: Line 284:
  
 
Point to '''New '''option '''preview'''
 
Point to '''New '''option '''preview'''
|| '''Active '''option shows the original color''' '''of the '''object, '''which was white'''.'''
+
|| '''Active '''option shows the original colour of the '''object, '''which was white.
  
And the '''New '''option shows the '''preview '''of the selected color which is red.
+
And the '''New '''option shows the '''preview '''of the selected colour which is red.
 
|-
 
|-
|| Point to '''R''', '''G '''and '''B'''
+
|| Point to '''R, G '''and '''B'''
|| Below the '''New''' section we can see the '''RGB''' values for the selected color.
+
|| Below the '''New''' section we can see the '''RGB''' values for the selected colour.
  
'''R''', '''G''' and '''B '''stands for the proportion of red, green and blue in any color.
+
'''R, G''' and '''B '''stands for the proportion of red, green and blue in any colour.
  
We can manually change these values to get the custom color of our choice.
+
We can manually change these values to get the custom colour of our choice.
 
|-
 
|-
 
|| Select '''RGB '''>> Enter '''200 '''for '''R'''<nowiki>; </nowiki>'''100 '''for '''G'''<nowiki>; </nowiki>'''50 '''for '''B'''.
 
|| Select '''RGB '''>> Enter '''200 '''for '''R'''<nowiki>; </nowiki>'''100 '''for '''G'''<nowiki>; </nowiki>'''50 '''for '''B'''.
Line 304: Line 299:
 
|-
 
|-
 
|| Only narration
 
|| Only narration
|| Here we are changing the proportion of red, green and blue to create a new color.
+
|| Here we are changing the proportion of red, green and blue to create a new colour.
 
|-
 
|-
 
|| Point to the '''preview '''boxes above the '''RGB '''field.
 
|| Point to the '''preview '''boxes above the '''RGB '''field.
Line 315: Line 310:
  
 
Type '''New Red >> '''Click '''OK'''.
 
Type '''New Red >> '''Click '''OK'''.
|| Click on the '''Add '''button and type a name for this new color.
+
|| Click on the '''Add '''button and type a name for this new colour.
  
 
Let us type the name '''New Red '''and click on the '''OK '''button.
 
Let us type the name '''New Red '''and click on the '''OK '''button.
 
|-
 
|-
|| Point towards the created '''color'''
+
|| Point towards the created colour
|| We have created a new custom color!
+
|| We have created a new custom colour!
  
 
Look at the '''Colors''' section.  
 
Look at the '''Colors''' section.  
Line 327: Line 322:
 
|-
 
|-
 
|| Only narration
 
|| Only narration
|| Likewise we can create many other custom colors of our own.
+
|| Likewise we can create many other custom colours of our own.
 
|-  
 
|-  
 
|| Point to the '''Gradients '''and '''Hatching '''tabs in the '''dialog box'''.
 
|| Point to the '''Gradients '''and '''Hatching '''tabs in the '''dialog box'''.
Line 337: Line 332:
 
|| '''Slide''': '''Gradients'''
 
|| '''Slide''': '''Gradients'''
 
||
 
||
* '''Gradients '''are '''shades '''that blend from one color to the other.
+
* '''Gradients '''are '''shades '''that blend from one colour to the other.
* For example, the color shade moves from blue to green.
+
* For example, the colour shade moves from blue to green.
  
 
|-
 
|-
 
|| '''Slide''': '''Hatching'''
 
|| '''Slide''': '''Hatching'''
 
||
 
||
* '''Hatching '''is a '''shading '''or '''texture '''in the drawing that is created using '''fine parallel lines.'''
+
* '''Hatching '''is a '''shading '''or '''texture '''in the drawing that is created using fine parallel lines.
  
 
|-
 
|-
Line 350: Line 345:
 
|-
 
|-
 
|| Click '''group triangle '''and '''curve'''
 
|| Click '''group triangle '''and '''curve'''
|| Let us make the '''water '''look more realistic.
+
|| Let us make the water look more realistic.
  
  
So, select the '''grouped triangle '''and '''curve.'''
+
So, select the '''grouped''' triangle and curve.
 
|-
 
|-
 
|| Click on the '''Sidebar >> Properties'''
 
|| Click on the '''Sidebar >> Properties'''
Line 376: Line 371:
 
|| Then click on the '''Open''' button.  
 
|| Then click on the '''Open''' button.  
  
The '''Bitmap '''is now imported''' '''into this '''object.'''
+
The '''Bitmap '''is now imported into this '''object.'''
 
|-
 
|-
 
|| Close the '''Sidebar deck'''.
 
|| Close the '''Sidebar deck'''.
Line 385: Line 380:
 
|-
 
|-
 
|| Select white clouds.
 
|| Select white clouds.
|| Select the white clouds, now.
+
|| Select the white clouds now.
 
|-
 
|-
 
|| Click on Properties
 
|| Click on Properties
Line 406: Line 401:
 
|| Press''' CTRL + S '''keys to save the file.
 
|| Press''' CTRL + S '''keys to save the file.
 
|-
 
|-
|| Cursor on the Draw page.
+
|| Cursor on the '''Draw''' page.
|| Let’s '''color '''the sky now. This is very simple!
+
|| Let’s colour the sky now. This is very simple!
  
We just apply a '''background '''to the whole '''page'''.
+
We just apply a '''background ''' colour to the whole page.
 
|-
 
|-
 
|| Click the '''cursor '''on the '''page''', to ensure no '''objects '''are selected.
 
|| Click the '''cursor '''on the '''page''', to ensure no '''objects '''are selected.
Line 416: Line 411:
  
 
Click the drop down besides '''Background '''and select '''Color'''
 
Click the drop down besides '''Background '''and select '''Color'''
|| Click anywhere on the '''page''', to ensure that no '''objects '''are selected.
+
|| Click anywhere on the page, to ensure that no '''objects '''are selected.
  
  
Line 422: Line 417:
  
  
Click the drop-down besides '''Background '''and select '''Color.'''
+
Click the drop-down besides '''Background''' and select '''Color.'''
 
|-
 
|-
 
|| '''Palette'''>>drop-down '''material'''
 
|| '''Palette'''>>drop-down '''material'''
  
Select the color '''Blue 3'''
+
Select the colour '''Blue 3'''
|| In the '''Palette '''option, select '''libreoffice''' from the dropdown
+
|| In the '''Palette '''option, select '''libreoffice''' from the drop-down.
  
  
Select the color '''Blue 3''' from the available colours.
+
Select the colour '''Blue 3''' from the available colours.
 
|-
 
|-
 
|| Close the '''Sidebar deck'''.
 
|| Close the '''Sidebar deck'''.
Line 456: Line 451:
 
|-  
 
|-  
 
|| Point to the mountain.
 
|| Point to the mountain.
|| The '''object '''is not filled with any '''color '''and only the '''outline '''is seen against the '''background'''.
+
|| The '''object '''is not filled with any colour and only the outline is seen against the '''background'''.
 
|-
 
|-
 
|| Press '''CTRL + Z '''to undo the action.
 
|| Press '''CTRL + Z '''to undo the action.
Line 475: Line 470:
 
|| In this tutorial, we have learnt how to:  
 
|| In this tutorial, we have learnt how to:  
  
* Use '''color''', '''gradients''', '''hatching '''and '''bitmaps '''
+
* Use '''color, gradients, hatching '''and '''bitmaps '''
 
* Fill '''objects'''
 
* Fill '''objects'''
 
* Create '''backgrounds'''
 
* Create '''backgrounds'''
Line 482: Line 477:
 
|-
 
|-
 
|| '''Slide''': '''Assignment'''
 
|| '''Slide''': '''Assignment'''
|| Here is an assignment''' '''for you.
+
|| Here is an assignment for you.
  
* Open the '''MyPractice.odg''' file and color the shown objects
+
* Open the '''MyPractice.odg''' file and colour the shown objects
* Give a '''background ''' colour to the page  
+
* Give a '''background''' colour to the page  
* Create new colors
+
* Create new colours
 
|-
 
|-
 
|| '''Slide''': '''About Spoken Tutorial Project'''
 
|| '''Slide''': '''About Spoken Tutorial Project'''
Line 498: Line 493:
 
* We conduct workshops using Spoken Tutorials and give certificates.
 
* We conduct workshops using Spoken Tutorials and give certificates.
 
* For more details, please contact us.
 
* For more details, please contact us.
 
  
 
|-
 
|-

Revision as of 16:25, 3 March 2021

Visual Cue Narration
Slide: Title Slide Welcome to the Spoken Tutorial on Fill Objects with Color in LibreOffice Draw.
Slide: Learning Objectives In this tutorial, we will learn how to:
  • Fill objects with color, gradients, hatching and bitmaps
  • Set page backgrounds
  • Create new colors
Slide: System Requirements This tutorial is recorded using,
  • Ubuntu Linux OS version 18.04 and
  • LibreOffice Suite version 6.3.5
Switch to Water-Cycle.odg Let us open our Water-Cycle.odg file which we created earlier in this series.
Slide: Code Files
  • The files used in this tutorial have been provided to you in the Code files link on this tutorial page.
  • Please download and extract the files.
  • Make a copy and then use them for practising.
Point to the clouds on the right. First, let us colour the two clouds next to the sun.


We shall fill them with white colour.

Press Shift key >> click on each cloud. Select both the clouds next to the sun by pressing the Shift key and clicking on each cloud.
Go to the Drawing toolbar >> click on the drop down of Fill color icon >> Click on white colour Now go to the Drawing toolbar and click on the drop-down next to the Fill color icon.


From the colour palette, click on the white colour.

Point to the clouds.


Click anywhere on the page.

Both clouds are now white in colour!


Click anywhere else on the page to deselect the clouds.

Press CTRL+S keys Remember to save the file by pressing CTRL+ S keys together every time you make a change.
Point to the clouds on the left. Let us colour the other two clouds, in gray as they are rain-bearing clouds.
Press Ctrl key >> click on each cloud. Select both the clouds by pressing the Shift key and clicking on each cloud.
Go to the Drawing toolbar >> click on the drop down of Fill color icon >> Click on Light Gray 2 colour On the Drawing toolbar, click on the drop down next to the Fill color icon.


From the colour palette, click on the Light Gray 2 colour.

Point to the clouds


Press CTRL+S keys

Both clouds are now gray in colour!


Save the file.

Text on screen: Set the Automatic Save option To avoid accidental loss of work, set the Automatic Save option.


That way your changes are saved automatically.

Go to the Drawing toolbar >> click on the drop down of Fill color icon >> Click on Dark Brick 3 colour. Let us colour the triangle as Dark Brick 3 in the same way.
Go to the Drawing toolbar >> click on the drop down of Fill color icon >> Click on Dark Brick 4 colour. Then colour the rectangle in Dark Brick 4 in the same way, again.
Go to the Drawing toolbar >> click on the drop down of Fill color icon >> Click on yellow colour. Next colour the sun yellow.
Select triangle and curve>>Right click for context menu >> Area>>Palette>>Light Blue 1 Let us colour the other triangle and curve that represent water with the colour Light Blue 1
Point to the outlines of the curve and the triangle. Observe that in the object water, the outlines of the triangle and the curve are displayed.


Let’s make these outlines invisible so that the object looks better.

Select the triangle and the curve


Right-click to view the context menu >> click Line

So first select the object.


Right-click to view the context menu and select Line.

Point to the Line dialog box


Click the Line tab

The Line dialog box opens up.


Click on the Line tab.

In Line properties >> click on the Style drop-down box >> select none


Click OK.

Point to water object.

In Line properties, click on the Style drop-down box and select None.

Then click on the OK button.


The outline of the water object becomes invisible.

Press CTRL+S keys Press CTRL+S keys to save the file.
Point to the trees. Now, let us colour the trees.
Select the left-most tree.


Right-click to view the context menu >> click Enter Group.

Let us select the left-most tree.


Right-click to view the context menu and click on the Enter Group option.


Now, let’s edit the tree.

Colour the leaves Let us colour the leaves as Dark Lime 3, as shown.
Colour the trunk of the tree Then let’s colour the trunk of the tree as Dark Brick 4 in a similar way.
Right-click >> select Exit Group To exit the group, right-click and select Exit Group.
Point to the trees. We can colour the other trees in the same way.
Select and delete the other trees and copy-paste three more trees. Or we can delete the other trees, and then copy, paste the coloured tree three times.


Now move it to the desired location.


It is much easier this way, isn’t it?

Press CTRL+S keys Press CTRL+S keys to save the file.
Point to white clouds. Next let us add a shadow to the clouds next to the sun.
Group the clouds next to the sun So, select the clouds next to the sun and group them as explained earlier.
Select the white cloud group >> click on Properties icon


Shadow >> Enable

We can add and adjust the shadow from the Sidebar.

To do so, select the white cloud group and click on Properties icon.

Under Shadow, click on Enable.


Immediately, various options to adjust the shadow become visible.

Point to the shadow behind each white cloud.


Click on the x icon to close.

A shadow is displayed behind each white cloud in the Draw page.


Close the sidebar.

Point to the gray clouds. Now let’s make the gray clouds look more realistic.
Select the gray clouds>> right-click for and select Group. Select the gray clouds and group them.
Sidebar >> Properties

Click on the down arrow next to Fill and select Gradient

On the Sidebar, click on Properties.


Under Area, click on the drop-down next to Fill and select Gradient.

Change the drop down box with Linear to Ellipsoid

Select the colours as light gray 1 and dark gray 1

In the drop-down box change the gradient style from Linear to Ellipsoid.

Select the colours as Light Gray 3 and Dark Gray 1.

Change the angle from 30 to 35 degree And change the gradient angle from 30 to 35 degrees.
Close the Sidebar deck. Close the Sidebar deck.


The clouds now have a more realistic shade of gray!

Press CTRL+S keys Press CTRL+S keys to save the file.
Next, we will learn how to create a custom style.
Select the white cloud group


Right-click for the context menu

select Area

Select an object, say the white cloud group.


Right-click for the context menu and select Area.

Point to Area dialog box The Area dialog box opens up.

The Area tab options are visible, by default.

Click on 6 sub-tabs. There are six sub-tabs – None, Color, Gradient, Bitmap, Pattern and Hatch.
Point to the tabs These tabs allow us to create and save new styles.
Click on the Color tab. Let us click on the Color tab.
Point to Colors

Palette >> standard

Here we can see the Colors section on the left side.

Palette shows standard, by default.

Point to Active and New option Active and New sections are seen on the right side of the dialog box.
Select colour Red from the palette. Let us select red colour from the palette.
Point to Active option preview


Point to New option preview

Active option shows the original colour of the object, which was white.

And the New option shows the preview of the selected colour which is red.

Point to R, G and B Below the New section we can see the RGB values for the selected colour.

R, G and B stands for the proportion of red, green and blue in any colour.

We can manually change these values to get the custom colour of our choice.

Select RGB >> Enter 200 for R; 100 for G; 50 for B. We will enter 200 for R, 100 for G and 50 for B.
Only narration Here we are changing the proportion of red, green and blue to create a new colour.
Point to the preview boxes above the RGB field. Look at the New preview box above the RGB field.
Point to the Custom Palette In the Colors section, go to the Custom Palette at the bottom of the dialog box.
Click on Add

Type New Red >> Click OK.

Click on the Add button and type a name for this new colour.

Let us type the name New Red and click on the OK button.

Point towards the created colour We have created a new custom colour!

Look at the Colors section.

The Palette now says custom and our new colour is displayed below.

Only narration Likewise we can create many other custom colours of our own.
Point to the Gradients and Hatching tabs in the dialog box. We can create custom gradients and hatching also, using the tabs in the Area dialog box.
Click on the Cancel button Click on the Cancel button to close the Area dialog box without applying the changes.
Slide: Gradients
  • Gradients are shades that blend from one colour to the other.
  • For example, the colour shade moves from blue to green.
Slide: Hatching
  • Hatching is a shading or texture in the drawing that is created using fine parallel lines.
Cursor on the Draw page. Next let’s learn how to import a bitmap into Draw.
Click group triangle and curve Let us make the water look more realistic.


So, select the grouped triangle and curve.

Click on the Sidebar >> Properties Bitmaps can be added from the Properties icon on the Sidebar.
Change the drop down of Fill to Bitmap Under Area, in the Fill drop-down select Bitmap.
Click on the Import button Then, click on the Import button.
The Import dialog box appears. The Import dialog box appears.
Browse and select a bitmap. Browse to the location where we saved the bitmap given in the Code Files link and select it.
Click on the Open button.


Point towards the imported Bitmap

Then click on the Open button.

The Bitmap is now imported into this object.

Close the Sidebar deck. Close the Sidebar deck.
Point to the water object. The water looks more realistic now!
Select white clouds. Select the white clouds now.
Click on Properties

Change the drop down against Fill to Bitmap

Click on the Properties icon once again.

Under Area, change the Fill option to Bitmap.

Drop-down box next to Import >> scroll >> select Paper crumpled. In the drop-down box next to Import, scroll and select Paper crumpled.
Close the Sidebar deck. Close the Sidebar deck.
Point to the clouds This is a very realistic effect for the clouds!
Press CTRL + S keys Press CTRL + S keys to save the file.
Cursor on the Draw page. Let’s colour the sky now. This is very simple!

We just apply a background colour to the whole page.

Click the cursor on the page, to ensure no objects are selected.

Go to the Properties icon

Click the drop down besides Background and select Color

Click anywhere on the page, to ensure that no objects are selected.


Go to the Properties icon on the Sidebar.


Click the drop-down besides Background and select Color.

Palette>>drop-down material

Select the colour Blue 3

In the Palette option, select libreoffice from the drop-down.


Select the colour Blue 3 from the available colours.

Close the Sidebar deck. Close the Sidebar deck.
Point to the background The background is now a lovely shade of blue!
Press CTRL + S keys Press CTRL + S keys to save the file.
Cursor on the interface. Next, let me demonstrate how an object can have only an outline without any colour filled within.
Select the mountain >> right-click for the context menu >> select Area Select the mountain, click on the Properties in the Sidebar and select Area section.
Fill drop-down >> select None

Click on the x icon to close.

In the Fill drop-down, select None.


Close the sidebar.

Point to the mountain. The object is not filled with any colour and only the outline is seen against the background.
Press CTRL + Z to undo the action. To undo the action, press CTRL + Z keys.
Go to the main menu and click Format >> Point to the Area option. You can also access all these options from the Format menu in the menu bar.
Press CTRL + S keys together. Save and close the file.
Only narration This brings us to the end of this tutorial.

Let us summarize.

Slide: Summary In this tutorial, we have learnt how to:
  • Use color, gradients, hatching and bitmaps
  • Fill objects
  • Create backgrounds
  • Create new styles
Slide: Assignment Here is an assignment for you.
  • Open the MyPractice.odg file and colour the shown objects
  • Give a background colour to the page
  • Create new colours
Slide: About Spoken Tutorial Project
  • The video at the following link summarises the Spoken Tutorial project.
  • Please download and watch it
Slide: Spoken tutorial workshops
  • We conduct workshops using Spoken Tutorials and give certificates.
  • For more details, please contact us.
Slide: Forums Please post your timed queries in this forum.
Slide: Acknowledgement


Spoken Tutorial project is funded by the Ministry of Education (MoE), Govt. Of India
Slide: Thank you This tutorial was originally contributed by DesiCrew Solutions Pvt. Ltd. in 2011


The script for this tutorial was written by Nikita Misal from IIT Bombay.


And this is Madhuri Ganapathi along with the Spoken Tutorial team signing off. Thank you for watching.

Contributors and Content Editors

Madhurig, Nancyvarkey