SlideShare ist ein Scribd-Unternehmen logo
1 von 14
Imaging and Design for the Online
Environment
By: Lany Lyn B. Magdaraog
Colegio de San Lorenzo Ruiz de Manila of Northern Samar, Inc.
1. Basic principles of graphics and layout
2. Principles of visual message design using infographics
3. Online file formats for images and text
4. Principles and basic techniques of image manipulation
5. Basic image manipulation using offline or open-source
software
6. Combining text, graphics, and images
7. Uploading, sharing, and image hosting platforms.
Imaging and Design For the Online
Environment covering the topics of:
BASIC
PRINCIPLES OF
GRAPHICS AND
LAYOUT
WHAT IS GRAPHIC
DESIGN?
 Graphic design are definitions, rules and considerations of
design applied to the visual medium, for communication by
the use of visual objects that may include words, lights,
graphs and shapes to pass information to the viewer.
 Graphic design can be used for advertising, or just for
entertainment intended for the mind. From clarification or
expansion of information via visual aids to the arousal of
emotional and aesthetic feelings in an artistic way.
 It may be a contributor to many other forms of art and craft,
for example the elaboration of typefaces used in print and
media, the order and flow of presentation of a cartoon, to the
creation of road signs or even emoji.
ALIGNMEN
TAlignment is the act of keeping design objects in line, not only
vertically or horizontally but across any linear plane. Alignment also
be done respectively, i.e one design element is positioned with
respect of another element within same frame.
BALAN
CEDesigns in balance (or equilibrium) have their parts
arrangement planned, keeping a coherent visual
pattern (color, shape, space). "Balance" is a concept
based on human perception and the complex nature of
the human senses of weight and proportion.
CONTRA
STDistinguishing by comparing/creating differences. Some ways of
creating contrast among elements in the design include using
contrasting colors, sizes, shapes, locations, or relationships. For
text, contrast is achieved by mixing serif and sans-serif on the
page, by using very different type styles, or by using type in
surprising or unusual ways. Another way to describe contrast, is to
say "a small object next to a large object will look smaller".
Making a specific element stand out or draw attention to the eye.
Emphasis can be achieved in graphic design by placing elements
on the page in positions where the eye is naturally drawn, by
using other principles such as contrast, repetition, or movement.
Bold and italic type provides emphasis for text. Graphic elements
gain emphasis through size, visual weight, color, complexity,
uniqueness, placement on the page, and other features.
EMPHASI
S
GESTALT
Sometimes considered a distinct principle of design, gestalt is the
concept that "the whole is greater than the sum of its parts."
When viewing designs, humans apply this principle unconsciously by
seeing connections and relationships among and between the elements
in the design.
Designers can use this principle to create visual connections and
relationships that clarify and strengthen the overall "feel" and meaning of
the design.
Movement is creating an instability, making motion to blur the image.
Movement can be achieved by using graphic elements that direct the
eye in a certain direction such as arrows that point the way overtly or
a series of lines or dots that get progressively larger or smaller,
creating a more subtle sense of movement. Movement can be
accomplished simply by using a photograph or clip art of something
moving - a runner - as opposed to something stationary - a person
standing.
MOVEMEN
T
PROPORTI
ONThis indicates the relative visual size width, and weight of a particular
graphical elements in a design composition.
PROXIMI
TYCloseness or distance of individual design elements. Close
proximity indicates a connection. Proximity means grouping
elements together so that you guide the viewer/reader to different
parts of the message.
Unity creates a feeling of wholeness. Unity is usually achieved when the
parts complement each other in a way where they have something in
common. Unity can be achieved by use of the same color, or different tints
of it, or using a similar graphic style for illustrations.
UNITY, REPETITION &
RHYTHM
In design, repetition creates visual consistency in page designs, such as using the
same style of headlines, the same style of initial capitals, or repeating the same basic
layout from one page to another.
Rhythm is a strong, regular, repeated pattern of movement or sound.
WHITE SPACE
White space includes margins, gutters, space between lines of type (leading), off-
set of text from images (text wraps) and any other part of the page that is empty.
In graphic design, the white space, or negative space, is considered an important
element of the overall design. It can give emphasis, contrast, and movement, it can
be used for repetition and pattern, and work within various relationships with other
elements of the positive and negative spaces in the design.

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Collaborative ICT Development - Empowerment Technologies
Collaborative ICT Development - Empowerment TechnologiesCollaborative ICT Development - Empowerment Technologies
Collaborative ICT Development - Empowerment Technologies
 
