FUNDAMENTALS OF

GRAPHIC DESIGN
ELEMENTS & PRINCIPLES

Prepared by: Mr. Teodoro R.

BERNARD D. OTERO
Llanes II
Agusan National High School
Senior High School
 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
*Information & Images taken from various sites on the internet and is under OER Commons.
 So what is DESIGN?

https://www.merriam-webster.com/dictionary/design 3
*Information & Images taken from various sites on the internet and is under OER Commons.
 So what is DESIGN?
Graphic design is an important tool that enhances how you
communicate with other people. It serves to convey your
ideas in a way that is not only effective, but also beautiful.
Good design makes you look good.

https://thinkchrysalis.com/blog/graphic-design/what-
makes-graphic-design-important

4
*Information & Images taken from various sites on the internet and is under OER Commons.
 First sign of Visual
Communication

Historians trace the origins of

graphic design to early cave
paintings from about 38,000 BC.

https://www.flux-academy.com/blog/the-
history-of-graphic-design

5
*Information & Images taken from various sites on the internet and is under OER Commons.
 6
*Information & Images taken from various sites on the internet and is under OER Commons.
1
Fundamentals of
Graphic Design
ELEMENTS

7
 Elements of Visual Design

❑ refer to the basic building blocks of any composition

❑ The elements of design are the fundamental aspects of any visual design
which include shape, color, space, form, line, value, and texture.

8
*Information & Images taken from various sites on the internet and is under OER Commons.
 Elements of Visual Design

9
*Information & Images taken from various sites on the internet and is under OER Commons.
 LINE
In nature you can see:

lines in tree branches in a spiders web In a curving river

10
*Information & Images taken from various sites on the internet and is under OER Commons.
 LINE
The manufactured world provides examples too

Lines formed by wires winding roads Edges of buildings

11
*Information & Images taken from various sites on the internet and is under OER Commons.
 As you have seen, lines have many qualities:

curved or straight

Vertical horizontal diagonal

Thick or thin smooth or rough

Light or dark continuous or broken

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

▰ Shape is a 2-dimensional object (it is flat) It has height and width but no depth. Shapes
can be either geometric or organic.

Geometric shapes ---circles, squares and Organic shapes are irregular---seashells, leaves, flowers,
rectangles---are regular and precise. They etc.
can be measured.

*Information & Images taken from various sites on the internet and is under OER Commons.
 An artwork is often made up of positive and negative shapes. The positive shapes are usually the
solid objects that the artist depicts (see below). The negative shapes are formed by the areas around
or between the objects (the sky, grass, mountains, etc)

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

- is three-dimensional. It has height, width AND depth. As with shapes, Forms can be regular and
precise or irregular and organic.

3D art, such as sculptures,

architecture and crafts, is composed
of forms. In 2D art, artists can only
create the illusion of form.

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

Objects farther away

are placed higher on Items farther away appear
the picture plane less detailed or fuzzy In a 2-D work of art, space is limited to
the picture plane. By using color and/or
value you can make objects appear to
advance (come forward) or recede (go
back) into space to create an illusion of
depth. Objects with clear surface detail
appear nearer to the viewer than fuzzy or
plain objects. Also, an illusion of space
can be accomplished when objects
overlap or are placed higher on the
picture plane.
Overlapping gives
the illusion of space
too.
16
*Information & Images taken from various sites on the internet and is under OER Commons.
 As you can see in this example of linear perspective, in which parallel lines recede toward a common
vanishing point, the illusion of 3-D space is created on a 2-D surface. Objects farther away are higher
up on the picture plane, there is overlapping of buildings and less detail as the image seems farther
away from the viewer.

Objects farther away are

placed higher on the picture
plane and are less detailed

Buildings are
overlapped to create
an illusion of space

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

-refers to the lightness and darkness of a color.

-commonly known as “shading” of an object.

TINTS ORIGINAL SHADES

COLOR
A value scale, such as this one, can show the full range of a
Accomplished artists know, that to make a color. This is accomplished by adding black to a color to make
drawing look as real as possible, they must shades or adding white to a color to make tints.
show a full value range in their artwork
18
*Information & Images taken from various sites on the internet and is under OER Commons.
 Texture

Texture is the tactile quality of a surface, such

