6

ARTS
Quarter 2 – Module 2

Elements and Principles

Applied in Digital Painting
 Introduction

This Self Learning Module (SLM) was designed and written with you in mind to help you in
creating digital painting and graphic designing. It is here to help you improve the quality of
your artistry and creativity in creating on different artwork skills. The scope of this module
permits it to be used in many different learning situations. Moreover, the language used
recognizes the diverse vocabulary level of students. The lessons are also arranged following
the standard sequence of the course.

This Self Learning Module contains:

Lesson 1 : Digital Painting

Lesson 2 : Graphic Design (Poster Layout)

After going through this LAS you are expected to:

1. create a digital painting similar with the Masters’ (e.g., Van Gogh, Amorsolo, etc. ) in
terms of style, theme, etc.;

2. discuss the elements and principles applied in digital art/lay-outing;

3. apply skills in lay-outing and photo editing using new technologies (hardware and
software) in making a poster;

4. create an advertisement/commercial or announcement poster.

1
 Pretest

Direction: Read the following statements and choose the best answer. Write the letter of
your answer on a separate sheet of paper.
1. What do you call to the process of painting on tablet and creative ability on a
computer?
A. Digital Painting C. Photography
B. Sculpturing D. Wood crafting

2. What does GIMP stands for?

A. Graphic Manipulation Program
B. GNU Image Manipulation Program
C. Gradual Image Manipulation Program
D. Gradient Image Manipulation Program

3. Who is the greatest impressionist that paints ‘Starry Night’?

A. David Villegas C. Vincent Van Gogh
B. Michael Angelo D. Leonardo da Vinci

4. What do you call to an element of the painting tool that allows you to select a brush
shape and also the thickness in pixels?
A. brush tool C. navigation control
B. menu button D. pointer coordinates

5. Which of the following does not belong to the group of element in lay-outing a digital
poster?
A. shape C. tone
B. texture D. variety

6. Which of the following do not belong to the group of principles applied in layouting of
a digital poster?
A. balance C. form
B. emphasis D. pattern

7. How are you going to start making a digital poster?

A. by Inserting C. by retrieving
B. by opening GIMP D. by printing

8. What is the final or last step in making a digital painting?

A. Creating virtual brushstroke C. printing the complete paintings
B. Inserting images D. Working in layers

9. Why do we need to have an advertisement or commercial poster?

A. for fun
B. for additional expenses
C. just for nothing
D. to spread messages for a wide audience

10. What tool must be used in moving layers, selections and other objects?
A. text tool C. eraser tool
B. move Tool D. crop Tool

2
 Lesson 1.1
Lesson 1
Digital Painting

Look at the pictures below. How were you able to tell the difference? Do you find work done
not with real-world brushes, but with the computer remarkable? Which one do you like
better?

Fig. 1: Traditional Art Fig. 2 Digital Art

https://fineartamerica.com/featured/starry-night-
https://www.pinterest.ph/pin/485545022229
digital-remake-meenakshi-shrivastava.html
50759/

What is Digital Painting?

Painting has change in the last few decades, thanks to the power and creative ability of
computers.
Digital painting is the process of painting on a tablet and creating artwork digitally on a
computer. Just like a traditional painting, it is done through computer painting software that
uses brushes. It is an emerging art form in which traditional painting techniques such as
water color, oils, acrylic paints, etc. are applied using digital tools by means of a computer,
graphic tablet and stylus, and software.
Traditional painting is painting with a physical medium as opposed to a more modern style
like digital. Digital painting differs from other forms of digital art, particularly computer-
generated art, in that it does not involve the computer rendering from a model. The artist
uses painting techniques to create the digital painting directly on the computer.
Let us take a look of some of Digital Painting artwork of Van Gogh

https://www.vincentvango Starry Night La noche estrellada Avenue Of Poplars In Autumn

gh.org/biography.jsp https://www.pinterest.ph/pin/6487998900638 https://www.pinterest.ph/pin/ https://www.pinterest.ph/pin/5944752
09193/ 83738874309869374/ 19557531112/