Imaging and Design for the Online Environment - Empowerment Technologies
Imaging and Design for the Online Environment - Empowerment TechnologiesImaging and Design for the Online Environment - Empowerment Technologies
Imaging and Design for the Online Environment - Empowerment Technologies
 
Imaging and design for the online environment (empowermwnt technologies)
Imaging and design for the online environment (empowermwnt technologies)Imaging and design for the online environment (empowermwnt technologies)
Imaging and design for the online environment (empowermwnt technologies)
 
Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and Elements
 
Principles and Basic Techniques of Image Manipulation
Principles and Basic Techniques of Image ManipulationPrinciples and Basic Techniques of Image Manipulation
Principles and Basic Techniques of Image Manipulation
 
Empowerment Technologies - Module 2
Empowerment Technologies - Module 2Empowerment Technologies - Module 2
Empowerment Technologies - Module 2
 
Online platforms for ICT Content Development
Online platforms for ICT Content DevelopmentOnline platforms for ICT Content Development
Online platforms for ICT Content Development
 
ICT as a Platform for Change
ICT as a Platform for Change ICT as a Platform for Change
ICT as a Platform for Change
 
Imaging and Design for Online Environment
Imaging and Design for Online EnvironmentImaging and Design for Online Environment
Imaging and Design for Online Environment
 
EMPOWERMENT TECHNOLOGY (INTRODUCTION TO INFORMATION COMMUNICATION TECHNOLOGY)
EMPOWERMENT TECHNOLOGY (INTRODUCTION TO INFORMATION COMMUNICATION TECHNOLOGY)EMPOWERMENT TECHNOLOGY (INTRODUCTION TO INFORMATION COMMUNICATION TECHNOLOGY)
EMPOWERMENT TECHNOLOGY (INTRODUCTION TO INFORMATION COMMUNICATION TECHNOLOGY)
 
Empowerment Technologies - Module 4
Empowerment Technologies - Module 4Empowerment Technologies - Module 4
Empowerment Technologies - Module 4
 
Empowerment Technologies - Module 1
Empowerment Technologies - Module 1Empowerment Technologies - Module 1
Empowerment Technologies - Module 1
 
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] - ADVANCED WORD PROCESSING SKILLS
[EMPOWERMENT TECHNOLOGIES] - ADVANCED WORD PROCESSING SKILLS[EMPOWERMENT TECHNOLOGIES] - ADVANCED WORD PROCESSING SKILLS
[EMPOWERMENT TECHNOLOGIES] - ADVANCED WORD PROCESSING SKILLS
 
EMPOWERMENT TECHNOLOGIES - LESSON 2
EMPOWERMENT TECHNOLOGIES - LESSON 2EMPOWERMENT TECHNOLOGIES - LESSON 2
EMPOWERMENT TECHNOLOGIES - LESSON 2
 
Motion Media and Information - Media and Information Literacy (MIL)
Motion Media and Information - Media and Information Literacy (MIL)Motion Media and Information - Media and Information Literacy (MIL)
Motion Media and Information - Media and Information Literacy (MIL)
 
Nature and purposes of of online platforms and applications
Nature and purposes of of online platforms and applicationsNature and purposes of of online platforms and applications
Nature and purposes of of online platforms and applications
 
ICT a Medium for Advocacy and Development Communication
ICT a Medium for Advocacy and Development CommunicationICT a Medium for Advocacy and Development Communication
ICT a Medium for Advocacy and Development Communication
 
Manipulative Media
Manipulative MediaManipulative Media
Manipulative Media
 
6. Applied Productivity Tools with Advanced Application Techniques PPT.pptx
6. Applied Productivity Tools with Advanced Application Techniques PPT.pptx6. Applied Productivity Tools with Advanced Application Techniques PPT.pptx
6. Applied Productivity Tools with Advanced Application Techniques PPT.pptx
 

