EMPOWERMENT TECHNOLOGIES –

WEEK 7

1
*Information & Images taken from various sites on the internet and is under OER Commons.
 REVIEW FROM PREVIOUS TOPIC

REVIEW

2
*Information & Images taken from various sites on the internet and is under OER Commons.
 BASIC PRINCIPLES OF GRAPHICS AND
LAYOUT:
1. Balance
2. Emphasis
3. Movement
4. Pattern
REVIEW
5. Repetition
6. Proportion
7. Harmony
8. Contrast
9. Variety
dm | DesignMantic 3
*Information & Images taken from various sites on the internet and is under OER Commons.
 GUESS THE WORD

L RV JI A V
SUALE I S U

4
*Information & Images taken from various sites on the internet and is under OER Commons.
 GUESS THE WORD

GR A V E
GRAPHICSP U C H I S

5
*Information & Images taken from various sites on the internet and is under OER Commons.
 GUESS THE WORD

G EDT EI K E
SIGND S A N

6
*Information & Images taken from various sites on the internet and is under OER Commons.
 GUESS THE WORD

K COOR LEOC RO L

7
*Information & Images taken from various sites on the internet and is under OER Commons.
 IMAGING AND
DESIGN FOR THE
ONLINE
ENVIRONMENT
Prepared by: Mr. Teodoro R.
EMPOWERMENT TECHNOLOGIES Llanes II
 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.

9
*Information & Images taken from various sites on the internet and is under OER Commons.
 WHAT IS AN IMAGE?

An Image is a
representation of
the external form of
a person or thing in
art.

10
*Information & Images taken from various sites on the internet and is under OER Commons.
 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. They may be captured by
optical devices – such as cameras,
mirrors, lenses, telescopes,
microscopes, etc. and natural objects
and phenomena, such as the human eye
or water.
11
*Information & Images taken from various sites on the internet and is under OER Commons.
 GRAPHICS:

Graphics – are visual

images or designs on
some surface, such as a
wall, canvas, screen,
paper, or stone to inform,
illustrate, or entertain

12
*Information & Images taken from various sites on the internet and is under OER Commons.
 EXAMPLES OF GRAPHICS:

 Photographs  Drawings

13
*Information & Images taken from various sites on the internet and is under OER Commons.
 EXAMPLES OF GRAPHICS:

 Line Art  Graphs

14
*Information & Images taken from various sites on the internet and is under OER Commons.
 EXAMPLES OF GRAPHICS:

 Typography  Numbers

15
*Information & Images taken from various sites on the internet and is under OER Commons.
 EXAMPLES OF GRAPHICS:

 Symbols  Geometric Designs

16
*Information & Images taken from various sites on the internet and is under OER Commons.
 EXAMPLES OF GRAPHICS:

 Computer
 Maps
Graphics

17
*Information & Images taken from various sites on the internet and is under OER Commons.
 EXAMPLES OF GRAPHICS:

 Engineering drawings, or other images

18
*Information & Images taken from various sites on the internet and is under OER Commons.
1
IMAGE FORMAT
Different types of image format on
the computer.
19
 ONLINE IMAGE FILE FORMAT

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

support transparency and animation (.jpeg or jpg)

20
*Information & Images taken from various sites on the internet and is under OER Commons.
 ONLINE IMAGE FILE FORMAT

2. Graphics Interchange Format (GIF) – supports

transparency and animation (.gif)

21
*Information & Images taken from various sites on the internet and is under OER Commons.
 ONLINE IMAGE FILE FORMAT

3. Portable Networks Graphics (PNG) – supports

transparency but not in animation (.png)

22
*Information & Images taken from various sites on the internet and is under OER Commons.
2
LAYOUT
Definition and Principles of Layout &
Graphics.
23
 LAYOUT

Layout – is part of
graphic design that
deals in the
arrangement of
visual elements on a
page.

24
*Information & Images taken from various sites on the internet and is under OER Commons.
3
INFOGRAPHICS
Let’s start with the first set of slides

