Empowerment Technologies for Senior High School Applied Track Subject

1. Prepared by: Mr. Teodoro R. Llanes IIEMPOWERMENT TECHNOLOGIES
IMAGING AND DESIGN
FOR THE ONLINE
ENVIRONMENT
Prepared by: Mr. Teodoro R. Llanes IIEMPOWERMENT TECHNOLOGIES

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

3. *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.
3

4. *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.
4

5. *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
5

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

7. *Information & Images taken from various sites on the internet and is under OER Commons.
EXAMPLES OF GRAPHICS:
7
❑ Line Art ❑ Graphs

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

9. *Information & Images taken from various sites on the internet and is under OER Commons.
EXAMPLES OF GRAPHICS:
❑ Symbols
9
❑ Geometric Designs

10. *Information & Images taken from various sites on the internet and is under OER Commons.
EXAMPLES OF GRAPHICS:
❑ Maps
10
❑ Computer Graphics

11. *Information & Images taken from various sites on the internet and is under OER Commons.
EXAMPLES OF GRAPHICS:
❑ Engineering drawings, or other images
11

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

13. *Information & Images taken from various sites on the internet and is under OER Commons.
ONLINE IMAGE FILE FORMAT
1. Joint Photographic Experts Group (JPEG) – does not
support transparency and animation (.jpeg or jpg)
13

14. *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)
14

15. *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)
15

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

17. *Information & Images taken from various sites on the internet and is under OER Commons.
LAYOUT
Layout – is part of
graphic design that
deals in the
arrangement of
visual elements on a
page.
17

18. *Information & Images taken from various sites on the internet and is under OER Commons.
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
1. Balance. The visual
weight of objects,
texture, colors, and
space is evenly
distributed on the
screen.
18dm | DesignMantic

19. *Information & Images taken from various sites on the internet and is under OER Commons.
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
2. Emphasis. An area in
the design that may
appear different in size,
texture, shape or color
to attract the viewer’s
attention.
19dm | DesignMantic

20. *Information & Images taken from various sites on the internet and is under OER Commons.
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
3. Movement.
Visual elements
guide the viewer’s
eyes around the
screen.
20dm | DesignMantic

21. *Information & Images taken from various sites on the internet and is under OER Commons.
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
4. Pattern. Builds
course. It builds
familiarity and
organizes design
for trouble-free
viewing.
21dm | DesignMantic

22. *Information & Images taken from various sites on the internet and is under OER Commons.
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
5. Repetition. makes
design aware. It brings
consistency and flow to
the design.
22dm | DesignMantic

23. *Information & Images taken from various sites on the internet and is under OER Commons.
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
6. Proportion.
Conveys stability. It
involves scaling of
various elements to
create a coherent
design.
23dm | DesignMantic

24. *Information & Images taken from various sites on the internet and is under OER Commons.
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
7. Harmony. Brings
elements closer. It
utilizes familiar traits
of design elements
and puts them into
focus.
24dm | DesignMantic

25. *Information & Images taken from various sites on the internet and is under OER Commons.
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
8. Contrast. Addresses
conflict. It highlights
the difference and puts
an emphasis to what is
important
25dm | DesignMantic

26. *Information & Images taken from various sites on the internet and is under OER Commons.
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
9. Variety. Reaps
attention. It adds flavor
to the design, making it
more interesting and
engaging.
26dm | DesignMantic

27. INFOGRAPHICS
Let’s start with the first set of slides
27
3

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

29. *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
29

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

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

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

33. *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.
33

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

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

36. IMAGE PRINCIPLES,
TECNIQUES & HOSTING
Image manipulation techniques,
principles and hosting sites.
36
4

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

38. *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.
38

39. *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.
39

40. *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.
40

41. *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)
41

42. *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.
42

43. *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.
43

44. *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.
44

45. *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.
45

46. *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.
46

47. *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.
47

48. *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.
48

49. *Information & Images taken from various sites on the internet and is under OER Commons.
IMAGE HOSTING WEBSITES:
❑ Google+ Photos
❑ Flickr
❑ Smugmug
❑ Imgur
❑ 500px
❑ Photobucket
❑ Amazon Prime Photos
❑ DropBox
❑ Chevereto
❑ Imageshack
49

50. *Information & Images taken from various sites on the internet and is under OER Commons.
▰ 1. Information and Communication
Technology Effects in Philippines
▰ 2. Online Safety, Security, Ethics and
Etiquette
▰ 3. Microsoft Office (Word, PowerPoint, Excel)
▰ 4. Creative Commons Rights / Copyright Law
▰ 5. Google Tools
50