as rough, smooth, sticky, fuzzy, soft or slick.
Like line, texture can be real or implied. A real
texture is one that can be felt, such as a
piece of sandpaper, a woven mat, or animal
fur. In an artwork, real texture can be created
through thickly applied paint, glossy glazes,
and gluing objects to the surface. Implied
texture is an illusion of texture created by an
artist.

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

Color is everywhere. In our clothes, the sky, trees, flowers, billboards designed
to attract our attention, on the web and on television.
There are literally thousands of colors; from bright to dull (intensity) and light
to dark (value). Colors are powerful; they can make objects seem to glow, to
come forward and recede, or to appear bigger or smaller.
Colors can also be symbolic, with meanings that change from culture to
culture.
A color can symbolize an object or thing such as blue for water and green for
grass and the leaves of trees or it may symbolize an emotion or idea, such as
red for love, yellow for fear and blue for sadness.

20
*Information & Images taken from various sites on the internet and is under OER Commons.
 Color is a property of light. When we say an object is red, we
mean that its surface absorbs certain wavelengths of light that
we call red, we identify the object as red in color. If all
wavelengths of light are absorbed, we identify the color as
black, if all wavelengths of color are reflected, we see white.

Color has 3 characteristics: hue, value and intensity. Hue is

actually the color we see—such as red. Value refers to the
lightness and darkness of a hue. For example, maroon is a
dark value (shade) of red and pink is a light value (tint) of
red.

Intensity is the brightness or dullness of a color.

21
*Information & Images taken from various sites on the internet and is under OER Commons.
 Red, Yellow and Blue are called Primary colors
P
(P)and are used to create the rest of the colors on
the color wheel.

S When you mix two primary colors together, you

S I I
get a Secondary color (S). These colors are
I I Orange (yellow and red), Green (blue and
I I yellow) and violet (red and blue).
P P And when you mix a primary and a secondary
S
color together you get an Intermediate color (I).
These are yellow-green, yellow-orange, red-
orange, red-violet, blue-violet and blue-green
22
*Information & Images taken from various sites on the internet and is under OER Commons.
 Color Schemes
When two colors are located directly across from each other on
the wheel, they are referred to as complementary colors.
Artists often pair complementary colors together because the
area where they meet seems to vibrate. You can also lessen the
intensity of a color by adding a small amount of its
complementary color.

What pair of complimentary colors

did this artist use in this picture?

23
*Information & Images taken from various sites on the internet and is under OER Commons.
 Color Schemes
A monochromatic color scheme makes use of only one hue and its tints and
shades.
This scheme can produce appealing pictures as you can see below.

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

An analogous color scheme is made up of three or

four colors that are adjacent on the color wheel.

What set of analogous

colors are used in this
example?

25
*Information & Images taken from various sites on the internet and is under OER Commons.
 Color Temperatures
Have you ever noticed that colors seem to have different temperatures?

Reds, Oranges and Yellows are warm colors.

They remind us of the sun or fire and can add a
feeling of excitement, boldness or happiness to a
work of art. Warm colors make objects seem
larger and appear to advance in an artwork.

Greens, Blues, and Violets are cool colors. They

remind us of lakes, distant mountains, sky and
foliage.
Cool colors tend to be calm and restful. They
recede into the distance and make objects seem
smaller.
26
*Information & Images taken from various sites on the internet and is under OER Commons.
2
Fundamentals of
Design
PRINCIPLES

27
 Principles of Visual Design

❑ The principles of design are the rules a designer must follow to create an
effective and attractive composition.
❑ The fundamental principles of design are Emphasis, Balance, Movement,
Pattern, Repetition, Rhythm, Variety, and Proportion.

28
*Information & Images taken from various sites on the internet and is under OER Commons.
 Principles of Visual Design

29
*Information & Images taken from various sites on the internet and is under OER Commons.
 BALANCE
“Balance is a psychological sense of equilibrium.”

ABOUT
Balance is the distribution of the visual
weight of objects, texture, colors, and
space that is evenly distributed on the
screen. It places the parts of a visual in an Equal distribution
aesthetically pleasing arrangement. It is
also a reconciliation of opposing forces in
a composition that results in visual
stability.

