Techno Express

TECHNOEXPRESS CONTENTS
Table of Contents
SESSION 1 GETTING TO KNOW INKSCAPE.................................................................................................... 1

Assignment 1: Expressing Yourself Through Visual Materials.............................................................. 3
Assignment 2: Introducing Inkscape.......................................................................................................9
Assignment 3: Working With Layers....................................................................................................... 13
Session 1 Review: Managing the layers of a project........................................................................ 27
Session 1 Extension Activity: Owls and Bunnies................................................................................... 28
SESSION 2 MIND MAPPER............................................................................................................................ 33
Assignment 4: Creating Shapes............................................................................................................. 33
Assignment 5: Applying Colors.............................................................................................................. 45
Session 2 Review: Creating a Mind Map............................................................................................. 53
Session 2 Extension Activity: “My Hobbies” Mind Map..................................................................... 55
SESSION 3 BOOK COVER ARTIST................................................................................................................ 57
Assignment 6: Creating a Line Art......................................................................................................... 59
Assignment 7: Coloring a Line Art..........................................................................................................71
Assignment 8: Adding Texts.................................................................................................................... 79
Session 3 Review: Creation of the Book Cover.................................................................................. 85
Session 3 Skill Review: Creating an “Elemental” Cover.................................................................... 87
SESSION 4 BOOK LAYOUT ARTIST............................................................................................................... 89
Assignment 9: Applying Filters................................................................................................................ 91
Assignment 10: Creating the Content Layout.................................................................................. 101
Session 4 Review: Filters and Text......................................................................................................... 107
Session 4 Skill Review: Into The Cave.................................................................................................. 109
SESSION 5 MAGAZINE COVER ARTIST..................................................................................................... 111
Assignment 11: Adding the Images....................................................................................................113
Assignment 12: Applying Basic Adjustments.................................................................................... 125
Assignment 13: Adding Texts................................................................................................................ 131
Session 5 Review..................................................................................................................................... 139
Session 5 Extension Activity: Modern Day Heroes............................................................................ 141
SESSION 6 MAGAZINE LAYOUT ARTIST.................................................................................................... 143
Assignment 14: Creating the Content Layout.................................................................................. 145
Assignment 15: Applying Advanced Adjustments.......................................................................... 151
Assignment 16: Applying a Texture and Vignette Effect............................................................... 155
Teaching the Skills of tomorrow… today!

TECHNOEXPRESS
Session 6 Review: Creation of the Magazine Layout...................................................................... 159
Session 6 Extension Activity: Layout Creation................................................................................... 161
APPENDICES ................................................................................................................................................. 163
Appendix A: Terminology List............................................................................................................... 165
Appendix B: Glossary............................................................................................................................. 169
Appendix C: Contact Information......................................................................................................175
Teaching the Skills of tomorrow… today!

SESSION 1
GETTING TO KNOW INKSCAPE
Sometimes, we get that urge to express our thoughts and feelings by doing
something creative. This usually involves activities such as drawing, painting,
dancing, etc. But have you ever thought of “modern” ways to creatively
express yourself, such as creating outputs through the use of technology? Well,
better get your creative juices flowing because offers information that will
enable you to create a variety of digital arts and designs using Inkscape.
Assignment 1: Expressing Yourself Through Visual Materials

Assignment 2: Introducing Inkscape
Assignment 3: Working With Layers
2 TECHNOKIDS INC.
TECHNOEXPRESS SESSION 1
Assignment 1: Expressing Yourself Through Visual Materials

One effective way of expressing yourself is by doing something creative like drawing, painting, singing,
or dancing. We have all been encouraged to do these activities as a form of self-expression, whether
at home or at school. Although these remain to be some of the most common activities people
engage in to express themselves, the advent of technology has reinvented self-expression through
various softwares and applications that serve the said purpose.
The influence of technology to society has led to a change in people’s lifestyles; even children have
become more tech-savvy -- having extensive knowledge about technology -- due to the accessibility
of gadgets. As a result, expressing themselves has gone beyond engaging in traditional ways to
create. Rather, creating digital artworks, designs and manipulations has become the trend through
the use of softwares and applications that can be easily installed in anyone’s computer. Nowadays,
anyone who owns a computer or laptop may create posters, banners, card designs and even book
designs without having to spend on art materials. Indeed, technology has made it easier for children
to express themselves in more creative ways. Here are some outputs that not only enable children to
express their ideas creatively, but also let them create something that has a useful/meaningful
purpose:
Mind Map
A mind map is a diagram used to connect different information together. It can be presented
creatively by adding different elements such as shapes, drawings, or pictures.
TECHNOKIDS INC. 3
Logos & Icons
Logos and icons are used to represent and distinguish companies, shops, websites, publications and
products from one another.
Banner
A banner is an artwork that is bigger and longer in size, bearing a design and a slogan.
Poster
A poster is an artistic work that’s usually created to advertise or publicize something.
4 TECHNOKIDS INC.
Card
Giving a card to our loved ones during special occasions is one way to show our affection towards
them. To make it more appealing, one can design his or her own card.
Infographic
An infographic is a creative way of presenting information through graphics. It usually contains facts
with accompanying images and/or illustrations. One of the major advantages of infographics is that it
catches readers’ attention as it provides visual representations of information instead of relying heavily
on text.
TECHNOKIDS INC. 5
Book Cover and Layout
The book cover usually plays an important role when it comes to catching the attention of the readers.
When a book cover is creatively done, most readers are more likely to be enticed to check out the
book’s contents. A good cover that comes with a good layout makes a book worth checking out!
Magazine Cover and Layout
Magazine covers contain pictures or drawings that have different texts around them. Cover and
layout designers may arrange these elements following a specific format in order to create an
attractive output.
6 TECHNOKIDS INC.
Identifying Creative Outputs
I. Multiple Choice: Read each statement carefully and encircle the letter of the correct answer.
1. A large artistic work, usually long in size, and bears a slogan or a design.
a. Poster b. Infographic
c. Banner d. Mind Map
2. A diagram used to connect different information together.
3. A creative way of presenting information through graphics. It usually contains facts with
accompanying images and/or illustrations.
4. An artistic work that’s usually created to advertise or publicize something.
5. They are used to represent and distinguish companies, shops, websites, publications and products
from one another.
a. Infographic b. Book Covers

c. Magazine Layout d. Logos & Icons
TECHNOKIDS INC. 7
II. Matching Type: Match each creative output with its corresponding picture by writing the letter of
the correct answer on the blank provided.
6. ______ Banner
7. ______ Card
8. ______ Mind Map
9. ______ Book Cover
10. ______ Magazine Cover
a. b.
c. d.
e.
8 TECHNOKIDS INC.
Assignment 2: Introducing Inkscape

Learn about the background, history, and download mechanics of the Inkscape application.
Experience graphic designing by creating different artworks using the Inkscape application. To start
off, here is what you need to know about the background and uses of Inkscape.
Learning the Background and History of Inkscape
 Background of Inkscape
Inkscape is an open-source editing tool used to create different kinds of illustrations and graphic
designs. Its difference from other editing tools is it uses Scalable Vector Graphics (SVG) as its native
format. This format is used for vector graphics.
A Vector graphic has a rasterization engine that is used to plot lines and curves at any resolution
or zoom level. For this reason, it is said that it complements Bitmap (Raster) Graphics which are always
bound to a specific resolution, storing an image as a grid of pixels.
If the original image was saved in

an SVG format and was zoomed
to the eye area, you will notice
that the image’s resolution is still
clear.
Vector
If the original image was saved as

a bitmap image and was zoomed
to the eye area, you will notice
that the image’s resolution
becomes blurry or pixelated.
Original image Bitmap
Even if it appears that a Vector graphic is more manageable, bear in mind it is not an alternative
to a Bitmap graphic. Each has its own purpose. Vector graphics are used more in illustrations and
graphic designs whereas Raster graphics are used more in photographs.
Going back, Inkscape is used to produce vector graphics. Its latest versions provide basic vector
graphics editing capabilities. Some successful projects made through Inkscape are web graphics,
icons, and logos.
For more examples, please visit: http://inkscapetutorials.wordpress.com/
TECHNOKIDS INC. 9
 History of Inkscape
* In 2003, four Sodipodi developers created Inkscape as a fork of Sodipodi, a vector graphics
program written by Ralph Levien.
* Bryce Harrington, MenTalguY, Nathan Hurst, and Ted Gould wanted to create a fully compliant
Scalable Vector Graphics application written in C++. This tool was intended to have a user friendly
interface and an open community-oriented development process.
* After several months, several releases with better features had already been produced causing it
to be a noteworthy open source project.
* Inkscape came from two English words: “ink” and “scape”. “Ink” was used since it is a common
substance used to create artworks that are ready to be permanently committed on paper. On
the other hand, “scape” which means a view with a large number of objects can be related to
the nature of vectors.
10 TECHNOKIDS INC.
Inkscape Background and History
1. If I want to create different kinds of illustrations and graphic designs, it is better to use this file format.
a. Scalable Vector Graphics b. JPG

c. Bitmap Graphics d. PNG
2. If I want to save raster images such as photographs, it is better to save the file in this format.
a. Scalable Vector Graphics b. JPG

c. Bitmap Graphics d. PNG
3. If I want my digital file to be manageable even if I zoom in to a specific area, it is better to use this
file format.
a. JPG b. PNG
c. Scalable Vector Graphics d. Bitmap Graphics
4. If I want to produce vector graphics, I can use this open-source editing tool.
a. Paint b. Notepad
c. Media Player d. Inkscape
5. If I want to create web graphics, icons, and logos, I can use this open-source editing tool.
a. Paint b. Inkscape
c. Notepad d. Media Player
II. Identification: Read each statement carefully and write your answer on the blank provided.
1. __________________________ This is the year when Inkscape was created.
2. __________________________ Developers from this project created Inkscape.
3. __________________________ Inkscape was written in this language.
4. __________________________ Inkscape came from these English words.
5. __________________________ These four developers created the initial versions of Inkscape.
TECHNOKIDS INC. 11
12 TECHNOKIDS INC.
Assignment 3: Working With Layers
Final output for this session
Main Interface
TECHNOKIDS INC. 13
A. Menu Bar - Contains the main drop-down menus.
B. Tool Controls - Contains the options that let you modify the selected tool’s properties.
C. Toolbox - Contains the useful tools that you’ll be needing to create your artworks and designs.
D. Rulers - Serve as measurement guides for your work. You can also drag ‘guides’ from them, so that
you can organize the arrangement of different objects in the canvas.
E. Canvas - Inkscape’s primary work area. This contains the different elements and objects that make
up the final output.
F. Basic Menu Options - Contains basic menu options such as Open An Existing Document, Save the
Document, Undo, Zoom, etc.
G. Snap Options - Lets you customize the snap options in Inkscape.
H. Color Palette - Lets you choose the colors for the different objects and elements in the canvas.
I. Status - Shows the status of the selected object/s, such as the information about the color, layer, etc.
It also contains tips on how you can modify the selected object/s.
J. Fill, Stroke, Text, and Layer options - Lets you modify the appearance of objects such as shapes and
texts. This area also lets you modify the layer properties.
Managing Layers
Layers in Inkscape can be compared to the leaves of a notebook. Each page may contain notes on
a particular topic in the form of writings or illustrations. In Inkscape, layers may contain different objects
that make up a whole image. For this assignment, let us work together to learn everything about layer
management.
There are different ways on how layers can be managed. It can be through the Layers Dialog, Layers
Menu, or items in the Status Bar.
 Layers Dialog
C D
One way to manipulate layers is through
the Layers Dialog. This can be located at
the right corner of the Inkscape window.
If it is not yet displayed, you may press on
Shift + Ctrl + L to make it appear. B
E
A F
A. Lets you add new layers to your project.

B. Lets you hide or make visible a layer.
C. Lets you lock or unlock a layer.
D. This is where you can rename a layer.
E. Lets you control the position of layers.
F. Lets you delete layers of your project.
14 TECHNOKIDS INC.
 Layers Menu
Another way to manage

layers is through the Layer A
Menu. This can be located
B
at the Menu Bar of the
Inkscape window. Most of C
the commands found in this
menu can also be found in D
the Layers Dialog.
A. Lets you add new layers to your project.

B. Lets you duplicate the currently selected layer.
C. Lets you rename a layer.
D. Lets you select layers.
E. Lets you move selected objects from layer to layer.
F. Lets you control the position of layers.
G. Displays the Layers Dialog.
 Status Bar
B
Items in the Status Bar can also be used to manage layers.
These can be located at the lower portion of the Inkscape A C
window.
A. Allows you to hide or make visible a layer.

B. Allows you to lock or unlock a layer.
C. Allows you to select which layer must be active.
TECHNOKIDS INC. 15
In RESOURCE FILES\SESSION 1\Assignment 3

locate and open Working With Layers.svg using
Inkscape. After opening this, a document with
four layers will appear. This document is what
we are going to use to learn layer
management.
A. Hiding Layers
In Inkscape, layers can be made visible or invisible by clicking the eye icon next to a lock icon.
Hiding layers is most useful when you are about to edit objects that overlap each other.
1. Let us first try to make visible the layers Tree

and Blue Bird in the Layers Dialog. Click the
eye icon beside the lock icon for each
layer.
2. Now let us try to make visible the remaining

layers through the Status Bar.
In the drop down menu beside the lock

icon, select [Yellow Bird]. After selecting the
layer, its corresponding properties will be
available. You can now click the eye icon
A
beside the lock icon to make it visible. Do
this again and make the [Background]
layer visible.
16 TECHNOKIDS INC.
Note:
Once the eye icon is clicked, the appearance
of the icon will change.
B. Locking Layers
Layers can also be locked or unlocked by clicking the lock icon beside the eye icon. Locking
layers is most useful when you want to edit objects in a layer without affecting other layers.
3. Unlock the first three layers, Tree, Blue Bird

and Yellow Bird together with its
sublayers, in the Layers Dialog. Click the
lock icon beside the eye icon for each
layer and sublayer.
4. Try to unlock the last layer, Background in

the Status Bar.
In the drop down menu beside the lock

icon, select [Background]. After selecting
the layer, its corresponding properties will
be available. You can now click the lock
icon beside the eye icon to unlock it.
A
TECHNOKIDS INC. 17
Note:
Once the lock icon is clicked, the appearance
of the icon will also change.
Unlike making layers visible and invisible, locking