3
Set your equipment and tools- setting your artwork from paper to computer is known as
digitally formatting your art. To bring the artwork from paper, you need the basic pieces of
hardware.
1. Computer- you must need to have a computer for operating system and to run in
creating a digital painting. It is important that your computer is powerful enough to
run software programs.
2. Scanner- it is useful for scanning texture- like real canvass and watercolour
paper- to make texture supports or patterns which can apply as background for
your paintings.
3. Digital tablet and stylus- tilt a brush and again the shape changes, depositing
paint in a different way. These features can now be done with varying degrees of
success using a pen stylus (pen tool) to make marks and a digital tablet to
communicate directions to the computer.

What computer software must use in digital painting?

It is recommended that you use Gimp- this program had a wide array and option that you
can manipulate to turn your work into a digitalized masterpiece.

GIMP is an acronym for GNU Image Manipulation

Program. It is used by photographers to enhance
photos, by illustrators to transform images into
unique creations, and by graphic designers to
produce icons, graphical design elements, and art
mockups. GIMP is compatible with major operating
systems. It is free and fast to download, install, use,
and upgrade. GIMP is also portable. You can save
your files on your flash drive then continue your
artwork in another desktop PC, laptop, or tablet PC.
https://www.bexdiye.com/gimp-online/

What software tools are used digital painting?

 The Brush tool: this applies color to your work,
similar to the way a traditional paintbrush would
apply paint on a canvas or paper. is an element of
the painting tool that allows you to select a brush
shape (square, circle, oval and so on) and also the
thickness in pixels you want to paint on your image
with
 Burn tool: use to darken the image just drag the
icon over the image.
 Dodge tool: to lighten an image drag the icon over
image you want to lighten.
 Eraser tool: not all is perfect at the beginning;
there will be smudges, smeared lines, or other https://www.wikihow.com/Make-Digital-Art
noticeable marks that are not supposed to be part
of the original work. Click on the toolbar icon that looks like an eraser. This tool works like
very much like to pencil eraser.
 Gradient tool: use this tool by dragging the pen to highlight a color and make it fade
from dark to light
 Hand tool: it moves around an image within an object. Use with the zoom tool when you
want to adjust the section of the picture you want to look at.
 Paint bucket tool: it fills or makes an area one color.

4
 Pencil tool: this tool behaves much like the brush except that it has hard edges. Its tool
options are basically the same as the brush tool.
 Pen tool: it makes lines and can be used to create different shapes.
 Sponge tool: it soaks color out of the image. It’s used by dragging the tool over the
section of the image you want to change.
 Type tool: this stool places text in a picture.

Advantages of Using Computers in Painting

 Errors can easily be corrected.
 Work is done in an organized, no-mess environment.
 Colors do not fade and brushes never worn-out.
 Stages and version(s) of the artwork can be saved, filed, and easily retrieved.
 Work can be transferred or printed on almost any media.
 Work can be formatted and easily e-mailed to interested parties.

Make Your Digital Painting

1. Open Gimp (Open Source) for Tablet PC – any version of the program will provide
you with a toolbar on the left-hand side of the screen.
2. Using you digital pen, draw out your outlines- indicate your foreground, middle
ground and background shapes. You can also select your character of your line
switching from brush, to pen, to pencil, or airbrush in a second.
3. Then, use the paint bucket tool to dump color into large areas – use the color
pattern and colored texture in the toolbox for added effect.
4. Create virtual brushstrokes – change the brush to blend in the effect under the
paintbrush tool.
5. Work in layers- once you have selected an image, copy and paste it over on the left
side of the screen.
6. Use the Artists’ Brushes- switch to artist’s brushes should you like to create
painting similar with anyone of the Masters in terms of style or theme.
7. Print the completed painting- finally, when you are satisfied with your painting, a
paper printout, suitable for reproduction, can be obtained.

Lesson 2
Graphic Design (Poster Layout)

What are lay-outing, poster and photo-editing?

LAYOUT-is the process of planning and arranging in detail something such as a page or
book to be reproduced.
Poster is a kind of a placard or announcement that has its goal which is the communication
of information through words and pictures or symbols.

Photo editing is the changing of images. These images can be digital photographs,
illustrations, prints, or photographs on film.

5
Elements Applied in Lay-outing a Digital Poster

