Graphic Design

• Graphic Design-The art or skill of combining text and

pictures
• Graphic design, also known as communication design, is
the art and practice of planning and projecting ideas and
experiences with visual and textual content.
• The form of the communication can be physical or virtual,
and may include images, words, or graphic forms.

• The experience can take place in an instant or over a long

period of time. The work can happen at any scale, from
the design of a single postage stamp to a national postal
signage system.
Examples for Graphic Design
 Introduction to Color Theory
With colors you can set a mood, attract attention, or make a
statement. You can use color to energize, or to cool down. By
selecting the right color scheme, you can create an ambiance of
elegance, warmth or tranquility, or you can convey an image of
playful youthfulness. Color can be your most powerful design
element if you learn to use it effectively.

Colors affect us in numerous ways, both mentally and

physically. A strong red color has been shown to raise the
blood pressure, while a blue color has a calming effect.
 The Color Wheel
The color wheel or color circle is the
basic tool for combining colors. The first
circular color diagram was designed by
Sir Isaac Newton in 1666.

The color wheel is designed so that

virtually any colors you pick from it will
look good together. Over the years,
many variations of the basic design have
been made, but the most common
version is a wheel of 12 colors based on
the RYB (or artistic) color model.
There are also definitions (or categories) of
colors based on the color wheel. We begin
with a 3-part color wheel.
Primary & Secondary Colors

Primary Colors:
Red, yellow and blue
In traditional color theory (used in paint
and pigments), primary colors are the 3
pigment colors that cannot be mixed or
formed by any combination of other
colors. All other colors are derived from
these 3 hues.

Secondary Colors:
Green, orange and purple
These are the colors formed by mixing the
primary colors.
Tertiary Colors

Tertiary colors - are created by

mixing primary and secondary
colors.
Yellow-orange, red-orange, red-
purple, blue-purple, blue-green &
yellow-green
These are the colors formed by
mixing a primary and a secondary
color. That's why the hue is a two
word name, such as blue-green,
red-violet, and yellow-orange.
Primary & Secondary Colors

Primary Colors:
Red, yellow and blue
In traditional color theory (used in paint
and pigments), primary colors are the 3
pigment colors that cannot be mixed or
formed by any combination of other
colors. All other colors are derived from
these 3 hues.

Secondary Colors:
Green, orange and purple
These are the colors formed by mixing the
primary colors.
Categories Of Color / Warm & Cool Color

Warm and cool colors

The color circle can be divided
into warm and cool colors.
Warm colors- are vivid and
energetic, and tend to
advance in space.
Cool colors - give an impression
of calm, and create a soothing
impression.
• White, black and gray are
considered to be neutral.
 Warm & Cool Color

Warm Color Scheme

Cool Color Scheme Neutral Color Scheme

 Tints, Shades, and Tones Color Scheme
These terms are often used
Tints - adding white to a pure hue:
incorrectly, although they
describe fairly simple color
concepts.

If a color is made lighter by Shades - adding black to a pure hue

adding white, the result is
called a tint.

If black is added, the darker

Tones - adding gray to a pure hue:
version is called a shade.

And if gray is added, the result

is a different tone.
1 2 3
 Color Harmony
• Harmony can be defined as a pleasing arrangement of parts, whether it be
music, poetry, colour, etc......

In visual experiences, harmony is something that is pleasing to the eye. It

engages the viewer and it creates an inner sense of order, a balance in the
visual experience. When something is not harmonious, it's either boring or
chaotic. At one extreme is a visual experience that is so bland that the
viewer is not engaged.

• The human brain will reject under-stimulating information. The human

brain rejects what it cannot organize, what it cannot understand. The
visual task requires that we present a logical structure. Color harmony
delivers visual interest and a sense of order.

• In summary, extreme unity leads to under-stimulation, extreme

complexity leads to over-stimulation. Harmony is a dynamic equilibrium.
Below are shown the basic color chords based on the color wheel.

1)-Complementary color scheme

Colors that are opposite each other on the
color wheel are considered to be
complementary colors (example: red and
green).
The high contrast of complementary
colors creates a vibrant look especially
when used at full saturation. This color
scheme must be managed well so it is not
jarring.
Complementary color schemes are tricky
to use in large doses, but work well when
you want something to stand out.

Complementary colors are really bad for text.

Complementary color scheme
Home Interior Complementary color scheme
Below are shown the basic color chords based on the color wheel.

2)-Analogous color scheme

Analogous color schemes use colors that
are next to each other on the color wheel.
They usually match well and create serene
and comfortable designs.

Analogous color schemes are often found

in nature and are harmonious and
pleasing to the eye.

Make sure you have enough contrast

when choosing an analogous color
scheme.

Choose one color to dominate, a second

to support. The third color is used (along
with black, white or gray) as an accent.
Analogous color scheme
Below are shown the basic color chords based on the color wheel.

3)- Triadic color scheme

A triadic color scheme uses colors that are

evenly spaced around the color wheel.

Triadic color schemes tend to be quite

vibrant, even if you use pale or
unsaturated versions of your hues.

To use a triadic harmony successfully, the

colors should be carefully balanced - let
one color dominate and use the two
others for accent.
Home Interior Triadic color scheme
Below are shown the basic color chords based on the color wheel.

4)- Split-Complementary color scheme

The split-complementary color scheme is
a variation of the complementary color
scheme. In addition to the base color, it
uses the two colors adjacent to its
complement.
This color scheme has the same strong
visual contrast as the complementary
color scheme, but has less tension.

The split-complimentary color scheme is

often a good choice for beginners,
because it is difficult to mess up.
3 Split Complementary Colors
Below are shown the basic color chords based on the color wheel.