and unlocking layers do not entirely affect their
corresponding sublayers. You will still need to
lock or unlock the sublayers manually.
C. Arranging Layers
Since layers are stacked on top of one another, layer positioning will play a big role on how an
image will be displayed. Controlling the order of layers can be done in the Layers Dialog or Layers
Menu.
Layers Dialog:
The Layers Dialog offers four buttons which can be used to arrange layers. Below is the list of
buttons with an explanation of their corresponding functions.
Button Use
Moves the currently selected layer on top.
Moves the currently selected layer one step up.
Moves the currently selected layer one step down.
Moves the currently selected layer to bottom.
Layers Menu:
The Layers Menu provides four options which can be used to arrange layers. Below is the list of
buttons with an explanation of their corresponding functions:
Option Use
Moves the currently selected layer on top.
Moves the currently selected layer one step up.
Moves the currently selected layer one step down.
Moves the currently selected layer to bottom.
18 TECHNOKIDS INC.
5. In the Layers Dialog, select the Yellow Bird

layer. After this, click on the Layer to Top
button . By doing this, the image of

the Yellow Bird can now be seen on top of
the tree’s branches and leaves.
6. Now that the Yellow Bird layer is moved to its proper position, let us select the Blue Bird layer.
After this, go to the Layer Menu and click on the Layer to Top option (Shift + Ctrl + Home).
By doing this, the image of the Blue Bird can also be seen on top of the tree’s branches and
leaves.
D. Duplicating Layers
Sometimes there are images on a layer you would want to duplicate. For your convenience, there
is an option in the Layer Menu, where you can easily duplicate a layer.
TECHNOKIDS INC. 19
7. To make the current image more appealing, let us duplicate the yellow and blue bird images.
First, select the Blue Bird layer. Go to the Layer Menu and select the Duplicate Current Layer
option.
A B
Note:
After this, you will notice in the Layers Dialog, a
new layer was added with the name Blue Bird
copy.
8. After creating a duplicate layer, you will

need to move the Blue Bird copy layer’s
image. Lock all layers except Blue Bird
copy layer.
20 TECHNOKIDS INC.
9. Select the objects inside the Blue Bird copy
layer by pressing Ctrl + Alt + A. Then move
the selected object in any tree branch.
Note:
Repeat the steps for duplicating layers, but this
time do it for the Yellow Bird layer.
You will also need to repeat the steps for

moving the duplicated objects for the Yellow
Bird copy layer.
E. Creating Layers
Adding layers in Inkscape can be done through the Create a new layer button found in the
Layers Dialog. Once clicked, you will have the option to determine where the new layer will be
placed: Above current, Below current, or As sublayer of current.
 Adding Layers
10. Select Blue Bird copy layer and click the
Create a new layer button .
TECHNOKIDS INC. 21
11. After clicking the button, the Add Layer
pop-up box will appear. In the Position
drop-down menu, choose Above current
then click the Add button.
Note:
If you accidentally created a layer that is not
needed, you may delete it using the Delete the
current layer button .
 Adding Sublayers
12. Select the newly created layer named
Layer and click the Create a new layer
button .
13. After clicking the button, the Add Layer

pop-up box will appear. In the Position
drop-down menu, choose As sublayer of
current then click the Add button.
Note:
You will need to repeat steps 12 and 13 to
create another sublayer.
22 TECHNOKIDS INC.
F. Renaming Layers
Layers in Inkscape can be renamed to maintain an organized stack of layers. You can do this by
selecting the Rename a Layer option in the Layer Menu or by clicking the layer name after
selecting it.
14. For the main layer, we will rename it using

the option found in the Layer Menu.
A
Select the Layer layer, go to the Layer
Menu and select the Rename a Layer
option.
15. After clicking the option, the Rename

Layer pop-up window will appear.
Rename the layer as Musical notes and
click Rename.
16. To rename sublayers, each sublayer will be

selected.
Select Layer#1 layer, click it once, and

choose the Rename Layer option.
17. After choosing the option, the Rename

Layer pop-up window will appear.
Rename the sublayer as Red notes.
TECHNOKIDS INC. 23
Note:
Repeat steps 16 and 17 to rename Layer#2
layer. This should be renamed as Pink notes.
G. Moving Selection from Layer to Layer

Inkscape also provides easier ways to transfer selected objects into another layer. The options,
Move Selection to Layer Above and Move Selection Below, can be found in the Layer Menu.
18. Select all the red musical notes found in

the Background layer.
Note: You will need to press and hold the Shift

key in order to select multiple objects.
19. After selecting the red musical notes, go to

Layer Menu and select the Move Selection
to Layer Above option.
Note:
You can just press Shift + Page Up keys
repetitively until the selection reaches the Red
Notes sublayer.
You will need to repeat steps 16 and 17 to

move the pink musical notes to the Pink Notes
layer.
To determine whether the selected objects are

moved to their proper layers or sublayers, check
if the highlighted layer is in its intended position.
24 TECHNOKIDS INC.
Layer Management
Multiple Choice: Read each statement carefully and encircle the letter of the correct answer.
1. If I want to manage the layers in my Inkscape project, I can use the buttons found in this area.
a. Layers b. Layer Menu

c. Layers Dialog d. Layer Management
2. If I want to see the Layers Dialog, I can select the option found in this area.
a. Layer Menu b. Layers

c. Toolbox d. Status Bar
3. If I want to move a layer to the topmost part of all the layers, I can use this button.
a. b.
c. d.
4. If I want to duplicate a layer to create a pattern, I can use this option found in the Layer Menu.
a. Duplicate Layer b. Duplicate Current Layer

c. Duplicate d. Copy Layer
5. If I want to create a new layer, I can use this button.
a. b.
c. d.
6. If I want to edit overlapping objects, I can hide a layer by clicking this icon.
a. b.
c. d.
7. If I want to edit objects without affecting another layer’s object, I can lock other layers by clicking
this icon.
a. b.
c. d.
8. If I want to move selected objects to the layer below the current layer, I can press these keys.
a. Shift + Ctrl b. Alt + Page Up

c. Shift + Page Up d. Ctrl + Page Up
TECHNOKIDS INC. 25
9. If I want to rename a layer, I can right click on the layer in the Layers Dialog and select this option.
a. Rename b. Rename Layer

c. Rename Current Layer d. Rename Selected Layer
10. If I want to delete a layer, I can click this icon.
a. b.
c. d.
26 TECHNOKIDS INC.
Session 1 Review: Managing the layers of a project
I. Fill in the Blanks: Read each statement carefully and fill in the blank spaces with the correct answer.
1. ____________________ graphic has a rasterization engine which is used to plot lines and curves at
any resolution.
2. ____________________, ____________________, and ____________________ are the different ways on

how layers in Inkscape can be managed.
3. _____________ are the shortcut keys to display the Layers Dialog.
4. _______________ Position option is used to create a sublayer of the current layer.
5. _______________ and _______________ options in the Layer Menu are used to transfer selected
objects into another layer.
II. True or False: Read each statement carefully. Write T if the statement is correct, or F if it is incorrect.
1. _______ You can rename a selected layer when you click on it again.
2. _______ Commands for controlling a layer’s position are also available in the Layer Menu.
3. _______ Shift + Page Down are the short cut keys for moving a layer at the bottom of the list of
layers.
4. _______ Switch to Layer Above is an option in the Layer Menu which can be used to transfer
selected objects into another layer.
5. _______ Layer positions do not affect how an image will be displayed.
TECHNOKIDS INC. 27
Session 1 Extension Activity: Owls and Bunnies
Go to RESOURCE FILES\SESSION 1\Skill

Review and open
OwlsAndBunnies.svg on Inkscape. It
contains an artwork that looks
unorganized due to its layer
arrangement. You must fix the artwork
by following the succeeding steps.
If you open the Layers window, you’ll see the 12 layers

shown in the screenshot. Your first task is to rename
them accordingly:
 O = Owl 1
 2 = Bush 2
 1 = Bush 1
 B = Bunny 1
 3 = Bush 3
 G = Ground
 H = House
 BRD = Birds
 M = Mountains
 C = Clouds
 T = Tree
 S = Sky
28 TECHNOKIDS INC.
Duplicate the Owl 1 layer 4 times to come up with 5
owls. Duplicate the Bunny 1 layer twice to come up
with 3 bunnies. Name them accordingly, such that
the layer name of the first duplicated owl is Owl 2,
and the second one is Owl 3, and so on.
To fix the order of the artwork’s elements, arrange the

layers according to the given screenshot on the right.
To complete the artwork, position the

duplicated owls and bunnies as shown
in the screenshot.
TECHNOKIDS INC. 29
30 TECHNOKIDS INC.
SESSION 2
MIND MAPPER
One cool way of introducing yourself using graphics is by creating a mind
map, which is basically a visual representation of information that revolve
around a certain topic. In this session, you are tasked to create your own
mind map by playing with different shapes and colors. Let’s get started!
Assignment 4: Creating Shapes

Assignment 5: Applying Colors
33
34
Assignment 4: Creating Shapes
Final outputs for this session
To create a simple Mind Map through Inkscape, one must learn how to create 2D shapes and 3D
shapes, as well as learn how to use Path Operations and Perspectives.
TECHNOKIDS INC. 33
MIND MAPPER
Installing Fonts
1. Before anything else, you will need to install the fonts that we will be using. In RESOURCE
FILES\SESSION 2\Assignment 4, locate BebasNeue.otf and Lobster 1.4.otf fonts. Now highlight
and right click on both fonts and select Install.
Remember that regardless of the font type, installing fonts in Inkscape follows a standard
procedure as explained in step 1. Furthermore, once fonts are installed, they will be available
for use in any document and editing programs.
2. In RESOURCE FILES\SESSION 2\Assignment 4 locate Boy.svg (for boys) or Girl.svg (for girls) and
open it using Inkscape. After opening this, you will see that there are default objects in your
Mind Map. All that’s left to do is to add the necessary shapes with the correct properties.
For Boys For Girls
Using Shape Tools

Inkscape Shape Tools are located in the Toolbox. In total, there are four 2D Shape tools namely
Rectangle, Ellipse, Star, and Spiral and one 3D shape called 3D Box.
 2D Shapes
To create a shape, simply click on the specific 2D Shape tool you are going to use. After selecting the
tool, click and drag on an area in the Canvas until you are satisfied with the shape’s size. When
shapes are created, handles will be available to allow modifying and editing of shapes. Every handle
has its own purpose depending on the shape created.
34 TECHNOKIDS INC.
Shape Square Handle Circle Handle
1. Rectangle Two square handles will be One circle handle will be available
Shortcut: ‘F4’ available once a rectangle or once a rectangle or square shape
square shape is made. These is made. It is used to round the
are used to adjust the width shape’s corners.
and height of the shape with
greater precision.
Once the circle handle is moved,

another circle handle will be
available. One is used for horizontal
rounding, while the other is used for
vertical rounding.
2. Ellipse Two square handles will be One circle handle will be available
Shortcut: ‘F5’ available once an ellipse or once an ellipse or circle shape is
circle shape is created. These created. It is used to model the
are used to adjust the width shape into an arc.
and height of the shape with
greater precision.
Right after moving the circle

handle, another handle will be
available. The resulting arc may
vary depending on where the
mouse pointer is positioned. If it is
positioned inside the shape, the arc
produced will closely resemble the
image below:
TECHNOKIDS INC. 35
MIND MAPPER
If it is positioned outside the shape,

the arc produced will closely
resemble the image below:
Shape Diamond Handle

3. Star Unlike the Rectangle and Ellipse tool, two diamond handles will be
Shortcut: ‘*’ present right after creating a star shape.
The diamond handle on the tip of the shape modifies the Tip Radius.
Moving this will result in a change in the shape’s dimension as seen
below:
The remaining diamond handle modifies the Base Radius. Moving the
Base Radius may yield the following change as seen in the image
below:
36 TECHNOKIDS INC.
Unlike the Star tool, Spiral tool is easier to modify. Two diamond handles
4. Spiral
will be present right after creating a spiral shape.
Shortcut: ‘F9’
Both handles are used to modify the length of the spiral revolution.
Adding 2D Shapes
3. Now that you know how to create
different 2D shapes, it’s time to add shapes
to your unfinished Mind Map. First, let’s
focus in creating rectangles using the
Rectangle tool . Create rectangles

for the sub-topics under Home, Education,
Birthday, and Interests.
TECHNOKIDS INC. 37
MIND MAPPER
Note:
Before creating rectangles, make sure that the
currently selected layer is the Rectangles layer.
Since this layer is below the Text layer, the
rectangles will appear underneath the texts.
4. Now let’s focus on the image at the center. To make it stand out, we will add stars just below
the green circle. Using the Star tool , create the first star. After creating the first star,
change its corners to 25 in the Corners area of the Tool Controls section. Now move the
diamond handle responsible for the Base Radius until it fits the final output.
Note:
Before creating stars, make sure that the
currently selected layer is the Stars layer. Since
this layer is below the Center image and Circles
layer, the stars will appear underneath the
them.
You will also need to create another star just

above the first star. To do this, select the first star,
press Ctrl + C, then press Ctrl + Alt + V to paste
the second star in place. After this, slightly rotate
it to the right. When you’re done, don’t forget to
place the stars underneath the circle.
38 TECHNOKIDS INC.
5. We will now add the last 2D shape. Create

a smaller circle within the bigger circle. To
do this, use the Ellipse tool found in

the Toolbox.
Note:
Before creating the smaller circle, make sure
that the currently selected layer is the Circles
layer. Since this layer is above the Stars layer,
the circles will appear above the stars.
Boolean operations found in the Path Menu located on the Menu Bar allows two or more objects to
be modified.
TECHNOKIDS INC. 39
MIND MAPPER
Path Operations Before After
1. Union
Shortcut: ‘CTRL’ + ‘+’
This can be used in two or more
objects. By using this, all original
objects will be joined to create
a single new path.
After using the Union

Operation, the Fill and Stroke
used will be based on the
shape at the bottom.
2. Difference
Shortcut: ‘CTRL’ + ‘-’
This can be used in two objects
only. By using this, the top
object and the area it overlaps
with will be removed.
3. Intersection
Shortcut: ‘CTRL’ + ‘*’
This can be used with two or
more objects. By using this, the
area where all objects intersect
will be retained.
4. Exclusion
Shortcut: ‘CTRL’ + ‘^’
This can be used with two or
more objects. By using this, a
single new path will be
created. This will contain
sub-paths that are created
according to the Even-Odd Fill
rule.
After using the Exclusion

