Desktop Publishing

Working with Text Graphics

NELSON (Mr. William)

ITT 06105
Lecture 2
 Outline
Introduction to Text Graphics.

Typography Essentials.

Design Principles in Text Graphics.

Integrating Graphics with Text.

Tools for Text Graphics.

3
 Objectives
Understand the Role of Text Graphics in
Communication.
Learn Typography Principles.

Master Color Theory and Layout Design.

Integrate Text with Images and Graphics.

Utilize Desktop Publishing Software Tools.

Develop Skills for Prepress and Proofing

4
 Images
An image is an array, or a matrix, of square pixels
(picture elements ) arranged in columns and row.
It has a definite height and a definite width counted in
pixels.It has a definite height and a definite width counted in
pixels. It has a definite height and a definite width counted in
pixels.

5
Christopher James
6
 Vector Graphics
Mathematical equations rather than pixels.

Scalable and can be resized without losing quality.

Smaller file sizes than bitmap files.

Logos, typography, and illustration.

SVG (Scalable Vector Graphics), EPS (Encapsulated

PostScript), AI (Adobe Illustrator), PDF (Portable
Document Format).

7
 Why Vector Graphics are
Important
Scalability: scaled up or down without losing quality.

Editability: easily editable and modifiable.

Efficiency: generally smaller in file size.

Versatility: can be used in a wide range of

applications, from digital designs to printed
materials.

8
 Raster Graphics

Made up of pixels

Each pixel having its own color and place in the image.

Used in digital designs and photography.

The sharpness of the image is determined by the density

of the pixels, and this density determines the resolution.
JPEG (Joint Photographic Experts Group), PNG (Portable
Network Graphics), TIFF (Tagged Image File Format), GIF
(Graphics Interchange Format).

9
 Techniques for Working
with Raster Graphics
Add alt tags to images for search engines and users
who cannot see the images.
It's important to optimize raster images for faster
loading times and better quality.
 Resize images to the appropriate size.

 Use high-resolution images for print.

 Compress images without losing quality.

10
 Where you can download
free Images
Unsplash offers high-quality, free-to-use images.
Images here can are contributed by photographers
and can be used for personal or commercial projects
without attribution.
Pixels offers free stock photos and videos. Images
here can are curated from various sources and can
be used for personal or commercial projects without
attribution.

11
 Where you can download
free Images
Pixabay offers a collection images, videos, and
illustrations. Images here can are contributed by a
community of photographers and illustrators and can be
used for commercial projects without attribution.
Freepik offers free and premium images, vectors, icons,
and more. Images here can be used for personal or
commercial projects with attribution.
Canva offers a library of free images and illustrations.
Images here can be used for personal or commercial
projects within the Canva platform.
12
 Typography

Typography is the art of arranging type for legibility,

readability, and visual appeal

13
 Elements of Typeface
Anatomy
Baseline: invisible line on which all characters rest.

Meanline/Midline: imaginary line representing the

height of uppercase letters.
Leg: vertical stroke descending from letterforms,
such as "k" or "y."
Serif: small line/stroke extending from main stroke of
a letterform.
Bowl: rounded/curved part of letterforms, such as
"b," "d," or "p."
14
 Elements of Typeface
Anatomy
Ascender: part of lowercase letters extending above
meanline, such as "h" or "l."
Counter: enclosed or partially enclosed space within
a letterform, such as "o" or "a."
X-height: height of lowercase letters, specifically
lowercase "x."
Cap-height: height of uppercase letters, specifically
uppercase "H."

15
 Typography Hierarch

Using different font sizes and weights

Create visual hierarchy in a document

Helps guide the reader's eye and highlight important

information.

16
 Fonts

Font refers to the typefaces or styles of letters and

characters used in designing and formatting
documents.
Fonts help convey the message of the document and
impact the overall design.

17
 Fonts Types

Serif fonts have small lines or flourishes at the end of

each stroke, making them more traditional and
formal.
Sans-serif fonts do not have the small lines or
flourishes, making them more modern and cleaner.
Script fonts look like handwriting or calligraphy, and
are often used for invitations or formal events.
Display fonts are meant to be used in larger sizes,
and are often used for headlines or logos.
18
 Fonts Types

Monospace fonts have equal spacing between each

