Elements of Multimedia

Graphics
Graphics in Multimedia

What is graphics?
- Graphics are an important part of
multimedia because humans are visually
oriented.
- Images including photographs,
illustrations, drawings, clip art, icons, or
any other non-text elements on a website
or in social media are an example of
graphics.
- There is no movement in these types of
pictures.
Graphics in Multimedia

In a multimedia context, graphics may

consist of slide shows or galleries that a
website or social media visitor can view.
They may have clickability that leads the viewer to
another element, such as audio or video.
Graphics appear in many multimedia applications,
providing communication through attractive visual
effects.
Graphics in Multimedia

What is an image?
- An image is a visual representation of
something, while a digital image is
a binary representation of visual data.
- These images can take the form of
photographs, graphics, and individual
video frames.
- For this purpose, an image is a picture
that was created or copied and stored in
electronic form.
Graphics in Multimedia

Raster vs. Vector

Graphics
 When working with digital photos,
graphic design, logos, and other
digital images, raster and
vector are the two most
common le types you’ll
encounter.

Raster images are made up of many

tiny pixels, whereas vector images
have formed using mathematical
paths.
fi
Raster vs. Vector Graphics

Raster File
Raster, or bitmap, images consist of tiny squares
called pixels.

These pixels contain bits of color and, when

combined, they build images. The more pixels in
an image the higher the quality, and vice versa.

When you zoom in on an image, the pixels

become more apparent while the details of the
image become blurry.
 Raster vs. Vector Graphics

Raster File
Due to the abundance of pixels in a raster
image, the le sizes can be substantial.

An illustration with higher DPI (dots per inch) or

PPI (pixels per inch) will be larger in size and
data, which can be worrisome when there are
limits to image storage or restrictions on
uploaded le sizes.
Tip: You can quickly cut down le size by
reducing the resolution to 72 PPI for online
images.
fi
fi
fi
 Raster vs. Vector Graphics

What are raster les used for?

Raster les work best when you need to store and display
high-quality photographs. Most photos come in the raster
le format, whether they’re print or digital.

With software like Adobe Photoshop, you can edit

individual pixels within a raster le to change the
appearance of a photograph.

However, each raster image is limited to its individual

dimensions and number of pixels, which affects its size
and resolution. Increasing the size of an image with too
few pixels can cause pixelation, which isn’t usually
desirable.
fi
fi
fi
fi
 Raster vs. Vector Graphics

Main raster le types

- JPEG (Joint Photographic Experts Group)
les compress images and are mainly used for digital
photos
- PNG (Portable Network Graphic) les are similar but
can also display transparent backgrounds.
- Animated raster graphics tend to be created
as GIF (Graphic Interchange Format) les.
- TIFFs (Tagged Image Format File) allow graphic
designers to keep editing images without any
decrease in quality.
fi
fi
fi
fi
 Raster vs. Vector Graphics

Advantages of raster les

1. Attention to detail. When displayed in the right
dimensions, raster les can show off all the intricate details
and colors found in high-resolution photos. The more
pixels a le contains, the stronger the image quality.

2. Precise editing. You have the power to individually alter

each pixel when editing a raster graphic or photograph.
This lets you enhance and tailor the image to your own
needs.

3. Widely compatible. Raster les can open in a wide range

of programs and web browsers, making it easy to view,
edit, and share your images.
fi
fi
fi
fi
 Raster vs. Vector Graphics

Disadvantages of raster les

1. Limited resolution. Unlike vector images, raster les don’t
maintain their resolution when resized. Their colors and
details can distort when enlarged, reducing the number of
ways you can use these images.

2. Larger le sizes. A raster le may include millions of

pixels. While this creates a highly detailed image, it can
also increase the le size and loading speed.

3. Fabric printing issues. The square pixels that make up

raster images don’t always transfer well to fabrics and
clothing. For this reason, vector images are a more
common choice when creating T-shirt logos and prints.
fi
fi
fi
fi
fi
 Raster vs. Vector Graphics

Vector File
Vectors use a different approach to image
renderings. They’re made of paths and
curves dictated by mathematical formulas.
These paths and curves are produced
exclusively through design softwares designed
for vectors, like Adobe Illustrator or Sketch.

Due to their algorithmic makeup, vectors are

in nitely scalable, and remain smooth and crisp
even when sized up to massive dimensions.
fi
Raster vs. Vector Graphics

What are vector les used for?

The vector format is handy when you need high-quality
graphics that can easily resize to different scales. Since
they’re created using mathematical formulas, vector les
won’t become fuzzy or distorted — no matter how large or
small you make them.

Digital illustrations and company logos frequently take this

form if the graphic needs to be sized up or down for a
variety of promotional materials.

From bite-sized business cards to T-shirts and posters, a

logo saved in vector format won’t lose its resolution.
fi
fi
 Raster vs. Vector Graphics

Main vector le types

- .ai: Short for Adobe Illustrator, this le is commonly used in print media and
digital graphics, such as logos.
- .eps: Encapsulated PostScript is an older type of vector graphics le. .eps
les don’t support transparency in the way more modern le formats like .ai do.
- .pdf: The Portable Document Format is built for the exchange of documents
across platforms and is editable in Adobe Acrobat.
- .svg: The Scalable Vector Graphics format is based in XML (a markup language
used widely across the Internet that's readable by both machines and
humans). It’s useful for the web, where it can be indexed, searched, and scripted.
fi
fi
fi
fi
fi
 Raster vs. Vector Graphics

