SlideShare a Scribd company logo
1 of 50
Download to read offline
Prepared by: Mr. Teodoro R. Llanes IIEMPOWERMENT TECHNOLOGIES
IMAGING AND DESIGN
FOR THE ONLINE
ENVIRONMENT
Prepared by: Mr. Teodoro R. Llanes IIEMPOWERMENT TECHNOLOGIES
*Information & Images taken from various sites on the internet and is under OER Commons.
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
6
❑ Drawings
*Information & Images taken from various sites on the internet and is under OER Commons.
EXAMPLES OF GRAPHICS:
7
❑ Line Art ❑ Graphs
*Information & Images taken from various sites on the internet and is under OER Commons.
EXAMPLES OF GRAPHICS:
❑ Typography
8
❑ Numbers
*Information & Images taken from various sites on the internet and is under OER Commons.
EXAMPLES OF GRAPHICS:
❑ Symbols
9
❑ Geometric Designs
*Information & Images taken from various sites on the internet and is under OER Commons.
EXAMPLES OF GRAPHICS:
❑ Maps
10
❑ Computer Graphics
*Information & Images taken from various sites on the internet and is under OER Commons.
EXAMPLES OF GRAPHICS:
❑ Engineering drawings, or other images
11
IMAGE FORMAT
Different types of image format on the
computer.
12
1
*Information & Images taken from various sites on the internet and is under OER Commons.
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
LAYOUT
Definition and Principles of Layout &
Graphics.
16
2
*Information & Images taken from various sites on the internet and is under OER Commons.
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.
18dm | DesignMantic
*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.
19dm | DesignMantic
*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.
20dm | DesignMantic
*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.
21dm | DesignMantic
*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.
22dm | DesignMantic
*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.
23dm | DesignMantic
*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.
24dm | DesignMantic
*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
25dm | DesignMantic
*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.
26dm | DesignMantic
INFOGRAPHICS
Let’s start with the first set of slides
27
3
*Information & Images taken from various sites on the internet and is under OER Commons.
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.
28
*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
29
*Information & Images taken from various sites on the internet and is under OER Commons.
INFOGRAPHIC EXAMPLE
30
*Information & Images taken from various sites on the internet and is under OER Commons.
INFOGRAPHIC EXAMPLE
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 VIDEO
Infographic Video – is
a visual representation
of data and knowledge
in the form of an
online video.
33
*Information & Images taken from various sites on the internet and is under OER Commons.
INFOGRAPHIC VIDEO EXAMPLE
34https://goo.gl/srcHyh
*Information & Images taken from various sites on the internet and is under OER Commons.
INFOGRAPHIC VIDEO EXAMPLE
35https://goo.gl/DJzSCv
IMAGE PRINCIPLES,
TECNIQUES & HOSTING
Image manipulation techniques,
principles and hosting sites.
36
4
*Information & Images taken from various sites on the internet and is under OER Commons.
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.
37
*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.
38
*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.
39
*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.
40
*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)
41
*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.
42
*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.
43
*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.
44
*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.
45
*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.
46
*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.
47
*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.
48
*Information & Images taken from various sites on the internet and is under OER Commons.
IMAGE HOSTING WEBSITES:
❑ Google+ Photos
❑ Flickr
❑ Smugmug
❑ Imgur
❑ 500px
❑ Photobucket
❑ Amazon Prime Photos
❑ DropBox
❑ Chevereto
❑ Imageshack
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

More Related Content

What's hot

Imaging and Design for Online Environment
Imaging and Design for Online EnvironmentImaging and Design for Online Environment
Imaging and Design for Online EnvironmentRichard Meriveles
 
Online platforms for ICT Content Development
Online platforms for ICT Content DevelopmentOnline platforms for ICT Content Development
Online platforms for ICT Content DevelopmentAngelito Quiambao
 
Empowerment Technologies - Module 2
Empowerment Technologies - Module 2Empowerment Technologies - Module 2
Empowerment Technologies - Module 2Jesus Rances
 
Empowerment Technology Lesson 2
Empowerment Technology Lesson 2Empowerment Technology Lesson 2
Empowerment Technology Lesson 2alicelagajino
 
Empowerment Technologies - Imaging and Design for the Online Environment
Empowerment Technologies - Imaging and Design for the Online EnvironmentEmpowerment Technologies - Imaging and Design for the Online Environment
Empowerment Technologies - Imaging and Design for the Online EnvironmentLany Lyn Magdaraog
 