Operation, the Fill and Stroke
used will be based on the
shape at the bottom.
40 TECHNOKIDS INC.
5. Division
Shortcut: ‘CTRL’ + ‘/’
This can be used with two
objects only. As a result, the
bottom shape will be split by
the top shape.
6. Cut Path
Shortcut: ‘CTRL’ + ‘ALT’ + ‘/’
This can be used with two
objects only. As a result, the top
shape cuts the bottom shape.
After using the Cut Path

Operation, strokes will be visible
in the new paths only if such
have been used in the original
objects.
 3D Shape
To create a shape, simply click on the 3D Shape tool found in the Toolbox. After selecting the tool,
click and drag on an area in the Canvas until you are satisfied with the shape’s size. When the 3D box
is created, handles will be available to allow modifying and editing of the box. Each handle has its
own purpose.
Shape Square Handle Diamond Handle

1. 3D Box Right after creating a 3D Box, The eight diamond handles are used
Shortcut: ‘SHIFT’ + ‘F4’ you will notice different colored to adjust the size of the 3D Box.
lines:
 Red represents the X-axis or
the width.
 Blue represents the Y-axis or
the length.
 Yellow represents the Z-axis
or the depth.
TECHNOKIDS INC. 41
MIND MAPPER
Adding a 3D Shape
6. The last shape that you will need to add to
complete the Mind Map is a 3D shape.
Using the 3D Shape tool, create a 3D Box
and adjust it to fit the text HOME and its
icon.
A 3D Box can be drawn in different perspectives namely 1-point Perspective, 2-point Perspective,
3-point Perspective, and Isometric projection. Perspectives can be changed by using the 3D Shape
tool’s Tool Controls.
Perspective Result
1. 1-point Perspective
This can be done by setting the vanishing
points of Angle X and Angle Y to infinity -
clicking the Parallel Line button in the Tool
Controls. As for Angle Z, the Parallel Line
button must be toggled off.
Now all that’s left to do is to input 180° for

Angle X and 90° for Angle Y.
This is the default perspective. The vanishing
point of Angle Y must be set to infinity - clicking
the Parallel Line button in the Tool Controls. As
for Angles X and Z, the Parallel Line button
must be toggled off.
Now all that’s left to do is to input 90° for Angle

Y and to drag the Angle X and Z vanishing
points to the desired area - which is usually at
the same level on opposites sides.
42 TECHNOKIDS INC.
This can be done by toggling off the Parallel
Line buttons of Angle X, Y, and Z. After this, you
can now drag Angle X, Y, and Z’s vanishing
points - usually Angle X and Z are of the same
level on opposite sides.
4. Isometric Projection
This can be done by clicking the Parallel Line
buttons of Angle X, Y, and Z. After this, the
following values 150°, 90°, and 30° must be
placed in Angle X, Y, and Z respectively.
Adjusting Perspectives
7. Adjust the perspective of the 3D Box into
1-point Perspective.
Note:
Right after changing the perspective, you will
still need to adjust the square handles to
achieve the preferred result.
When you’re done with the adjustments, you

can now duplicate the 3D Boxes for the
remaining categories: Birthday, Education, and
Interests.
TECHNOKIDS INC. 43
MIND MAPPER
Creating 2D and 3D Shapes
I. True or False: Read each statement carefully. Write T if the statement is correct, or F if it is incorrect.
1. _______ Inkscape Shape Tools can be found in the Toolbox.
2. _______ Rectangle, Circle, Star, and Spiral are 2D Shape tools.
3. _______ After creating a rectangle, a square and circle handle will be present.
4. _______ You can change a star’s number of tips.
5. _______ You cannot adjust a 3D Box perspective.
II. Identification: Read each statement carefully and write your answer on the blank provided.
6. __________________________ These are the shortcut keys for a 3D Box.
7. __________________________ This perspective can be done if Angle X, Y, and Z, are set to 150°, 90°,
and 30° and if their Parallel Line buttons are clicked.
8. ___________________ These are the shortcut keys for the Path Operation Difference.
9. __________________________ When this Path Operation is used, all original objects will be joined to
create a single new path.
10. __________________________ These 2D shapes have diamond handles to allow shape

modification.
44 TECHNOKIDS INC.
Assignment 5: Applying Colors

Learn how to apply colors using the Color Palette, Eye Dropper tool and Fill tool. Also, learn how to
create your very own set of colors in the Color Palette.
Let us now continue the Mind Map Activity by applying blending colors to shapes and objects.
Working with the Color Palette
The Color Palette is the area where you can select the fill and stroke colors of objects. Note that if you
click this icon in the Color Palette, no fill will be selected. To set the fill color of an object, make
sure to select the object and click on your desired color in the Color Palette. To set the stroke color of
an object, hold Shift then click on your desired color in the Color Palette.
A. Lets you set the size of the Color Palette with the following options: tiny, small, medium, large, and
huge.
B. Allows you to set the width of the Color Palette with the following options: narrower, narrow,
medium, wide, and wider.
C. When this option is selected, all the colors in the Color Palette will wrap, or will be shown in two
rows so that more colors will be viewed.
Creating a Customized Color Palette
As seen earlier, there are different sets of Color Palettes available for use. While working on a project,
you will notice that there are colors which are not available in the existing sets. However, there is a
way to create your own set of colors.
TECHNOKIDS INC. 45
MIND MAPPER
1. The Mind Map that we will be creating will
only require six colors which are not
available in the existing sets in the Color
Palette. First, open Notepad and type the
information as seen in the image.
2. Press Ctrl + S. A window will appear asking you the destination folder of the file. Look for the
palettes folder in the Inkscape folder. The destination folder may be close to this: C:\Program
Files\Inkscape\share\palettes.
When you’re done locating the folder, name the file as MyPalette, press the Enter key then
close the file.
3. In RESOURCE FILES\SESSION 2\Assignment

5 locate Boy.svg (for boys) or Girl.svg (for
girls) and open it using Inkscape. Now
select My Palette in the list of color palettes.
4. To apply a color to a shape or object, select the object then click on the desired color in the
palette. Let us start assigning colors to the stars at the center.
Note:
The same assignment of colors are also applied for the girl’s Mind Map.
46 TECHNOKIDS INC.
Using the Fill Tool

The Fill Tool enables you to apply colors to objects with just one click.
Simply click on an object while the Fill Tool is selected, and the
selected Fill and Stroke colors will be applied to it.
The Fill Tool properties can still be adjusted in the Tool Controls section.
A B C D
A. The Fill by drop-down menu lets you choose the channel restrictions of the Fill tool. The
following are the options which you can choose from: Visible Colors, Red, Green, Blue, Hue,
Saturation, and Lightness.
B. The Threshold lets you control the area covered by the color filling. If set to 0, the color filling
covers up to the same colored area. On the other hand, if it is set to a larger value, the color
filling covers up to the different adjacent colored areas.
C. The Grow/Shrink by section lets you control the filling path of the Fill tool. When set with a
positive value, the filling path will be larger than the bitmap area.
D. The Close gaps section lets you choose how the Fill tool should treat gaps in area boundaries.
The following are the options which you can choose from: None, Small (closes gaps up to 2
pixels), Medium (4 pixels), and Large (6 pixels).
6. Go to the Layers Dialog and hide the

Center image layer.
7. Select the Fill tool and click on Light Green in the Color Palette. After this, click on the
small black circle. The resulting image is as follows:
You will notice that the black circle was not entirely filled with our chosen color. To fix this, let us
adjust some of the Fill tool’s properties in the Tool Controls.
TECHNOKIDS INC. 47
MIND MAPPER
Fill by: Visible Colors

Threshold: 0
Grow/shrink by: 2.00
Close gaps: None
Note:
The black circle earlier should now be completely filled with its assigned color. For this reason, you
may now make the Center Image layer visible.
Using the Eyedropper Tool
The Eyedropper Tool enables you to select a color from an image or an

object. Just select the Eyedropper Tool in the Toolbox (shortcut F7) then
click on any part of the image or object.
8. First, select one black rectangle. After this, pick Light Blue in the Color Palette.
48 TECHNOKIDS INC.
9. For the remaining black rectangles, let us try to use the Eyedropper tool . Select all the
black rectangles. After this, select the Eyedropper tool and click on the light blue colored
rectangle. So far, this is how your Mind Map should look like:
Applying Colors in 3D Boxes using the Node Tool

As of the moment, there is no 3D Box Tool Controls option available to change the color of a 3D
Box. In the meantime, we can use the Node tool to change the color of a 3D box’s faces.
10. Let us start changing the color of the 3D Box under the Home text. Select the Node tool then
click on the front face of the 3D Box. After this, click on Light Red found in the Color Palette.
TECHNOKIDS INC. 49
MIND MAPPER
11. Now let’s change the color of the remaining sides. Select both sides using the Node tool then
pick Dark Red in the Color Palette to change their color.
Note:
After selecting a face, hold down the Shift key in order to select the other face. Also, you will need
to repeat the previous steps for the remaining 3D Boxes.
12. Congratulations! You are now done with

your Mind Map. Save your file as .svg and .png.
50 TECHNOKIDS INC.
Applying Colors
True or False: Read each statement carefully. Write T if the statement is correct, or F if it is incorrect.
1. _______ The Color Palette is the area where you can select the fill and stroke colors of objects.
2. _______ Holding the Shift key and clicking on your desired color in the Color Palette will let you set
the fill color.
3. _______ You cannot create a customized palette.
4. _______ The shortcut key for the Eyedropper tool is F7.
5. _______ The Fill tool properties can be adjusted in the Tool Controls section.
1. If I want to apply colors to objects with just one click, I can use this tool.
a. Fill tool b. Node tool

c. Eyedropper tool d. Ellipse tool
2. If I want to to select a color from an image or an object, I can use this tool.
a. Node tool b. Fill tool

c. Eyedropper tool d. Ellipse tool
3. If I want to change the color of a 3D box face, I can use this tool.
a. Eyedropper tool b. Ellipse tool

c. Node tool d. Fill tool
4. If I want to choose the channel restrictions of the Fill tool, it is possible in this area found in the Tool
Controls section.
a. Channel b. Threshold
c. Fill by d. Close Gaps
5. If I want to control the point where the filling should stop, it can be done in this area found in the
Tool Controls section.
a. Fill by b. Threshold
c. Close Gaps d. Channel
TECHNOKIDS INC. 51
MIND MAPPER
52 TECHNOKIDS INC.
Session 2 Review: Creating a Mind Map
I. Identification: Read each statement carefully and write your answer on the blank provided.
1. _______________________ This is the shortcut key used for the Ellipse tool.
2. _______________________ This handle in a rectangle is used to round the shape’s corners.
3. _______________________ This can be modified when the diamond handle at the tip of a star is
moved.
4. _______________________ This can be modified when the diamond handle at the base of the star is
moved.
5. _______________________ This is the default perspective of a 3D Box.
1. _______ When the Path Operation Intersection is used, the area where all objects intersect will be
retained.
2. _______ The Close gaps section lets you choose how the Fill tool should treat gaps in area
boundaries.
3. _______ When Grow/Shrink is set to a positive value, the filling path will be larger than the bitmap
area.
4. _______ When the Eyedropper tool is used, it drops a color as small as a dot in an area.
5. _______ The Node tool can only select one 3D Box face at a time.
TECHNOKIDS INC. 53
MIND MAPPER
54 TECHNOKIDS INC.
Session 2 Extension Activity: “My Hobbies” Mind Map
Using the things you’ve learned in this session, create a mind map about your different hobbies. Play
around with different shapes and colors to make your mind map stand out!
Sample output:
TECHNOKIDS INC. 55
MIND MAPPER
56 TECHNOKIDS INC.
SESSION 3
BOOK COVER ARTIST
Don’t you just want to check out books with good covers? Yes, there is the
expression “Don’t judge a book by its cover”, which tells us to not base our
opinions about a book’s content on the appearance of its cover. However,
a nicely done cover does give a book that certain eye-catching charm
that makes readers want to take a peek inside. In this session, you will be
learning how to create a unique and creative book cover using Inkscape.
Let’s dive in!
Assignment 6: Creating a Line Art

Assignment 7: Coloring a Line Art
Assignment 8: Adding Texts
57
58
Assignment 6: Creating a Line Art
Working with the Bezier Tool

The Bezier Tool enables you to create vector graphics, which are graphics that can be scaled to any
size without losing quality. This is because they use mathematical statements and points to define their
shapes and other characteristics. Vector graphics usually have smooth lines and a clean overall
appearance. Examples:
TECHNOKIDS INC. 59
BOOK COVER ARTIST
The Bezier Tool gives you freedom to draw custom shapes or lines using nodes and paths. Nodes are
the points that define the paths, while paths are the lines that are created depending on where and
how the user has created the nodes. You can create nodes by simply clicking on the canvas using
the Bezier Tool. Paths are automatically created after each click. After you’re satisfied with the path
you’ve created, just click Enter. If you wish to create shapes, you must connect the last node with the
first one. When working with the Bezier Tool, you can undo the latest node you’ve created by pressing
Backspace on your keyboard.
To create curved paths, you can simply click on an area to create a node, then drag the cursor to
wherever you desire. The farther the cursor, the bigger the curve.
You can access the Bezier Tool by clicking its icon in the Toolbox, or by pressing Shift + F6 on your
keyboard. It has four different modes which allow you to create Regular Bezier Paths, Spiro Paths,
sequences of straight line segments, and sequences of Paraxial line segments. These modes will be
discussed later on as you continue with this session.
60 TECHNOKIDS INC.
The title of the book we are creating a cover for is “The Drifting Islands and the Prophecy of the
Sprites”. It’s about a number of enchanted islands that are about to be discovered by curious
adventurers while sailing at the sea. The islands are home to the elderly and magical creatures who
have sworn to protect the islands’ abundant riches from many years ago. The power of these riches
have remained unknown to mankind, until five adventurers named Tony, Reese, Sam, Nica, and Mar
accidentally disrupted the peace among the islands. Little did they know, this was the start of a
prophecy’s realization that was foretold by the sprites a long time ago -- a prophecy that would
change their lives forever.
1. Open Inkscape. A new document will