5)-Rectangle (tetradic) color scheme

The rectangle or tetradic color scheme

uses four colors arranged into two
complementary pairs.

This rich color scheme offers plenty of

possibilities for variation.

Tetradic color schemes works best if you

let one color be dominant.

You should also pay attention to the balance

between warm and cool colors in your design.
Below are shown the basic color chords based on the color wheel.

2)-Square color scheme

The square color scheme is similar to the

rectangle, but with all four colors spaced
evenly around the color circle.

Square color schemes works best if you let

one color be dominant.

You should also pay attention to the

balance between warm and cool colors in
your design.
 Primary Colors of Light and Pigment

Addiitive & Subtractive Colors:

Primary Colors:
This is where color can get a little
confusing for some folks. There are two
basic color models that art and design
students need to learn in order to have
an expert command over color, whether
doing print publications in graphic design
or combining pigment for printing. These
two color models are:
1) Light Color Primaries (Red,
Green, Blue)
2) Pigment Color Primaries (Cyan,
Magenta, Yellow)
 1) Light Color Primaries (Red, Green, Blue)
Traditional Primary colors
Additive Primary colors
Substractive Primary colors
Some of you might be scratching your
heads, asking, “Where is the Blue, Red,
and Yellow model?” The artist color
wheel (based in blue, red, and yellow)
predates modern science and was
discovered by Newton’s prism
experiments. Scientifically, this does not
adequately address the true range of
spectral color. Upon discovering more
about spectral color and how
wavelengths work with surfaces
(reflection/absorption) and the human
eye, the blue-red-yellow model is shifting
to the cyan-magenta-yellow model. We
DO, however, still use the RBY model for
mixing paints, and it is the most common
color wheel students will typically find in
art stores.
 RGB/LIGHT
Color is transmitted through transparent
media.
Monitor Pixels All colors added together = white.

The absence of light = true black.

Because computer graphics, websites,

and other digital presentations are
projected/transmitted with light, screen-
targeted graphics should be saved in this
color model, or “RGB Mode.”

IMPORTANT: Note that when RGB’s

primaries are mixed evenly that they
create the secondary colors of our next
color model, CMY (cyan, magenta, and
yellow)!
Subtractive (Pigment) Color Primaries
• Subtractive (Pigment) Color Primaries
• However, there is another set of primary colors with which you may
be more familiar. The primary colors of pigment (also known as
subtractive primaries) are used when producing colors from
reflected light; for example, when mixing paint or using a color
printer. The primary colors of pigment are magenta, yellow, and
cyan (commonly simplified as red, yellow, and blue).
• Pigments are chemicals that absorb selective wavelengths—they
prevent certain wavelengths of light from being transmitted or
reflected. Because paints contain pigments, when white light
(which is composed of red, green, and blue light) shines on colored
paint, only some of the wavelengths of light are reflected. For
example, cyan paint absorbs red light but reflects blue and green
light; yellow paint absorbs blue light but reflects red and green
light. If cyan paint is mixed with yellow paint, you see green paint
because both red and blue light are absorbed and only green light is
reflected.
 CMYK/PIGMENTS
PRINT
Color is absorbed by and reflected off of media.
Because these colors are achieved via reflection, we
assume a pure white ground as the base filter for
pure colors.
All colors added together = near black.
To achieve true black, pure black must be added,
thus giving us the CMYK model (K=black). This is the
standard color model for most printing, thus
graphics for print are typically prepared in “CMYK
Mode.”
These primaries are ultimately
While most printers recognize this model as the
derived from the RGB model as
standard pigment model, the traditional artist Color
secondary colors. The main
Wheel substitutes Blue as the Cyan primary and Red
reason they are promoted to
as the Magenta primary, resulting in slightly different
having their own color model is
secondary and tertiary results.
because it is from CMY that we
NOTICE: The colors in RGB appear slightly more
can create all other printable
brilliant than in CMYK. This can be attributed to the
colors. Remember that,
difference between the mode of transmitting light vs.
ultimately, without the existence
absorbing/reflecting light off of surfaces.
of RGB light wavelengths, we
would see nothing.
 Hue /Saturation/ Brightness(HSL)

• Hue:- Hue is therefore the actual color or else another word for
color.
Hues are colors and what hue we see is dependent on the wavelength
of light being reflected or produced.
• Saturation:- saturation indicates amount of gray in a colors.
Saturation refers to how pure or intense a given hue is. 100%
saturation means there’s no addition of gray to the hue.
• Brightness/Lightness:- the relative degree of black or white
mixed with a given hue.
Adding white makes the color lighter (creates tints) and adding black
makes it darker (creates shades).
 Raster Image vs Vector Image

There are two main type of image files: Raster and Vector. Raster
images are created with pixel-based programs or captured with a
camera or scanner. They are more common in general such as jpg,
gif, png, and are widely used on the web.
Vector graphics are created with vector software and are common
for images that will be applied onto a physical product. Also used in
CAD, engineering, and 3D graphics which we do not provide
information nor services for.
 VECTOR & RASTER(PIXEL)
Raster/ Pixel graphics vector graphics
A raster image has a specific number of Vector images are
pixels. When you enlarge the image file mathematical calculations from
without changing the number of pixels, one point to another that form
the image will look blurry. When you lines and shapes. If you zoom
enlarge the file by adding more pixels, the into a vector graphic it will
pixels are added randomly throughout the always look the same.
image, rarely producing good results.
 VECTOR IMAGE
• A vector file is sometimes called a geometric
file. Most images created with tools such as
Adobe Illustrator and CorelDraw are in the
form of vector image files. Vector image files
are easier to modify than raster image files
(which can, however, sometimes be
reconverted to vector files for further
refinement).