ICT Project for Social Change - Empowerment Technologies
ICT Project for Social Change - Empowerment TechnologiesICT Project for Social Change - Empowerment Technologies
ICT Project for Social Change - Empowerment TechnologiesMark Jhon Oxillo
 
Planning-and-Conceptualizing-an-ICT-for-Social-Change (1).pdf
Planning-and-Conceptualizing-an-ICT-for-Social-Change (1).pdfPlanning-and-Conceptualizing-an-ICT-for-Social-Change (1).pdf
Planning-and-Conceptualizing-an-ICT-for-Social-Change (1).pdfEidene Joy Manuel
 
Contextualized online search and research skills
Contextualized online search and research skillsContextualized online search and research skills
Contextualized online search and research skillsJonathan Jr Marcelino
 
Empowerment Technologies - Principles and Basic Techniques of Image Manipulation
Empowerment Technologies - Principles and Basic Techniques of Image ManipulationEmpowerment Technologies - Principles and Basic Techniques of Image Manipulation
Empowerment Technologies - Principles and Basic Techniques of Image ManipulationLany Lyn Magdaraog
 
Online Systems, Functions, and Platforms
Online Systems, Functions, and PlatformsOnline Systems, Functions, and Platforms
Online Systems, Functions, and PlatformsMaria Eloisa Blanza
 
Contextualized Online Search and Research Skills
Contextualized Online Search and Research SkillsContextualized Online Search and Research Skills
Contextualized Online Search and Research SkillsAngelito Quiambao
 
Online Safety, Security, Ethics, and Netiquette - Empowerment Technologies
Online Safety, Security, Ethics, and Netiquette - Empowerment TechnologiesOnline Safety, Security, Ethics, and Netiquette - Empowerment Technologies
Online Safety, Security, Ethics, and Netiquette - Empowerment TechnologiesMark Jhon Oxillo
 
Empowerment Technologies - Module 5
Empowerment Technologies - Module 5Empowerment Technologies - Module 5
Empowerment Technologies - Module 5Jesus Rances
 
2 Online Safety, Security, Ethics, and Etiquette
2 Online Safety,  Security, Ethics, and Etiquette2 Online Safety,  Security, Ethics, and Etiquette
2 Online Safety, Security, Ethics, and EtiquetteTeodoro Llanes II
 
Basic Principles Of Graphics and Layout
Basic Principles Of Graphics and LayoutBasic Principles Of Graphics and Layout
Basic Principles Of Graphics and LayoutDeoky5799
 

What's hot (20)

Imaging and Design for Online Environment
Imaging and Design for Online EnvironmentImaging and Design for Online Environment
Imaging and Design for Online Environment
 
Online platforms for ICT Content Development
Online platforms for ICT Content DevelopmentOnline platforms for ICT Content Development
Online platforms for ICT Content Development
 
Empowerment Technologies - Module 2
Empowerment Technologies - Module 2Empowerment Technologies - Module 2
Empowerment Technologies - Module 2
 
ICT as a Platform for Change
ICT as a Platform for ChangeICT as a Platform for Change
ICT as a Platform for Change
 
Productivity tools
Productivity toolsProductivity tools
Productivity tools
 
Empowerment Technology Lesson 2
Empowerment Technology Lesson 2Empowerment Technology Lesson 2
Empowerment Technology Lesson 2
 
Empowerment Technologies - Imaging and Design for the Online Environment
Empowerment Technologies - Imaging and Design for the Online EnvironmentEmpowerment Technologies - Imaging and Design for the Online Environment
Empowerment Technologies - Imaging and Design for the Online Environment
 
ICT as a Platform for Change
ICT as a Platform for Change ICT as a Platform for Change
ICT as a Platform for Change
 
ICT Project for Social Change - Empowerment Technologies
ICT Project for Social Change - Empowerment TechnologiesICT Project for Social Change - Empowerment Technologies
ICT Project for Social Change - Empowerment Technologies
 
Planning-and-Conceptualizing-an-ICT-for-Social-Change (1).pdf
Planning-and-Conceptualizing-an-ICT-for-Social-Change (1).pdfPlanning-and-Conceptualizing-an-ICT-for-Social-Change (1).pdf
Planning-and-Conceptualizing-an-ICT-for-Social-Change (1).pdf
 
Contextualized online search and research skills
Contextualized online search and research skillsContextualized online search and research skills
Contextualized online search and research skills
 
Empowerment Technologies - Principles and Basic Techniques of Image Manipulation
Empowerment Technologies - Principles and Basic Techniques of Image ManipulationEmpowerment Technologies - Principles and Basic Techniques of Image Manipulation
Empowerment Technologies - Principles and Basic Techniques of Image Manipulation
 