Advantages of vector les

1. In nite resolution. There’s virtually no limit on how big
you can make a vector image without losing its resolution.
In contrast, raster les only maintain their resolution when
tted to a speci c size. The bigger you stretch them, the
more the quality can decline.

2. Lighter le sizes. By avoiding blocks of pixels, vector les

tend to be more lightweight than raster images such as
photos, which can feature lots of camera data.

3. Plenty of design features. You can add shapes, text,

different colors, and lters to create unique illustrations and
designs — plus, you can easily go back and edit over and
over again.
fi
fi
fi
fi
fi
fi
fi
fi
 Raster vs. Vector Graphics

Disadvantages of vector les

1. Less useful for complex photos. Highly detailed digital
photos may be better suited to the raster format, where
their individual pixels can be edited. Vector les tend to be
more suitable for graphics rather than photographs.

2. Compatibility issues. You’ll need a vector-based design

program like Adobe Illustrator to open and work on vector
les. Editing vectors in raster-based software can prove
dif cult.

3. Conversion dif culties. It’s generally much harder to

convert a raster image to a vector le than the other way
around because it requires more computing power.
fi
fi
fi
fi
fi
fi
Graphics in Multimedia

Color Theory 101

Color Theory

Color theory is the basis for the

primary rules and guidelines that
surround color and its use in
creating aesthetically pleasing
visuals.

By understanding color theory basics, you can begin

to parse the logical structure of color for yourself to
create and use color palettes more strategically.
The result means evoking a particular emotion, vibe,
or aesthetic.
Color Theory 101

Primary Colors
Primary colors are those you can't create
by combining two or more other colors
together.
There are three primary colors:

‣ Red

‣ Yellow

‣ Blue
Color Theory 101

Secondary Colors
Secondary colors are the colors that are
formed by combining any two of the three
primary colors.
There are three secondary colors: orange, purple,
and green. You can create each one using two of
the three primary colors. Here are the general
rules of secondary color creation:

‣ Red + Yellow = Orange

‣ Blue + Red = Purple

‣ Yellow + Blue = Green

Color Theory 101

Tertiary Colors
Tertiary colors are created when you mix a
primary color with a secondary color.
The most important component of tertiary colors
is that not every primary color can match with a
secondary color to create a tertiary color.

For example, red can't mix in harmony with green,

and blue can't mix in harmony with orange -- both
mixtures would result in a slightly brown color
(unless of course, that's what you're looking for).
Color Theory 101

Tertiary Colors
Instead, tertiary colors are created when a primary color
mixes with a secondary color that comes next to it on the
color wheel below.

There are six tertiary colors that t this requirement:

‣ Red + Purple = Red-Purple (magenta)

‣ Red + Orange = Red-Orange (vermillion)
‣ Blue + Purple = Blue-Purple (violet)
‣ Blue + Green = Blue-Green (teal)
‣ Yellow + Orange = Yellow-Orange (amber)
‣ Yellow + Green = Yellow-Green (chartreuse)
fi
Color Theory 101

A closer look

Now you know what the “main” colors are, let's take it
one step further with the different components of
color: hue, saturation, and value.
These are terms you might not encounter in daily life,
but they're the key to understanding more nuanced
colors
Color Theory 101

Hue
Hue is the easiest one; it's basically just another
word for color.
In the example ➡, you might describe the hue
as coral pink or light red, depending on your
interpretation.
A hue would either be: red, red-orange, orange-
yellow, yellow, yellow-green, green, green-blue,
blue, violet, purple, purple-red.
Color Theory 101

Saturation
Saturation refers to intensity—in other words,
whether the color appears more subtle or
more vibrant.
Highly saturated colors are more vivid because it’s
100% that color. Desaturated colors have less
pigment and may appear grayish.
Color Theory 101

Value
Value has to do with how dark or light the color is,
ranging from black to white.
We can get different values by adding black or
white to any color. Another word for value is
brightness.
As you can see in the example ➡, this gives us
many different shades, from a deep reddish brown
to a light pastel pink.
Graphics in Multimedia

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.
Color harmony uses the color wheel to illustrate
time-tested color combinations.
Color Theory 101

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.
The best thing about
monochromatic color schemes is
that they're guaranteed to match.
The colors suit each other perfectly
because they're all from the same
family.
Color Theory 101

Analogous

An analogous color scheme uses colors that

are next to each other on the wheel, like reds and
oranges or blues and greens.
Color Theory 101

Complementary
Complementary colors are opposite each other on
the wheel; for instance, blue and orange or the
classic red and green.
To avoid complementary color schemes that are
too simplistic, add some variety by introducing
lighter, darker, or desaturated tones.
Color Theory 101

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).
Color Theory 101

Triadic
A triadic color scheme uses three colors that are
evenly spaced, forming a perfect triangle on the
wheel.
These combinations tend to be pretty striking —
especially when they
include primary or secondary colors — so be mindful
when using them in your work.
Color Theory 101

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.
In general, tetradic color palettes are the
best way to get the best of both worlds -
balance, and diversity, as all the colors
used are very different, yet still
harmonious.