Ge10 - Module 7

GE 10
LIVING IN THE IT
ERA
(MODULE 7)
Kenneth A. Palomar, LPT

Instructor
COMPUTER SCIENCE AND INFORMATION TECHNOLOGY DEPARTMENT MAIN CAMPUS I – DUMAGUETE CITY
MODULE 7:
IMAGING AND
DESIGN FOR
SOCIAL IMPACT
LIVING IN THE IT ERA
Overview
The graphic design concepts are almost like building blocks.
Each layer is on top of each other before you have the base to
create something unbelievable — whether you're creating a logo,
a website, or a unique picture. The basic principles of graphic
design comes with different fundamentals to consider. In this
module, we will explore some of it for us to be able to create a
good design.
LESSON 1:
Graphic Design
Fundamentals
LIVING IN THE IT ERA
Objectives
At the end of this module, you should be able to:
• Understand the basic concepts like colors, typography,
images;
• Understand the principles and techniques of design using
applications (whether opensource or proprietary) to
develop contents for social campaigns; and
• Discuss the importance of having a good design to
communicate visually.
LIVING IN THE IT ERA (MODULE 7)
LESSON 1: Graphics Design Fundamentals
What is Graphic
Design?
Graphic Design is a process in which we use typography,

images, colors, icons and other illustrations to communicate visually. This
term was first coined by William Addison Dwiggins on 1992 as he called
himself a “graphic designer”. However, graphic design is a thousand-
year-old craft which dates back to ancient cave drawings. In today’s
era, we use graphic design not just to communicate visually but also to
having good user experience (for software developers) and also to
boost/improve one’s emotions (with the use of colors). The fundamentals
of graphic design varies from PowerPoint presentations, web/mobile
applications, posters, logos, and even paintings.
Graphic design is a part of your daily life. From humble things like
gum wrappers to huge things like billboards, to the T-shirt you’re wearing,
graphic design informs, persuades, organizes, stimulates, locates,
identifies, attracts attention and provides pleasure.
Graphic design is a creative process that combines art and

technology to communicate ideas. The designer works with a variety of
communication tools in order to convey a message from a client to a
specific audience. The main tools are image and typography.
Types of
Graphic design
a. Image-based design
Designers develop images to represent the ideas their
clients want to communicate. Images can be incredibly powerful
and compelling tools of communication, conveying not only
information but also moods and emotions. People respond to
images instinctively based on their personalities, associations, and
previous experience. For example, you know that a chili pepper is
hot, and this knowledge in combination with the image creates a
visual pun.
In the case of image-based design, the images must carry the entire
message; there are few if any words to help. These images may be photographic,
painted, drawn, or graphically rendered in many different ways. Image-based
design is employed when the designer determines that, in a particular case, a
picture is indeed worth a thousand words.
Type-based design
In some cases, designers rely on words to convey a message,
but they use words differently from the ways writers do. To designers,
what the words look like is as important as their meaning. The visual forms
of the letters, whether typography or handmade lettering, perform many
communication functions. They can grab your attention on a poster,
identify the product name on a package or a truck, or present running
text as the typography in a book does. Designers are experts at
presenting information in a visual form in print or on film, packaging, or
signs.
Image and Type design

Designers often combine images and typography to communicate a client’s
message to an audience. In fact, the majority of graphic design is the combination of
images with typography. Designers explore the creative possibilities presented by words
(typography) and images (photography, illustration, and fine art). It is up to the designer not
only to find or create appropriate letterforms and images but also to establish the best
balance between them.
Symbols, logos and logotypes

Symbols and logos are special, highly condensed information forms or identifiers.
Symbols are an abstract representation of a particular idea or identity. The CBS “eye” logo is
a symbolic form, which we learn to recognize as representing a particular concept or
company.
Logotypes are corporate identifications based on a special typographical word

treatment. Some logos are combinations of symbol and logotype.
n order to create these identifiers, the designer must have a clear vision of the
corporation or idea to be represented and of the audience to which the message is
directed.
Symbols: an abstract representation of an idea or identity.
Logo: a symbol that may be a combination of image and type
Logotype: a symbol composed of type only.
The basic elements of graphic design are the

