Grade Level: 11 WEEK: 6
Subject: Empowerment Technology- Information and Communication Technology
LESSON: 1
Topic: Imaging and Design for Online Environment
OBJECTIVES: At the end of this lesson, the students should be able to:
1. understand the basic principles of graphics and layout;
2. create a simple infographic using web tools;
3. understand and use several file formats used on the web; and
4. easily manipulate images using a simple image editor;
LESSON PROPER
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT
1. Balance. The visual weight of objects, 2. Pattern,
texture, colors, and space is evenly Repetition, and
Rhythm. These
are the repeating
visual element on
an image or layout
to create unity in
the layout or image. Rhythm is achieved
when visual elements create a sense of
distributed on the screen. organized movement.
3. Movement. 4. Emphasis. An
Visual elements area in the design
guide the viewer’s that may appear
eyes around the different in size,
screen. texture, shape or
color to attract the
viewer’s attention.
5. Proportion. 6. Variety. This uses
Visual elements several design
create a sense elements to draw
of unity where a viewer’s
they relate well attention.
with one
another.
INFOGRAPHICS
Information graphics or infographics are used to represent information, statistical
data, or knowledge in a graphical manner usually done in a creative way to attract
the viewer’s attention
COMMON FILE FORMATS
JPEG - JOINT PHOTOGRAPHIC EXPERTS GROUP
GIF - GRAPHICS INTERCHANGE FORMAT
BMP -BITMAP IMAGE FILE
TIFF - TAGGED IMAGE FILE FORMAT
PNG - PORTABLE NETWORK GRAPHIC
*When inserting text to a web page, you can simply copy a text to your html
editor, or you can upload it on a website as a PDF file. Most browsers support
“add-ons” so that you can open PDF files without leaving the browser.
PRINCIPLES AND BASIC TECHNIQUES OF IMAGE MANIPULATION
1. CROPPING- a process of removing 2. COLOR BALANCE- this command will
unwanted parts of the image focusing only allow you to make changes in the mixture
on the subject. Remember the Rule of of colors in an image.
Thirds to organize image composition. https://images.app.goo.gl/
https://images.app.goo.gl/ UP4kV87sJJvX3CtT9
XEiAHGi8Spb1kAi3A
3. ADJUSTING THE BRIGHTNESS AND 4. COMPRESSION AND RESIZING-
CONTRAST- this is the most basic important aspect of image manipulation.
technique when adjusting the image tone Images to be uploaded on the web must be
(highlights, shadow, and midtones. of the standard resolution of 72 dpi (dots
https://images.app.goo.gl/ per inch) to maintain file size of 30-50kb.
h1npgzLcUHkUTbCd6 https://images.app.goo.gl/
RTg6BE1ebo8WCUjN9
5. COLOR BLENDING- use the different 6. COMBINING MULTIPLE IMAGE.
effects buttons available in the different Compositions must be planned and
image editing software. You can combine conceptualized first so that you will be able
color to give you more dynamic image to render the best image and message
result. possible.
https://www.youtube.com/watch?v=DT- https://www.youtube.com/watch?
4wbjFYHQ v=NnpUpR_4FoY