Online Systems, Functions, and Platforms
Online Systems, Functions, and PlatformsOnline Systems, Functions, and Platforms
Online Systems, Functions, and Platforms
 
Contextualized Online Search and Research Skills
Contextualized Online Search and Research SkillsContextualized Online Search and Research Skills
Contextualized Online Search and Research Skills
 
Online Safety, Security, Ethics, and Netiquette - Empowerment Technologies
Online Safety, Security, Ethics, and Netiquette - Empowerment TechnologiesOnline Safety, Security, Ethics, and Netiquette - Empowerment Technologies
Online Safety, Security, Ethics, and Netiquette - Empowerment Technologies
 
Empowerment Technologies - Module 5
Empowerment Technologies - Module 5Empowerment Technologies - Module 5
Empowerment Technologies - Module 5
 
2 Online Safety, Security, Ethics, and Etiquette
2 Online Safety,  Security, Ethics, and Etiquette2 Online Safety,  Security, Ethics, and Etiquette
2 Online Safety, Security, Ethics, and Etiquette
 
Basic Principles Of Graphics and Layout
Basic Principles Of Graphics and LayoutBasic Principles Of Graphics and Layout
Basic Principles Of Graphics and Layout
 
Visual Information and Media
Visual Information and MediaVisual Information and Media
Visual Information and Media
 
ETECH MELCS
ETECH MELCSETECH MELCS
ETECH MELCS
 

Similar to 7 Imaging and Design for the Online Environment

Imaging and Design.pptx
Imaging and Design.pptxImaging and Design.pptx
Imaging and Design.pptxLeoOrtega19
 
Image Principles.pptx
Image Principles.pptxImage Principles.pptx
Image Principles.pptxLeoOrtega19
 
6 Advance Presentation Skill
6 Advance Presentation Skill6 Advance Presentation Skill
6 Advance Presentation SkillTeodoro Llanes II
 
5-Advance-Presentation-Skill.pdf
5-Advance-Presentation-Skill.pdf5-Advance-Presentation-Skill.pdf
5-Advance-Presentation-Skill.pdfAmberMontes1
 
Diary of a Wimpy Model Manager
Diary of a Wimpy Model ManagerDiary of a Wimpy Model Manager
Diary of a Wimpy Model ManagerEric Stephan
 
1 Information and Communication Technology
1  Information and Communication Technology1  Information and Communication Technology
1 Information and Communication TechnologyTeodoro Llanes II
 
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply ResponsiveDenise Jacobs
 
4 Advance Word Processing Skill
4 Advance Word Processing Skill4 Advance Word Processing Skill
4 Advance Word Processing SkillTeodoro Llanes II
 
Digital Pathology Information Web Services (DPIWS): Convergence in Digital Pa...
Digital Pathology Information Web Services (DPIWS): Convergence in Digital Pa...Digital Pathology Information Web Services (DPIWS): Convergence in Digital Pa...
Digital Pathology Information Web Services (DPIWS): Convergence in Digital Pa...Yves Sucaet
 
Making meaning with mobile apps
Making meaning with mobile appsMaking meaning with mobile apps
Making meaning with mobile appsRichard Byrne
 
ICCCBE2014-YuHsiang
ICCCBE2014-YuHsiangICCCBE2014-YuHsiang
ICCCBE2014-YuHsiangVincent Wen
 
ICT Supporting Teaching Technology
ICT Supporting Teaching TechnologyICT Supporting Teaching Technology
ICT Supporting Teaching TechnologyMalcolm Wilson
 
4_ADVANCE WORD PROCESSING.pptx
4_ADVANCE WORD PROCESSING.pptx4_ADVANCE WORD PROCESSING.pptx
4_ADVANCE WORD PROCESSING.pptxHELENASUNCION
 
01 foundations
01 foundations01 foundations
01 foundationsankit_ppt
 
Augmented reality in E-commerce
Augmented reality in E-commerceAugmented reality in E-commerce
Augmented reality in E-commerceAshwin P
 
Computer architecture for vision system
Computer architecture for vision systemComputer architecture for vision system
Computer architecture for vision systemAkashPatil334
 
1 Information and Communication Technology.pptx
1  Information and Communication Technology.pptx1  Information and Communication Technology.pptx
1 Information and Communication Technology.pptxmariemichellelaspina
 
