SlideShare a Scribd company logo
1 of 38
Download to read offline
Empowerment Technology
Lesson 6 – Imaging and Design for
Online Environment
Images
An Image is a representation of the external form of a
person or thing in art. 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, and natural objects and phenomena, such as
the human eye or water.
Graphics
Graphics are visual images or designs on some surface,
such as a wall, canvas, screen, paper, or stone to inform,
illustrate, or entertain. It can be a photograph, a drawing,
a line art, graphical representations, and typography.
Basic Principles of Graphics and
Layout
COLOR
is used for emphasis or may elicit emotions from
viewers. Determined by its hue (name of color),
intensity (purity of the hue), and value (lightness or
darkness of hue).
BALANCE
- the equal distribution of weight. In
layout, visual weight is determined by
the darkness or lightness, thickness of
lines, and size. Balance is crucial to the
success of design.
SYMMETRICAL BALANCE
The visual weight is distributed evenly, either vertically or horizontally. You
can draw a line straight through the middle of the design, and the visual
balance would be evenly distributed
ASYMMETRICAL BALANCE
There is an artistic and different intensity on one side of
the page
CONTRAST
- Arrangement of opposite elements (light vs.
dark, rough vs. smooth, small vs. large., etc.) in
a composition so as to create visual interest.
ALIGNMENT
is simply the way visual elements are arranged so that
they line up in some way
Edge alignment
determines the placement of elements in relation to the edge of the
page or canvas.
Center alignment
aligns all the elements so that an invisible, central line on the page will
always be in the center of the elements
REPETITION
the process of repeating elements throughout a design to give a
unified look. Repetition goes with consistency of your design on
font, font size, patterns, and colors
PROXIMITY
the process of ensuring related design elements are placed
together. Any unrelated items should be spaced apart.
White Space is the art of nothing. It is also known as the
negative space. It is the portion of a page left unmarked: margins,
gutters, and space between columns, lines of type, graphics, figures,
or objects drawn or depicted.
INFOGRAPHICS
-Information graphics or infographics are used to
represent information , staistical 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 appealing to an average user.
Online Image File
Formats
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment
graphic and design in an online environment

More Related Content

Similar to graphic and design in an online environment

Digital illustration handbook
Digital illustration handbookDigital illustration handbook
Digital illustration handbook
MrLawler
 
Visual composition slideshow-Kyle.S
Visual composition slideshow-Kyle.SVisual composition slideshow-Kyle.S
Visual composition slideshow-Kyle.S
COM1005
 

Similar to graphic and design in an online environment (20)

Digital illustration handbook
Digital illustration handbookDigital illustration handbook
Digital illustration handbook
 
U4 jou231 basic_designprinciples
U4 jou231 basic_designprinciplesU4 jou231 basic_designprinciples
U4 jou231 basic_designprinciples
 
Cci1 lec 7 definition of design its elements and principle
Cci1 lec 7  definition of design its elements and principleCci1 lec 7  definition of design its elements and principle
Cci1 lec 7 definition of design its elements and principle
 
Visual composition slideshow-Kyle.S
Visual composition slideshow-Kyle.SVisual composition slideshow-Kyle.S
Visual composition slideshow-Kyle.S
 
L A Y O U T A N D D E S I G N
L A Y O U T  A N D  D E S I G NL A Y O U T  A N D  D E S I G N
L A Y O U T A N D D E S I G N
 
Visual Media and Information - Media and Information Literacy (MIL)
Visual Media and Information - Media and Information Literacy (MIL)Visual Media and Information - Media and Information Literacy (MIL)
Visual Media and Information - Media and Information Literacy (MIL)
 
Arts 6- Art Processes, Elements, and Principles Applied in New Technologies....
 Arts 6- Art Processes, Elements, and Principles Applied in New Technologies.... Arts 6- Art Processes, Elements, and Principles Applied in New Technologies....
Arts 6- Art Processes, Elements, and Principles Applied in New Technologies....
 