automatically be created, and this is what
you’ll use to create your cover.
 Regular Bezier Paths
2. We will be creating the lines outlining the

sea using Regular Bezier Paths. When we
say Regular Bezier Paths, this pertains to
paths that are used to create straight or
curved lines. Also, if you look at the Tool
Controls section, you’ll see that the mode
for creating regular bezier paths is already
selected , as this is the default mode

of the Bezier Tool.
At the lower part of the canvas, create multiple paths that resemble waves. Feel free to vary the
strokes of the waves to depict either a calm or violent sea.
Note:
If you’re already satisfied with the path you’ve created, simply click Enter so you can proceed with
creating other paths.
It’s okay if the paths exceed the document’s boundaries, because only the elements within its
boundaries will be visible once you save it as an image.
TECHNOKIDS INC. 61
BOOK COVER ARTIST
 Straight Line Segments
3. It’s time to create the shapes of our islands!

Select the mode for creating sequences of
straight line segments .

This mode enables you to create straight
lines only.
Above the sea, you can now create

shapes that look like floating islands, as seen
in the screenshot.
 Paraxial Line Segments
4. Let’s add simple patterns to our islands, shall we? Select the mode for creating sequences of
paraxial line segments . Simply put, this mode enables you to create paths
in which every node (assuming the first and last nodes are connected) has a 90 degree
corner. If the first and last nodes are not connected, then they’re the only ones that do not
have a 90 degree corner. Example:
Now, draw a simple pattern inside each island,

as shown in the screenshot.
62 TECHNOKIDS INC.
 Spiro Paths
5. Create the clouds and the wind swirls by selecting the mode for creating Spiro Paths
. This mode automatically transforms paths into smooth curves. It’s advisable
to use this when creating spirals to yield perfectly drawn curves. Example:
You can then draw the Spiro paths for the

clouds at the top of the canvas. Make sure to
leave a space between the clouds and the
islands for the title’s text.
TECHNOKIDS INC. 63
BOOK COVER ARTIST
6. To finish the first stage of the line art, add the
wind swirls as shown in the screenshot.
The line art may look a little confusing right

now, but we will tweak it later on to make it
look more appealing.
Modifying Strokes
 Stroke Paint tab
You can modify strokes by

accessing the Fill and
Stroke window in the lower
right part of the screen
(shortcut Shift + Ctrl + F).
A. The Stroke paint tab contains options that let you define the color of a stroke.
B. Lets you select the fill style of the stroke.
C. Contains the color sliders. This makes it easier for you to choose and adjust the color of the stroke.
Note that the options in this area change as you select different fill styles.
64 TECHNOKIDS INC.
D. Shows the RGBA value of the the color you’ve come up with using the sliders. RGBA stands for Red
Green Blue Alpha.
E. Lets you adjust the blur of the color.
F. Lets you adjust the opacity, or transparency, of the color.
 Selecting Colors From The Color Palette
As you can recall from the previous session, to easily set the stroke color of an object, just hold Shift
then click on your desired color in the Color Palette.
 Dragging Colors From The Color Palette
Another way of setting a color for the stroke is by dragging a color from the color palette onto the line
itself. But before doing this, you must select the line using the Node Tool , which is located at the
top of the Toolbox. The Node Tool enables you to edit nodes, but in this case we will only be using it to
identify nodes.
When a stroked path is selected using the Node Tool, it will contain small squares that indicate the
nodes. After you’ve chosen a color from the color palette, you can then drag it to any of these
squares to change the line’s color.
TECHNOKIDS INC. 65
BOOK COVER ARTIST
1. Now that you already know how to change
the color of a line, it’s time to change the
colors of your line art. When defining the
colors, it’s advisable to think of the colors
you want for your overall artwork so that
you can match the colors effectively.
Note:
In the given screenshot, some lines were
drawn in White. They will be seen later on as
we proceed with creating the background.
 Stroke Style Tab

The third tab in the Fill and Stroke window enables you to modify the style of the stroke. Below is an
explanation of what each part under the Stroke style tab does.
A.Lets you adjust the width of the stroke.

B. Lets you modify the appearance of corners.
66 TECHNOKIDS INC.
C. Lets you control the point at which a Miter join automatically is converted to a Bevel join
.
D. Lets you select the appearance of a stroke’s tip.
E. Contains different dash patterns that you can apply to the stroke. You can also modify the
placement of the pattern by adjusting the option to the right.
F. Contains different markers or symbols that you can apply at the start, middle, or end of the path.
G. Lets you adjust the blur of the color.
H. Lets you adjust the opacity, or transparency, of the color.
2. To finish your line art, modify the lines by

tweaking the options under the Stroke style
tab. You can play with different line widths
and dash patterns to make the line art
more appealing.
TECHNOKIDS INC. 67
BOOK COVER ARTIST
Line Art Creation
Multiple Choice: Read the each statement carefully and encircle the letter of the correct answer.
1. If you want to undo the last node you’ve created, you must press this key on your keyboard.
a. Enter b. Shift
c. Backspace d. Esc
2. If you want to create vector lines, this tool must be used.
a. Pen Tool b. Bezier Tool

c. Vector Tool d. Bezier Tool
3. If I want to create Straight Line Segments, I must select this mode.
a. b.
c. d.
4 If I want to create Paraxial Line Segments, I must select this mode.
a. b.
c. d.
5. If I want to create Regular Bezier Paths, I must select this mode.
a. b.
c. d.
6. If I want to create Spiro Paths, I must select this mode.
a. b.
c. d.
7. To easily set the stroke color of an object, you must hold this key then select your desired color from
the Color Palette.
a. Enter b. Shift
c. Backspace d. Esc
68 TECHNOKIDS INC.
8. If you want to identify the nodes of the path you’ve created, you must use this tool to select the
path.
a. Path Tool b. Bezier Tool

c. Selection Tool d. Node Tool
9. If you want to edit a stroke’s pattern, you must go to this tab in the Fill and Stroke window.
a. Fill tab b. Stroke paint tab

c. Stroke style tab d. Style tab
10. If you’re already satisfied with the path you’ve created, simply click this key on your keyboard so
you can proceed with creating other paths.
a. Enter b. Shift
c. Backspace d. Esc
TECHNOKIDS INC. 69
BOOK COVER ARTIST
70 TECHNOKIDS INC.
Assignment 7: Coloring a Line Art
Using Shapes to Apply Colors
1. Create a new layer and make sure to place

it below the layer for the lines. Select the
Rectangle Tool and draw a big rectangle
for the sky.
Since you haven’t chosen any color for the

fill yet, the default color will automatically
be selected, which is Black.
 Fill Tab
Change its color by opening the Fill

and Stroke window. The first tab in
the window enables you to modify
the color and style of the fill. Below
is an explanation of what each part
under the Fill tab does.
TECHNOKIDS INC. 71
BOOK COVER ARTIST
A. Lets you select the fill style.
B. Lets you select whether you want the filled path to have holes or not.
C. Contains the color sliders. This makes it easier for you to choose and adjust the color of the fill. Note
that the options in this area change as you select different fill styles.
D. Shows the RGBA value of the the color you’ve come up with using the sliders. RGBA stands for Red
Green Blue Alpha.
E. Lets you adjust the blur of the color.
F. Lets you adjust the opacity, or transparency, of the color.
2. Change the color of the background by

doing any of the following:
a. Adjusting the sliders

b. Inputting the RGBA value (which is ffccaaff in
this case)
c. Selecting the object and clicking on a color
in the Color Palette
d. Dragging a color from the Color Palette onto
the filled path
3. Add 4 rectangles for the sea. In the

screenshot, they have alternating colors of
Light Blue and Green, but feel free to come
up with your own color combination if you
like.
72 TECHNOKIDS INC.
Using Paths to Apply Colors
Aside from creating lines, the Bezier Tool is also capable of adding colors to different shapes.
1. Create a new layer and make sure to place

it between the layer for the lines and the
layer for the background. Now, trace the
outline of one of the islands using the Bezier
Tool. When doing this, it’s better to zoom in
on the canvas to make the lines more
precise. Open the Fill and Stroke window
and select the Flat color option for the fill
style.
After selecting this, the previously selected fill color will be applied to the path. In this case, the
color selected is Light Blue.
2. You can change the color of the fill by

adjusting the color sliders in the Fill and
Stroke window, inputting the RGBA value
(which is c87137ff in this case), selecting a
color in the Color Palette, or dragging a
color from the color palette onto the filled
path.
3. Create a path that depicts a forest on top

of the island. Fill it with Green.
4. Apply colors to the other islands by following

the previous steps.
TECHNOKIDS INC. 73
BOOK COVER ARTIST
5. Create a separate layer for the clouds, and
place it between the layer for the islands
and the layer for the background. Using
regular bezier paths, create cloud shapes
beneath the cloud swirls you’ve created
previously.
Modifying Colors Using the Gradient Tool
A gradient is a color effect that shows atleast one color blending smoothly with another color.
Examples:
74 TECHNOKIDS INC.
1. Let’s apply a gradient effect to our
background. Select the rectangle you’ve
created for the sky. Open the Fill and Stroke
window, and under the Fill tab, select Linear
gradient as the fill style.
After doing so, you will have a horizontal

gradient that shows the original color of the
rectangle blending into transparent (or
White, because that is the default color of
the background).
2. Select the Gradient Tool in the Toolbox.
The Gradient Tool allows us to create and

edit gradients. You will notice that a
horizontal line with handles (a square and
circle) on both ends will appear.
TECHNOKIDS INC. 75
BOOK COVER ARTIST
You can adjust the handles by simply dragging
them. Position them vertically, as shown in the
screenshot.
3. To finish the entire book cover background,

apply gradients to the rectangles you’ve
created for the sea.
76 TECHNOKIDS INC.
Applying Fill Colors
Identification: Read each statement carefully and write your answer on the blank provided.
1. __________________________ If you want to create squares or rectangles, you must use this tool.
2. ___________________ This tab is used to adjust the fill color of an object.
3. ___________________ A color effect that shows atleast one color blending smoothly with another
color
4. __________________________ This tool allows us to create and edit gradients.
5. ______________________________________ The meaning of RGBA.
6. ____________________ If you wan your fill to be a solid color, you must select this option as the fill style.
For numbers 7 - 10, briefly explain the four ways of changing the fill color.
7. _______________________________________________________________________________________________
________________________________________________________________________________________________
8. _______________________________________________________________________________________________
________________________________________________________________________________________________
9. _______________________________________________________________________________________________
________________________________________________________________________________________________
10. ______________________________________________________________________________________________
________________________________________________________________________________________________
TECHNOKIDS INC. 77
BOOK COVER ARTIST
78 TECHNOKIDS INC.
Adding Basic Text Using the Type Tool
1. The next step is to add the texts for the title and the author of the book. The fonts you can use are
Zothique and Ringbearer. You can install these fonts by going to RESOURCE FILES\SESSION
3\Assignment 8, right-clicking each .ttf file, and selecting Install.
You can add the text by selecting the Type Tool in the Toolbox
(shorcut F8), which enables you to add and edit texts.
After selecting it, you can then click on the canvas to add your
text. You can also set a textbox by simply dragging on the
canvas.
When the Type Tool is selected, these options will appear in the Tool Controls section:
A. Lets you select the font

B. Lets you set the font size
C. Lets you set the text’s style to Bold
D. Lets you set the text’s style to Italic/Oblique
E. Lets you select the text alignment
F. Lets you set the text as a subscript or a superscript
G. Lets you set the spacing between lines
H. Lets you set the spacing between letters
I. Lets you set the spacing between words
J. Lets you set the horizontal kerning
K. Lets you set the vertical shift
L. Lets you set the degree of character rotation
M. Lets you set the text orientation, whether vertical or horizontal
TECHNOKIDS INC. 79
BOOK COVER ARTIST
2. Create a new layer on top of the other
layers.
Type these texts into separate textboxes:
1. “The Drifting Islands”

2. “AND THE PROPHECY”
3. “OF THE SPRITES”
4. “JUAN DELA CRUZ”
Text properties:
1st text: font size = 110, font = Zothique
(for the 2nd to 3rd texts, the font is Ringbearer)
2nd text: font size = 18

3rd text: font size = 18
4th text: font size = 20
3. Change the text color of “JUAN DELA CRUZ”

to Dark Green or Dark Blue. In this example,
the RGBA value of the color that was used is
007f66ff.
Grouping Objects
When you group objects, it means that you

can select, move, and edit them as a single
object. To group objects in Inkscape, you
have to select them first, then click Object in
the Menu Bar and select Group (Ctrl + G).
To apply an image fill, the title texts must be grouped. When we say image fill, this simply means that
the fill of an object will be an image instead of a solid color, gradient, pattern, etc. It’s better to apply
one image fill to one object, instead of applying multiple image fills to multiple objects.
80 TECHNOKIDS INC.
Select the texts “The Drifting Islands”, “AND THE PROPHECY”, and “OF THE SPRITES”, and group them
together. Note that in order to select multiple objects, you must hold Shift as you click on them.
You will notice that after grouping the texts, the dashed boxes around the texts “AND THE PROPHECY”
and “OF THE SPRITES” have disappeared. This is because the three text objects have become a single
object, and they have been selected as one.
Using the Clip Option
The Clip option enables you to place an object (A) over another object (B), and set B as the fill of A.
For example, you have a text object (A) and an image object (B), and you place A over B.
You can access the Clip option by selecting Object in the Menu Bar > Clip > Set. After doing so, B will
be the fill of A.
TECHNOKIDS INC. 81
BOOK COVER ARTIST
1. For the image fill of the title, you can use a
default image provided in the Resource
Files. It’s located in RESOURCE FILES\SESSION
3\Assignment 8, with the file name
ImageFill.jpg.
Place it under the title. You are free to resize

and position the image wherever you want,
as long as it is still underneath the title text.
2. To finish your cover, use the Clip option to