1. Colour- Colour communicates both optically and emotionally. Identify primary and
secondary, warm and cool colours and harmonious or complementary
colours.
2. Shape - Refers to a two dimensional enclosure. Identify organic, natural or biomorphic
shapes that reminds us of nature.
3. Line - A line can be organic or straight, natural, geometric. It can also be light, thick,
sensitive, textured, flowing, jiggered or regular. It can make by pen or
mechanical instrument.
4. Texture - Represents the surface. It can be rough or smooth.
5. Form- It can be cube, a pyramid and s sphere. Form is created by design elements;
shape, tone, line and point.
6. Tone - Usually emphasizes form. Tone creates dramatic effects. When we shade a
drawing to make it look three dimensional we are applying tone. Tone also
describes both light direction and style of light. We can create a harsh or soft
light in renderings.
7. Point - It is the mark in visual communication. It is also used to locate something.

Principles Applied in Lay-outing a Digital Poster

1. Balance - The visual weight of objects, texture, colors, and space is evenly/equally
distributed on the screen. Balance also refers to the arrangement of the
design elements and keep a coherent visual pattern.
2. Emphasis- It is the expression that gives impressiveness or importance of the poster
that will attract the viewer’s attention like the color.
3. Movement - It can be achieved by using graphic elements that directs the viewers’
eyes in a certain direction.
4. Pattern, Repetition and Rhythm - Creating a sense of organized movement.
5. Proportion - Creating a sense of unity in the screen.
6. Variety - Uses several design elements to draw a viewer’s attention.

Steps In Making A Digital Poster

1. Open GIMP (GNU Image Manipulation Program), create a new layer, and insert the
background you want to use. A textured image or flat background will do.

2. Create a new layer for each of the objects or elements you will include in your poster.
Import or scan the image and/or photograph on the computer. Save the images as a
file.

3. Retrieve the image and/or photograph it. Insert it on a layer that you want to use.
Color the image. Enhance, resize, move image according to the lay out or concept that
you have in mind.

6
 4. Insert your texts. Use the text and type tools from your toolbar to create and place
texts in the picture from fonts that you think are appropriate for your theme and main
idea. Click the picture with the type tool and select a box the size of the area you want
to add text. Type in the box, then adjust the size of the text box.

5. Print your finished poster.

Steps on Basic Layout

1. Step 1: MATERIALS
i. Essential materials needed:
ii. Illustration board, cartolina, glue, scissors,cutter,ruler(T-square),soft
penciland eraser,coloring material, etc.

2. Step 2: STUDIES/SKETCHES
i. Move your elements around. Sketch as many thumbnail ideas as
possible, After critiquing all your sketches, select three best ideas and
translate them into final designs.

3. Step 3: THEME
i. Decide which important message you want to communicate to your
viewers. Then,ask the message you want your poster design to be
remembered.

4. Step 4: TITLE
i. Decide where to place the title. The title should be the largest text, the
most readable(from at least 5 ft.away),and should be tied with
supported by all the other elements on the poster design. Avoid cutter.

5. Step 5: COLORS
i. Choose colors that help communicate the message and unify all the
elements together. Avoid too many colors, this is distracting.

6. Step 6: WORDS/FONTS
i. Decide on what font to use, the font size and where text should be
placed. These contribute to the power and visual appeal of the design.

7. Step 7: WHITE SPACE

i. It is a vacant area in a poster. There are no texts, pictures or other
graphic images covering the white space. The viewer’s eye will be
overwhelmed if you have too little and wander if you have too much.
Aim for balance between areas without images and text and areas
with one.

7
Main Points in using GIMP

1. Changing the Size (Dimensions) of an Image (Scale) - When you first open your image
in GIMP, Chances are that the image will be zoomed, so that the entire image fits in
your canvas. The thing you notice for this example is that by default the window
decoration at the top of GIMP will show you some information about the image.
Notice that the information at the top of the window shows the current pixel
dimensions of the image (in this case, the pixel size is 1225x1280)

2. Changing the Size (Filesize) of JPEG- You can also modify the file size of an image
when exporting it to a format like JPEG.

3. Crop an Image - Cropping is just an operation to trim the image down to a smaller
region than what you started with.
4. Rotate or Flip an Image- If you want to flip your image, the Transform menu offers two
options, Flip Horizontally, or Flip Vertically. This operation will mirror your image
along the specified axis. (Image Transform)

