ET-Q2-L1-Graphic Design.Lesson Proper for Quarter 1

Oral communication is the process of verbally transmitting information and ideas from one individual or group to another. Oral communication can be either formal or informal. Examples of informal oral communication include: Face-to-face conversations. Telephone conversations.

1. IMAGING AND DESIGNING FOR ONLINE
ENVIRONMENT
E M P T E C H-L E S S O N 5

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

3. OBJECTIVES
Define computer graphics and layout;
Identify the basic principles of graphics, layout
and design;
Understand several file formats of image; and
Create a simple infographic using the principle of
graphics layout and design.

4. WHAT I KNOW
Direction: Choose the letter of the best answer.
1. This is achieved when all parts of a composition
appear to have equal weight and is stable.
a. Contrast c. Unity
b. Balance d. Focal Point

5. WHAT I KNOW
2. It is obtained by repeating colors and shapes in
all parts of a design.
a. Repetition c. Unity
b. Balance d. Focal Point
3. It creates the center of interest in a design.
a. Repetition c. Unity
b. Balance d. Emphasis

6. WHAT I KNOW
4. It is when lines, colors, or shapes are repeated
over and over in a planned way.
a. Repetition c. Unity
b. Balance d. Emphasis
5. It is when it catches the viewer’s attention.
Usually the artist will make one area stand out by
contrasting it with other areas. The area could be
different in size, color, texture, shape, etc.
a. Repetition c. Unity
b. Balance d. Emphasis

8. Computer Graphics
Principle of Graphics and Design
Image File Formats
Infographics

9. Computer Graphics

10. COMPUTER
GRAPHICS
▪visual representations of data made on a
computer
▪displayed on a computer screen or monitor
Single Image
Series of Image/
Video

11. Photograph
COMPUTER
GRAPHICS
Drawing
Movies

12. LAYOUT
▪arrangement of graphic elements on a
canvas.
▪“An effective graphics and layout contribute
to the efficiency of website.”
▪Principle of Graphics and Layout

13. PRINCIPLE
OF
GRAPHICS,
LAYOUT AND
DESIGN
▪to standardized image creation and
manipulation using any graphics software.
▪It will help you create layouts and design
web pages compliant with protocols.
Why do we need to apply the principle of graphics
layout and design?

14. Computer Graphics
Principle of Graphics and Design
Image File Formats
Infographics

15. Principle of Graphics and Layout

16. PRINCIPLE
OF
GRAPHICS,
LAYOUT AND
DESIGN
Movement
Unity Repetition
ContrastProximity
Balance
Emphasis

17. PRINCIPLE
OF
GRAPHICS,
LAYOUT AND
DESIGN
BalanceIt describes the placement of
elements of equal weight on the page. The three
types of balance are symmetrical, asymmetrical,
and radial.

18. PRINCIPLE
OF
GRAPHICS,
LAYOUT AND
DESIGN
MovementIt describes the flow of elements
on the page. Visual elements guide the viewers’
eyes around the page.

19. PRINCIPLE
OF
GRAPHICS,
LAYOUT AND
DESIGN
Unity the sense of oneness of the
elements that creates balance and harmony.

20. PRINCIPLE
OF
GRAPHICS,
LAYOUT AND
DESIGN
RepetitionIt describes the consistent
and balanced repetition of a design or element.

21. PRINCIPLE
OF
GRAPHICS,
LAYOUT AND
DESIGN
ProximityIt describes the organization and
relationship of the elements included in the
design.

22. PRINCIPLE
OF
GRAPHICS,
LAYOUT AND
DESIGN
Contrast–it is the combination of the
opposing characteristics of an element like color,
size, thickness, and among others. It allows
emphasis on key elements.

23. PRINCIPLE
OF
GRAPHICS,
LAYOUT AND
DESIGN
EmphasisAn area in the design that catches
viewer’s attention. The area may appear different
in size, color, texture or shape.

24. PRINCIPLE
OF
GRAPHICS,
LAYOUT AND
DESIGN
Movement
Unity Repetition
ContrastProximity
Balance
Emphasis