set the image as the fill of the text. After
you’ve done this, your cover is complete!
3. Save your project as .svg and .png.
82 TECHNOKIDS INC.
Adding Texts and Applying an Image Fill
1. __________________________ When you’re about to group objects, you have to click this first in the
Menu Bar.
2. __________________________This option enables you to set the fill of an object using another object.
For numbers 4 to 6, these are the three options that you have to click in order to clip objects. List them
according to their order.
3. __________________________
4. __________________________
5. __________________________
6. _______ You must hold the Ctrl key when selecting multiple objects.
7. _______ It’s better to apply one image fill to one object, instead of applying multiple image fills to
multiple objects.
8. _______ The shortcut of the Group option is Ctrl + G
9. _______ When installing fonts, you have to right-click on the .ttf file and select Install font.
10. _______ When you group objects, it means that you can select, move, and edit them as a single
object.
TECHNOKIDS INC. 83
BOOK COVER ARTIST
84 TECHNOKIDS INC.
Session 3 Review: Creation of the Book Cover
1. __________________________ Graphics that can be scaled to any size without losing quality.
2. __________________________ Points that define paths.
3. __________________________ Lines created using the answer in item #2.
4. __________________________ The Bezier Tool shortcut.
5. _____________________ and _______________________ The two shapes on both sides of a handle

produced by the Gradient Tool.
1. _______ When you double-click a .ttf file, the font is automatically installed.
2. _______ To create a gradient using the gradient tool, you must click on the canvas and drag the
cursor to wherever you want.
3. _______If you want to change the font and size of a text, you’ll modify the options in the Tool
Controls area.
4. _______ The Type Tool is used to add and edit texts
5. _______ When you clip two objects, the fill of the object on the top will be the object at the bottom.
TECHNOKIDS INC. 85
BOOK COVER ARTIST
86 TECHNOKIDS INC.
Session 3 Skill Review: Creating an “Elemental” Cover
Using the things you’ve learned in this session, create your own book cover with the theme
“elemental” (earth, wind, fire, water, etc). It’s up to you if you want your book genre to be fantasy,
sci-fi, instructional, scientific, etc. Have fun!
Sample output:
TECHNOKIDS INC. 87
BOOK COVER ARTIST
88 TECHNOKIDS INC.
SESSION 4
BOOK LAYOUT ARTIST
Apart from a good book cover, an attractive book layout also helps draw
attention towards the material. In this session, you will be learning how to
create a creative book layout. Ready to give more life to some of the
pages of our story? Let’s go!
Assignment 9: Applying Filters

Assignment 10: Creating the Content Layout
89
90
Assignment 9: Applying Filters
Learning about Filters
In Inkscape, filters are effects that enable you to

transform, distort, and enhance objects and
images. You can apply filters on an object by
clicking Filter in the Menu Bar, choosing a filter
category, and selecting a filter.
TECHNOKIDS INC. 91
BOOK LAYOUT ARTIST
Below, you can see the different filter effects for the following filter categories:
 Bumps  Materials
 Color  Overlays
 Distort  Scatter
 Image effects  Textures
 Image effects, transparent  Transparency utilities
Note that filter effects in some categories may only work under certain conditions. You may
encounter issues when using filters under the categories not mentioned above.
The original appearance of the object that the filters will

be applied to is shown in the given image.
Bumps:
Color:
92 TECHNOKIDS INC.
Distort:
Image effects:
Image effects,
transparent:
TECHNOKIDS INC. 93
BOOK LAYOUT ARTIST
Image effects,
transparent:
Overlays:
Scatter:
94 TECHNOKIDS INC.
Textures:
Transparency utilities:
TECHNOKIDS INC. 95
BOOK LAYOUT ARTIST
Applying single filters
1. The file we will be working on today is located in the resource files. Go to RESOURCE FILES\SESSION
4\Assignment 9 and open Book Pages.svg in Inkscape. It contains the background of the first two
pages in the story “The Drifting Islands and the Prophecy of the Sprites”.
Note that the line in the middle is called a Guide, which serves as the divider, marking the division
between two separate pages.
2. Make the shapes on the bottom of the pages look like precious stones by applying filters to them.
You can refer to the table below or you can experiment with other filters.
Original Appearance Applied Filter New Appearance
Ridges > Glowing Bubble
Materials > Enamel Jewelry
Texture > Melted Rainbow
96 TECHNOKIDS INC.
Materials > 3D Mother of Pearl
Output:
Applying multiple filters

3. What you have previously done with the shapes is that you’ve applied a single filter to each of
them. It’s time to apply another filter to some of the objects on the two given pages. To
accomplish this, follow the same procedure as when single filters are applied: select the object
and apply a filter. It’s that simple. For this step, select the square shapes and apply another filter to
them. You can refer to the table below, or you can experiment with other filters.
Original Appearance Applied Filter New Appearance
Bumps > Bubbly Bumps
Output:
TECHNOKIDS INC. 97
BOOK LAYOUT ARTIST
Adjusting filters
You can adjust the filter effects by going to the Filter

Editor window. You can access this window by clicking
Filter in the Menu Bar and selecting Filter Editor.
4. In this step, we’ll only be tackling the Standard Deviation sliders under the Effect parameters tab.
The standard deviation sliders enable you to adjust the details of the applied filters. The lower the
standard deviation, the more evident the filter. On the other hand, the higher the standard
deviation, the more blurred the filter. Example:
Low Standard Deviation (3) Medium Standard Deviation (30) High Standard Deviation (90)
98 TECHNOKIDS INC.
The two sliders are linked together by default, so if the top slider is adjusted, so is the other. Unlinking
them by pressing the button on the right won’t have much effect when either of them is
adjusted. The last step for this assignment is to edit the filters you’ve applied. Feel free to set their
standard deviation using any value you like. Just keep in mind that your adjustments must still make
the objects look like precious stones.
Output:
Note that if you want to remove an object’s filter/s, just

click Filter in the Menu Bar and select Remove Filters.
TECHNOKIDS INC. 99
BOOK LAYOUT ARTIST
All About Filters
I. Matching Type: Match Column A with Column B by writing the letter of the correct answer on the
blank provided. Column A Contains filter names and Column B contains their effects.
Column A Column B
A. D.
______ 1. Enamel Jewelry
______ 2. 3D Mother of Pearl
______ 3. Glowing Bubble
______ 4. Bubbly Bumps B.
______ 5. Melted Rainbow E.
C.
______ 6. When the standard deviation of a filter is high, its details are more visible.
______ 7. When the standard deviation of a filter is low, its details are more visible.
______ 8. When applying another filter to an object, you may follow the same steps as when you apply
a single filter.
______ 9. Filters are effects that enable you to transform, distort, and enhance objects and images.
______ 10. You can edit a filter’s standard deviation in the Filter Editor window.
100 TECHNOKIDS INC.

Adding Dummy Text Using the Lorem Ipsum Option
1. Let us assume that the author of the story is in the process of revising the first paragraph of the story,
with the said paragraph placed on the left page. You must place a dummy text on the text box
you’ve created so that once you’ve placed all the text, you’ll have a clearer idea of the final
appearance of the pages. Select the Type Tool and create a text box on the left page.
2. You can easily add a dummy text in

Inkscape by going to the Text option
under the Extensions Menu and selecting
Lorem ipsum. Before clicking the option,
make sure that the font size is 16.
A short fact about Lorem Ipsum: When we say Lorem Ipsum in graphic design, it usually pertains to
dummy text or filler text. The Lorem Ipsum text came from a classical Latin literature written by Cicero
in 45 BC, entitled “de Finibus Bonorum et Malorum”. The point of using Lorem Ipsum is that it has a
normal distribution of letters, making it look like readable English.
TECHNOKIDS INC. 101

BOOK LAYOUT ARTIST
3. After clicking the Lorem ipsum
option, the Lorem ipsum window
will pop up. It enables you to set
the number of paragraphs,
sentences per paragraph, and
paragraph length fluctuation. You
can also preview the Lorem ipsum
text by clicking on the Live preview
checkbox. Click on the Apply
button once you’re done.
4. Change the text alignment to Justify and the text color to Green (RGBA:
338000ff).
102 TECHNOKIDS INC.

Putting Texts Into Paths
1. It’s time to add the texts on the next page! Select the Bezier Tool and create a path above the
topmost dashed line. As much as possible, follow the dashed lines below to create a similar curve
for the path.
2. Above the path, create a text box with the text “The island’s precious stones are continuing to
grow in number! That’s a good sign!”. Set the font to Sans, the text size to 16, and the text color to
Green.
3. Select the text box and the path. Click Text

in the Menu Bar and select Put on Path.
TECHNOKIDS INC. 103

BOOK LAYOUT ARTIST
4. Remove the Black line by clicking on it, opening the Fill and Stroke window, and setting the
opacity to 0.0. You can also just click on it and remove it by pressing Backspace.
5. The last thing to do to complete the output for this session is to add the remaining texts. These are
the complete texts for the right page:
“The island’s precious stones are continuing to grow in number! That’s a good sign!”
“This means that the sprites are happy with how I, together with my druid siblings,”
“take care of the islands entrusted to us. We have continued to preserve the islands’”
“natural wonders for over 500 years now, and will continue to do so until we finally join”
“our creator. No mortal shall every lay his foot on the islands, for he will only take advantage
of”
“the islands’ abundant riches. We cannot afford to let history repeat itself no matter what.”
Note: When creating the paths, make sure that their flow is similar to the path/s near them.
104 TECHNOKIDS INC.

Final output:
TECHNOKIDS INC. 105

BOOK LAYOUT ARTIST
Adding Texts for the Content
1. ________________________________________________ Title of the classical Latin literature where Lorem

Ipsum came from.
2. ________________________________________________ Author of the classical Latin literature where

Lorem Ipsum came from.
3. ________________________________________________ To remove the Black line after putting a text on a

path, you must adjust this option in the Fill and Stroke window.
4. ________________________________________________ The term that usually pertains to dummy text or

filler text in graphic design.
5. ________________________________________________ The option that you must click in order to put

texts on paths.
II. Enumeration: Read each statement carefully and write your answers on the blanks provided.
For numbers 6 - 8, name the three options you can modify in the Lorem Ipsum window.
6. ________________________________________________
7. ________________________________________________
8. ________________________________________________
The 2 options you need to click in order to access the Lorem Ipsum option.
9. ________________________________________________
10. _______________________________________________
106 TECHNOKIDS INC.

Session 4 Review: Filters and Text
I. Enumeration: Name 5 filter categories and write your answers on the blanks provided.
1. ________________________________
2. ________________________________
3. ________________________________
4. ________________________________
5. ________________________________
II. Arrangement: The items below are steps on how to add a Lorem Ipsum text. Arrange them
chronologically from a - b. Write your answers on the blanks provided.
1. _____ Set the number of paragraphs
2. _____ Click Apply
3. _____ Click Text
4. _____ Click Extensions
5. _____ Click Lorem Ipsum
TECHNOKIDS INC. 107

BOOK LAYOUT ARTIST
108 TECHNOKIDS INC.

Session 4 Skill Review: Into The Cave
Go to RESOURCE FILES\SESSION 4\Skill Review and open IntoTheCave.svg In Inkscape. It contains the
backgrounds of 2 pages. The first page shows the main character heading towards a cave. The
second page shows the main character inside the cave.
Based on each page’s background, you must create a short story and place the texts on the
following areas:
 Left page: On the area where the cave is

 Right page: On the areas where the Dark Blue lines are.
It’s better if you set the text color to White so that the texts will look readable. Here is a sample output:
TECHNOKIDS INC. 109

BOOK LAYOUT ARTIST
110 TECHNOKIDS INC.

SESSION 5
MAGAZINE COVER ARTIST
Magazine covers play a huge role when it comes to selling magazines. A
good magazine cover effectively gives the customers a glimpse of the
material’s contents. To create a magazine cover that could draw potential
readers’ attention, the pictures and texts should be arranged and
presented in such a way that would invoke that desired effect. In this
session, you’re about the learn just that! You’ll be learning how to place,
arrange, and edit different elements together to come up with your own
magazine cover.
Assignment 11: Adding the Images

Assignment 12: Applying Basic Adjustments
TECHNOKIDS INC. 111

112
Assignment 11: Adding the Images
In Inkscape, it is possible to import vector graphics, bitmap graphics, or texts. For this assignment, we
are going to discuss how to import bitmap graphics into an open Inkscape document. Throughout
the discussion, you will be able to create a magazine cover that will let you experience the work of
Magazine Cover Artists.
1. To start off, you will need to install the fonts

that we will be using. In RESOURCE
FILES\SESSION 5\Assignment 11, locate
the Franklin Gothic Heavy.ttf, Franklin
Gothic Heavy.ttf and Fresko.ttf fonts. Now
select and right click on the font files and
click Install.
Note:
You are free to install the fonts that you prefer to
use.
TECHNOKIDS INC. 113

2. After installing the font files, open Inkscape.
3. To match the size of a magazine cover,

you will need to define the properties of
the new document. Go to File Menu and
select the Document Properties option or
simply press the shortcut keys Shift + Ctrl +
D.
After selecting the option, the Document

Properties pop-up window will appear. Look for
the Page Size area and select US Letter.
114 TECHNOKIDS INC.

Placing Images
Currently, there are two ways on how bitmap graphics or images can be placed or imported. It
can be through the Import option found in the File Menu or the “Drag and Drop” feature of
Inkscape.
Import Option
4. Let us first try to import a file using the

Import option. Go to File Menu and select
the Import option or you may simply press
the shortcut keys Ctrl + I.
After selecting the Import option, the Select file

to import pop-up window will appear. Locate
Main.png and click Open.
Embedding vs. Linking
Before you can import any images, you will need to choose how it will be placed in the file:
embedded or linked.
TECHNOKIDS INC. 115

If you chose to embed the image, this will cause your SVG file to be larger. This happens because a
copy of the image is now encoded into the SVG file. On the other hand, choosing to link the
image will cause your SVG file and image to be dependent on one another. This means that they
should always be in the same location in your computer.
In cases when you would want to embed a linked image, you can use the Embed Images found
in the Extension Menu to embed the file.
When the pop-up window for choosing to

embed or link the image appears, choose
embed and click OK.
Note:
Before you import Main.png rename the first
layer as Images. This layer will now serve as the
destination of the succeeding images, which
will be embedded to your SVG file.
Drag and Drop
5. For the remaining images, let us

try to import them using the drag
and drop method. Select
Barcode.png, Boy.png,
Circle.png, Girl.png, and
Girls.png then click and hold
on the image files. After this,
drag them into the Inkscape
window.
116 TECHNOKIDS INC.

Transforming Images
Bitmap graphics or images can be transformed in a lot of ways. For this activity, we are going to
focus on three functions to transform the imported images: Move, Scale and Rotate.
To access these features, you may do any of the following:

1. Selecting an image once lets you access the Move and Scale feature. Selecting an image
twice lets you Rotate an image.
2. For a more precise transformation, you can access these features through the Transform
option found in the Object Menu (Shortcut keys are: Shift + Ctrl + M).
These features are useful especially when you are layouting different types of documents. In
addition to this, these are also applicable to vector graphics.
Move
6. Let us try to move the images by using the

first method. Select Main.png once and
drag it until it fits the canvas.
TECHNOKIDS INC. 117

7. Next, select Circle.png and move it just
across the eyebrow of the boy in
Main.png.
8. Now select Barcode.png and move it to

the left side of the canvas. Its position must
be somewhere above the shoulder of the
boy in Main.png.
9. Move Girl.png until it is adjacent with the

lower left corner of the canvas. After this,
move Boy.png to the right side of Girl.png.
Lastly, move Girls.png beside Boy.png.
Scale
The first method to access the Scale feature is by selecting an image once. After selecting an
image, three types of arrow handles will appear.
118 TECHNOKIDS INC.

Handles Result
The arrows with the green box can scale the
image vertically.
The arrows with the blue box can scale the

image horizontally.
The arrows with the red box can scale the

image vertically and horizontally. If you want
to scale images proportionally, just press the
Ctrl button while dragging the arrows.
10. Now let us use the handle that will scale

the three images: Girl.png, Boy.png, and
Girls.png. Select them by pressing and
holding the Shift key while clicking each
one of them.
While pressing and holding the Ctrl key,

click, hold and drag down the arrow in the
upper right corner of the images to start
scaling proportionally. The scaling should
stop until the three images already fit inside
the canvas.
TECHNOKIDS INC. 119

Rotate
The first method to access the Rotate feature is by selecting an image twice. After the selection,
three types of arrow handles will appear at each corner of the image.
The arrow handles that appear to be curved are the ones you could use to rotate an image. By
dragging these sideways, you can already control the rotation of the image.
11. For the second method of accessing the

Rotate feature, we can use it when we
rotate Circle.png. Go to Object Menu and
select Transform.
12. After selecting the Transform option, the

Transform Dialog will appear at the right
side of the Inkscape window.
120 TECHNOKIDS INC.

13. Click the Rotate tab. Here, you will see the
controls for the Angle and Unit of
Measurement. Set the angle to 10 and deg
as the unit of measurement, then click
Apply.
Note:
Before setting the values, make sure that
Circle.png is selected.
14. Great job! You are now done placing and

transforming the images. The magazine
cover will be finished in no time.
TECHNOKIDS INC. 121

Placing and Transforming Images

1. If I want to adjust the canvas size to match an image’s size, selecting this option can help me do
it.
a. Document Properties b. Document Set-up

c. Document Size d. Document Manager
2. If I want to import a bitmap graphic, I can go to File Menu and select this option.
a. Import Image b. Import

c. Import Bitmap Graphic d. Import Vector Graphic
3. After dragging and dropping an image to the Inkscape window, I can encode it to the the SVG
file by selecting this option.
a. Link Images b. Embed Images

c. Link d. Embed
4. After dragging and dropping an image to the Inkscape window, I can make an image and SVG
file dependent with one another by selecting this option.
a. Embed b. Embed Images

c. Link d. Link Images
5. If I want to encode a bitmap graphic that is dependent on an SVG file, I can go to the Extensions
Menu and select this option.
a. Link Images b. Link

c. Embed Images d. Embed
6. If I want to transform an image, I can use these features.
a. Move, Edit, Delete b. Copy, Rotate, Scale

c. Move, Edit, Scale d. Move, Scale, Rotate
7. If I want to transform an image precisely, I should do it using the commands found in this Dialog.
a. Layer Dialog b. Image Dialog

c. Adjust Dialog d. Transform Dialog
122 TECHNOKIDS INC.

8. If I want to resize an image proportionally, I should press this key while dragging the corner
handles of the image.
a. Shift b. Ctrl
c. Page Down. d. Alt
9. If I want to set the angle of an image, I can use these controls.
a. Angle and Unit of Measurement b. Angle

c. Unit of Measurement d. Degrees
10. If I want to set an image’s position, I should do this to the image.
a. Select once and Drag b. Select twice and Drag.

c. Select thrice and Drag d. Select once and press the Ctrl key
TECHNOKIDS INC. 123

124 TECHNOKIDS INC.

Assignment 12: Applying Basic Adjustments
There are times when images don’t turn out the way we expected them to look. Sometimes the
images’ color and lighting are too pale or too intense. Fortunately, a lot of image editing tools are
now available to help you fix these imperfections. One of these image editing tools is Inkscape. The
following are the tools which can be used for basic image adjustments: HSB Adjust option and
Contrast option.
Open your previous output from ASSIGNMENT

11. If you were not able to keep a copy of this
assignment, go to RESOURCE FILES\SESSION
5\Assignment 12, locate and open Magazine
Cover.svg using Inkscape.
After opening the SVG file, a document with

one layer, Images layer, will appear. The
images in this layer is where we can apply basic
image adjustments.
HSB Adjust Option
HSB in HSB Adjust option stands for Hue, Saturation, and Brightness. This option can be found in
Extensions Menu’s Raster option.
TECHNOKIDS INC. 125

Hue
Hue is the specific tone of color. It is commonly identified by the name of colors such as red,
orange, or green. When it is encoded in RGB, it can be measured in angular degrees starting and
ending with red.
At the bottom of the current magazine cover, you will see three images. Focus on the rightmost
image, the one with two smiling girls. You will notice that their skin appears to be sunburned. To fix
the skin’s color, we can adjust the hue of the image.
1. Select the image. Go to the Raster option

found in the Extensions Menu. Choose HSB
Adjust. This HSB Adjust pop-up window will
then appear.
2. If we refer to the RGB encoding, the

reddish skin of the girls seems to belong to
the range of values starting from 0. If we
want to lighten it, we can input values
higher than 0. In this case, try to input 10.0
and click Apply.
Note:
If you are not satisfied with the result, you may

still adjust the Hue by setting a higher value.
126 TECHNOKIDS INC.

Saturation
Saturation , also known as Chroma, is the strength or purity of a color. It represents the amount of
gray in proportion to the hue. Its value ranges from 0% - gray to 100% fully saturated. The image
below shows the saturation levels of the color red.
Now focus on the leftmost image, the one with a smiling girl. You will notice that her skin appears to
be pale. To fix the skin’s color, we can adjust the saturation of the image.
3. Select the image. In the HSB Adjust pop-up

window, set the Hue back to 0.0. As for the
Saturation, set it to 30.0. After setting the
values, click Apply.
Note:
still adjust the Saturation by setting a higher
value.
Brightness
Brightness refers to the lightness or darkness of color. It is measured in percentage starting from 0% -
black to 100% - white. The image below shows the brightness levels of the color red.
Now focus on the middle image, the one with a smiling boy. You will notice that the image
appears to be too bright. To fix the image, we can adjust the brightness of the image.
TECHNOKIDS INC. 127

4. Select the image. In the HSB Adjust pop-up
window, set the Saturation back to 0.0. As
for the Brightness, set it to -4.0. After setting
the values, click Apply then click Close to
close the pop-up window.
Note:
still adjust the Brightness by setting a lower
value.
Contrast Option
The Contrast option can be found in the Extensions Menu’s Raster option. It is responsible for the
separation of the darkest and brightest areas of an image. Increasing the contrast will increase the
separation causing shadows to become darker and highlights to become brighter. On the other
hand, decreasing the contrast will decrease the separation causing shadows to become lighter
and highlights to become darker.
Let us go back to editing the middle image, the one with a smiling boy. You will notice that the
image has a better brightness but it appears dull. To make the image become vibrant, we can
adjust the contrast of the image.
128 TECHNOKIDS INC.

5. Select the image. Go to the Raster option
found in the Extensions Menu. Choose
Contrast. This will show the Contrast pop-up
window. The default value is 1, let us use
this and see if it is already enough to make
the image look vibrant. Click Apply.
Note:
still adjust the Contrast by setting a higher value.
6. Congratulations! You are now done

applying basic adjustments to the images.
You are now ready for the last set of steps
in creating a magazine cover.
TECHNOKIDS INC. 129

Applying Basic Adjustments
True or False: Read each statement carefully. Write T if the statement is correct, or F if it is incorrect.
1. _______ HSB in HSB Adjust option stands for Hue, Saturation, and Brightness.
2. _______ HSB Adjust can be found in the Extensions Menu’s Raster option.
3. _______ Hue can be measured in angular degrees starting and ending with yellow.
4. _______ Brightness is also known as Chroma.
5. _______ Saturation value ranges from 0% - gray to 100% fully saturated.
Fill in the Blanks: Read each statement carefully and fill in the blank spaces with the correct answer.
1. _________________________ is the strength or purity of a color.
2. _________________________ is responsible for the separation of the darkest and brightest areas of an
image.
3. _________________________ option is found in the extensions Menu which is where you can select the
Contrast option.
4. _________________________ the contrast will decrease the separation causing shadows to become
lighter and highlights to become darker.
5. _________________________ is measured in percentage starting from 0% - black to 100% - white.
130 TECHNOKIDS INC.

Text is an important part of digital and print media such as magazines. For this activity, you are going
to learn how to use Inkscape tools for Text modification. This includes adding Stroke and Text option
found in the Extensions Menu.
In RESOURCE FILES\SESSION 5\Assignment 13

locate, and open Magazine Cover.svg using
Inkscape. After opening this, you will see a
magazine cover that is almost complete. All
that is left to do is to add and modify texts.
Note:
Before you start adding texts, it would be better
to add a new layer named Text. By doing this,
the layers and objects in your file will be
organized.
Adding Text
1. Let us start by adding the title at the

topmost part of the magazine cover.
Below are the guidelines:
- Text: youthbuzz
- Font Family: Fresko
- Font Size: 200
- Font Color: For “youth”, use Red (R: 255, G:
0, B: 0). For “buzz”, use White (R: 255, G: 255,
B: 255).
TECHNOKIDS INC. 131

2. Next, add the text to be placed on the left
portion of the magazine cover. Below are
the guidelines:
- Text: only in youthbuzz

- Font Family: Franklin Gothic Medium Cond
- Font Size: 28
- Font Color: White (R: 255, G: 255, B: 255)
- Text: mark khan

- Font Family: Franklin Gothic Heavy
- Font Size: 80
- Font Color: Black (R: 0, G: 0, B: 0)
- Line Spacing: 80%
- Text: a look into the life of the newest “child

wonder”
- Font Size: 31
- Font Color: R: 0, G: 85, B: 68
- Line Spacing: 108%
- Text: mar 2014 P100

- Font Size: 18
3. The next set of texts will be placed at the

upper portion of the images found at the
bottom of the magazine cover. Below are
the guidelines:
- Text: exclusive
- Font Size: 32
- Text: royalty
- Font Size: 32
- Text: new faces
132 TECHNOKIDS INC.

- Font Size: 32
4. For the last set of texts, they will be placed

at the lower portion of each image at the
bottom of the magazine cover. Below are
the guidelines:
- Text: belle smith
- Font Family: Franklin Gothic Medium Heavy
- Font Size: 32
- Font Color: R: 255, G: 240, B: 8
- Text: john knight

- Font Size: 32
- Font Color: R: 255, G: 240, B: 8
- Text: sam & anne jones

- Font Size: 32
- Font Color: R: 255, G: 240, B: 8
Note:
If you could recall, all of the text properties above can be adjusted in the Text Menu’s Text and
Font option or by simply pressing the shortcut keys: Shift + Ctrl + T.
TECHNOKIDS INC. 133

Modifying Stroke
Aside from changing the text color, you can also modify a text’s Stroke Paint and Stroke Style. You
can do this through the controls found in the Fill and Stroke Dialog. If the dialog is not present, you
may press the shortcut keys Shift + Ctrl + F to make it appear.
5. Let us apply this feature to the following

texts: belle smith, john knight, sam & anne
jones. Select these texts and go to the Fill
and Stroke Dialog. Click the Flat Color icon
and input the RGB values R: 21, G: 188, B:
151 to their corresponding places.
6. After this, modify the Stroke Style by

changing the Width to 2.000 px.
So far, this is how your magazine cover looks

like. While looking at it, you will notice that we
can still improve the format of the texts.
134 TECHNOKIDS INC.

Extensions Menu Text Options
Additional controls and options for texts can be found in Extensions Menu’s Text options.
7. To improve the text format, let us try to use

the options found in Extensions Menu’s Text
option. Select all texts except: a look into
the life of the newest “child wonder”.
After selecting the texts, go to the

Extensions Menu and choose Text. From
there, you will see different options, select
UPPERCASE. As a result, all letters will be
changed to capital letters.
TECHNOKIDS INC. 135

8. Let us also format the remaining text, but
this time let us select Title Case. By
choosing this option, the first letter of every
word becomes capitalized.
Adding Shapes
9. For the finishing touch, you will need to

add another layer. This layer can be
named as Shapes since rectangles, which
will be positioned behind unclear texts, will
be placed here. Below are the guidelines
that must be followed:
- Text: ONLY IN YOUTHBUZZ
- Fill Color: R: 255, G: 0, B: 0
- Stroke Color: None
- Text: EXCLUSIVE, ROYALTY, NEW FACES

- Fill Color: R: 21, G: 188, B: 151
- Stroke Color: None
10. Congratulations! You have finally

completed a magazine cover. Keep
practicing and experimenting to further
improve your designing skills!
136 TECHNOKIDS INC.

Adding and Modifying Texts
I. True or False: Read each statement carefully. Write T if the statement is correct, or F if it is incorrect.
1. _______ A text’s font color cannot be changed.
2. _______ A text’s font size can be adjusted up to 100 only.
3. _______ Text properties can also be adjusted in Text Menu’s Text and Font option.
4. _______ The shortcut key to make the Text and Font pop-up window appear is Ctrl + T.
5. _______ A text’s stroke can be modified in the Fill and Stroke Dialog.
II. Multiple Choice: Read each statement carefully and encircle the letter of the correct answer.
1. If I want to adjust the line spacing of texts, this is where I can do it.
a. Text Dialog b. Font Dialog

