IMAGING AND DESIGN

FOR THE ONLINE

ENVIRONMENT
EMPOWERMENT TECHNOLOGIES
I CAN

❑ I can evaluate existing websites and online resources

based on the principles of layout, graphic, and visual
message design.
❑ I can use image manipulation techniques on existing
images to change or enhance their current state to
communicate a message for a specific purpose.

2
 WHAT IS AN IMAGE?

An Image is a
representation of
the external form of
a person or thing in
art.
3
 WHAT IS AN IMAGE?

Images may be 2-
dimensional, such as a
photograph or screen
display, or 3-
dimensional, such as a
statue or hologram. 4
 GRAPHICS:

Graphics – are visual

images or designs on
some surface, such as a
wall, screen, paper, to
inform, illustrate, or
entertain 5
EXAMPLES OF GRAPHICS:

❑ Photographs ❑ Drawings

6
EXAMPLES OF GRAPHICS:

❑ Line Art ❑ Graphs

7
EXAMPLES OF GRAPHICS:

❑ Typography ❑ Numbers

8
EXAMPLES OF GRAPHICS:

❑ Symbols ❑ Geometric Designs

9
EXAMPLES OF GRAPHICS:

❑ Maps ❑ Computer Graphics

10
EXAMPLES OF GRAPHICS:

❑ Engineering drawings, or other images

11
1
IMAGE FORMAT
Different types of image format on the
computer.
12
 ONLINE IMAGE FILE FORMAT

1. Joint Photographic Experts Group (JPEG) – does not

support transparency and animation (.jpeg or jpg)

13
 ONLINE IMAGE FILE FORMAT

2. Graphics Interchange Format (GIF) – supports transparency

and animation (.gif)

14
 ONLINE IMAGE FILE FORMAT

3. Portable Networks Graphics (PNG) – supports transparency

but not in animation (.png)

15
2
LAYOUT
Definition and Principles of Layout &
Graphics.
16
 LAYOUT

Layout – is part of
graphic design that
deals in the
arrangement of
visual elements on
a page.
17
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
 Basic Principles
in Graphics and Layout
Layout:
It is the process of planning and
arranging graphics or text in a page or
book.
A good layout should have a balanced
make up and alignment of elements.
 Basic Principles
in Graphics and Layout
1. Symmetrical:
There should be equal
weights or elements on both
sides of the page.
 Photo by
Alan
McFadyen
 Basic Principles
in Graphics and Layout
2. Asymmetrical:
It may be asymmetrical
when there is an artistic and
different intensity on one side
of the page.
 Basic Principles
in Graphics and Layout
3. Text - The text type should be:
• Legible
• Appropriate font face
• Left justified, Right justified, or
centered
• The flow of text should be easy to read.
Legible?
Appropriate?
Alignment
Flow of Text
 Basic Principles
in Graphics and Layout
4. Image - The image should be:
• Proportionate
• Sharp in color
• With high resolution
• With appropriate captions
Which one is….
2

3
1
PROPORTIONATE?
Which one is….

3
1 2
PROPORTIONATE?
 Basic Principles
in Graphics and Layout
5. Proximity and Harmony:
The elements should be close together
and scattered and arranged apart from
each other. Elements should not be
cluttered and not compete with each
other.
 Basic Principles
in Graphics and Layout

6. Consistency:
There should be uniformity of
theme on each page.
 Basic Principles
in Graphics and Layout
7. Color and Shape:
Use color to create interest by providing
variety in the design (color contrast and
shapes).
 Basic Principles
in Graphics and Layout
8. Emphasis:
There should be one point of interest in a
page. The elements to be emphasized should
have a different size, color, shape, or
background.
3
INFOGRAPHICS
Let’s start with the first set of slides

60
 INFOGRAPHICS

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. 61
 5 PRINCIPLES IN MAKING AN EFFECTIVE
INFOGRAPHIC DESIGN:

1. Be Unique
2. Make It Simple
3. Be Creative and
Bold
4. Less is More
5. The Importance of
Getting it Across
62
INFOGRAPHIC EXAMPLE

63
INFOGRAPHIC EXAMPLE

64
INFOGRAPHIC EXAMPLE

65
 DIGITAL INFOGRAPPHIC DESIGN

#infographicstask (digital)
Using the Principles in Graphics
and Layout Create an
Infographic in Celebration of
World Teachers’ Day 66
 Task: Hand-Drawn Infographic

▰ Objective: Present information through a visual format.

▰ Activity: Design a hand-drawn infographic that
effectively communicates data or details about the
upcoming first-quarter card distribution event at
Malvar Senior High School for School Year 2024-
2025. (use A4 size bond paper)
67
 RUBRICS
CATEGORY
The topic and the Topics and Topics is given Topic and/or
messages of the ideas are clear. but main ideas ideas are absent
infographic is clear and (8) are unclear or or
Graphics easily understood: lacking. very unclear.
Intended to inform or (6) (4)
convince the viewer.
(10)
The graphics Most graphics Al graphics Graphics do not
used represent represent the relate to the relate
Relevance information information topic but do to the topic.
appropriately. (10) appropriately. not represent (4)
(8) appropriately.
(5)
 RUBRICS