25. Computer Graphics
Principle of Graphics and Design
Image File Formats
Infographics

26. Image File Formats

27. IMAGE FILE
FORMATS
Raster Image File
built from pixels —tiny color squares
that, in great quantity, can form highly
detailed images such as photographs.
The more pixels an image has, the
higher quality it will be, and vice
versa. The number of pixels in an
image depends on the file type (for
example, JPEG, GIF, or PNG).

28. IMAGE FILE
FORMATS
Vector Image File
use mathematical equations, lines, and curves
with fixed points on a grid to produce an
image. There are no pixels in a vector file. A
vector file’s mathematical formulas capture
shape, border, and fill color to build an
image. Because the mathematical formula
recalibrates to any size, you can scale a
vector image up or down without impacting its
quality.

29. IMAGE FILE
FORMATS
Raster Image File
built from pixels —tiny color squares
that, in great quantity, can form highly
detailed images such as photographs.
The more pixels an image has, the
higher quality it will be, and vice
versa. The number of pixels in an
image depends on the file type (for
example, JPEG, GIF, or PNG).

30. IMAGE FILE
FORMATS
GIF
PNG
JPG

31. ▪Joint Photographic Experts Group
▪most popular image format used on the web.
▪are very ‘lossy’ files where much of the information
about the image is lost from original state to keep
the image file size small.
▪used mostly by photographers, artists, graphic
designers, medical imaging specialists, art
historians, and other groups because image quality
and color fidelity is important in the field.
IMAGE FILE
FORMATS
JPEG

32. ▪Graphics Interchange Format.
▪It is limited to the 8-bit palette with
only 256 colors.
▪best used for diagrams, cartoons, and logos which
use few colors and is the chosen format for
animation effects.
IMAGE FILE
FORMATS
GIF

33. ▪Portable Network Graphic.
▪best with line art, text, and logo.
▪It is capable to display transparencies.
IMAGE FILE
FORMATS PNG

34. IMAGE FILE
FORMATS
Vector Image File
use mathematical equations, lines, and curves
with fixed points on a grid to produce an
image. There are no pixels in a vector file. A
vector file’s mathematical formulas capture
shape, border, and fill color to build an
image. Because the mathematical formula
recalibrates to any size, you can scale a
vector image up or down without impacting its
quality.

35. IMAGE FILE
FORMATS
EPS
AI
SVG

36. Computer Graphics
Principle of Graphics and Design
Image File Formats
Infographics

37. Infographics

38. ▪Information graphics
▪used to represent information, statistical data, or
knowledge in a graphical manner usually done in
a creative way to attract the viewer’s attention.
“Infographics make complex data become more
visually appealing to an average user.”
INFOGRAPHICS

39. INFOGRAPHICS

40. INFOGRAPHICS

41. INFOGRAPHICS

42. The following websites will help you create
infographic:
1. http://piktochart.com/
2. https://www.canva.com/create/infographics
3. https://venggage.com
4. https://infogr.am/
INFOGRAPHICS

43. 1. http://piktochart.com/
INFOGRAPHICS

44. 2.https://www.canva.com/create/
infographics
INFOGRAPHICS

45. 3. https://venggage.com
INFOGRAPHICS

46. 4. https://infogr.am/
INFOGRAPHICS

47. An infographic should have the following
characteristics:
1. Thesis/Story. The subject and the main idea of
your infographic must be
clear.
2. Data. Data must be well-organized and supports
the main idea.
INFOGRAPHICS

48. 3. Simplicity. (color, style, and illustrations). You must
be able to create your own palette; your style must
be able to attract readers so as not to make
your infographic full of text. Do not use stock photos.
4. Sources. You must cite your sources so as togive
credibility to your data.
5. Branding/Shareability. Your infographic must be
creative and innovative.
INFOGRAPHICS

49. IMAGING AND DESIGNING FOR ONLINE
ENVIRONMENT
E M P T E C H-L E S S O N 5

50. OBJECTIVES
Define computer graphics and layout;
Identify the basic principles of graphics, layout
and design;
Understand several file formats of image; and
Create a simple infographic using the principle of
graphics layout and design.