“Tools and Strategies for Quickly Building Effective Image Datasets,” a Prese...
“Tools and Strategies for Quickly Building Effective Image Datasets,” a Prese...“Tools and Strategies for Quickly Building Effective Image Datasets,” a Prese...
“Tools and Strategies for Quickly Building Effective Image Datasets,” a Prese...Edge AI and Vision Alliance
 

Similar to 7 Imaging and Design for the Online Environment (20)

Imaging and Design.pptx
Imaging and Design.pptxImaging and Design.pptx
Imaging and Design.pptx
 
Image Principles.pptx
Image Principles.pptxImage Principles.pptx
Image Principles.pptx
 
6 Advance Presentation Skill
6 Advance Presentation Skill6 Advance Presentation Skill
6 Advance Presentation Skill
 
5-Advance-Presentation-Skill.pdf
5-Advance-Presentation-Skill.pdf5-Advance-Presentation-Skill.pdf
5-Advance-Presentation-Skill.pdf
 
Diary of a Wimpy Model Manager
Diary of a Wimpy Model ManagerDiary of a Wimpy Model Manager
Diary of a Wimpy Model Manager
 
1 Information and Communication Technology
1  Information and Communication Technology1  Information and Communication Technology
1 Information and Communication Technology
 
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply Responsive
 
4 Advance Word Processing Skill
4 Advance Word Processing Skill4 Advance Word Processing Skill
4 Advance Word Processing Skill
 
Digital Pathology Information Web Services (DPIWS): Convergence in Digital Pa...
Digital Pathology Information Web Services (DPIWS): Convergence in Digital Pa...Digital Pathology Information Web Services (DPIWS): Convergence in Digital Pa...
Digital Pathology Information Web Services (DPIWS): Convergence in Digital Pa...
 
ICT CONTENT DEVELOPMENT
ICT CONTENT DEVELOPMENTICT CONTENT DEVELOPMENT
ICT CONTENT DEVELOPMENT
 
Making meaning with mobile apps
Making meaning with mobile appsMaking meaning with mobile apps
Making meaning with mobile apps
 
ICCCBE2014-YuHsiang
ICCCBE2014-YuHsiangICCCBE2014-YuHsiang
ICCCBE2014-YuHsiang
 
ICT Supporting Teaching Technology
ICT Supporting Teaching TechnologyICT Supporting Teaching Technology
ICT Supporting Teaching Technology
 
4_ADVANCE WORD PROCESSING.pptx
4_ADVANCE WORD PROCESSING.pptx4_ADVANCE WORD PROCESSING.pptx
4_ADVANCE WORD PROCESSING.pptx
 
01 foundations
01 foundations01 foundations
01 foundations
 
Augmented reality in E-commerce
Augmented reality in E-commerceAugmented reality in E-commerce
Augmented reality in E-commerce
 
Computer architecture for vision system
Computer architecture for vision systemComputer architecture for vision system
Computer architecture for vision system
 
1 Information and Communication Technology.pptx
1  Information and Communication Technology.pptx1  Information and Communication Technology.pptx
1 Information and Communication Technology.pptx
 
“Tools and Strategies for Quickly Building Effective Image Datasets,” a Prese...
“Tools and Strategies for Quickly Building Effective Image Datasets,” a Prese...“Tools and Strategies for Quickly Building Effective Image Datasets,” a Prese...
“Tools and Strategies for Quickly Building Effective Image Datasets,” a Prese...
 
Computer graphics by bahadar sher
Computer graphics by bahadar sherComputer graphics by bahadar sher
Computer graphics by bahadar sher
 

Recently uploaded

EBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting BlEBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting BlDr. Bruce A. Johnson
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptxraviapr7
 
10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdfJayanti Pande
 
Protein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxProtein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxvidhisharma994099
 
A gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceA gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceApostolos Syropoulos
 
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptxSOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptxSyedNadeemGillANi
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
Department of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.pdfDepartment of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.pdfMohonDas
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...Nguyen Thanh Tu Collection
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsEugene Lysak
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17Celine George
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
How to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeHow to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeCeline George
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
Over the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptxOver the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptxraviapr7
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...CaraSkikne1
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICESayali Powar
 

Recently uploaded (20)

EBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting BlEBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting Bl
 
Finals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quizFinals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quiz
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
 
10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf
 
Protein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxProtein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptx
 
A gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceA gentle introduction to Artificial Intelligence
A gentle introduction to Artificial Intelligence
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptxSOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
Department of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.pdfDepartment of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.pdf
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George Wells
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
How to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeHow to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using Code
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
Over the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptxOver the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptx
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICE
 