Ähnlich wie Empowerment Technologies - Imaging and Design for the Online Environment

Visual composition slideshow-Kyle.S
Visual composition slideshow-Kyle.SVisual composition slideshow-Kyle.S
Visual composition slideshow-Kyle.S
COM1005
 
Multimodal Rhetorics FromWriterDesignerAGuidetoM.docx
Multimodal Rhetorics    FromWriterDesignerAGuidetoM.docxMultimodal Rhetorics    FromWriterDesignerAGuidetoM.docx
Multimodal Rhetorics FromWriterDesignerAGuidetoM.docx
roushhsiu
 

Ähnlich wie Empowerment Technologies - Imaging and Design for the Online Environment (20)

Design 101 > Lesson 01
Design 101 > Lesson 01Design 101 > Lesson 01
Design 101 > Lesson 01
 
GROUP-1.pptx
GROUP-1.pptxGROUP-1.pptx
GROUP-1.pptx
 
Design Overview
Design OverviewDesign Overview
Design Overview
 
The Language of Design.pdf
The Language of Design.pdfThe Language of Design.pdf
The Language of Design.pdf
 
Visual composition slideshow-Kyle.S
Visual composition slideshow-Kyle.SVisual composition slideshow-Kyle.S
Visual composition slideshow-Kyle.S
 
exploring the world of graphic designing
exploring the world of graphic designingexploring the world of graphic designing
exploring the world of graphic designing
 
Practical Lecture 3_Graphics Elements and Principles.pdf
Practical Lecture 3_Graphics Elements and Principles.pdfPractical Lecture 3_Graphics Elements and Principles.pdf
Practical Lecture 3_Graphics Elements and Principles.pdf
 
Introduction to Design (Yearbook Class)
Introduction to Design (Yearbook Class)Introduction to Design (Yearbook Class)
Introduction to Design (Yearbook Class)
 
Basic Elements & Principals for Create Best Graphic Design Services
Basic Elements & Principals for Create Best Graphic Design ServicesBasic Elements & Principals for Create Best Graphic Design Services
Basic Elements & Principals for Create Best Graphic Design Services
 
IVC - Lesson 14
IVC - Lesson 14IVC - Lesson 14
IVC - Lesson 14
 
Mil ppt week 13
Mil ppt week 13Mil ppt week 13
Mil ppt week 13
 
Graphic Designing Services In Pakistan.docx
Graphic Designing Services In Pakistan.docxGraphic Designing Services In Pakistan.docx
Graphic Designing Services In Pakistan.docx
 
LAYOUT_Graphic--Design-Presentation.pptx
LAYOUT_Graphic--Design-Presentation.pptxLAYOUT_Graphic--Design-Presentation.pptx
LAYOUT_Graphic--Design-Presentation.pptx
 
Multimodal Rhetorics FromWriterDesignerAGuidetoM.docx
Multimodal Rhetorics    FromWriterDesignerAGuidetoM.docxMultimodal Rhetorics    FromWriterDesignerAGuidetoM.docx
Multimodal Rhetorics FromWriterDesignerAGuidetoM.docx
 
Introduction to Graphic Design.pdf
Introduction to Graphic Design.pdfIntroduction to Graphic Design.pdf
Introduction to Graphic Design.pdf
 
Principles and elements of design
Principles and elements of designPrinciples and elements of design
Principles and elements of design
 
Introduction to Graphic Design- Elements and Principles of Art
Introduction to Graphic Design- Elements and Principles of ArtIntroduction to Graphic Design- Elements and Principles of Art
Introduction to Graphic Design- Elements and Principles of Art
 
Visual principles
Visual principlesVisual principles
Visual principles
 
Visual principles
Visual principlesVisual principles
Visual principles
 
Visual principles
Visual principlesVisual principles
Visual principles
 

Kürzlich hochgeladen

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Kürzlich hochgeladen (20)

Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptx
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.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
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxOn_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 