letter, making them useful for coding or
programming.
Handwriting fonts mimic the look of handwriting, and
can be either casual or formal.
Decorative fonts are highly stylized and can be used
to convey a specific mood or theme. They are often
used sparingly to add interest to a design.

19
 Spacing in Designing

Spacing refers to the distance between letters,

words, and lines.
Kerning: space between individual letters.

Tracking: space between groups of letters (width)

Leading: space between lines of text (height)

20
 Working with Colors

Colors play a crucial role in creating an effective and

appealingly pleasing design.
Color theory is a method of analyzing the color wheel
into hue, value and Saturation.
Key to understand colors
 Hue refers to a color’s position on the color wheel.

 Saturation refers to the intensity of a color

 Value refers to level of gray or tone of a color.

21
Working with Colors

22
 Color Modes

RGB stands for Red, Green, Blue.

 It is an additive color model used in digital design.

RGB colors are usually used for:

 Web & app design; icons, buttons, graphics.

 Branding; online logos, online ads.

 Social media; images for posts, profile pictures, profile

backgrounds.
 Visual content; video, digital graphics, infographics,
photographs for website, social media, or apps.
23
 Color Modes

CMYK stands for Cyan, Magenta, Yellow, and Key (Black).

 It is a subtractive color model used in printing.

CMYK colors are usually used for:

 Branding; business cards, stationary, stickers, signs &
storefronts
 Advertising; billboards, posters, flyers, vehicle wraps,
brochures
 Merchandise; t-shirts, hats and other branded clothing,
promotional swag (pens, mugs, etc.)
 Essential materials; product packaging, restaurant menus
24
Working with Colors

25
Color Relationship

26
 Color Schemes
(monochromatic)
Created using different shades, tints, and tones of a
single color
Create a cohesive and harmonious design

Used in minimalist or modern designs

Can add interest without being too overwhelming

27
 Color Schemes (analogous)

Use colors that are adjacent to each other on the

color wheel
Create a more subtle color scheme than
complementary colors
Can create a sense of harmony and balance in a
design
Often used in interior design or branding for wellness
products

28
 Color Schemes
(complementary)
Use two colors that are directly opposite each other
on the color wheel
Create a high-contrast design

Can make elements stand out from each other

Can also clash and be visually jarring if used

incorrectly
Often used in advertising or marketing

29
 Color Schemes (Split
complementary)
Uses the two colors adjacent to the complementary
color.
For example, if the complementary color of red is
green, then the split complementary colors would be
red, yellow-green, and blue-green.
Used to create a color palette that is more subtle and
balanced than a complementary color scheme.

30
 Color Schemes (Triadic)

Involves three colors that are evenly spaced on the

color wheel.
For example, red, yellow, and blue are a triadic color
scheme because they are spaced 120 degrees apart
from each other on the color wheel.
Used to create a vibrant and harmonious color
palette.

31
 Color Schemes (Triadic)

Known as double complementary or rectangular color

scheme
Involves four colors that are arranged in two
complementary pairs.
For example, blue, orange, red-violet, and yellow-
green.
Used to create a complex and dynamic color palette.

32
 Color Psychology

Scientific field that studies the psychological and

emotional effects of colors on human behavior and
perception.
Evoke different emotions and moods, and can
influence people's decision-making process.
Create effective branding, advertising, and
marketing campaigns.
Have cultural and regional associations.

33
 Color Psychology (example)

Red: passion, energy, excitement, urgency, and

danger or warning.
Blue: calmness, trust, reliability, professionalism, and
sadness or coldness.
Yellow: happiness, optimism, friendliness, and
attention-grabbing or even irritating.
Green: nature, growth, balance, harmony, and envy
or greed.

34
 Color Psychology (example)

Orange: warmth, enthusiasm, creativity, and

overwhelming or aggressive.
Purple: luxury, creativity, royalty and mystery or
even sadness.

35
 Class Activity

Group Discussion and Presentation

You are tasked with creating a promotional brochure for a new
line of organic skincare products. The brochure will be distributed
both online and in print. Discuss your design strategy, including
your choice of graphics, typography, color palette, and image
optimization techniques. How will you ensure that your design
effectively communicates the brand's message of natural, eco-
friendly skincare? Also, what considerations did you take into
account when selecting fonts and typefaces, and how did they
contribute to the overall design aesthetic?

36
Any Question???

37