What is an Advertisement/Commercial Poster

 Computer graphics design combines skills in technology, business and art, using
computer-generated images and words to create unique concepts and messages for
publishing and advertising.
 Advertisement/Commercial posters are a common print promotional technique
used by small businesses.
 . A poster includes a visual design, images, colors and copy. It provides a message
intended to promote brand awareness or call attention to a company event.
 The purpose of a poster is to communicate a message. It is a powerful tool to
inform, persuade, or promote.

Safety Precautions in Digital Painting

 Be careful in handling printers. Ink cartridges may contain substances that may be
harmful to your health.
 Avoid eating and drinking inside the work area.
 Work with well-ventilated area.

8
 Learning Activities

Activity 1
Direction: Apply your knowledge in creating your own masterpiece or artwork in digital
painting, you can use Laptop, Tablet or PC. Choose a scenery like a farm, a
beach, or any design of your choice or theme. Send your output to your teacher
(Teacher will provide a link on where to submit the output)

Note: Activity is applicable to learners with internet access and gadget. For those without
internet connectivity another activity is prepared for you.

RUBRICS
Criteria Advanced Proficient Approaching Developing Beginning
Proficiency

(5) (4) (3) (2) (1)

Design apply design apply design apply design apply design barely apply design
elements (lines, elements (lines, elements (lines, elements (lines, elements (lines,
shapes, color and shapes, color and shapes, color shapes, color and shapes, color and
texture) and texture) and and texture) and texture) and texture) and
principles principles principles principles principles
(emphasis or (emphasis or (emphasis or (emphasis or (emphasis or
contrast) with contrast) with great contrast) with contrast) but had contrast) in the
outstanding level skill enough skill some difficulty digital painting

Creativity show outstanding show great attention show good Some parts of the The drawing barely
attention to detail. to detail. The ideas/ attention to drawings shows shows imagination.
The ideas/ materials/ methods detail. signs of Can show little
materials/ are nearly mastered Imaginative imagination and attention on
methods are in arranging details touches are can show arranging creative
highly visible in and combination of scattered capability of designs and
arranging details creative designs. throughout the arranging creative details.
with project. The designs and
recommended designs and minute details.
combination of combinations
creative designs. creative designs
are fairly
arranged.

Originality show originality in show originality in show originality fairly show Barely shows
his/ her drawing his/ her drawing in his/ her originality in his or originality in his or
through visual and through visual and drawing through her drawing but her drawing.
communicative communicative visual and can visualize
meaning of design meaning are nearly communicative creative design
are highly visible. visible meaning are
visible

9
Activity 2
Direction: Identify the elements and principles applied in lay-outing a digital poster. Choose
the correct answer inside the box and write the letter of your answer in a
separate sheet of paper.

A. Proportion B. Texture C. Emphasis

B. Form E. balance F. Variety

_______1. The visual weight of objects, texture, colors, and space is evenly/equally
distributed on the screen. Balance also refers to the arrangement of the
design elements and keep a coherent visual pattern.
_______2. It can be cube, a pyramid and s sphere. Form is created by design elements;
shape, tone, line and point.
_______3. represents the surface. It can be rough or smooth.
_______4. It is the expression that gives impressiveness or importance of the poster that
will attract the viewer’s attention like the color.
_______5.creating a sense of unity in the screen.

Activity 3
Direction: Create your own advertisement/commercial poster by applying your skills in lay-
outing. It can be in a form of digital or manual art. Do it in a bondpaper using this
rubric.
Note:
 For those using digital art it is highly recommended to use GIMP, Microsoft Paint and Photo Editor and
must be printed and be submitted to the teacher.
 To those who don’t have any gadgets you can make a manual art using bondpaper or cartolina.
RUBRIC
Criteria 5 stars 4 stars 3 stars 2 stars 1 star

Design apply design apply design apply design apply design barely apply
elements elements elements elements design
(shapes and (shapes and (shapes and (shapes and elements
colors) and colors) and colors) and colors) and (shapes
principle principle principle principle and colors)
(emphasis) (emphasis) (emphasis) with (emphasis) and
with excellent with good fair skill but had some principle
skill skill difficulty (emphasis)