Empowerment Technologies - Imaging and Design for the Online Environment

  • 1. Imaging and Design for the Online Environment By: Lany Lyn B. Magdaraog Colegio de San Lorenzo Ruiz de Manila of Northern Samar, Inc.
  • 2. 1. Basic principles of graphics and layout 2. Principles of visual message design using infographics 3. Online file formats for images and text 4. Principles and basic techniques of image manipulation 5. Basic image manipulation using offline or open-source software 6. Combining text, graphics, and images 7. Uploading, sharing, and image hosting platforms. Imaging and Design For the Online Environment covering the topics of:
  • 4. WHAT IS GRAPHIC DESIGN?  Graphic design are definitions, rules and considerations of design applied to the visual medium, for communication by the use of visual objects that may include words, lights, graphs and shapes to pass information to the viewer.  Graphic design can be used for advertising, or just for entertainment intended for the mind. From clarification or expansion of information via visual aids to the arousal of emotional and aesthetic feelings in an artistic way.  It may be a contributor to many other forms of art and craft, for example the elaboration of typefaces used in print and media, the order and flow of presentation of a cartoon, to the creation of road signs or even emoji.
  • 5. ALIGNMEN TAlignment is the act of keeping design objects in line, not only vertically or horizontally but across any linear plane. Alignment also be done respectively, i.e one design element is positioned with respect of another element within same frame.
  • 6. BALAN CEDesigns in balance (or equilibrium) have their parts arrangement planned, keeping a coherent visual pattern (color, shape, space). "Balance" is a concept based on human perception and the complex nature of the human senses of weight and proportion.
  • 7. CONTRA STDistinguishing by comparing/creating differences. Some ways of creating contrast among elements in the design include using contrasting colors, sizes, shapes, locations, or relationships. For text, contrast is achieved by mixing serif and sans-serif on the page, by using very different type styles, or by using type in surprising or unusual ways. Another way to describe contrast, is to say "a small object next to a large object will look smaller".
  • 8. Making a specific element stand out or draw attention to the eye. Emphasis can be achieved in graphic design by placing elements on the page in positions where the eye is naturally drawn, by using other principles such as contrast, repetition, or movement. Bold and italic type provides emphasis for text. Graphic elements gain emphasis through size, visual weight, color, complexity, uniqueness, placement on the page, and other features. EMPHASI S
  • 9. GESTALT Sometimes considered a distinct principle of design, gestalt is the concept that "the whole is greater than the sum of its parts." When viewing designs, humans apply this principle unconsciously by seeing connections and relationships among and between the elements in the design. Designers can use this principle to create visual connections and relationships that clarify and strengthen the overall "feel" and meaning of the design.
  • 10. Movement is creating an instability, making motion to blur the image. Movement can be achieved by using graphic elements that direct the eye in a certain direction such as arrows that point the way overtly or a series of lines or dots that get progressively larger or smaller, creating a more subtle sense of movement. Movement can be accomplished simply by using a photograph or clip art of something moving - a runner - as opposed to something stationary - a person standing. MOVEMEN T
  • 11. PROPORTI ONThis indicates the relative visual size width, and weight of a particular graphical elements in a design composition.
  • 12. PROXIMI TYCloseness or distance of individual design elements. Close proximity indicates a connection. Proximity means grouping elements together so that you guide the viewer/reader to different parts of the message.
  • 13. Unity creates a feeling of wholeness. Unity is usually achieved when the parts complement each other in a way where they have something in common. Unity can be achieved by use of the same color, or different tints of it, or using a similar graphic style for illustrations. UNITY, REPETITION & RHYTHM In design, repetition creates visual consistency in page designs, such as using the same style of headlines, the same style of initial capitals, or repeating the same basic layout from one page to another. Rhythm is a strong, regular, repeated pattern of movement or sound.
  • 14. WHITE SPACE White space includes margins, gutters, space between lines of type (leading), off- set of text from images (text wraps) and any other part of the page that is empty. In graphic design, the white space, or negative space, is considered an important element of the overall design. It can give emphasis, contrast, and movement, it can be used for repetition and pattern, and work within various relationships with other elements of the positive and negative spaces in the design.