Empowerment

Technology
Review

In Lesson 5: Advanced Presentation Skills, you

learned some tips on how to create an effective
PowerPoint presentation. Some of those tips can
help you in graphics and design layout.
LESSON 6:
Imaging and Design for
Online Environment
• Basic principles of graphics and layout
• Creating infographics
• Online file formats for images
• Principles and basic techniques of image manipulation
• Uploading, sharing, and image hosting
At the end of the lesson, the students will be
able to:
1. Explain the basic principles of graphics and
layout.
2. Design a simple infographics about
technology.
3. Use the principles and basic techniques of
image manipulation.
Briefly describe the picture below.
What does it show?
Answer:

B_ _ A_CE

BALANCE
 Basic Principles of
Graphics and Layout

1.Balance - The visual weight

of objects, texture, colors, and
space is evenly distributed on
the screen.
 Importance of Balance
in Graphic Designing

Sense of balancing is important in any graphics

because if the image is not balanced, then the viewers
will not understand where to look at. In such situation
you will not be able to communicate the message that
you want to convey. In the design you also need to
have focal point and then balance it according to it.
Examples of Balanced Graphic Designs:
 Basic Principles of
Graphics and Layout

2.Emphasis - An area in
the design that may appear
different in size, texture,
shape or color to attract the
viewer’s attention.
 Importance of Emphasis
in Graphic Designing

● The goal of the principle of design emphasis is to

ensure that users see the most important data
first.
● Emphasis is a strategy that aims to draw the
viewer's attention to a specific design element.
Examples:
 Basic Principles of
Graphics and Layout

3.Movement - Visual
elements guide the viewer’s
eyes around the screen.
 Importance of Movement
in Graphic Designing

Movement in graphic design helps control how your

audience interacts with the piece and how they
ultimately view it. With the right design elements, you
can guide viewers to take the journey you want them
to take as they interact with the piece.
Examples:
Basic Principles of
Graphics and Layout

4. Pattern, Repetition, and

Rhythm – these are the repeating
visual element on an image or
layout to create unity in the layout
or image. Rhythm is achieved
when visual elements create a
sense of organized movement.
Importance Pattern, Repetition, and Rhythm
In Graphic Designing

You can repeat design elements, for example, to

provide a consistent visual experience. It will
make it easier for users to focus on the content
because they know where they can find specific
types of content or navigation options.
Examples:
 Basic Principles of
Graphics and Layout

5.Proportion - Visual
elements create a
sense of unity where
they relate well with one
another.
 Importance of Proportion
in Graphic Designing

Playing with proportion can create a humorous

reaction in your audience. Making something very
large or very small in comparison to the other elements
of your design will often evoke humor in your audience.
 Basic Principles of
Graphics and Layout

6.Variety - This uses several

design elements to draw a
viewer’s attention.
 Importance of Variety
in Graphic Designing

With the use of variety in your design, you can

quickly save it from becoming boring and
monotonous. You can draw attention and entice
your audience with a few simple changes. It
creates visual interest and energy.
 INFOGRAPHICS

Information graphics or infographics are used

to represent information, statistical data, or
knowledge in a graphical manner usually done in
a creative way to attract the viewer’s attention.
 INFOGRAPHICS

● Visual presentations of information that use the

element of design to display content.
● Express complex messages to viewers in a way
that enhances their comprehension.
● Basically using pictures, objects, and images in a
way for the viewers to easily understand the
message of a topic.
Reasons to use Infographics:

1. To communicate a message
2. To present in a way that is compact and easy to
comprehend.
3. To analyze data in order to discover cause-and-
effect relationships.
4. To periodically monitor the route of certain
parameters.
 3 Elements of Infographics:

1. Visual Elements which includes color coding,

graphics, and reference icons.
2. Content Elements which includes time frames,
statistics and references; and
3. Knowledge Elements which consist of facts.
 Online Image File Formats

*When inserting text to a web page, you can simply copy a text to your html
editor, or you can upload it on a website as a PDF file. Most browsers support
“add-ons” so that you can open PDF files without leaving the browser.
 PRINCIPLES AND BASIC TECHNIQUES
OF IMAGE MANIPULATION

Tips to help you edit images for your website:

1. Choose the right file format. Try to make a real-life

photograph into GIF to see the difference between PNG,
GIF, and JPEG. Knowing the purpose is the key to finding
out the best file format.
 PRINCIPLES AND BASIC TECHNIQUES
OF IMAGE MANIPULATION
Tips to help you edit images for your website:

2. Choose the right image size. A camera with 12 megapixels

constitutes to a bigger image size. Monitors have a resolution limit, so
even if you have a million megapixels, it will not display everything.
 PRINCIPLES AND BASIC TECHNIQUES
OF IMAGE MANIPULATION
Tips to help you edit images for your website:

3. Caption it. Remember to put a caption on images

whenever possible. If it is not related to the web page,
then remove it.
 Creating and Manipulating Images using
PhotoScape
There are plenty of image
manipulation tools but if you are
going to create a website, you
have to use the one which is
efficient. PhotoScape is a good
tool because it is feasible for
beginners and advanced users
alike.
Additional References:

Uploading Photos with Photobucket

How to share images on forums using Photobucket

Photobucket Tutorial: Uploading Photos From Mobile Devices

Assignment:

Create a simple infographics about technology.

Submit it next meeting.