Creativity show show good show fair show signs of barely show
excellent attention to attention to imagination imagination
attention to detail; the detail; in some parts in the
detail; the ideas/materia imaginative of the posters posters
ideas/materia ls/ methods touches are
ls/ methods are effective scattered
are highly throughout the
effective posters

10
 Reflection

Directions: Complete the 3-2-1 Chart about your discoveries in digital painting and
graphic designing. Write your answers on a separate sheet of paper.

Posttest

11
 Posttest
1. Who is the greatest impressionist that paints ‘Starry Night’?
A. David Villegas
B. Michael Angelo
C. Vincent Van Gogh
D. Leonardo da Vinci

2. What do you call to an element of the painting tool that allows you to select a brush
shape and also the thickness in pixels?
C. brush tool C. navigation control
D. menu button D. pointer coordinates

3. Which of the following does not belong to the group of element in lay-outing a digital
poster?
C. shape C. tone
D. texture D. variety

4. How are you going to start making a digital poster?

1. by Inserting C. by retrieving
2. by opening GIMP D. by printing

5. Which of the following do not belong to the group of principles applied in layouting of
a digital poster?
C. balance C. form
D. emphasis D. pattern

6. What does GIMP stands for

A. Graphic Manipulation Program
B. GNU Image Manipulation Program
C. Gradual Image Manipulation Program
D. Gradient Image Manipulation Program

7. Why do we need to have an advertisement or commercial poster?

A. for fun
B. for additional expenses
C. just for nothing
D. to spread messages for a wide audience

8. What tool must be used in moving layers, selections and other objects?
A. text tool C. eraser tool
B. move Tool D. crop Tool

9. What do you call to the process of painting on tablet and creative ability on a
computer.
C. Digital Painting C. Photography
D. Sculpturing D. Wood crafting

10. What is the final or last step in making a digital painting?

C. Creating virtual brushstroke C. printing the complete paintings
D. Inserting images D. Working in layers

12
 13
Pretest Activity 1 Activity 2
1. A
2. B 1. E
3. C Answer may 2. D
4. A vary 3. B
5. D 4. C
6. C 5. A
7. B
8. C
9. D
10. B
Activity 3 Reflection Posttest
1. C
2. A
Answer may Answer may 3. D
vary vary 4. B
5. C
6. B
7. D
8. B
9. A
10. C
Answers Key
 References
Books:
Quinitio, L. B., Cipriano, E. V., Buhain, E. P., Brioso, J. H., Lacia, D., Alonzo, A. A., and
Solamo, G. A. 2016.The 21st Century MAPEH in Action. Rex Bookstore: Manila,Philippines
Websites:
https://en.wikipedia.org/wiki/Digital_painting
https://mymodernmet.com/starry-night-van-gogh/
https://www.vincentvangogh.org/biography.jsp
https://useum.org/artwork/Four-Sunflowers-Gone-to-Seed-Vincent-van-Gogh-18...
https://www.bexdiye.com/gimp-online/
https://www.gimp.org/about/introduction.html
https://www.wikihow.com/Make-Digital-Art
https://www.merriam-webster.com/dictionary/layout
https://www.toptal.com/designers/ui/principles-of
design#:~:text=The%20elements%2C%20or%20principles%2C%20of,
and%20optimizes%20the%20user%20experience.
http://www.extension.iastate.edu/boone/kidsteens.htm

Published by the Department of Education, Caraga Region

Schools Division Office of Surigao City
Schools Division Superintendent: Karen L. Galanida
Assistant Schools Division Superintendent: Florence E. Almaden.

Development Team of the Self-Learning Module (SLM)

Writers : Clarissa Joy D. Sequihod

Editor : Wilma L. Petallo

Evaluators : Tessie C. Dolores, Juris J. Erno, Hazel E. Jabay, Vivian C.

Abian, Cheryll Jane G. Pongcol, Junrey E. Lopez,
Maria Jessa E. Manlimos

Management Team : Karen L. Galanida

Florence E. Almaden
Carlo P. Tantoy
Elizabeth S. Larase
Tessie C. Dolores

Printed in the Philippines by the Schools Division Office of Surigao City

Office Address : M. Ortiz Street, Barangay Washington
: Surigao City, Surigao del Norte, Philippines
Telephone : (086) 826-1268; (086) 826-3075; (086) 826-8931
E-mail Address : surigao.city@deped.gov.ph

14