Lesson 3

LESSON 3: Imaging
and Designing for

the Online
Environment
LEARNING OBJECTIVES :
At the end of the lesson, you will be able to
• identify basic principles of design;
• identify several file formats used on the web;
• manipulate images using image manipulation;
• Evaluate and critique an existing website based on the principles of design; and
• Create a infographic applying principles of design.

Evaluating advertisement.
Do the ads catch your attention?
What makes it appealing to you?

PRINCIPLES
OF DESIGN
PRINCIPLES OF DESIGN
BALANCE
PROPORTION
VARIETY
PATTERN
UNITY
EMPHASIS
MOVEMENT
BALANCE
The visual weight of

objects, texture, colors,
and space is evenly
distributed on the screen
PROPORTION
Systematic relationship
of one thing to another in
any given composition.
VARIETY
Refers to changing up the

parts and things in your
image to avoid it from
becoming monotonous.
PATTERN
Repetition of more than

one design element.
UNITY
Refers to how different
elements of an artwork or
design work or come
together and create a
sense of wholeness.
EMPHASIS
An area in the design

that may appear in
different sizes, textures,
shapes or colors to
attract the viewer’s
attention.
MOVEMENT
The way the eye travels
over a design
USE OF
INFOGRAPHICS
INFOGRAPHICS
A collection of imagery,
charts, and minimal text
that gives an easy-to-
understand overview of a
topic.
Tips to create good and awesome infographics
 Be creative
Have a good flow
Be consistent
 Use images
 Make text easy to read and be informative but keep it short
Recheck for any mistakes

Characteristics of infographics
 Thesis/Story
Data
Simplicity (color, style, and illustrations)
 Sources
 Branding/Shareability
IMAGE FILE
FORMAT
NATIVE COMMON
It is the default file that a This includes image

software application is file formats that are
BOTH ARE
designed to work with. saved/finished/rendere
IMAGE
The software application d/exported products
FILE
can open the file during after you edit them
FORMATS.
and after the process of using a specific
editing application
Native Image File Formats
IMAGE EDITORS
ILLUSTRATION/
VECTOR ART
Common Image File Formats
SPECIAL
FILE FORMAT COMPRESSION BEST FOR EXAMPLES
ATTRIBUTES
TIFF (.tif , .tiff) Lossless – no High-quality prints, Can save
compression; very professional transparencies
high quality images publications, archival
copies.
BITMAP (.bmp) None High quality scans,

archival copies
GIF (.gif) Lossless – Web images Can be animated,

compression without can save
Graphics Interchange loss of quality transparency
Format
SPECIAL
ATTRIBUTES
PNG (.png) Lossless – Web images Can save transparency

compression with
Portable Network loss of quality
Graphics
JPEG (.jpg, .jpeg) Lossy – some file Web images, Can choose amount of
information is nonprofessional compression when
compress or lost printing, e-mail, saving in image editing
Powerpoint programs like Adobe
Photoshop or GIMP
SPECIAL
ATTRIBUTES
EPS (.eps) None – uses vector Vector artwork, Saves vector information
information illustrations
RAW Image Files (.raw None Photography

, .cr2, .nef , .orf, .sr2
and more)
Observe the given graphic
design. Analyze it and explain
the principle of design used.
IMAGE
MANIPULATION
GRAPHICS
EDITING
SOFTWARE
An application used
to design, edit or
organize images.
Principles and Basic Techniques of Image Manipulation
 Cropping
 Color Balance
 Adjusting Brightness and Contrast
 Compression and Resizing
 Color Blending
 Combining Multiple Images

Image Hosting Sites
How will you show and share
your skills in imaging and
design?
Can a graphic design be
considered visual
communication? How?
Written Works #3
Visit a school website or any blogging website you prefer.

Then observe and examine the graphic advertisement that will
initially catch your attention. Analyze the basic principles of
the design using the checklist. Put a check mark in the first
column if the particular principle is observed, and then write
your observation and evaluation in the third column
CHECK
PRINCIPLE OBSERVATION AND EVALUATION
HERE!
BALANCE
RHYTHM
PATTERN
VARIETY
EMPHASIS
MOVEMENT
PROPORTION
Mini Performance Task #3
TRAVEL BROCHURE
(ABM / HUMSS)
Create a brochure (bifold or trifold) that shows

itineraries for your trip (Local or International).
Remember that you must apply the elements and
principles of design. Apply the proper image format to
your softcopy of brochure (.jpeg, .png, .tiff, .png).
TRAVEL BROCHURE
Content:
•Days of Trip
•Place
•Activities
•Maps
•Transportation
•References
TRAVEL BROCHURE
(STEM)
Create a PowerPoint Presentation showcasing the

different real-life conic sections. In this presentation,
you must apply the principle of design and use
hyperlinks to link each slides. Use proper animation in
each slides. Your presentation must have a minimum of
10 slides.

Lesson 3

Uploaded by

Copyright:

Available Formats

Lesson 3

Uploaded by

Document Information

Original Title

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

Lesson 3

Uploaded by

Copyright:

Available Formats

LESSON 3: Imaging

and Designing for

• identify several file formats used on the web;

• manipulate images using image manipulation;

• Create a infographic applying principles of design.

Do the ads catch your attention?

What makes it appealing to you?

The visual weight of

Refers to changing up the

Repetition of more than

An area in the design

Have a good flow

 Make text easy to read and be informative but keep it short

Recheck for any mistakes

Simplicity (color, style, and illustrations)

It is the default file that a This includes image

BITMAP (.bmp) None High quality scans,

GIF (.gif) Lossless – Web images Can be animated,

PNG (.png) Lossless – Web images Can save transparency

RAW Image Files (.raw None Photography

 Adjusting Brightness and Contrast

 Compression and Resizing

 Combining Multiple Images

Visit a school website or any blogging website you prefer.

Create a brochure (bifold or trifold) that shows

Create a PowerPoint Presentation showcasing the

You might also like