Design and manipulation

1. Imaging and Design for
Online Environment
APLD04 - Empowerment Technology

2. Topics:
• Basic principles of graphics and layout
• Creating infographics
• Online file formats for images
• Principles and basic techniques of image
manipulation
• Uploading, sharing, and image hosting

3. At the end of this lesson, the students should be
able to:
• understand the basic principles of graphics and
layout;
• create a simple infographic using web tools;
• understand and use several file formats used on the
web;

4. At the end of this lesson, the students should be
able to:
• easily manipulate images using a simple image
editor;
• and upload and share images using web tools.

5. What is an image?
A representation of the
external form of a person
or thing in art.

6. What is an image?
2-dimensional, such as a
photograph or screen
display.

7. What is an image?
3-dimensional, such as a statue or hologram.

8. What is an image?
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.

9. Graphics
These are visual images or
designs on some surface, such
as a wall, canvas, screen, paper,
or stone to inform, illustrate, or
entertain.

10. Examples of Graphics:
Photographs Drawings

11. Examples of Graphics:
Line Art Graphs

12. Examples of Graphics:
Typography Numbers

13. Examples of Graphics:
Symbols  Geometric Designs

14. Examples of Graphics:
Maps  Computer Graphics

15. Examples of Graphics:
Engineering drawings, or other images

16. IMAGE FILE FORMAT

17. IMAGE FILE FORMATS

18. IMAGE FILE FORMATS
JPEG
GIF
PNG

19. JPEG
Joint Photographic Experts Group (JPEG)
- does not support transparency and animation.

20. JPEG

21. IMAGE FILE FORMATS
JPEG
GIF
PNG

22. GIF
Graphics Interchange Format (GIF)
- supports transparency and animation.

23. GIF

24. GIF

25. IMAGE FILE FORMATS
JPEG
GIF
PNG

26. PNG
Portable Network Group (PNG)
- supports transparency but not animation.

27. PNG

28. PNG

29. What is Layout?
A part of graphic design
that deals in the
arrangement of visual
elements on a page

30. Layout

31. Basic Principles of
Graphics and Layout

32. Principles of Graphics and Layout

33. Principles of
Graphics and
Layout
Balance
Pattern
Harmony
Emphasis
Repetition
Contrast
Movement
Proportion
Variety

34. Balance
The visual weight of objects, texture, colors, and space
is evenly distributed on the screen.
Symmetrical balance uses the same characteristics.
Asymmetrical uses different but equally weighted features.

35. Balance
Symmetrical Asymmetrical

36. Symmetrical Balance

37. Symmetrical Balance

38. Asymmetrical Balance

39. Principles of
Graphics and
Layout
Balance
Pattern
Harmony
Emphasis
Repetition
Contrast
Movement
Proportion
Variety

40. Emphasis
An area in the design that may appear different in size,
texture, shape or color to attract the viewer’s attention.,

41. Emphasis

42. Principles of
Graphics and
Layout
Balance
Pattern
Harmony
Emphasis
Repetition
Contrast
Movement
Proportion
Variety

43. Movement
Visual elements guide the viewer’s eyes around the
screen.

44. Movement

45. Movement

46. Principles of
Graphics and
Layout
Balance
Pattern
Harmony
Emphasis
Repetition
Contrast
Movement
Proportion
Variety

47. Repetition
Makes design aware. It brings consistency and flow to
the design

48. Repetition

49. Principles of
Graphics and
Layout
Balance
Pattern
Harmony
Emphasis
Repetition
Contrast
Movement
Proportion
Variety

50. Pattern
Builds course. It builds familiarity and organizes design
for trouble-free viewing.
repetition of specific visual elements such as a single
unit or multitude of forms.

51. Pattern

52. Principles of
Graphics and
Layout
Balance
Pattern
Harmony
Emphasis
Repetition
Contrast
Movement
Proportion
Variety

53. Harmony
Brings elements closer. It utilizes familiar traits of
design elements and puts them into focus.

54. Harmony

55. Harmony

56. Principles of
Graphics and
Layout
Balance
Pattern
Harmony
Emphasis
Repetition
Contrast
Movement
Proportion
Variety

57. Contrast
Addresses conflict. It highlights the difference and puts
an emphasis on what is important.

58. Contrast

59. Contrast

60. Principles of
Graphics and
Layout
Balance
Pattern
Harmony
Emphasis
Repetition
Contrast
Movement
Proportion
Variety

61. Proportion
Conveys stability. It involves various elements to create
a coherent design.

62. Proportion

63. Principles of
Graphics and
Layout
Balance
Pattern
Harmony
Emphasis
Repetition
Contrast
Movement
Proportion
Variety

64. Variety
Reaps attention. It adds flavor to the design, making it
more interesting and engaging.

65. Variety

66. Principles of
Graphics and
Layout
Balance
Pattern
Harmony
Emphasis
Repetition
Contrast
Movement
Proportion
Variety