IMAGING AND DESIGN
FOR ONLINE
ENVIRONMENT
(1)
Balance is to even
distribution; emphasis is to
a. Attracting
b. Colors
c. Design
d. Weight
(2)
Movement is to guiding the
eye; rhythm is to create
a. Attraction
b. Organization
c. Visuals
d. Unity
(3)
These are visual elements
creating a sense of unity where
they relate well with one
another.
a. Style
b. Proportion
c. Variety
d. Emphasis
(4)
It uses several design
elements to draw a viewer’s
attention.
a. Style
b. Proportion
c. Variety
d. Emphasis
(5)
It makes complex data become
more visually appealing to the
average user.
a. Tables
b. Piktocharts
c. Infographics
d. Slideshows
(6)
The following are common
image file formats used in the
Internet EXCEPT
a. JPEG
b. GIF
c. PNG
d. BMP
(7)
A free image manipulation tool
that has batch edit, viewer, and
paper print features
a. Picasa
b. PhotoScape
c. GIMP
d. IrfanView
(8)
Which of the following image file
formats that supports image
transparency?
a. PNG
b. GIF
c. RAW
d. JPEG
(9)
The file extension JPEG stands
for
a. Joint Photographic Experts
Group
b. Japan Photo Excellence
Guild
c. Jotter Prime Element Garnish
d. None of the above
(10)
A file format typically used for
screenshots
a. PNG
b. GIF
c. RAW
d. JPEG
OBJECTIVE A
Understand the
basic principles
of graphics and
layout
OBJECTIVE B
Create a simple
infographic
using web tools
OBJECTIVE C
Understand and
use several file
formats used on
the Web
OBJECTIVE D
Easily manipulate
images using a
simple image
editor
OBJECTIVE E
Upload and
share
images
“What is the
most visited
website in the
world?”
BASIC PRINCIPLES
OF GRAPHICS AND
DESIGN
LESSON DISCUSSION
(1)
BALANCE
The visual weight of
objects, texture, colors,
and space is evenly
distributed on the
screen.
TWO KIND OF BALANCE
a. Symmetrical Balance- occurs
when equal weights are on
equal sides of a composition,
balanced around a fulcrum or
axis in the center.
b. Asymmetrical Balance- results
from unequal visual weight on
each side of the composition.
One side of the composition might
contain a dominant element,
which could be balanced by a
couple or more lesser focal points
on the other side.
(2)
EMPHASIS
An area in the design that
may appear different in
size, texture, shape, color
to attract the viewer’s
attention.
https://i.pinimg.com/564x/9d/80/63/9d8063ddef51398fa10fb3a82b433149.jpg
(3)
MOVEMENT
Visual elements
guide the viewer’s
eyes around the
screen.
HTTPS://ARTIST.COM/ART-RECOGNITION-AND-EDUCATION/WP-CONTENT/THEMES/ARTIST-BLOG/MEDIA-
FILES/2015/11/DIGITAL-ART-YOUNG-ARTISTS-ONLINE-ART-FORUMS-SPECIAL-EFFECTS-2.JPG
(4)
PATTERN,
REPETITION, and
RHYTHM
These are
repeating visual
element on an
image or layout to
create unity in the
layout or image.
https://static.vecteezy.com/system/resources/previews/007/ https://i.pinimg.com/736x/ea/10/c2/ea10c2638053e5094b
917/262/non_2x/black-stripes-geometric-seamless-pattern 77ff41e95bddf8.jpg
-free-vector.jpg
Rhythm is
achieved when
visual elements
create a sense of
organized
movement.
(5)
PROPORTION
Visual elements
create a sense of
unity where they
relate well with one
another.
(6)
VARIETY
This uses several
design elements to
draw a viewer’s
attention.
INFOGRAPHICS
LESSON DISCUSSION
INFOGRAPHICS
~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
~make complex
data become
more visually
appealing to an
average user.
CREATING
INFOGRAPHICS
USING PIKTOCHART
LESSON DISCUSSION
(1)
Create a Piktochart
account by going to
www.piktochart.com
and click sign up on
the upper right corner
of the page.
(2)
Fill up the information
on the Sign Up page;
alternatively, you
can connect with
Google+ or
Facebook.
(3)
Once you have
created an account
and logged in, select
a template for your
infographic.
(4)
The
Piktochart
editor will
open.
(5)
While editing a
block, you can use
the various tools on
the left side of the
page.
TOOLS
a. Graphics
b. Uploads
c. Background
d. Text
e. Styles
f. Tools
GRAPHICS
~allows you to
insert lines,
shapes, icons,
and even
UPLOADS
~allows you to
upload images
for your
infographics
BACKGROUND
~changes the
background
of a selected
block
TEXT
~allows you to
insert text to your
infographic with
the option to add
text frames
STYLES
~allows you to
modify the
color scheme
of your
TOOLS
~allows you to
create charts,
maps, and
videos
EDITING TIP #1
Double-click
a text to edit
the content.
EDITING TIP #2
When working with
objects, the
toolbox on top of
the topmost block
will allow you to
EDITING TIP #3
When working
with charts,
double-click the
chart to open the
datasheet editor.
EDITING TIP #4
You may
rename the title
of your
infographic on
(6)
To save your work, click
on Save on the top right of
the page. To save it in your
computer, click
Download. In the
Download options, select
the medium-sized and the
PNG file type.
ONLINE IMAGE
FILE FORMATS
LESSON DISCUSSION
Supports
File Supports
Name Use transparenc
Extension animation
y
1. Joint Real-life
Photograp photograph
hic Experts .jpeg or .jpg No No
s; high
Group
compression
2. Graphics Computer-
Interchang .gif generated Yes Yes
e Format graphics
3. Portable Screenshots,
Network high
Graphics .png Yes No
compatibilit
y
PRINCIPLES AND BASIC
TECHNIQUES OF IMAGE
MANIPULATION
LESSON DISCUSSION
TIPS IN EDITING
IMAGES
LESSON DISCUSSION
(1)
CHOOSE THE RIGHT FILE
FORMAT
Knowing the purpose is the
key to finding out the best
file format.
(2)
CHOOSE THE RIGHT
IMAGE SIZE
Know how much space
you want the image to
consume.
(3)
CAPTION IT
Remember to put
a caption on
images whenever
possible.
CREATING AND
MANIPULATING IMAGES
USING PHOTOSCAPE
LESSON DISCUSSION
JUMP STARTING
YOUR SOCIAL
MEDIA CAMPAIGN
APPLICATION
STEP 1
Take a look at
your initial plan
from Lesson 1’s “I
am a Website
Creator”
STEP 2
It is time to set up
your website.
Creating a
Facebook page
would be an easy
STEP 3
Make sure you use
the principles of
design when
layouting and
adding content for
STEP 4
Once set up,
add your
campaign
poster.
STEP 5
Create a short three-
question survey for the
community members
who are also affected
with the problem you
are campaigning for.
STEP 6
Ask the community
members to scale their
thoughts. Make sure you
ask at least 15 members of
the community to make a
strong case for the
campaign.
STEP 7
Create an
infographic
about it and
post it on your
1. The Evolution of Technology: Trace the history of a specific technology
(e.g., smartphones, computers) and its impact on society, culture, and
communication over the years.
2. Cybersecurity Tips: Create an infographic with practical tips on how to stay
safe online, prevent cyber-attacks, and protect personal information.
3. Cultural Diversity: Celebrate different cultures around the world. Include
information about traditions, customs, languages, and interesting facts
about various countries and regions.
4. The Evolution of Technology: Trace the history of a specific technology
(e.g., smartphones, computers) and its impact on society, culture, and
communication over the years.
5. Mental Health Awareness: Raise awareness about mental health issues,
common disorders, and available support systems. Include signs and
symptoms, as well as destigmatization efforts.
1.Fake News and Media Literacy: Educate about identifying fake news,
misinformation, and the importance of critical thinking in the age of
digital media.
2.Environmental Conservation: Address topics like deforestation,
pollution, endangered species, and conservation efforts. Include tips
on how individuals can contribute to environmental preservation.
3.Online Safety for Children: Provide resources and tips for parents
and educators on ensuring children's online safety, protecting them
from inappropriate content, and fostering a positive digital
environment.
4.Healthy Lifestyle Habits: Provide tips on nutrition, exercise, mental
well-being, and stress management. Include easy recipes, workout
routines, and mindfulness techniques.
5.Social Media Impact: Investigate the influence of social media on
society, mental health, relationships, and self-esteem. Include
statistics and tips for mindful social media usage.