Balance in an object is easy to

A balanced composition feels right. It feels
understand; if balance isn’t stable and aesthetically pleasing. Stable design

achieved, the object tips over.

30
*Information & Images taken from various sites on the internet and is under OER Commons.
 31
*Information & Images taken from various sites on the internet and is under OER Commons.
 EMPHASIS
“Emphasis calls attention to something in order to hold the viewers’ interest.”

ABOUT
Emphasis makes an area in the design
appear different in size, texture, shape or
color to attract the viewer’s attention. The
artist usually makes an area stand out by
Element stands out
contrasting it with other areas. Emphasis is
usually an interruption in the fundamental
pattern or movement of the viewers eye
through the composition.

Emphasis features a specific shape, Emphasis holds the viewer’s interest by

providing visual “surprises.” Attracts viewers
object, or color and makes it stand
out from the other elements in the
picture. 32
*Information & Images taken from various sites on the internet and is under OER Commons.
 33
*Information & Images taken from various sites on the internet and is under OER Commons.
 Google Homepage
34
An example of balance and emphasis
*Information & Images taken from various sites on the internet and is under OER Commons.
 MOVEMENT
“Movement guides the viewer’s eyes around the screen.”

ABOUT
Movement is the path the viewer’s eye takes
through the work of art, often to focal areas.
Such movement can be directed along lines,
edges, shape and color within the work of art. Shows action
Movement is the design element that operates
in the fourth dimension – time. We can speak
of movement as literal or compositional.

The eye will always move through

Movement is the process of relocation of
the composition in some way, so
there is always some sort of objects in space over time. Focuses on a “path”

movement.
35
*Information & Images taken from various sites on the internet and is under OER Commons.
 36
*Information & Images taken from various sites on the internet and is under OER Commons.
 37
*Information & Images taken from various sites on the internet and is under OER Commons.
 PATTERN, REPETITION, RHYTHM
“Pattern, repetition & rhythm work together to create unity in an image.”

ABOUT
Pattern is the repeating of an object or
symbol all over the work of art. Repetition
works with pattern to make the work of art
seem active. Rhythm is created when one
Oneness
or more elements of design are used
repeatedly to create a feeling of organized
movement. They work together to form a
prestige work of art.
These principles create a great
image for the viewers to enjoy. Their
Combining these principles create
coherence often express a
summary of all of the principles and harmony for the entire image. Harmony
elements of design.
38
38
*Information & Images taken from various sites on the internet and is under OER Commons.
 39
*Information & Images taken from various sites on the internet and is under OER Commons.
 PROPORTION
“Proportion deals with the relation of visual elements with one another.”

ABOUT
Proportion is the feeling of unity created
when all parts (sizes, amounts, or number)
relate well with each other. It may refer to
the relative size and scale of the various Relative size/scale
elements in a design. It is necessary to
discuss proportion in terms of the context
or standard used to determine proportions.

The issue in proportion is the relationship

between objects. Appropriate size
Proportion is judging the
appropriateness of size of objects
by a specific measure. 40
*Information & Images taken from various sites on the internet and is under OER Commons.
 41
*Information & Images taken from various sites on the internet and is under OER Commons.
 VARIETY
“Variety uses several design elements to draw a viewer’s attention.”

ABOUT
Variety is the complement of unity and is
needed to create visual interest. It is the
use of several elements of design to hold
the viewer’s attention and to guide the Visual creativity
viewer’s eye through and around the work
of art. It may change the line’s thickness,
the shape’s size, the color’s saturation, or a
texture to smooth or rough.

Variety means "to change the character"

Variations
Variety is creating variations on a of an element.
theme. A designer can vary an
element throughout a design. 42
*Information & Images taken from various sites on the internet and is under OER Commons.
 Bing Homepage
An example of variety, combining text and
images

43
*Information & Images taken from various sites on the internet and is under OER Commons.
 Let’s practice looking!

What elements do you see in this geranium?

Color (red and green)
Shape (the outlines of flowers and
leaves)
Line (the stems, the veins of the
leaves) and
Texture (smooth petals and furry
leaves)
44
*Information & Images taken from various sites on the internet and is under OER Commons.
 Let’s practice looking!

What principle(s) do you see used in these pictures