following:
• Lines
• Shapes
• Form
• Texture
• Balance
Line
• A line is a kind of shape which connects two or more points. It is also
considered as one of the essential element of graphic design. Lines can be
thick, thin, curved, or jagged.
• One of the most basic visual elements of design is the ‘line’, and it should not
be underrated.
• As simple as lines are they can be used as crucial elements of design.
• Lines can be used to add structure to a composition, to frame information
and to divide information. Lines can be used to add hierarchy and emphasis,
to decorate and to draw the eye to a specific point.
• They can also be used to build and represent information in info graphics
• Lines can be straight, curved, thick, thin, solid, and dashed.
Line is an infinite series of points. Graphically, a line is the connection between

two points, or it is the path of a moving point. A line can be a positive mark or the space
between two or more positive shapes. Lines appear at the edges of objects and where two
planes meet. Lines can exist in many weights; the thickness and texture as well as the path of
the mark determine its visual presence. Lines can be straight or curved, continuous or broken.
When a line reaches a certain thickness, it becomes a plane. Many lines used together can
create volumes, planes, and textures.
Visually, a line (in red, above) can be thought of as marking the path of a point as it moves
through space, or linking the space between two points (in gray, above). Lines are used in
perspective drawing, for example, to imply a sense of depth or distance.
Lines can be used and commonly found in drawings or

illustrations, textures or patterns, a well as on text composition –
whether to give emphasis, divide or organize content, or to guide
the viewer’s eye. Impacts on lines also differs based on their
attributes.
These attributes include:

• Weight
• Color
• Texture
• Style
Lines in use. Individual lines placed together in orderly or random patterns can be used to create a
sense of texture (e.g., a basket weave) or a sense of volume or depth (e.g. crosshatch shading) in
an image.
Shape
A shape is a two-dimensional external boundary of an object. Any
object outline that has height and width can be considered as a shape.
Together with lines, they form the foundation of your design.
Planes—or shapes—are defined by the lines at their edges. Artists

use planes to realistically render places, objects and people, or to abstractly
define space and forms. Graphic designers use planes to much the same
effect, though planes are often used or combined to represent complex
objects (such as a building) in a more simplified or abstract and symbolic way
Planes. As lines (in gray) intersect with one another, the interior space they create is known as a
plane (in red). All planes and shapes are ultimately defined by the lines at their perimeter.
There are two (2) major categories of shapes in design:

• Geometric – these are regular and mathematical shapes.
• Organic – these are freeform shapes.
Figure 3 shows the different examples of geometric and organic shapes.
Shapes can be used in organizing or dividing contents, create illustrations, and

in adding interest to one’s work/design.
Form
A form is a three-dimensional shape. Shadows, perspective, depth, and
sometimes texture creates a form. Without these attributes, a form is just a shape or series
of shapes. Plain images/objects an flat designs can be enhanced by adding shadows or
lightings to create an illusion of a form. It also gives the object a sense of place. Figure 5
shows that a ball, if you make it two-dimensional is just a circle.
Difference of a
form and a shape
Texture
Texture refers to the physical quality of the surface of an object in an
artwork or design. It also refers to how an object look or feels like. An object
might be smooth, rough, shiny, hard, or soft. It can be in 3D (real texture) or 2D
(visual texture). Texture adds depth and visual interest to the flat images or
objects.
Texture can be used for:

• Establishing visual value or a focal point in an artwork.
• Having contrast within a design
• Making an artwork visually balanced.
Real texture (left) and visual texture (right)
Balance
• This refers to the ways one can achieve visual balance in a design using
ways such as symmetrical, radial, formal, and informal methods. There is
also the rule of “thirds” on a visual platform that one can use to achieve
balance.
• It is the distribution of the visual weight of objects, colors, texture, and
space. If the design was a scale, these elements should be balanced to
make a design feel stable
• Balance is expressed as a sense of equilibrium
• Well balanced designs are visually stable, formal, and conservative
• Balance is the equal distribution of visual weight (more specifically, how
much any one element attracts the viewer's eye). Balance can be
affected by many things, including color, size, number, and negative
space.
Three Main Types of Balance

• Symmetrical (Formal) , Asymmetrical (Informal), Radial
1. Symmetrical balance.
From the name itself, symmetrical balance, which includes radial
symmetry is when both two sides of a piece are equal. If you fold your artwork
or piece into two or if you put an imaginary line between your artwork, each
half is identical or visually similar to the other half.
2. Asymmetrical balance.
Both sides of your composition does not contain the same elements
but contain almost the same visual weight.
FORMAL BALANCE INFORMAL BALANCE
Symmetrical Balance Asymmetrical Balance
Radial Balance
LESSON 2:
Branding and
Identity
LESSON 2: Branding and Identity
Branding and identity can be found everywhere. Look around you,

you may see some of your personal items, product packaging, documents, or
some sort of advertising. All of them have one in common – identity.
Branding is simply what people thinks about you, your company,
your product or your service. For example, we think of Albert Einstein as the
epitome of intelligence, and that is how he was branded. Identity or visual
identity is the visual representation of a brand. It can be in a form of image,
choice of color or typography, and many more. For example, we quickly
recognize the company and its service but just looking at its logo, typeface,
or color combinations.
Lucidpress (2018) enumerated the seven steps to creating a brand identity design:
1. Establish clear purpose and positioning. Recall why you or your company exists, who
your target audience are, and what makes you or your service unique from your
competitors.
2. Conduct thorough market research. Having a deep analysis on your target audience
on what their personalities are which will lead you to the next step.
3. Get a personality. Based on your research, determine your brand’s personality. Brand
personality make a huge impact on the visuals of your marketing materials.
4. Create a polished logo. In creating your logo, it should be simple, scalable, and
memorable. Observe the logos of famous companies like Amazon, Google, and IBM.
What do these logos have in common?
5. Create an attractive color pallete. Your color pallete should be simple and contain
one to three primary colors. Once you have established your color pallete, you may
play with their color family. For example, if you choose blue as you primary color, you
may use sky blue, baby blue, and other colors under the blue family to support your
primary color.
6. Select professional typography. When selecting fonts, it is important to consider these

things:
a. Do not make it fancy. Fancy typefaces only make your text confusing.
Example:
b. Don’t mix fonts/typefaces. Do not mix fonts or typefaces in a word or sentence as it

may give mixed interpretations to your audience.
Example:
c. Mix contrasting fonts/typefaces. This is not similar to the above item. This means you
may use serif typefaces for your product title and sans serif for the subtitle.
Example:
7. Choose on-brand supporting graphics. Your brand identity should have a

visual library that include icons, images/photographs, design assets, and
other supporting graphics.
LESSON 3:
Layout and
Composition
LESSON 3: Layout and Composition
Layout and composition are the building blocks of

design. These two focus on the arrangement of your objects
or elements on your design. Your good texts, images, or other
elements in the graphic will turn to waste if your layout is not
well-composed.
We might be confused sometimes in using lay out
instead of layout. Please take note that these two are not the
same. Lay out is a verb phrase which simply means to arrange
something, while layout is a noun which means how things are
organized.
There are five basic principles of layout and

composition:
1. Proximity
2. White Space
3. Alignment
4. Contrast
5. Repetition
Proximity
Proximity is the process of placing related elements
together. Elements that are not related to that group should
be separated to show that these elements are not related to
that group. Take family reunion as an example, you are
grouped by family, and anyone who don’t have any
relationship to your family should be separated. In design,
block texts or graphics that are related should be grouped
together to make your design easier to understand.
• Proximity is all about using visual space to show relationships in your content. In
practice, it's pretty simple—all you have to do is make sure related items are grouped
together (for instance, blocks of text or elements in a graphic, as in the example
below).
• It is the closeness and distance that can be used to group related items and
separate unrelated items, respectively
• It is closeness of an object that can be used to group related items together
-Section headings close to section text
-Figure Caption close to figure
-Distance can be used to visually separate unrelated items
-Extra space before section headings separates it from previous sections
-Extra Space before and after a figure separate them from text and other
figures
Example we have three individual shapes
If placed together in just the right proximity, negative space is made to

suggest a new visual shape entirely. This gives new meaning to the individual shapes that
make this composition.
If we move them apart ever so slightly, this visual, this message is lost.
Adequate
relationships are Clear relationships
established are established in
in this layout. this layout.
Elements are in Elements are in
close proximity in a close proximity in a
comprehensive clear order.
order.
White Space
White space is not literally the white spaces that you found on the design but
rather the negative space between lines, paragraphs, and element on the design. In his
article Importance in White Space in Design, Pratik Hedge described white space as:
“White Space in design composition is same as use of Silence in a musical

composition. Without proportionate use of Silence, music is unstructured; some may call it
noise. Similarly, without White Space, design is unstructured and difficult to consume.”
There are two types of white space:

• Micro white space. Mini spaces between paragraphs, lines, menu items, or other elements
in a design composition.
• Macro white space. Large spaces between contents and elements.
Negative Space
Negative space is the space between objects or the parts of an object, for
example the area between a cup and its handle. Also the space between an object and
the edges of the composition, i.e. the space around an object or between lines. The opposite
of negative space is positive space.
Locus
A particular position, point, or place; the effective or perceived location of
something abstract.
Positive Space
Positive space is the area or part of a composition that the subject occupies. For
instance, the positive space could be a vase of flowers in a still life painting, a person’s face
in a portrait, the trees and hills of a landscape painting. The area around the positive
space is called the negative space.
How important is white

space in design?
Hedge (2017) listed some of the importance of white space in design.
1. Improved comprehension. Spaces between lines in a paragraph makes the content

legible and easily scalable to the readers/viewers.
2. Focus and attention. Macro white spaces help guide the viewers to the focus area in
the design.
3. Increased interaction rate. If used wisely, white space in design helps the viewer to get the
message quickly even without looking at the instructions. Take a look at Google’s homepage
UI. White space helps the viewer to get the message, which is to search.
4. Guide the user through local grouping. White space helps you
to achieve the proximity of your design.
5. Branding and Design Tone. Let us look back at the steps of

brand identity design, the way how are you going to apply white
spaces in your design helps you create your own brand’s
personality.
6. Creates a breathing space for users. A lot of people believe that in design, one must
maximize the space by putting contents on it. However, this might make your design stuffy.
Having enough white space makes your eye rest, helps us breathe and not to be
overwhelmed with the information.
Alignment
Alignment helps designers to organize different elements in their composition. This is
similar to the alignment that we see in MS Word or other productivity tools. Effective use of
alignment give your composition a definitive structure and a creative balance. Alignment
may be left, centered, right, or justified.
• Alignment is something you deal with all the time, even if you don't realize it.
Whenever you type an email or create a document, the text is aligned automatically
• Our minds like to imagine straight line grids when look at things
• We like to see things line up
• We cant understand to see things that almost - but don’t quite- line up
• We also like to see equal distance
-This is a technique called symmetric spacing
• Things that are not aligned get treated differently
-Navigation bar text vs. body text
• It is a critical for good looking web pages
• Small alignment problems can make the whole page look bad
Edge and Centre Alignment
Good Alignment Poor Alignment Mixed Alignment
Alignment to a Grid
Approaches of alignment in design
Contrast
Contrast means one element is opposite to the other element. This does not only
apply to colors, but to typeface and size of elements as well. Contrast helps you to catch the
viewer’s eye, create a direction, or giving emphasis to something. For example, if you use
dark color for your background, you should use light color for your foreground; or if you use
different test style to give emphasis on your content.
• Contrast simply means that one item is different from another. In layout and
composition, contrast can help you do many things, like catch the reader's eye,
create emphasis, or call attention to something important.
• To create contrast in the example below, we've used color, more than one style of text,
and objects of differing sizes. This makes the design more dynamic and, therefore,
more effective at communicating its message.
• Contrast occurs when two or more visual elements in a composition are different.
• An abrupt shift in the appearance of the composition. Asymmetry relies on

contrast, as can continuation and proximity.
• When two elements are not exactly the same, they should be very different
• With text, contrast can be achieved through
Font size : small, medium, Large
Font Family: serif, San serif, Cursive, Moonscape and special character
Font Weight: light , normal , bold
Font style: oblique, normal, italic
Font Decoration: none, underline, shadow
Repetition
Repetition simply means to use of the same typefaces, color palettes, or
other elements to achieve consistency in your composition. This create unity in
your composition or make your projects connected to each other. For example, if
you create a PowerPoint presentation, you should use only the same color
palette or text style in all of your slides.
• Works with pattern to make the work of art seem active. The repetition of
elements of design creates unity within the work of art.
• Repetition is a reminder that every project should have a consistent look and
feel. This means finding ways to reinforce your design by repeating or echoing
certain elements.
• Styles and visual elements should be repeated across a page and across a web site
• Leads to cohesive and consistent web site
• Repetition can be achieve with
-Text (font) properties: Use the same way throughout
-Color: Consistent use of color throughout site/documents
-Background: Background image/color
-Page and Section Layout: Similar elements should be layout the same way
-Image: Graphics can be repeated and/or styled similarly
-Alignment: Consistent use of alignment
• Repetition lets user know that they are still on the same website
• It allows a visitor to learn the page (or section) layout only once
• Another form of repetition: Web design patterns
For instance, if you have a specific color palette, look for ways to carry it through. If
you've chosen a special header style, use it every time.
It's not just for aesthetic reasons—being consistent can also make your work easier to
read. When viewers know what to expect, they can relax and focus on the content.
LESSON 4:
Typography
LESSON 4: Typography
Typography is the art of arranging texts that makes it readable and appealing to
the viewer. It involves font style, typeface, and text structure.
Some people often misuse the term “font” as typeface. So, let us explain first the
difference between font and typeface.
Font refers to the variation of weights of a typeface, while typeface refers to the
text style. Font also refers to the format or storage mechanism of a text like .otf
and .ttf. For example, Arial Narrow, Arial Black, and Arial Rounded are fonts under
the Arial typeface.
• The style and appearance of printed matter; the art or procedure of arranging type or
processing data and printing from it.
• Typography is everywhere we look. It's in the books we read, on the websites we visit, even
in everyday life—on street signs, bumper stickers, and product packaging.
• Typography is the means by which a written idea is given a visual form. It is one of the most
influential elements that establishes the character and emotional attributes of a design;
the visual form it takes dramatically affects the accessibility of an idea and how a reader
reacts towards it.
• Typography plays an important role in how audiences perceive your document and its
information.
• Good design is about:
-capturing your audience’s interest and
-helping your audience gather information quickly and accurately.
• Typography creates relationships between different types of information, both organizing
this information and keeping it interesting.
Typography incorporates all the visual components of the written

word. It is the art (and also technique) of arranging type to make written
language legible and readable, with the goal of (typically) making it
appealing. Arranging type involves selecting typefaces, point size, line
length, line-spacing (leading), letter-spacing (tracking), and adjusting the
space between specific pairs of characters (kerning). Typography is the
study of type and how to use it to aid in the communication of specific
message.
Font vs. Typeface
Typeface = Families
Fonts = Family Members
FONT
• A ‘font’ is a collection of characters of a particular size and style belonging to
a particular typeface family.
• Usually vary by type sizes and styles.
• The sizes are measured in points
• This includes the letter set, the number set, and all of the special character
and diacritical marks you get by pressing the shift, option, or command/
control keys.
Font Effects
• A numbers of effects that are useful for bringing viewer’s atten
tion to content:
– Case: UPPER and lower cased letter
– Bold, Italic, Underline, superscript or subscript
– Embossed or Shadow
– Colours
– .
TYPEFACE
• A ‘typeface’ is a family of graphic characters that usually
includes many type sizes and styles.
• A typeface contains a series of fonts. For instance, Arial, Arial
Black Arial Narrow and Arial Unicode MS are actually 4 fonts
under the same family.
TYPEFACE
• A ‘typeface’ is a family of graphic characters that usually
includes many type sizes and styles.
• A typeface contains a series of fonts. For instance, Arial, Arial
Black Arial Narrow and Arial Unicode MS are actually 4 fonts
under the same family.
Typeface is unfortunately one of those things that people

sometimes go a bit crazy on when they’re trying to make
something look more “designed”. I’m sure you’ve all seen
documents that look like this. It’s chaotic, hard to read, and not
particularly professional looking. There are some easy rules,
though, that can help you avoid a mess like this.
Serif Vs. Sans Serif
Serif Faces
• Decorative strokes added to the end of a letter's
• Serifs improve readability by leading the eye along the line of type.
• Serifs are the best suited for body text.
• Serif faces are more difficult to read in small scale (smaller than 8pt) and in
very large sizes.
• Serif have little strokes called serifs attached to the main part of the letter
• Serifs are the short lines at the ends of characters. Many design theorists
believe that serifs help move the eye across the page (almost all print had serif
s until the twentieth century.)
Sans Serif Text

• Sans serif faces doesn't have decorative strokes.
• Use sans serif faces for small (smaller than 8pt) and very large sizes.
• Used for footnotes and headlines
• It tends to be easier to read on computer screens, including smartphones and
tablets.
• Sans serif letters have a simpler design, they’re typically thought of as the
easiest category of typeface to read for digital projects.
We have a very broad category that, for the sake of this presentation,
we’re going to call “Fancy”. This category consists of typefaces that are highly
stylized or look like script. They typically have a more decorative flair than your
serif and sans serif letters, but they’re also not nearly as readable. Because of this
I t’s good to use them sparingly, such as for titles or headings.
TYPEFACE ANATOMY
Choosing a font
In a way, fonts have their own language. They all have something to say beyond
the words on the page. They can come across as casual or neutral, exotic or graphic. That's
why it's important to think about your message, then choose a font that fits.
Fonts to avoid
Some fonts come with extra baggage, including Comic Sans, Curlz, and Papyrus.
There's nothing particularly wrong with these fonts—they just have a certain reputation for bei
ng outdated and overused.
LESSON 5:
COLOR
LESSON 5: Color
What is Color?
Color is such an important way in which humans visually experience the world; it
can be very easy for designers to take it for granted. It is precisely because of this
importance, however, that designers must not only understand the physical properties of
color (additive color versus subtractive color, for example) but also color’s various
relationships and how to apply color to a design to create a mood or other response in the
viewer.
One of the key challenges a designer faces when working with color is
understanding the two key color models, additive and subtractive. While additive color is
color we experience in the natural world—it is the color made from the light of the Sun, for
example—designers must also work with subtractive color, the color we experience when
working with paints, inks, or other pigments. In additive color, white is the presence of all of
the colors, while black is the complete absence of color. In subtractive color, black is the
result of all of colors being mixed together, while white is the absence of any color at all.
LESSON 5: Color
Understanding these differences—and their resulting limitations—is important

for designers. Additive colors, which are possible on the screen (in the design of websites,
apps, etc.) cannot always be reproduced subtractive in print (for packages, magazines,
etc.).
Additive and subtractive color models. Additive color, where white is the combination of all colors, is defined
by the RGB (Red, Green, Blue) color model, while subtractive color, where white is the absence of any color, is
defined by the CMY (Cyan, Magenta, Yellow) color model
LESSON 5: Color
Figure below demonstrates one of the most basic color relationships, that of
warm colors and cool colors. Not only do warm and cool colors create strongly related
palettes when used as groups, they also impact the overall Gestalt of a design owing to
the visual tendency of warm colors to “advance,” or appear to move toward the
viewer, and the tendency of cool colors to “recede,” or appear to move away from the
viewer. Designers can use these effects to make a package feel larger and more
important on a shelf by making it red or orange, or improve the sense of openness in a
poster by making the background blue.
Warm and cool colors. Warm colors (yellow, red,

orange, etc.) tend to appear to advance toward
the viewer, while cool colors (blue, violet, green,
etc) appear to move away from the viewer.
Designers use these features of color to help guide
the viewer through a design, or to call attention to
a particular piece of information.
LESSON 5: Color
The power of color

Color plays a vital role in design and everyday life. It can draw your
eye to an image. Sometimes it can trigger an emotional response. It can
even communicate something important without using words at all.
LESSON 5: Color
So how do we know which colors look good together

and which ones don't? The answer is simple: Color theory.
Artists and designers have followed color theory for

centuries, but anyone can learn more about it. It can help
you feel confident in many different situations, whether it's
choosing colors for a design or putting together the perfect
outfit. With a little insight, you'll be looking at color in a whole
new way.
LESSON 5: Color
If we mix these colors together, we get even more in-between shades, like
red-orange and yellow-green. All together, they form what's called a color wheel. (You
can probably see where it gets its name.)
LESSON 5: Color
Color basics
Let's start at the beginning with a refresher on the basics. Remember learning
about primary and secondary colors in school? Then you already have some knowledge
of color theory.
LESSON 5: Color
Secondary colors are created by combining two primary colors. Red and yellow make
orange; yellow and blue make green; and blue and red make purple.
LESSON 5: Color
Hue
Is the easiest one; it's basically just another word for color. In the example
below, you might describe the hue as coral pink or light red, depending on your
interpretation.
LESSON 5: Color
Saturation
Refers to intensity—in other words, whether the color appears more subtle or
more vibrant. Highly saturated colors are brighter or richer. Desaturated colors have
less pigment and therefore less oomph.
LESSON 5: Color
Value
Has to do with how dark or light the color is, ranging from black to white. As
you can see below, this gives us many different shades, from a deep reddish brown to a
light pastel pink.
LESSON 5: Color
Creating color schemes
So how do we put this all together to create professional-looking color