c. Text and Font Option d. Font Option
2. If I want to change the font color of a text, I should click this icon found in the Stroke Paint tab.
a. Fill b. Color
c. Stroke Paint d. Flat Color
3. If I want to modify the thickness of a text’s stroke, I should change it in this section of Stroke Style tab.
a. Width b. Stroke
c. Thickness d. Style
4. If I want to capitalize the letters of a text, I should choose this option in Extensions Menu’s Text option.
a. Uppercase b. Title Case

c. Lowercase d. Random Case
5. If I want to capitalize the first letter of every word, I should choose this option in Extension Menu’s Text
option.
a. Lowercase b. Uppercase
c. Title Case d. Random Case
TECHNOKIDS INC. 137

138 TECHNOKIDS INC.

Session 5 Review
I. Fill in the Blanks: Read each statement carefully and fill in the blank spaces with the correct answer.
1. ____________________________ are the shortcut keys of Document Properties.
2. ____________________________ are the shortcut keys to import an image in an SVG file.
3. ____________________________ option causes an image and SVG file to be dependent from one
another.
4. ____________________________ dialog is where you can transform an image with more precision.
5. ____________________________ option is where HSB Adjust can be located.
1. _______ Brightness refers to the lightness or darkness of color.
2. _______ The spacing for texts cannot be adjusted.
3. _______ Changing the font family can be done in the Text and Font pop-up window.
4. _______ Stroke Paint and Stroke Style are found in Fill and Stroke Dialog.
5. _______ The colors in inkscape can be represented in RGB values.
TECHNOKIDS INC. 139

140 TECHNOKIDS INC.

Session 5 Extension Activity: Modern Day Heroes
Using the things you’ve learned in this session, create a magazine cover about modern day heroes.
Add and transform images, and add and modify texts to make the magazine cover attractive to kids
your age.
Sample Output:
TECHNOKIDS INC. 141

142 TECHNOKIDS INC.

SESSION 6
MAGAZINE LAYOUT ARTIST
Spark readers’ interest by using an eye-catching magazine article layout
instead of a typical standard format. In this session, you’ll not only learn how
to apply advanced photo adjustments and effects, you’ll also learn how to
create a magazine layout.
Assignment 14: Applying Advanced Adjustments

Assignment 15: Applying a Texture and Vignette Effect
TECHNOKIDS INC. 143

144
1. Create an Inkscape document with a width of 1488 px and a height of 1052 px.
Using Guides
We will be using Guides to organize the elements in the canvas. Guides are Blue lines that can be
dragged around the canvas to help arrange and organize elements.
You can add a vertical Guide by dragging from

the left Ruler area.
TECHNOKIDS INC. 145

You can add a
horizontal Guide by
dragging from the
top Ruler area.
To delete a Guide, just drag it to the Ruler area where it came from. Guides can be hidden and
shown by pressing Shift + |.
2. Now, it’s time to add the Guides in your canvas. Position them as seen in the screenshot below.
To give you a clearer idea of how these Guides help in organizing elements, below is a
color-coordinated version of the canvas that shows you the different contents that you’ll be adding
later on.
146 TECHNOKIDS INC.

 Working with Multiple Rows and Columns
 Using Shapes as Placeholders
3. Select the Rectangle Tool and create a rectangle that covers the whole canvas. Make sure that
its color is White. This must be done so that when the image is exported, a White background is
automatically set instead of a transparent one.
Now, based on the color-coordinated canvas, create the rectangles for the texts. Their color
should also be White. In the screenshot below, the rectangles for the text are in Green so that you
can see them over a White background.
4. The text of the article we will be

using can be found in
BurstingWithImagination.txt,
which is located in RESOURCE
FILES\ SESSION 6\Assignment
14. Create a big text box on
one side of the canvas and
paste the contents of
BurstingWithImagination.txt into
it.
TECHNOKIDS INC. 147

 Placing Texts Into Shapes
5. It’s time to transfer the text from the big text box to the four rectangles created previously. To do
this, select the big text box and the four rectangles. Note that you must select them according to
the order shown in the screenshot:
This is because when the text is transferred into the rectangles, it will begin in the last rectangle
selected, and will end in the first one selected.
Click Text in the Menu Bar and select Flow into Frame
(shortcut Alt + W). This option allows you to make a text flow
(or be placed) into a shape/ shapes.
After the text has been placed into the rectangles, check for minor errors like wrong spacing or line
breaks then fix them.
148 TECHNOKIDS INC.

6. Apply minor text formatting changes to the following elements:
 Font of the content to Sans and the font size to 20
 Text alignment to Justify

 Font of the sub-headers to BigNoodleTitling (font file is located in RESOURCE FILES\SESSION
6\Assignment 14 named big_noodle_titling.ttf.)
 Font size of the sub-headers to 40
 Text color of the sub-headers to Blue (RGBA 0088aaff)
Add page numbers to make the document look more like a magazine layout and make sure that
their order is correct. The font of the page numbers should be Sans and the their font size should be 20.
TECHNOKIDS INC. 149

Creating the Basic Layout

1. If you want to create a horizontal Guide, what area of the screen will you drag from?
a. Top b. Bottom
c. Left d. Right
2. If you want to create a vertical Guide, what area of the screen will you drag from?
a. Top b. Bottom
c. Left d. Right
3. If you want to hide or show Guides, you have to press these keys.
a. Shift + { b. Shift + L
c. Shift + } d. Shift + |
4. The Flow into Frame option can be found under this Menu.
a. Extensions b. Text
c. Path d. Object
5. The shortcut of the Flow into Frame option.
a. Shift + W b. Shift + F
c. Alt + W d. Alt + F
II. Enumeration: Name 5 things you can set or adjust when working with the Type Tool.
6. ______________________________
7. ______________________________
8. ______________________________
9. ______________________________
10. ______________________________
150 TECHNOKIDS INC.

Assignment 15: Applying Advanced Adjustments
1. Add another layer for the images. Go to RESOURCE FILES\SESSION 6\Assignment 15. Place,
position, and transform the images shown in the screenshot. The images used are Header.png,
Crayons.png, CloseUp.png, and Brushes.png.
2. Add the article’s title (Bursting With Imagination) and author (John Smith) over the header
background. Set their font to BigNoodleTitling. Set the title’s font size to 80, and the author’s to 28.
TECHNOKIDS INC. 151

Using the Level (With Channel) Option
The Level (with Channel) option enables you to adjust

the shadows and highlights of the selected image. It
also enables you to set the color channel of the
image.
You can access this option by clicking Extensions in

the Menu Bar > Raster > Level (with Channel).
The Channel drop down menu enables you to choose a

certain color channel. The main color of the selected
channel will be applied to the object once it is selected.
You can then adjust its intensity/effect using the options
below.
The Black Point option enables you to darken shadows

while the White Point option allows you to brighten
highlights. The Gamma Correction option enables you to
adjust the overall brightness of the image.
3. Apply the following adjustments to the images:
Before Adjustments After
Channel: Yellow Channel

Black Point: 50.0
White Point: 20.0
Gamma Correction: 1.0
152 TECHNOKIDS INC.

Channel: Blue Channel
Black Point: 0.0
White Point: 100.0
Channel: Yellow Channel

Black Point: 70.0
White Point: 100.0
Output:
TECHNOKIDS INC. 153

Working With The Level (with Channel) Option
Enumeration: Read each statement carefully and write your answers on the blanks provided.
I. Name 5 channels that can be found under the Channel drop down menu.
1. ________________________________
2. ________________________________
3. ________________________________
4. ________________________________
5. ________________________________
II. Name the two options you need to click (in chronological order) to access the Level (with Channel)
option.
6. ________________________________
7. ________________________________
III. Aside from the Channel option, Name the three options that can be set in the Level (with Channel)
option.
8. ________________________________
9. ________________________________
10. ________________________________
154 TECHNOKIDS INC.

Assignment 16: Applying a Texture and Vignette Effect
1. Create a new layer for the textures. Set the Blend Mode to Multiply and the Opacity to 70. Locate
the textures by going to RESOURCE FILES\SESSION 6\Assignment 16. Place, transform, and move
Texture1.jpg over the crayons image, Texture2.png over the close up head image, and
Texture3.jpg over the brushes image.
2. Create a new layer for the vignette effects. Vignette pertains to a color that fades gradually
around the edges of an image. Example:
TECHNOKIDS INC. 155

3. Set the Blend Mode to Multiply and the Opacity to 50. Select the Rectangle Tool and create
rectangles over the three images. It doesn’t matter what the Fill Color is, as long as the Stroke
Color is set to none .
4. Select the Gradient Tool and on the Tool Controls area, click on the icon for creating circular
gradients . Click on the rectangle over the Crayons image, and

apply a circular gradient.
You can choose whatever color you want

for the gradient, but make sure that the
center of the gradient is transparent. In
the screenshot, the color the was used is
or (RGBA) ff995fff.
5. Apply gradients to the remaining images.
Final Output:
156 TECHNOKIDS INC.

Arranging the Steps to Apply Textures and Vignettes
Arrangement: Arrange the following steps from a to j according to their chronological order,
______ 1. Place the image textures on the canvas.
______ 2. Select the Gradient Tool and create circular gradients.
______ 3. Set the Opacity and Blend Mode of the layer for the vignettes.
______ 4. Create a layer for the vignettes.
______ 5. Set the Opacity and Blend Mode of the layer for the textures.
______ 6. Save the project.
______ 7. Create a layer for the textures.
______ 8. Set the colors of the gradients.
______ 9. Create rectangles and place them over the images.
______ 10. Resize and position the image textures.
TECHNOKIDS INC. 157

158 TECHNOKIDS INC.

Session 6 Review: Creation of the Magazine Layout
Modified True or False: Write T if the statement is true. If it is false, encircle the word or phrase that
makes the statement incorrect and write the correct word or phrase that will make the statement
true. Write your answers on the blanks provided.
1. ___________________________ Guides are Green in color.
2. ___________________________ When a text is transferred into shapes, it will begin in the first shape
selected.
3. ___________________________ The Flow into Frame option can be found under the Text menu.
4. ___________________________ The Level (with Channel) option allows you to adjust the shadows and
highlights of the selected image.
5. ___________________________ The Black Point option in the Level (with Channel) window enables you
to brighten highlights.
6. ___________________________ The Gamma Correction enables you to adjust the overall brightness of
the image.
7. ___________________________ A vinget pertains to a color that fades gradually on the edges of an

image.
8. ___________________________ Setting a layer’s Blend Mode to Multiply is ideal when adding an

image texture.
9. ___________________________ When applying the effect in number 7, setting the color of the
gradient’s center to Black is preferred.
10. __________________________ You can drag Guides from the two Ruler areas.
TECHNOKIDS INC. 159

160 TECHNOKIDS INC.

Session 6 Extension Activity: Layout Creation
Using the things you’ve learned in this session, create a magazine layout for the article in this page:
http://www.dogonews.com/2013/6/14/meet-tippi-the-real-life-mowgli
You can find the images and the font file in RESOURCE FILES\SESSION 6\Skill Review.
Sample output:
TECHNOKIDS INC. 161

162 TECHNOKIDS INC.

APPENDICES
Refer to the appendices in this section to see a complete list of terminologies
and their definitions introduced in this project and how to contact
TechnoKids.
 Appendix A - Terminology List

 Appendix B - Glossary
 Appendix C - Contact Information
163
TECHNOEXPRESS APPENDICES
Appendix A: Terminology List
1 D
1-point Perspective................................................42 Default.....................................................................34
Difference.................................................................9
Division.....................................................................41
2 Document properties window..........................114
Drag and Drop method.....................................116
2-point Perspective................................................42 Drifting......................................................................61
2D Shape.................................................................33 Druid......................................................................104
Dummy text..........................................................101
Duplicate................................................................15
3
3-point Perspective................................................42
E
3D Box.......................................................................34
3D Shape.................................................................33 Ellipse Tool...............................................................36
Embed...................................................................115
Exclusion..................................................................40
A Export.....................................................................147
Eyedropper Tool....................................................48
Adjacent..................................................................47
Arrow handles.......................................................118
F
B Fill..............................................................................14
Fill and Stroke window..........................................64
Fill by drop-down menu.......................................47
Banner.......................................................................3 Fill Tool......................................................................45
Basic Menu Options..............................................14 Fill, Stroke, Text, and Layer options.....................14
Bezier Tool................................................................59 Filter Editor window...............................................98
Bitmap.......................................................................9 Filters........................................................................91
Black Point............................................................152 Flow into Frame...................................................148
Blend Mode..........................................................155
Font.........................................................................34
Boolean Operations..............................................39 Format......................................................................6
Brightness...............................................................125
Browser....................................................................10
G
C
Gamma Correction...........................................152
Canvas....................................................................14 Glimpse.................................................................111
Channel drop-down menu...............................152 Gradient.................................................................74
Clip option...............................................................81 Gradient Tool.........................................................74
Close gaps..............................................................47 Graphic....................................................................5
Column..................................................................100 Grow/Shrink by......................................................47
Color channel......................................................152 Guides....................................................................14
Color Palette..........................................................14
Color-coordinated..............................................146
Contrast.................................................................125
Current.....................................................................20
Cut Path...................................................................41
TECHNOKIDS INC. 165

APPENDICES
H O
HSB Adjust............................................................. 125 Opacity...................................................................65
Hue...........................................................................47 Open-source............................................................9
Option.....................................................................14
I
P
Icon...........................................................................3
Illustration..................................................................5 Paraxial Line Segment..........................................60
Image texture......................................................157 Path Menu..............................................................39
Infographic..............................................................5 Paths.........................................................................41
Inkscape...................................................................1 Perspective.............................................................33
Intersection.............................................................40 Poster.........................................................................3
Isometric Projection..............................................42 Prophecy.................................................................61
Put on Path...........................................................103
J
R
Justify.....................................................................102
Rectangle Tool.......................................................37
Regular Bezier Paths..............................................60
L RGB........................................................................126
Row..........................................................................45
Layers.......................................................................13 Rulers.......................................................................14
Layers Dialog..........................................................14
Layers Menu...........................................................14
Level (with Channel)...........................................152 S
Line break.............................................................148
Live Preview..........................................................102 Saturation...............................................................47
Logo...........................................................................3 Scale........................................................................59
Lorem Ipsum window..........................................102 Select.......................................................................11
Snap Options.........................................................14
Sodipodi..................................................................10
M Spiral tool................................................................37
Spiro Path...............................................................60
Menu Bar.................................................................14 Sprites.......................................................................61
Mind Map.................................................................3 Standard Deviation sliders...................................98
Star Tool...................................................................37
Status/Status Bar...................................................14
N Straight Line Segment..........................................60
Stroke......................................................................14
Sublayer..................................................................17
Node........................................................................59 SVG...........................................................................9
Node Tool................................................................49
Notepad..................................................................12
166 TECHNOKIDS INC.

