IMAGING AND DESIGN

FOR THE ONLINE

ENVIRONMENT
EMPOWERMENT TECHNOLOGIES Prepared
ALOU by:
CAMILLE
Mr. Teodoro
S. DIGNADICE
R. Llanes II
 I CAN

❑ I can evaluate existing websites and online resources

based on the principles of layout, graphic, and visual
message design.
❑ I can use image manipulation techniques on existing
images to change or enhance their current state to
communicate a message for a specific purpose.

2
*Information & Images taken from various sites on the internet and is under OER Commons.
 WHAT IS AN IMAGE?

An Image is a
representation of the
external form of a
person or thing in
art.

3
*Information & Images taken from various sites on the internet and is under OER Commons.
 WHAT IS AN IMAGE?

Images may be 2-dimensional, such as a

photograph or screen display, or 3-
dimensional, such as a statue or
hologram. They may be captured by
optical devices – such as cameras,
mirrors, lenses, telescopes, microscopes,
etc. and natural objects and phenomena,
such as the human eye or water.

4
*Information & Images taken from various sites on the internet and is under OER Commons.
 GRAPHICS:

Graphics – are visual

images or designs on some
surface, such as a wall,
canvas, screen, paper, or
stone to inform, illustrate,
or entertain

5
*Information & Images taken from various sites on the internet and is under OER Commons.
 EXAMPLES OF GRAPHICS:

❑ Photographs ❑ Drawings

6
*Information & Images taken from various sites on the internet and is under OER Commons.
 EXAMPLES OF GRAPHICS:

❑ Line Art ❑ Graphs

7
*Information & Images taken from various sites on the internet and is under OER Commons.
 EXAMPLES OF GRAPHICS:

❑ Typography ❑ Numbers

8
*Information & Images taken from various sites on the internet and is under OER Commons.
 EXAMPLES OF GRAPHICS:

❑ Symbols ❑ Geometric Designs

9
*Information & Images taken from various sites on the internet and is under OER Commons.
 EXAMPLES OF GRAPHICS:

❑ Maps ❑ Computer Graphics

10
*Information & Images taken from various sites on the internet and is under OER Commons.
 EXAMPLES OF GRAPHICS:

❑ Engineering drawings, or other images

11
*Information & Images taken from various sites on the internet and is under OER Commons.
1
IMAGE FORMAT
Different types of image format on the
computer.
12
 ONLINE IMAGE FILE FORMAT

1. Joint Photographic Experts Group (JPEG) – does not

support transparency and animation (.jpeg or jpg)

13
*Information & Images taken from various sites on the internet and is under OER Commons.
 ONLINE IMAGE FILE FORMAT

2. Graphics Interchange Format (GIF) – supports transparency

and animation (.gif)

14
*Information & Images taken from various sites on the internet and is under OER Commons.
 ONLINE IMAGE FILE FORMAT

3. Portable Networks Graphics (PNG) – supports transparency

but not in animation (.png)

15
*Information & Images taken from various sites on the internet and is under OER Commons.
2
LAYOUT
Definition and Principles of Layout &
Graphics.
16
 LAYOUT

Layout – is part of
graphic design that
deals in the
arrangement of visual
elements on a page.

17
*Information & Images taken from various sites on the internet and is under OER Commons.
 BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:

1. Balance. The visual

weight of objects,
texture, colors, and
space is evenly
distributed on the
screen.

dm | DesignMantic 18
*Information & Images taken from various sites on the internet and is under OER Commons.
 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.

dm | DesignMantic 19
*Information & Images taken from various sites on the internet and is under OER Commons.
 BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:

3. Movement. Visual
elements guide the
viewer’s eyes
around the screen.

dm | DesignMantic 20
*Information & Images taken from various sites on the internet and is under OER Commons.
 BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:

4. Pattern. Builds
course. It builds
familiarity and
organizes design
for trouble-free
viewing.

dm | DesignMantic 21
*Information & Images taken from various sites on the internet and is under OER Commons.
 BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:

5. Repetition. makes
design aware. It brings
consistency and flow to
the design.

dm | DesignMantic 22
*Information & Images taken from various sites on the internet and is under OER Commons.
 BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:

6. Proportion.
Conveys stability. It
involves scaling of
various elements to
create a coherent
design.

dm | DesignMantic 23
*Information & Images taken from various sites on the internet and is under OER Commons.
 BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:

