BASIC PRINCIPLES OF

GRAPHICS AND LAYOUT

OBJECTIVES

 Evaluate existing websites and online resources based on the

principles of layout, graphic, and visual message design.
Lesson Objectives:
o identify the principles of graphics and layout
o create an infographics or poster using the basic principles of
graphics and layout
o know the importance layout on imaging and designing for
online environment
 JUMBLED WORDS
 Group into 3 with atleast 8 to 10 members and fall in line
 The first player will get the strip of paper and a marker on the
table.
 Clue will flash on the screen
 Rearrange the jumbled letters correctly
 Write your answer on the strip of paper & paste it on the board
 The player should tap the hand of the 2nd player for the next word
 The next player will do the same
MMSYETRILAC
LACIRTEMMYSA
TTXE
AEIMG
IXORPMIYT DAN YNOMRHA
CYNOCSSINET
LOOCR DNA PASHE
HPEMSSIA
 Layout
 the process of
planning and
arranging
graphics or text
in a page or
book
 SYMMETRICAL
A layout may be symmetrical where there
are equal weight of elements on both sides of
the page.
 ASYMMETRICAL
A layout may be asymmetrical where there is
an artistic and different intensity on one side
of the page.
 TEXT
The text type
should be legible,
appropriate font face,
and arranged either
left justified, right
justified, or centered.
 IMAGE
The image should be
proportionate, with
sharp color and high
resolution
The images used
should have captions
PROXIMITY & HARMONY
 The elements
should be closed
together and not
scattered and
arranged apart
from each other.
CONSISTENCY
There should
be uniformity
of theme on
each page.
 COLOR AND SHAPE
 Use color to create
interest by providing
variety in design like
the use of color
contrast and shapes
EMPHASIS
 There should be one
point of interest in a
page.
 The element to be
emphasized should
have a different size,
color, shape, or
background
 GROUP ACTIVITY
Each group will create a poster,
infographics, invitation card (bigger
size)
 G1 – infographics
 G2 – invitation card
 G3 - poster
SAMPLE:

Poster
Invitation card
Infographics
Group 1 – Invitation card
Group 2 – Infograhics
Group 3 – Poster
Criteria:
Required elements – 10pts
Graphics relevance – 10pts
Attractiveness -10pts
Teamwork-5pts
Timeliness-5pts
FORMATIVE ASSESSMENT
Hands on:
 Create a brochure about tourist
attraction in Oriental Mindoro using
MS Word/MS Publisher. Apply the
basic principles of graphics and layout.
PRINCIPLES AND BASIC
TECHNIQUES OF IMAGE
MANIPULATION
TECHNIQUES OF IMAGE
MANIPULATION
Background color

 You can change the background if it does not

match the image or the totality of the presentation

 You can also add effects to the background

THANK YOU
Multiple Images

 You can combine multiple images to make a

point or use to highlight your message someone@example.com
 Shadow

 Using shadow effect will make the

image realistic
 Proportion

 When combining images, resize the

image to make it proportionate and
realistic.
Blending Color

 You can use color blending to match

the background with the other
elements in the page.
 Texture

 Adding texture allows you to blend

different images.
 Textures add to the depth of your art.
 Blending will allow smooth transition
on one image to another.
 Emphasis

 There should be a focal point to a

page that will attract viewers.
 The element you want to emphasize
should be sharp, big, and most vibrant
in your design.
 COMBINING TEXT,
GRAPHICS, AND IMAGES
 TRANSPARENT SHAPES

 Add simple shapes with a slight

transparency behind your text to clearly
see the text you want to emphasize.
 FONTS AND SHAPES
 Fonts and shapes should complement
each other.
 You can use rounded shapes with
rounded fonts and sharp shapes with
sharp fonts
 TEXT AND BACKGROUND
 Text and background should be
aligned to have an organized look.
 You can align text with shapes or
geometric figures in the image.
CLEAN AND CLEAR BACKGROUND

 Use clean and clear background for

the message to be readable.
 Background should not washout your
message.