IMAGING AND DESIGN

FOR THE ONLINE

ENVIRONMENT
Prepared by: Mr. Teodoro R.
EMPOWERMENT TECHNOLOGIES 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.
 Challenge Question?

You may have heard a word that sounds like “pubmat”. Can
you guess what it is?

4
*Information & Images taken from various sites on the internet and is under OER Commons.
 Challenge Question?

Pubmat is short for the English phrase PUBlication MATerial.

This is what Americans refer to as an infographic or even an
announcement poster

5
*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.
6
*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

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

 Photographs  Drawings

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

 Line Art  Graphs

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

 Typography  Numbers

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

 Symbols  Geometric Designs

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

 Computer
 Maps
Graphics

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

 Engineering drawings, or other images

13
*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.
14
 ONLINE IMAGE FILE FORMAT

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

support transparency and animation (.jpeg or jpg)

15
*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)

16
*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)

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

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

19
*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 20
*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 21
*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 22
*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 23
*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 24
*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 25
*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 26
*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 27
*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 28
*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

29
 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.
30
*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
31
*Information & Images taken from various sites on the internet and is under OER Commons.
 INFOGRAPHIC EXAMPLE

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

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

34
*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.

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

Drive link - https://goo.gl/srcHyh

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

Drive link -https://goo.gl/DJzSCv

37
*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.
38
 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.
39
*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.
40
*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.

41
*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.

42
*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)

43
*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.

44
*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.

45
*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.

46
*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.

47
*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.

48
*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.

49
*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.

50
*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

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

What is the most important principle in

design?
What is the uses of principles of design?

52
*Information & Images taken from various sites on the internet and is under OER Commons.
 INDIVIDUAL WORK: CREATE THE COMPANY LOGO

Design Brief
INSTRUCTIONS: You are tasked to create a print advertising campaign for a new Milk Tea Shop located in
Angeles City, Pampanga. Read and understand the creative brief provided to help guide you in
conceptualizing the design of your print collaterals. The creative brief will contain essential information
like the company background, its objectives, target market, its new tagline and other information.
(This project is for assessment purposes only. Information provided will be used only for assessment
purposes)
You must produce the design of the following:
1. Company Logo w/ tagline
2. Poster
3. Flyer

53
*Information & Images taken from various sites on the internet and is under OER Commons.
 INDIVIDUAL WORK: CREATE THE COMPANY LOGO

CREATIVE BRIEF
The Company: Milk Tea (business name) is a new company and will launch and open the shop this October
30, 2022. Your client wants a creative logo with a tag line that will catch attention
The management team has hired you to create designs for the following, for their Soft Opening on October
15, 2022.

1. Company Logo with Tagline

2. Poster
3. Flyer

54
*Information & Images taken from various sites on the internet and is under OER Commons.
 INDIVIDUAL WORK: CREATE THE COMPANY LOGO

Company Contact Information:

Address: Units 458 , Kingsley Shopping Mall Building, Don Juico Avenue corner Sapphire Streets,
Angeles City, Pampanga, Philippines 2009
Telephone: (45) 586-6589
Webpage: www.__________.com
Email: info@_____________.com

55
*Information & Images taken from various sites on the internet and is under OER Commons.
 INDIVIDUAL WORK: CREATE THE COMPANY LOGO

The company's objectives are the following:

To acquire a new logo for the organization that will provide company gain customers
To create awareness that _________ company with its management team will provide the affordable and
quality service that the company is known for.
To promote the launching of the company on Oct 15 and all its new products to the community.
To inform the public of its Holiday promotions and discounts on services.

The Promotions:
The Company decided to produce a Holidays promo of special discounts for clients that will run from Oct –
Nov 2022.
1.
2.
Think of at least 2 promotions for your company. 56
*Information & Images taken from various sites on the internet and is under OER Commons.
 GROUP WORK: INFOGRAPHIC

Students will create an infographic to share knowledge and

data about an issue or science topic they are studying.

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