CATEGORY
The Is attractive in Is Is
design/layout terms of design, acceptably distractingly
is neat, clear, layout and attractive messy,
Design/layout and neatness. though it unattractive
visually (10) may be a or very
appealing bit messy poorly
(15) (8) designed. (5)
Submission (10) On time (10) Late (2)
References (5) Citations (3) No citations
Provided (4) (2)
Total 50
 THE ELEMENTS OF GOOD GRAPHIC DESIGN

1. Line:
2. Shape:
3. Color:
4. Texture
5. Space
6. Typography
7. Scale/Proportion
8. Balance
9. Contrast
10. Harmony
 THE ELEMENTS OF GOOD GRAPHIC DESIGN

1. Line: Defines shapes, creates divisions, and guides

the viewer's eye.
2. Shape: Geometric or organic shapes add structure
and meaning to the design.
3. Color: Sets the mood and creates emphasis; color
choices should reflect the purpose and emotions
intended.
4. Texture: Adds depth and dimension, making
designs more engaging and realistic.
 THE ELEMENTS OF GOOD GRAPHIC DESIGN

5. Space: Refers to the arrangement of objects and

the distance between them, balancing the layout.
6. Typography: The choice of fonts and how they are
arranged greatly impacts readability and the overall
design feel.
7. Scale/Proportion: The relative size of design
elements affects hierarchy and focus.
 THE ELEMENTS OF GOOD GRAPHIC DESIGN

8. Balance: Ensures a design feels stable, which can

be symmetrical or asymmetrical.
9. Contrast: Enhances legibility and visual interest by
juxtaposing differing elements (light vs. dark, large vs.
small).
10. Harmony: Brings all elements together cohesively,
so they complement rather than clash.
4
IMAGE PRINCIPLES,
TECNIQUES & HOSTING
Image manipulation techniques,
principles and hosting sites.
74
 3 IMAGE MANIPULATION PRINCIPLES

1. Choose the right file format.

Try to make a real-life
photograph into GIF to see the
difference between PNG, GIF,
and JPEG. Knowing the
purpose is the key to finding
out the best file format. 75
 3 IMAGE MANIPULATION PRINCIPLES

2. Choose the right image size.

A camera with 12 megapixels
constitutes to a bigger image
size. Monitors have a
resolution limit, so even if you
have a million megapixels, it
will not display everything. 76
 3 IMAGE MANIPULATION PRINCIPLES

3. Caption it. Remember to

put a caption on images
whenever possible. If it is
not related to the web
page, then remove it.
77
 9 IMAGE MANIPULATION TECHNIQUES

1. Cropping. Cutting
parts away to remove
distracting or
irrelevant elements.
78
 9 IMAGE MANIPULATION TECHNIQUES

2. Color Balance. The

ambience and the
tone of light of the
picture (ex. Warm or
cool light) 79
 9 IMAGE MANIPULATION TECHNIQUES

3. Brightness and
Contrast. One of the
most basic techniques
in image editing,
making the image
darker or lighter. 80
 9 IMAGE MANIPULATION TECHNIQUES

4. Compression and
Resizing. The higher
the quality and the
larger the photo is,
the bigger the file
size of the picture is. 81
 9 IMAGE MANIPULATION TECHNIQUES

5. 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. 82
9 IMAGE MANIPULATION TECHNIQUES

6. Cloning. Copying or duplicating a part of an image.

83
 9 IMAGE MANIPULATION TECHNIQUES

7. Changing the
Background. Adding
background to make
your image stand
out. 84
 9 IMAGE MANIPULATION TECHNIQUES

8. Removing the
Color. Removing
certain colors in
your image or
desaturating the
color of the image. 85
 9 IMAGE MANIPULATION TECHNIQUES

9. Combining Text,
Graphics and Image.
Adding multiple
elements in your
layout. 86
 IMAGE MANIPULATION BEFORE AND AFTER

▰ Objective:
Demonstrate an understanding of image
manipulation techniques and principles by editing
an image and presenting a before-and-after
comparison.
87
 IMAGE MANIPULATION BEFORE AND AFTER

▰ Instructions:
1. Choose an Image:
1. Select an original image from your device. This could be a photo of a landscape, a person,
or an object.
2. Edit the Image:
1. Use a basic image editing tool (like Paint, Preview, or a mobile app).
2. Techniques to Apply:
1. Crop: Remove unnecessary parts of the image.
2. Adjust Brightness and Contrast: Enhance the visibility of the image.
3. Apply a Filter: Choose a simple filter effect (like grayscale or sepia). 88
 IMAGE MANIPULATION BEFORE AND AFTER

3. Create a Before-and-After Comparison:

1. Create a side-by-side image showing the original and the edited
version.
2. Label each image as "Before" and "After."
4. Present Your Work:
1. Share your before-and-after image with the class.
2. Explain the techniques you used and how they improved the image. 89
IMAGE MANIPULATION BEFORE AND AFTER

90