Scribd
Upload
26 views13 pages

Week 4

This document provides a lesson plan on imaging and design for online environments. It covers basic principles of graphics and layout, including color, balance, proximity, alignment, repetition, and contrast. It then discusses principles and techniques of image manipulation, such as cropping, color balance, brightness/contrast, filters, changing backgrounds, removing color, and combining elements. Students are asked to apply these concepts to evaluate websites and create an original or derivative ICT content to communicate a visual message related to DEPED's mission statement.

Uploaded by

John Denver De la Cruz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views13 pages

Week 4

This document provides a lesson plan on imaging and design for online environments. It covers basic principles of graphics and layout, including color, balance, proximity, alignment, repetition, and contrast. It then discusses principles and techniques of image manipulation, such as cropping, color balance, brightness/contrast, filters, changing backgrounds, removing color, and combining elements. Students are asked to apply these concepts to evaluate websites and create an original or derivative ICT content to communicate a visual message related to DEPED's mission statement.

Uploaded by

John Denver De la Cruz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Modified Self-Learning Module SHS

Applied Subject

Empowerment Technologies
Third Quarter, Module 4

(Imaging and Design for


Online Environment)

EMPOWERMENT
TECHNOLOGIES

Karen R. Royo

España National High School


LESSON 1: BASIC PRINCIPLES OF
GRAPHICS AND LAYOUT

I. Most Essential Learning Competency


Evaluate existing websites and online resources
based on the principles of layout, graphic, and
visual message design.

II. CONTENT
Basic Principles of Graphics and Layout
1. Color- is used for emphasis or may elicit emotions from viewers.
Determined by its hue (name of color), intensity (purity of the hue), and
value (lightness or darkness of hue).

HUE TINT TONE SHADE


2. Balance- It means the equal distribution of weight in terms of the
visual weight of objects, texture, colors and space. Balance is crucial to
the success of design. There are two kinds of balance:

 Symmetrical Balance. The visual weight is distributed


evenly, either vertically or horizontally. You can draw a line
straight through the middle of the design, and the visual
balance would be evenly distributed.
 Asymmetrical Balance. There is an artistic and different
intensity on one side of the page.

3. PROXIMITY is simply the process of ensuring related design elements are


placed together. Any unrelated items should be spaced apart. Close
proximity indicates that items are connected or have a relationship to each
other and become one visual unit which helps to organize or give structure
to a layout (Smith, 2017). White Space is the art of nothing. It is also known
as the negative space. It is the portion of a page left unmarked: margins,
gutters, and space between columns, lines of type, graphics, figures, objects
drawn or depicted.

Image source: http://m.blog.hu/b1/b1foto/image/petadoption_feat.jpg


4. ALIGNMENT is simply the way visual elements are arranged so that they
line up in some way. There are two basic kinds of alignment; edge and
center.
 Edge alignment determines the placement of elements in relation
to the edge of the page or canvas. This can mean the elements are
aligned to the left side or right side, but it can also mean they are
aligned to the top or bottom of the page, so long as it uses an edge
to organize everything.

 Center alignment aligns all the elements so that an invisible, central


line on the page will always be in the center of the elements.

5. REPETITION. The process of repeating elements throughout a design to


give a unified look. Repetition goes with consistency of your design on
font, font size, patterns, and colors.
6. CONTRAST is the divergence of opposing elements (opposite colors on the
color wheel, or value light / dark, or direction – horizontal / vertical).
Contrast allows us to emphasize or highlight key elements in your
design.
Practice Exercise:
Directions: Applying your knowledge of the different basic principles of
graphics and layout, come up with your observations on the sample website
given below. Your observations must focus on how the said website was
created using the different graphics and layout. Your answers for this
activity will no longer be submitted to the Focal Person assigned in your
Sitio.
1. What can you say on the overall layout of the website given above?
Your answer:
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

2. Are the basic principles of graphics and layout effectively applied? If


not, if you were to redesign it, what principles of graphics and layout
are you going to use? How and why?
Your answer:
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________

Key to Practice Exercise:


1. Answers may vary.
2. Answers may vary.
LESSON 2: PRINCIPLES AND
BASIC TECHNIQUES OF IMAGE
MANIPULATION

I. Most Essential Learning Competency


Use image manipulation techniques on existing images to
change or enhance their current state to communicate a
message for a specific purpose.

II. CONTENT
What is Image Manipulation?
Image manipulation- refers to a process of bringing changes to
a digitized image for transforming it to a desired image. The
changes are made possible by resorting to image processing.
Image manipulation is utilized to create magazine covers and
albums from photographs.
Principles and Basic Techniques of Image Manipulation

1. CROPPING. Cutting parts away to remove distracting or irrelevant


elements.
2. COLOR BALANCE. The ambience and the tone of light of the picture
(ex. Warm or cool light).

3. BRIGHTNESS AND CONTRAST. One of the most basic techniques


in image editing, making the image darker or lighter.
4. FILTERS. Making the image look sketched, grainy, classic black and
white or even let it have neon colors. This gives your image a twist from
its original look.

5. CHANGING THE BACKGROUND. Adding background to make your


image stand out.
6. REMOVING THE COLOR. Removing certain colors in your image or
desaturating the color of the image.

7. COMBINING TEXT, GRAPHICS AND IMAGE. Adding multiple


elements in your layout.
LESSON 3: CREATE AN ORIGINAL
OR DERIVATIVE ICT CONTENT

I. Most Essential Learning Competency


Create an original or derivative ICT content to effectively
communicate a visual message in an online environment
related to specific professional track. (Academic Track)
II. CONTENT:
DEPED Mission Statement:
To protect and promote the right of every Filipino to quality, equitable, culture-
based, and complete basic education where:

Students learn in a child-friendly, gender-sensitive, safe, and motivating


environment.
Teachers facilitate learning and constantly nurture every learner.
Administrators and staff, as stewards of the institution, ensure an enabling
and supportive environment for effective learning to happen.
Family, community, and other stakeholders are actively engaged and share
responsibility for developing life-long learners.

Directions:
Based on the mission statement of the Department of Education, come
up with a slogan, message, or call to action that will utilize the basic principles
of graphics and layout and also applying the principles and basic techniques
of image manipulation that we have discussed. You are going to print your
output in a one- short bond paper. Your output will be submitted to the Focal
Person assigned in your Sitio.

REFERENCES:

 Empowerment Technologies Student Reader. First Edition 2016


 Empowerment Technologies for the Academic Track. Teacher’s Guide 2016
 Empowerment Technology for Senior High School Alternative Delivery Mode
Quarter 1 – Module 2: Productivity Tools First Edition, 2019

You might also like