36
 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.
37
*Information & Images taken from various sites on the internet and is under OER Commons.
 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
38
*Information & Images taken from various sites on the internet and is under OER Commons.
 INFOGRAPHIC EXAMPLE

39
*Information & Images taken from various sites on the internet and is under OER Commons.
 INFOGRAPHIC EXAMPLE

40
*Information & Images taken from various sites on the internet and is under OER Commons.
 INFOGRAPHIC EXAMPLE

41
*Information & Images taken from various sites on the internet and is under OER Commons.
 INFOGRAPHIC VIDEO

Infographic Video –
is a visual
representation of data
and knowledge in the
form of an
online video.

42
*Information & Images taken from various sites on the internet and is under OER Commons.
 INFOGRAPHIC VIDEO EXAMPLE

https://goo.gl/srcHyh 43
*Information & Images taken from various sites on the internet and is under OER Commons.
 INFOGRAPHIC VIDEO EXAMPLE

https://goo.gl/ 44
*Information & Images taken from various sites on the internet and is under OER Commons. DJzSCv
4
IMAGE PRINCIPLES,
TECNIQUES &
HOSTING
Image manipulation techniques,
principles and hosting sites.
45
 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.
46
*Information & Images taken from various sites on the internet and is under OER Commons.
 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.
47
*Information & Images taken from various sites on the internet and is under OER Commons.
 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.

48
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

1. Cropping. Cutting
parts away to remove
distracting or irrelevant
elements.

49
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

2. Color Balance.
The ambience and
the tone of light of
the picture (ex.
Warm or cool light)

50
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

3. Brightness and
Contrast. One of the
most basic techniques in
image editing, making
the image darker or
lighter.

51
*Information & Images taken from various sites on the internet and is under OER Commons.
 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.

52
*Information & Images taken from various sites on the internet and is under OER Commons.
 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.

53
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

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

54
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

7. Changing the
Background. Adding
background to make
your image stand out.

55
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

8. Removing the
Color. Removing
certain colors in your
image or desaturating
the color of the
image.

56
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

9. Combining Text,
Graphics and Image.
Adding multiple
elements in your layout.

57
*Information & Images taken from various sites on the internet and is under OER Commons.
 GROUP ACTIVITY

Identify what
MANIPULATION TECHNIQUE/S
is done:

58
*Information & Images taken from various sites on the internet and is under OER Commons.
 GROUP ACTIVITY

Objective:
1.Each group will put their understanding from the
discussion.
2.The students will collaborate and give their
answers to the given problem.
3.Each group will write their answers on the given
bond paper and will wait for the signal of the
teacher when to raise their answers.
4.Every group who got the correct answer will get 2
points.
59
*Information & Images taken from various sites on the internet and is under OER Commons.
 GROUP ACTIVITY

60
*Information & Images taken from various sites on the internet and is under OER Commons.
 GROUP ACTIVITY

61
*Information & Images taken from various sites on the internet and is under OER Commons.
 GROUP ACTIVITY

62
*Information & Images taken from various sites on the internet and is under OER Commons.
 GROUP ACTIVITY

63
*Information & Images taken from various sites on the internet and is under OER Commons.
 GROUP ACTIVITY

64
*Information & Images taken from various sites on the internet and is under OER Commons.
 GROUP ACTIVITY

65
*Information & Images taken from various sites on the internet and is under OER Commons.
 GROUP ACTIVITY

66
*Information & Images taken from various sites on the internet and is under OER Commons.
 GROUP ACTIVITY

67
*Information & Images taken from various sites on the internet and is under OER Commons.
 GROUP ACTIVITY

68
*Information & Images taken from various sites on the internet and is under OER Commons.
 GROUP ACTIVITY

69
*Information & Images taken from various sites on the internet and is under OER Commons.
 71
*Information & Images taken from various sites on the internet and is under OER Commons.
 AND

THANK YOU!

72
*Information & Images taken from various sites on the internet and is under OER Commons.