Darlene joy garcia presentation
Darlene joy garcia presentationDarlene joy garcia presentation
Darlene joy garcia presentation
 
The elements of design
The elements of designThe elements of design
The elements of design
 
CARTOGRAPHIC_OUTPUT.ppt
CARTOGRAPHIC_OUTPUT.pptCARTOGRAPHIC_OUTPUT.ppt
CARTOGRAPHIC_OUTPUT.ppt
 
Designs & graphics
Designs & graphicsDesigns & graphics
Designs & graphics
 
ELEMENTS-OF-DES-WPS-Office.ppt for collx
ELEMENTS-OF-DES-WPS-Office.ppt for collxELEMENTS-OF-DES-WPS-Office.ppt for collx
ELEMENTS-OF-DES-WPS-Office.ppt for collx
 
Pattern- report
Pattern- reportPattern- report
Pattern- report
 
Pattern
PatternPattern
Pattern
 
Pattern (report)
Pattern (report)Pattern (report)
Pattern (report)
 
Pattern
PatternPattern
Pattern
 
seminar
seminarseminar
seminar
 
PRINCIPLES OF DESIGN.pptx
PRINCIPLES OF DESIGN.pptxPRINCIPLES OF DESIGN.pptx
PRINCIPLES OF DESIGN.pptx
 
Visartvocab
VisartvocabVisartvocab
Visartvocab
 
Bdft i, def,unit-i, elements of design,
Bdft i, def,unit-i,  elements of design,Bdft i, def,unit-i,  elements of design,
Bdft i, def,unit-i, elements of design,
 

Recently uploaded

1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
negromaestrong
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
kauryashika82
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
PECB
 
Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdf
Chris Hunter
 

Recently uploaded (20)

Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docx
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
 
Food Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-II
Food Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-IIFood Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-II
Food Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-II
 
Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdf
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 

graphic and design in an online environment

  • 1. Empowerment Technology Lesson 6 – Imaging and Design for Online Environment
  • 2. Images An Image is a representation of the external form of a person or thing in art. 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, and natural objects and phenomena, such as the human eye or water. Graphics Graphics are visual images or designs on some surface, such as a wall, canvas, screen, paper, or stone to inform, illustrate, or entertain. It can be a photograph, a drawing, a line art, graphical representations, and typography.
  • 3. Basic Principles of Graphics and Layout
  • 4. COLOR is used for emphasis or may elicit emotions from viewers. Determined by its hue (name of color), intensity (purity of the hue), and value (lightness or darkness of hue).
  • 5.
  • 6. BALANCE - the equal distribution of weight. In layout, visual weight is determined by the darkness or lightness, thickness of lines, and size. Balance is crucial to the success of design.
  • 7. SYMMETRICAL BALANCE The visual weight is distributed evenly, either vertically or horizontally. You can draw a line straight through the middle of the design, and the visual balance would be evenly distributed
  • 8. ASYMMETRICAL BALANCE There is an artistic and different intensity on one side of the page
  • 9. CONTRAST - Arrangement of opposite elements (light vs. dark, rough vs. smooth, small vs. large., etc.) in a composition so as to create visual interest.
  • 10.
  • 11. ALIGNMENT is simply the way visual elements are arranged so that they line up in some way Edge alignment determines the placement of elements in relation to the edge of the page or canvas. Center alignment aligns all the elements so that an invisible, central line on the page will always be in the center of the elements
  • 12. REPETITION the process of repeating elements throughout a design to give a unified look. Repetition goes with consistency of your design on font, font size, patterns, and colors
  • 13.
  • 14.
  • 15.
  • 16. PROXIMITY the process of ensuring related design elements are placed together. Any unrelated items should be spaced apart. White Space is the art of nothing. It is also known as the negative space. It is the portion of a page left unmarked: margins, gutters, and space between columns, lines of type, graphics, figures, or objects drawn or depicted.
  • 17. INFOGRAPHICS -Information graphics or infographics are used to represent information , staistical 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 appealing to an average user.
  • 18.
  • 19.