51. Direction: Answer the following questions.
1. What are the different principles of graphics and
layout?
2. How does infographic beneficial in presenting
data?
TASK 1

52. TASK 2
Direction: Promote your specific track/strand by
making an infographic. Print your infographic on a
short-size bond paper. Use the given rubrics as your
guide in making your infographics.

53. TASK DESCRIPTION: Design an Infographic to promote your specific track/strand.
Include the following Information;
1.Duties 3. Jobs/ Opportunities
2.Education 4. Pay
Criteria
wei ght
Exceptional Admirable Marginal Unacceptable
Content 50%
❑Appropriate
details support
main idea
❑Accurate and
detailed
information
❑Information
adequately
supports
purpose of visual
❑Most details
support main
idea
❑Accurate
information for
almost all
subject matter
❑Information is
mostly
adequate and
supportive of
visual’s purpose
❑Few details
support main
idea
❑Lacking
accurate
information
❑Inadequate
information is
not clearly
supportive of
visual’s
purpose
❑No details to
support main
idea
❑Information is
not accurate
❑Information
does not
support the
visual’s
purpose
❑Topic and title
clear and easily
❑Topic and title
are mostly
❑Topic and title
difficult to
❑Topic and title
are not clearly
RUBRIC FOR INFOGRAPHIC

54. visual’s purposepurpose
Focus 20%
❑Topic and title
clear and easily
identified
❑Main idea is
clearly
appropriate to
topic
❑All illustrations
complement
purpose of visual
❑Topic and title
are mostly
clear and
easily identified
❑Main idea is
appropriate to
topic
❑Most
illustrations
complement
purpose of
visual
❑Topic and title
difficult to
identify
❑Main idea not
clearly stated
❑Few
illustrations
complement
purpose of
visual
❑Topic and title
are not clearly
identified
❑No main idea
❑Illustrations do
not
complement
purpose of
visual
Visual
Appeal
20%
❑Outstanding
use of color,
design, and
space
❑Original and
creative
design
❑Adequate use
of color,
design, and
space Design is
adequate
❑Overall design
is mostly
pleasing and
harmonious
❑Inappropriate
use of color,
design, and
space
❑Design lacks
creativity
❑Lack of
harmonious
design in
❑Little attempt
to use color,
design and
space
appropriately
❑Design is dull
❑Project has
sloppy
appearance

55. visual
Visual
Appeal
20%
❑Outstanding
use of color,
design, and
space
❑Original and
creative
design
❑Overall
design is
pleasing and
harmonious
❑Adequate use
of color,
design, and
space Design is
adequate
❑Overall design
is mostly
pleasing and
harmonious
❑Inappropriate
use of color,
design, and
space
❑Design lacks
creativity
❑Lack of
harmonious
design in
presentation
❑Little attempt
to use color,
design and
space
appropriately
❑Design is dull
❑Project has
sloppy
appearance
Mechanics10%
❑Free of
grammatical
errors
❑Words are
legible and
pertinent to
topic
❑Mostly free of
grammatical
errors
❑Most words are
legible and
pertinent to
topic
❑Frequent
grammatical
errors
❑Presentation is
illegible and
confusing
❑Too frequent
grammatical
errors
❑Distractive
elements
make
illustration
ineffective

56. Appeal
20% creative
design
❑Overall
design is
pleasing and
harmonious
pleasing and
harmonious
harmonious
design in
presentation
sloppy
appearance
Mechanics10%
❑Free of
grammatical
errors
❑Words are
legible and
pertinent to
topic
❑Mostly free of
grammatical
errors
❑Most words are
legible and
pertinent to
topic
❑Frequent
grammatical
errors
❑Presentation is
illegible and
confusing
❑Too frequent
grammatical
errors
❑Distractive
elements
make
illustration
ineffective
TASK 2

57. WHAT I CAN SHOW
Direction: Answer the question below.
Given the SBCA’s PVMGO, (Philosophy, Vision,
Mission, Goals, and Objectives), Can you justify if
the contents of this lesson is still aligned and
relevant to your learning as a Blaiseanstudent? Site
an example.