7 Imaging and Design for the Online Environment

  • 1. Prepared by: Mr. Teodoro R. Llanes IIEMPOWERMENT TECHNOLOGIES IMAGING AND DESIGN FOR THE ONLINE ENVIRONMENT Prepared by: Mr. Teodoro R. Llanes IIEMPOWERMENT TECHNOLOGIES
  • 2. *Information & Images taken from various sites on the internet and is under OER Commons. 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
  • 3. *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
  • 4. *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
  • 5. *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
  • 6. *Information & Images taken from various sites on the internet and is under OER Commons. EXAMPLES OF GRAPHICS: ❑ Photographs 6 ❑ Drawings
  • 7. *Information & Images taken from various sites on the internet and is under OER Commons. EXAMPLES OF GRAPHICS: 7 ❑ Line Art ❑ Graphs
  • 8. *Information & Images taken from various sites on the internet and is under OER Commons. EXAMPLES OF GRAPHICS: ❑ Typography 8 ❑ Numbers
  • 9. *Information & Images taken from various sites on the internet and is under OER Commons. EXAMPLES OF GRAPHICS: ❑ Symbols 9 ❑ Geometric Designs
  • 10. *Information & Images taken from various sites on the internet and is under OER Commons. EXAMPLES OF GRAPHICS: ❑ Maps 10 ❑ Computer Graphics
  • 11. *Information & Images taken from various sites on the internet and is under OER Commons. EXAMPLES OF GRAPHICS: ❑ Engineering drawings, or other images 11
  • 12. IMAGE FORMAT Different types of image format on the computer. 12 1
  • 13. *Information & Images taken from various sites on the internet and is under OER Commons. ONLINE IMAGE FILE FORMAT 1. Joint Photographic Experts Group (JPEG) – does not support transparency and animation (.jpeg or jpg) 13
  • 14. *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
  • 15. *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
  • 16. LAYOUT Definition and Principles of Layout & Graphics. 16 2
  • 17. *Information & Images taken from various sites on the internet and is under OER Commons. LAYOUT Layout – is part of graphic design that deals in the arrangement of visual elements on a page. 17
  • 18. *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. 18dm | DesignMantic
  • 19. *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. 19dm | DesignMantic
  • 20. *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. 20dm | DesignMantic
  • 21. *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. 21dm | DesignMantic
  • 22. *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. 22dm | DesignMantic
  • 23. *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. 23dm | DesignMantic
  • 24. *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. 24dm | DesignMantic
  • 25. *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 25dm | DesignMantic
  • 26. *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. 26dm | DesignMantic
  • 27. INFOGRAPHICS Let’s start with the first set of slides 27 3
  • 28. *Information & Images taken from various sites on the internet and is under OER Commons. 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. 28
  • 29. *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 29
  • 30. *Information & Images taken from various sites on the internet and is under OER Commons. INFOGRAPHIC EXAMPLE 30
  • 31. *Information & Images taken from various sites on the internet and is under OER Commons. INFOGRAPHIC EXAMPLE 31
  • 32. *Information & Images taken from various sites on the internet and is under OER Commons. INFOGRAPHIC EXAMPLE 32
  • 33. *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. 33
  • 34. *Information & Images taken from various sites on the internet and is under OER Commons. INFOGRAPHIC VIDEO EXAMPLE 34https://goo.gl/srcHyh
  • 35. *Information & Images taken from various sites on the internet and is under OER Commons. INFOGRAPHIC VIDEO EXAMPLE 35https://goo.gl/DJzSCv
  • 36. IMAGE PRINCIPLES, TECNIQUES & HOSTING Image manipulation techniques, principles and hosting sites. 36 4
  • 37. *Information & Images taken from various sites on the internet and is under OER Commons. 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. 37
  • 38. *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. 38
  • 39. *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. 39
  • 40. *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. 40
  • 41. *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) 41
  • 42. *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. 42
  • 43. *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. 43
  • 44. *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. 44
  • 45. *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. 45
  • 46. *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. 46
  • 47. *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. 47
  • 48. *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. 48
  • 49. *Information & Images taken from various sites on the internet and is under OER Commons. IMAGE HOSTING WEBSITES: ❑ Google+ Photos ❑ Flickr ❑ Smugmug ❑ Imgur ❑ 500px ❑ Photobucket ❑ Amazon Prime Photos ❑ DropBox ❑ Chevereto ❑ Imageshack 49
  • 50. *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