scarf Flock of bird a glass skyscraper

Unity, Pattern, Proportion
Pattern, Unity, Movement,
Contrast Rhythm
45
*Information & Images taken from various sites on the internet and is under OER Commons.
 46
*Information & Images taken from various sites on the internet and is under OER Commons.
 47
*Information & Images taken from various sites on the internet and is under OER Commons.
4
IMAGE PRINCIPLES,
TECNIQUES & HOSTING
Image manipulation techniques,
principles and hosting sites.
48
Raster vs. Vector
Graphics
Prepared by: Mr. Teodoro R.
BERNARD D. OTERO
Llanes II
Agusan National High School
Senior High School
 Activity: #SELFIE ZOOM

1. If you have a smartphone with

camera, grab it.
2. Take a selfie.
3. After taking a selfie, open the selfie
in the Gallery (Android) or Photos
(iOS).
4. Try to zoom in the image, going all
the way. What do you observe?

50
*Information & Images taken from various sites on the internet and is under OER Commons.
 51
*Information & Images taken from various sites on the internet and is under OER Commons.
 Raster Graphics

Raster (bitmap) images are made of pixels. A

pixel is a single point or the smallest single
element in a display device.

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

• Formed by a digital camera

• Measured in picture elements or “pixels”

53
*Information & Images taken from various sites on the internet and is under OER Commons.
 JPG Test Image (640 x 479 pixels)
54
*Information & Images taken from various sites on the internet and is under OER Commons.
 JPEG

Used for most digital photos

but “lossy” (gradually losses
quality when resized or
manipulated).

55
*Information & Images taken from various sites on the internet and is under OER Commons.
 Graphics Interchange Format (GIF)

Best for line

drawings and
animations. 256
colors maximum.
No loss

56
*Information & Images taken from various sites on the internet and is under OER Commons.
 GIF Test Image

57
*Information & Images taken from various sites on the internet and is under OER Commons.
 GIF Versus JPG

GIF: 11 kb JPG: 78 kb

58
*Information & Images taken from various sites on the internet and is under OER Commons.
 GIF Versus JPG

For photographic images JPG is better both for quality

and file size

For line art GIF is better both for quality and file size

59
*Information & Images taken from various sites on the internet and is under OER Commons.
 Other Common Raster Image Formats

BMP – Bitmap. Every pixel stored individually

TIF – Standard in many technical applications. No loss
PNG – Lossless image format
RAW – Data as captured by digital camera, particularly Digital
Single Lens Reflex (DSLR) camera.

60
*Information & Images taken from various sites on the internet and is under OER Commons.
 Popular Raster Graphic Software

• Microsoft Paint
• Adobe Photoshop
• Corel PhotoPaint
• Pixlr
• GIMP – open source software similar to Adobe Photoshop.

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

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

• Vector graphics are created from

mathematical formulas used to define
lines, shapes and curves.
• Edited in draw programs Node
• Shapes can be edited by moving
points called nodes (drawing points)
Handle

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

Original Image

More examples Shapes that make

Resized Image
http://qvectors.com/ up the image.
64
*Information & Images taken from various sites on the internet and is under OER Commons.
 Uses of Vector Graphics

• Graphics that will be scaled (or resized)

• Architectural drawings and CAD programs
• Flow charts
• Logos that will be scaled (resized)
• Cartoons and clip art
• Graphics on websites
• Because they have very small file sizes.
• This allows them to load quickly.
• Fonts and specialized text effects

65
*Information & Images taken from various sites on the internet and is under OER Commons.
 Disadvantages of Vectors

• Lower color quality than raster images.

• They do not support as many colors.
• Not good for photographic images.

66
*Information & Images taken from various sites on the internet and is under OER Commons.
 Common Vector File Formats
• SVG – Scalable Vector Graphics
• Standard format created by W3C
• Versatile, all-purpose vector format
• CDR – Corel Draw
• DXF – AutoCAD
• WMF – Windows Metafile

67
*Information & Images taken from various sites on the internet and is under OER Commons.
 Disadvantages of Vectors

68
*Information & Images taken from various sites on the internet and is under OER Commons.
 Popular Vector Graphic Software