schemes? There are actually tried-and-true formulas based on something called color
harmony that can help.
LESSON 5: Color
Color harmony uses the color wheel to illustrate time-tested color

combinations. We'll explore some of the most common types of harmony below.
Monochromatic
The easiest formula for harmony is monochromatic because it only uses one
color or hue. To create a monochromatic color scheme, pick a spot on the color wheel,
then use your knowledge of saturation and value to create variations.
LESSON 5: Color
Analogous
An analogous color scheme uses colors that are next to each other on the wheel, like
reds and oranges or blues and greens.
LESSON 5: Color
Don't be afraid to play with the palette and create your own unique
interpretation. That's what color harmony is all about; the formulas are merely starting
points to help guide and inspire you.
LESSON 5: Color
Complementary
Complementary colors are opposite each other on the wheel; for instance,
blue and orange or the classic red and green.
LESSON 5: Color
To avoid complementary color schemes that are too simplistic, add some variety by
introducing lighter, darker, or desaturated tones.
LESSON 5: Color
Split-complementary
A split-complementary color scheme uses the colors on either side of the
complement.
This gives you the same level of contrast as a complementary color scheme but more
colors to work with (and potentially more interesting results).
LESSON 5: Color
Triadic
A triadic color scheme uses three colors that are evenly spaced, forming a
perfect triangle on the wheel.
LESSON 5: Color
Tetradic
Tetradic color schemes form a rectangle on the wheel, using not one but two
complementary color pairs. This formula works best if you let one color dominate while
the others serve as an accent.
LESSON 5: Color
LESSON 5: Color
LESSON 5: Color
LESSON 5: Color
LESSON 5: Color
LESSON 5: Color
LESSON 5: Color
LESSON 5: Color
LESSON 5: Color
LESSON 5: Color
LESSON 5: Color
LESSON 5: Color
LESSON 5: Color
LESSON 5: Color
LESSON 6:
Image
LESSON 6: Image
Images are not just limited to photographs, it also includes graphics, and
other illustrations. Having images on your composition makes it appealing to the
eyes of your viewer. Take magazine as an example, imagine that your favorite
magazine contains no image. You do not want to read it right? That is the power
of images – they are not just decorations on your composition.
Finding and placing the right image is not a difficult thing as long as you
know what kind of image you are going to use in your composition. Do you
remember using clip arts on your project designs? If yes, then I encourage you to
not use it today as we are over with the clip art era. Stock photos are now
popular in any project.
Most people are now relying on stock photos as they are free or
sometimes cost less. There are various stock image websites all over the internet.
The only thing that you need to do is to choose pictures/images for your
composition.
LESSON 6: Image
Image File Types