7. Harmony. Brings
elements closer. It
utilizes familiar traits
of design elements
and puts them into
focus.

dm | DesignMantic 24
*Information & Images taken from various sites on the internet and is under OER Commons.
 BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:

8. Contrast. Addresses
conflict. It highlights the
difference and puts an
emphasis to what is
important

dm | DesignMantic 25
*Information & Images taken from various sites on the internet and is under OER Commons.
 BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:

9. Variety. Reaps
attention. It adds flavor
to the design, making it
more interesting and
engaging.

dm | DesignMantic 26
*Information & Images taken from various sites on the internet and is under OER Commons.
4
IMAGE PRINCIPLES,
TECNIQUES & HOSTING
Image manipulation techniques,
principles and hosting sites.
27
 3 IMAGE MANIPULATION PRINCIPLES

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.
28
*Information & Images taken from various sites on the internet and is under OER Commons.
 3 IMAGE MANIPULATION PRINCIPLES

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.
29
*Information & Images taken from various sites on the internet and is under OER Commons.
 3 IMAGE MANIPULATION PRINCIPLES

3. Caption it. Remember to

put a caption on images
whenever possible. If it is not
related to the web page, then
remove it.

30
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

1. Cropping. Cutting parts

away to remove
distracting or irrelevant
elements.

31
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

2. Color Balance. The

ambience and the
tone of light of the
picture (ex. Warm or
cool light)

32
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

3. Brightness and
Contrast. One of the most
basic techniques in image
editing, making the image
darker or lighter.

33
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

4. Compression and
Resizing. The higher the
quality and the larger
the photo is, the bigger
the file size of the
picture is.

34
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

5. Filters. Making the

image look sketched,
grainy, classic black and
white or even let it have
neon colors. This gives
your image a twist from
its original look.

35
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

6. Cloning. Copying or duplicating a part of an image.

36
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

7. Changing the
Background. Adding
background to make
your image stand out.

37
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

8. Removing the Color.

Removing certain
colors in your image
or desaturating the
color of the image.

38
*Information & Images taken from various sites on the internet and is under OER Commons.
 9 IMAGE MANIPULATION TECHNIQUES

9. Combining Text,
Graphics and Image.
Adding multiple elements
in your layout.

39
*Information & Images taken from various sites on the internet and is under OER Commons.
 IMAGE HOSTING WEBSITES:

❑ Google+ Photos ❑ Amazon Prime Photos

❑ Flickr ❑ DropBox
❑ Smugmug ❑ Chevereto
❑ Imgur ❑ Imageshack
❑ 500px
❑ Photobucket

40
*Information & Images taken from various sites on the internet and is under OER Commons.
3
INFOGRAPHICS
Let’s start with the first set of slides

41
 INFOGRAPHICS

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.
42
*Information & Images taken from various sites on the internet and is under OER Commons.
 5 PRINCIPLES IN MAKING AN EFFECTIVE
INFOGRAPHIC DESIGN:

1. Be Unique
2. Make It Simple
3. Be Creative and Bold
4. Less is More
5. The Importance of
Getting it Across

43
*Information & Images taken from various sites on the internet and is under OER Commons.
 INFOGRAPHIC EXAMPLE

44
*Information & Images taken from various sites on the internet and is under OER Commons.
 INFOGRAPHIC EXAMPLE

45
*Information & Images taken from various sites on the internet and is under OER Commons.
 INFOGRAPHIC EXAMPLE

46
*Information & Images taken from various sites on the internet and is under OER Commons.
 INFOGRAPHIC VIDEO

Infographic Video – is a
visual representation of
data and knowledge in
the form of an
online video.

47
*Information & Images taken from various sites on the internet and is under OER Commons.
 INFOGRAPHIC VIDEO EXAMPLE

https://goo.gl/srcHyh 48
*Information & Images taken from various sites on the internet and is under OER Commons.
 INFOGRAPHIC VIDEO EXAMPLE

https://goo.gl/DJzSCv 49
*Information & Images taken from various sites on the internet and is under OER Commons.
 ▰ 1. Information and Communication
Technology Effects in Philippines
▰ 2. Online Safety, Security, Ethics and Etiquette
▰ 3. Microsoft Office (Word, PowerPoint, Excel)
▰ 4. Creative Commons Rights / Copyright Law
▰ 5. Google Tools

50
*Information & Images taken from various sites on the internet and is under OER Commons.