• Adobe Illustrator
• Corel DRAW
• AutoCAD
• Inkscape – open source software similar to Adobe
Illustrator.
• Xara Xtreme

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

Raster vs. Vector Graphics

• Vector Graphics
• Preserving sharpness after rescaling

• Not good for natural scenes

• Hard to construct
• Raster Graphics
• Does not preserve sharpness after resizing

• Good for natural scenes

• Easy to construct

70
*Information & Images taken from various sites on the internet and is under OER Commons.
 Common Vector File Formats

• AI – Adobe Illustrator
• Industry standard used by developers of vector graphics.
• Used to create, save, and archive original artwork.
• EPS – Encapsulated Postscript
• Meta Graphic
• Graphics developers generally save a copy of the AI file in EPS format
because it can be opened by computers running different operating
systems.
• Preferred format for vendors/clients who use the graphics in
publications due to its portability.

71
*Information & Images taken from various sites on the internet and is under OER Commons.
IMAGE PRINCIPLES,
TECNIQUES & HOSTING
Image manipulation techniques,
principles and hosting sites.
72
 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.
73
*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.
74
*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.

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

76
*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)

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

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

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

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

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

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

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

84
*Information & Images taken from various sites on the internet and is under OER Commons.
 PERFORMANCE TASK: (INDIVIDUAL)
Objective: Students will create an informative and visually appealing infographic about their chosen strand
in Senior High School to effectively communicate key information and highlights of their educational path.

Instructions for Creating the Infographic:

Step 1: Topic Selection
• Choose your specific strand (e.g., STEM, HUMSS, ABM, GAS, TVL, etc.) as the focus of your
infographic.
Step 2: Research and Content
• Conduct research to gather relevant information about your chosen strand, including its goals,
subjects, potential career paths, and any unique features.
• Ensure accuracy and completeness of your information.
• Include key statistics or data that highlight the significance or benefits of your chosen strand.
Step 3: Visual Design
• Decide on the layout and design elements for your infographic. Consider the following:
• Use of appropriate colors and fonts.
• Clear organization and hierarchy of information.
• Engaging visuals (icons, images, charts, etc.).
• Use of whitespace for readability.
• Make sure your design aligns with the theme or essence of your chosen strand.
85
*Information & Images taken from various sites on the internet and is under OER Commons.
 PERFORMANCE TASK: (INDIVIDUAL)
Step 4: Creation
Create your infographic using graphic design software (e.g., Canva, Adobe Illustrator, Piktochart,
etc.)
Step 5: Content Placement
Arrange your content logically, ensuring a smooth flow from top to bottom or left to right.
Use headings, subheadings, and bullet points to structure your information clearly.
Label visuals and provide captions or explanations where necessary.
Step 6: Visual Elements
Incorporate visuals such as icons, images, and charts to enhance understanding.
Ensure that visuals are relevant and contribute to the overall message.
Step 7: Citation
If you use any external sources for information or visuals, provide proper citations or credits.
Step 8: Review and Proofreading
Carefully review your infographic for accuracy, grammar, and spelling errors.
Seek feedback from peers or teachers if possible.
Step 9: Submission
Submit your completed infographic by the specified deadline. 86
*Information & Images taken from various sites on the internet and is under OER Commons.
 CRITERIA FOR RATING (50PTS)

1.Content Relevance (10 points):

• The information presented accurately represents the chosen strand.
• Key aspects, subjects, and potential career paths are effectively highlighted.
2.Visual Design and Layout (10 points):
• Effective use of colors, fonts, and whitespace.
• Clear organization and a logical flow of information within the infographic.
3.Creativity and Visual Appeal (10 points):
• Demonstrates creative and innovative design that captures the essence of the chosen strand.
• The infographic is visually appealing and engaging.
4.Content Clarity (10 points):
• Information is presented in a clear and understandable manner.
• Effective use of headings, subheadings, and visual aids to enhance comprehension.
5.Visual Elements (10 points):
• Relevant and meaningful visuals, such as icons, images, or charts, that complement and
enhance the content.
• Proper labeling and explanations for visuals when needed.

87
*Information & Images taken from various sites on the internet and is under OER Commons.
 88
*Information & Images taken from various sites on the internet and is under OER Commons.
 THANK YOU FOR LISTENING!

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