There are different file types of images, and they are grouped into
two categories: vector and raster.
• Vector. It is a type of image that does not lose its quality when
zoomed in. Your image will not be pixelated when enlarged.
• Raster. Opposite to vector, raster images become pixelated

when enlarged.
LESSON 6: Image
Vector Image File Extensions

• Encapsulated Postscript (EPS). This vector format are designed
to produce high-resolution graphics for print. Being a universal
file type, EPS files can be opened in any design editor.
• Adobe Illustrator Document (AI). Most preferable and

commonly used image file type by designers. If you want to
create a vector image, AI is one of the best tool for you.
LESSON 6: Image
Raster Image File Extensions

• Joint Photographic Experts Group (JPG or JPEG). This file type is the
most commonly used image file type. Since this is a raster type of
image, JPEG images are known for their “lossy” compression.
Meaning, the image quality decreases when being enlarged.
• Portable Network Graphics (PNG). This file type is known for having
transparent
• background. Images in this type are commonly used in web
documents.
• Graphics Interchange Format. This file type is known in its animated
form. You can find them in social networking sites as posts or
comments. GIFs are often used in web pages as can load quickly due
to its reduced file size.
References
• https://www.slideshare.net/LeahLewman/elements-of-art-shape-88242623
• https://visme.co/blog/wp-content/uploads/2015/09/designelements.jpg
• https://99designs.com/blog/tips/graphic-design-basics/#4
• https://faculty.washington.edu/farkas/dfpubs/Farkas-Farkas-Graphic%20Design-
Ch11Principles%20of%20Web%20Design.pdf
• https://www.interaction-design.org/literature/topics/graphic-design
• http://www.wcs.k12.mi.us/cousino/wcsart/art%20foundatons%20site/texture.html#:~:text=T
exture%20refers%20to%20the%20surface%20quality%20in%20a%20work%20of%20art.&t
ext=Some%20things%20feel%20just%20as,called%20visual%20or%20implied%20texture.
• https://www.thoughtco.com/definition-of-balance-in-art-
182423#:~:text=Balance%20refers%20to%20how%20the,not%20seem%20heavier%20tha n%20another.
• https://writingexplained.org/layout-or-lay-out-difference
• https://www.edgee.net/the-principles-of-graphic-design-how-to-use-proximityeffectively/#:~:
text=The%20principle%20of%20proximity%20is,give%20structure%20to%20 a%20layout.
• https://www.portlandlocalist.com/blog/how-to-improve-the-design-of-your-email-newsletter
• https://edu.gcfglobal.org/en/beginning-graphic-design/typography/1/
• https://www.shutterstock.com/blog/complete-guide-color-in-design
• https://blog.hubspot.com/insiders/different-types-of-image-files
• Online Videos to Watch:

• https://youtu.be/YqQx75OPRa0
• https://www.youtube.com/watch?v=n8KoAHCwnMQ
• https://youtu.be/sByzHoiYFX0
• https://youtu.be/MELKuexR3sQ
• https://www.youtube.com/watch?v=65WjYDEzi88
• https://www.youtube.com/watch?v=ZK86XQ1iFVs
• https://www.youtube.com/watch?v=EFf9jBs2yfU
THANK YOU…..
QUESTION /
CLARIFICATION ?

Ge10 - Module 7

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ge10 - Module 7

Uploaded by

Copyright:

Available Formats

GE 10

Kenneth A. Palomar, LPT

Graphic Design is a process in which we use typography,

Graphic design is a creative process that combines art and

Image and Type design

Symbols, logos and logotypes

Logotypes are corporate identifications based on a special typographical word

Symbols: an abstract representation of an idea or identity.

Logo: a symbol that may be a combination of image and type

Logotype: a symbol composed of type only.

The basic elements of graphic design are the

Line is an infinite series of points. Graphically, a line is the connection between

Lines can be used and commonly found in drawings or

These attributes include:

Planes—or shapes—are defined by the lines at their edges. Artists

There are two (2) major categories of shapes in design:

Figure 3 shows the different examples of geometric and organic shapes.