T
Transform dialog..................................................120
Threshold.................................................................47
Toolbox....................................................................14
Tool Controls...........................................................14
Type Tool.................................................................79
U
Union.......................................................................40
V
Vector.......................................................................9
Vignette................................................................143
W
White Point...........................................................152
TECHNOKIDS INC. 167

APPENDICES
168 TECHNOKIDS INC.

Appendix B: Glossary
TERM DEFINITION
1-point Perspective 3D perspective where the vanishing points of Angle X set to 180° and
Angle Y set to 90° are set to infinity. As for Angle Z, the Parallel Line button
must be toggled off.
2-point Perspective 3D perspective where the vanishing point of Angle Y set to 90° must be set
to infinity. As for Angles X and Z, the points may be moved to any level but
their Parallel Line buttons must be toggled off.
3-point Perspective 3D perspective where the points of Angle X, Y, and Z can be moved to
any level, but their Parallel Line buttons are toggled off.
2D Shape Shapes that appear to be flat since they are made on two planes (X and
Y; width and height).
3D Box Shape produced using the 3D Shape tool.
3D Shape Shapes that gives the illusion of depth since they are made on three
planes (X, Y, and Z; width, height, and depth).
Adjacent Being near or close. This could also pertain to the position when an object
is over (or close to) the right angle of another object.
Arrow handles Indicators for scaling and rotating an object.
Banner It is used to bear a symbol, logo, slogan, or other messages.
Basic Menu Options Contains basic menu options such as Open An Existing Document, Save
the Document, Undo, Zoom, etc.
Bezier Tool Enables you to create vector graphics.
Bitmap A type of graphic composed of pixels in a grid. Each pixel or “bit” contains
color information for the image.
Black Point This option enables you to darken shadows.
Blend Mode Pertains to how an object or layer blends with the other objects or layers in
the document.
Boolean Operations/ Options found in the Path Menu which helps to modify 2D shapes.
Path Operations
Brightness Refers to the lightness or darkness of color.
Browser A computer program used to access the World Wide Web/Internet.
Canvas The main area where you work in Inkscape. This contains the different
elements and objects that make up the final output.
Channel drop-down This enables you to choose a certain color channel.

menu
TECHNOKIDS INC. 169
APPENDICES
Clip option Enables you to place an object (A) over another object (B), and set B as
the fill of A. For example, you have a text object (A) and an image object
(B), and you place A over B.
Close gaps Section that lets you choose how the Fill tool should treat gaps in area
boundaries. The following are the options which you can choose from:
None, Small (closes gaps up to 2 pixels), Medium (4 pixels), and Large (6
pixels).
Column A number of objects or contents placed next to each other vertically.
Color channel This stores information color information for one of the primary color
components of a color model. For example. the RGB color model has
three separate color channels: red, green and blue.
Color Palette Lets you choose the colors for the different objects and elements in the
canvas.
Color-coordinated Used to describe parts of something that are organized according to

color.
Contrast Responsible for the separation of the darkest and brightest areas of an
image. Increasing the contrast will increase the separation causing
shadows to become darker and highlights to become brighter. On the
other hand, decreasing the contrast will decrease the separation causing
shadows to become lighter and highlights to become darker.
Current Happening or being used or done now.
Cut Path This boolean operation can be used in two objects only. The bottom
shape will be cut by the top shape.
Default An option that is selected automatically unless an alternative is specified.
Difference This boolean operation can be used in two objects only. By using this, the
top object and the area where the top object overlaps the bottom
object will be removed.
Division This boolean operation can be used in two objects only. The bottom
shape will be split by the top shape.
Document properties Contains options that let you set and edit the document properties.
window Import - This means to place inside the document.
Drag and Drop In Inkscape, this method pertains to the act of selecting an object,
method dragging it onto the canvas, then dropping it so that it would be placed in
the document.
Drifting Being carried along by currents of air or water.
Druid A priest, magician, or sorcerer.
Dummy text Also known as filler text or placeholder text, it is used to temporarily serve
as a substitute for the main text. It is also used to mimic the flow of words,
sentences, and paragraphs in the English language (or other languages).
170 TECHNOKIDS INC.

Duplicate Make an exact copy of something.
Ellipse Tool A 2D shape tool used to create a circle or an oval.

Embed When placing an image, if you choose to embed it, this means that your
SVG file will be larger. This happens because a copy of the image is now
encoded inside the SVG file.
Exclusion This boolean operation can be used in two or more objects. By using this, a
single new path will be created. This will contain sub-paths that is created
according to Even-Odd Fill rule.
Export This means to publish the document into a certain file type.
Eyedropper Tool Enables you to select a color from an image or an object.
Fill The applied color or design that is applied on an object.
Fill and Stroke This window lets you set and modify the fill and stroke of an object.
window
Fill by drop-down Lets you choose the channel restrictions of the Fill tool. The following are
menu the options which you can choose from: Visible Colors, Red, Green, Blue,
Hue, Saturation, and Lightness.
Fill Tool Enables you to apply colors to objects with just one click.
Fill, Stroke, Text, and Lets you modify the appearance of objects such as shapes and texts. This
Layer options area also lets you modify the layer properties.
Filter Editor window Enables you to modify the appearance of the applied filters.
Filters Effects that enable you to transform, distort, and enhance objects and
images.
Flow into Frame This option allows you to make a text flow (or be placed) into a
shape/shapes.
Font General term for electronic set of characters with a type, style, and size.
Format The way in which something is arranged, set out, or styled.
Gamma Correction This option enables you to adjust the overall brightness of the image.
Glimpse A momentary or partial view.
Gradient Color effect that shows at least one color blending smoothly with another
color.
Gradient Tool Allows you to create and edit gradients.
Graphic A type of work usually related to visual art.
Grow/Shrink by Section that lets you control the filling path of the Fill tool. When set with a
positive value, the filling path will be larger than the bitmap area.
TECHNOKIDS INC. 171

APPENDICES
Guides Blue lines that can be dragged around the canvas to help arrange and
organize elements.
HSB Adjust HSB stands for Hue, Saturation, and Brightness. This option lets you adjust
the three properties mentioned.
Hue The specific tone of color. It is commonly identified by the name of colors
such as red, orange, or green.
Icon A visual representation used to denote a program, function, or concept.
Illustration A visual material used to clarify or explain something.
Image texture An image that serves as a texture for an artwork or a photo.
Infographic A creative way of presenting information through graphics. It usually

contains facts with accompanying images and/or illustrations.
Inkscape It is an open-source editing tool used to create different kinds of

illustrations and graphic designs.
Intersection This boolean operation can be used in two or more objects. By using this,
the area where all objects intersect will be retained.
Isometric Projection 3D perspective where the Angle X set to 150°, Angle Y set to 90°, and
Angle Z set to 30° are set to infinity.
Justify This alignment means that the text lines up along the left and right
margins.
Layers Contains different objects that make up a whole image.
Layers Dialog A dialog which contains Buttons and Options to manipulate layers. It is
located at the right corner of the Inkscape window.
Layers Menu This can be located at the Menu Bar of the Inkscape window. The
commands found in this menu can also be used to manipulate layers.
Level (with Channel) This option enables you to adjust the shadows and highlights of the
selected image. It also enables you to set the color channel of the image.
Line break This pertains to a new line where characters can be inputted.
Live Preview When this option is selected, you will be able to see changes in the
selected object as you are modifying the options.
Logo A graphic symbol which can either be purely made up of different shapes
or it can be made up of texts only. It is used by organizations to promote
instant public recognition on their products and services.
Lorem Ipsum window Enables you to set the number of paragraphs, sentences per paragraph,
and paragraph length fluctuation.
Menu Bar Contains the main drop-down menus.
Mind Map A mind map is a diagram used to connect different information together.
172 TECHNOKIDS INC.

Node The points that define paths.
Node Tool Used to select and manipulate nodes in order to modify the shape of
paths or curves.
Notepad It is a basic text-editing program used to create documents.

Opacity In Inkscape, this pertains to the quality of transparency.
Open-source A software made freely available and may be redistributed and modified.
Option Something that may be chosen from a set.
Paraxial Line Bezier Tool mode that enables you to create paths in which every node
Segment (assuming the first and last nodes are connected) has a 90 degree corner.
If the first and last nodes are not connected, then they’re the only ones
that do not have a 90 degree corner.
Path Menu This can be located at the Menu Bar of the Inkscape window. The
commands found in this menu can be used to perform boolean
operations.
Paths The lines that are created depending on where and how the user has
created the nodes.
Perspective It is the way three-dimensional objects can be represented on a

two-dimensional surface so as to give the right impression of their height,
width, depth, and position in relation to each other.
Poster A poster is an artistic work that’s usually created to advertise or publicize

something.
Prophecy A prediction of the future, made under divine inspiration.
Put on Path Option that, when clicked, puts the selected text on the selected path.
Rectangle Tool A 2D shape tool used to create squares and rectangles.
Regular Bezier Paths These pertain to paths that are used to create straight or curved lines.
RGB A color model in which red, green, and blue light are added together in
various ways to reproduce a broad array of colors.
Row A number of objects or contents placed next to each other horizontally.
Rulers Serve as measurement guides for your work. You can also drag ‘guides’
from them, so that you can organize the arrangement of different objects
in the canvas.
Saturation Also known as Chroma, this is the strength or purity of a color. It represents
the amount of gray in proportion to the hue.
Scale Another term for resize.
Select Carefully choosing something from a set of possible options.
Snap Options Lets you customize the snap options in Inkscape.
TECHNOKIDS INC. 173

APPENDICES
Sodipodi A vector graphics program written by Ralph Levien.
Spiral Tool A 2D shape tool used to create spirals.
Spiro Path Bezier Tool mode that automatically transforms paths into smooth curves.
Sprites In fantasy, sprites refer to elf-like creatures, including fairies and similar
beings.
Standard Deviation Enable you to adjust the details of the applied filters.The lower the
sliders standard deviation, the more evident the filter. On the other hand, the
higher the standard deviation, the more blurred the filter.
Star Tool A 2D shape tool used to create stars or polygons.
Status/Status Bar Shows the status of the selected object/s, such as the information about
the color, layer, etc. It also contains tips on how you can modify the
selected object/s.
Straight Line Segment Bezier Tool mode that enables you to create straight lines only.
Stroke The applied line around an object.

Sublayer A layer contained by another layer.
SVG Stands for “Scalable Vector Graphics”, it is a vector graphics file format
that enables 2D images to be displayed in XML pages on the web.
Transform dialog A dialog that lets you set and adjust the position, size, and rotation of the
selected object.
Threshold Lets you control the point where the filling should stop. If it is set to 0, the
filling will stop up to the same colored area. If it is set to a larger value, the
filling will stop up to the adjacent different colored areas.
Toolbox Contains the useful tools that you’ll be needing to create your artworks
and designs.
Tool Controls Contains the options that let you modify the selected tool’s properties.
Type Tool Enables you to add and edit texts.
Union This boolean operation can be used in two or more objects. By using this,
all original objects will be joined to create a single new path.
Vector A type of graphic that can be scaled to any size without losing quality
because they use mathematical statements and points to define their
shapes and other characteristics. Vector graphics usually have smooth
lines and a clean overall appearance.
Vignette Pertains to a color that fades gradually on the edges of an image.
White Point This option enables you to brighten highlights.
174 TECHNOKIDS INC.

Techno Express

Uploaded by

Copyright:

Available Formats

You might also like

Techno Express

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Techno Express

Uploaded by

Copyright:

Available Formats

TECHNOEXPRESS CONTENTS

SESSION 1 GETTING TO KNOW INKSCAPE.................................................................................................... 1

Teaching the Skills of tomorrow… today!

Teaching the Skills of tomorrow… today!

Assignment 1: Expressing Yourself Through Visual Materials

Assignment 1: Expressing Yourself Through Visual Materials

Logos & Icons

A poster is an artistic work that’s usually created to advertise or publicize something.

Book Cover and Layout

Magazine Cover and Layout

Identifying Creative Outputs

2. A diagram used to connect different information together.

4. An artistic work that’s usually created to advertise or publicize something.

a. Infographic b. Book Covers

Assignment 2: Introducing Inkscape

Learning the Background and History of Inkscape

If the original image was saved in

If the original image was saved as

Original image Bitmap

For more examples, please visit: http://inkscapetutorials.wordpress.com/

Inkscape Background and History

a. Scalable Vector Graphics b. JPG

a. Scalable Vector Graphics b. JPG

1. __________________________ This is the year when Inkscape was created.

2. __________________________ Developers from this project created Inkscape.

3. __________________________ Inkscape was written in this language.

4. __________________________ Inkscape came from these English words.

5. __________________________ These four developers created the initial versions of Inkscape.

Assignment 3: Working With Layers

Final output for this session

A. Lets you add new layers to your project.

Another way to manage

A. Lets you add new layers to your project.

A. Allows you to hide or make visible a layer.

In RESOURCE FILES\SESSION 1\Assignment 3

1. Let us first try to make visible the layers Tree

2. Now let us try to make visible the remaining

In the drop down menu beside the lock

3. Unlock the first three layers, Tree, Blue Bird

4. Try to unlock the last layer, Background in

In the drop down menu beside the lock

Unlike making layers visible and invisible, locking

Moves the currently selected layer one step up.

Moves the currently selected layer one step down.

Moves the currently selected layer to bottom.

5. In the Layers Dialog, select the Yellow Bird

button . By doing this, the image of

8. After creating a duplicate layer, you will

You will also need to repeat the steps for

Create a new layer button .

current layer button .

13. After clicking the button, the Add Layer

14. For the main layer, we will rename it using

15. After clicking the option, the Rename

16. To rename sublayers, each sublayer will be

Select Layer#1 layer, click it once, and

17. After choosing the option, the Rename

G. Moving Selection from Layer to Layer

2. , , and are the different ways on