Shapes can be used in organizing or dividing contents, create illustrations, and

Texture can be used for:

Real texture (left) and visual texture (right)

Three Main Types of Balance

FORMAL BALANCE INFORMAL BALANCE

Symmetrical Balance Asymmetrical Balance

Branding and identity can be found everywhere. Look around you,

6. Select professional typography. When selecting fonts, it is important to consider these

b. Don’t mix fonts/typefaces. Do not mix fonts or typefaces in a word or sentence as it

7. Choose on-brand supporting graphics. Your brand identity should have a

Layout and composition are the building blocks of

There are five basic principles of layout and

Example we have three individual shapes

If placed together in just the right proximity, negative space is made to

“White Space in design composition is same as use of Silence in a musical

There are two types of white space:

How important is white

Hedge (2017) listed some of the importance of white space in design.

1. Improved comprehension. Spaces between lines in a paragraph makes the content

5. Branding and Design Tone. Let us look back at the steps of

Edge and Centre Alignment

Good Alignment Poor Alignment Mixed Alignment

Approaches of alignment in design

• An abrupt shift in the appearance of the composition. Asymmetry relies on

Typography incorporates all the visual components of the written

Font vs. Typeface

Typeface is unfortunately one of those things that people

Serif Vs. Sans Serif

Sans Serif Text

Understanding these differences—and their resulting limitations—is important

Warm and cool colors. Warm colors (yellow, red,

The power of color

So how do we know which colors look good together

Artists and designers have followed color theory for

Creating color schemes

So how do we put this all together to create professional-looking color

Color harmony uses the color wheel to illustrate time-tested color

Image File Types

• Raster. Opposite to vector, raster images become pixelated

Vector Image File Extensions

• Adobe Illustrator Document (AI). Most preferable and

Raster Image File Extensions

• Online Videos to Watch:

You might also like