Scribd
Upload
20 views

Chapter 3. Imaging and design

EMPOWERMENT TECHNOLOGY - Image Manipulation

Uploaded by

Reah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20 views

Chapter 3. Imaging and design

EMPOWERMENT TECHNOLOGY - Image Manipulation

Uploaded by

Reah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Imaging and Design for

the Online Environment

CHAPTER III
Covering Topics:

Online file formats for images


Basic principles of graphics and
1 layout 3 and text

Principles of visual message Principles and basic techniques


2 design using infographics 4 of image manipulation
Covering Topics:

Uploading, sharing, and image


Basic image manipulation
5 using offline or open-source 7 hosting platforms.
software

Combining text, graphics, and


6 images
Intended Learning Outcomes:
At the end of the lesson the students will be able
to
• Independently apply the techniques of
image manipulation and graphic
design to create original or derivative
ICT content from existing images, text
and graphic

• Evaluate existing websites and online


resources based on the principles of
layout, graphic, and visual message
design
Based on the Graphic novel showed, what was it all about?
;km

Who is the main character of the story? How did you


;km

know?
Image
Image and Design
What is an image?

Representation of the
external form of a person or
a thing in art.
2 Dimentional Image, such
S

as photograph or screen
display

3 Dimentional Image, such


S

as photograph or screen
display

Note: it could be captured by optical devices such as cameras, mirrors, lenses,


telescopes, microscopes etc. and natural objects and phenomena, such as the
Definition of Graphics
and Layout
Website
• GRAPHICS

-Graphic design is an artistic way of cm.edu.ph


communicating ideas and messages
through visual expressions using texts, What makes a good and
images, and symbols effective website?

How do users interact with


the websites they visit?
Graphics vs. Layout

• Utilize
• Focuses on the
• Focuses on visual arrangement of
principles of
elements like design such text and images
images, colors, as balance, on a page.
and typography. contrast, and
alignment. • Aims to ensure
• Aims to create • Require readability and a
visually creativity and logical flow of
appealing and an
information.
engaging understanding
of visual
designs. • Commonly used
communicatio
n. in print media,
• Often used in web design, and
• Aim to convey
branding, a message publications.
advertising, and effectively to
digital media. the audience
Design is a plan of creating an idea
through a combination of texts,
images, and other elements that are
placed together artistically, whereas,
the layout is a term used as the
process of organizing and arranging
these elements in a design as you
plot it in a paper
Basic Principles of Design and Layout

Balance

It refers to the proper arrangement of the


elements, which gives a visual weight for
the design. There are two types of
balance, Symmetrical or Asymmetrical.
Symmetrical balance is where the
Antic
elements are equally distributed on both
sides of your design, technically a mirror-
based design. In contrast, Asymmetrical
balance is a free layout where the
elements can be placed in any order or
Basic Principles of Design and Layout

Emphasis

It refers to something that needs to


stand-out or emphasize. When working
on emphasis, you can change the color,
size, or even the element itself to lead
the eye to the focal interest.
Antic
Basic Principles of Design and Layout

Pattern, Repetition and Rhythm

The use of repetitive elements such as


lines, shapes, forms, textures, space,
colors, font, style, and the like to create
texture, movement, continuity, and
consistency of the design. It also makes
Antic
the design formal and more comfortable
to read because of its uniformity.
Basic Principles of Design and Layout

Alignment

It refers to the proper placement of an


element to your design, just like invisibly
placing or aligning your texts or images
diagonally, vertically, and horizontally.
The standard texts or paragraph
Antic
alignment we apply are center, right, left,
and justified.
Basic Principles of Design and Layout

Contrast

It refers to the use of different or opposite


elements such as sizes (large or small), shapes
(geometric or organic), spaces (negative or
positive), form (real or abstract), colors
(monochromatic, complementary, triadic,
tetradic), texture (smooth or rough), and values
(light or dark). The contrast gives visual weight
to an object or design. You must consider and
limit the use of different elements, color, style,
and typography to avoid cluttered design. When
creating contrast in color and text, it is advised
to choose a color from the background to create
Basic Principles of Design and Layout

Unity and Harmony

It refers to the relationship of the


elements or the contents when you place
them together. The elements of the
design must work together and agree to
its meaning, theme, feeling, or mood
Activity 1.

In this activity you need to gain access on the internet using your computer or
mobile phone. Choose at least two and browse the websites listed below and
evaluate the layout and design of their pages. Grab and paste a screenshot of your
chosen page and explain the principles of design and layout applied. Use Microsoft
word for your output and print it out.

1. https://www.deped.gov.ph
2. https://education.minecraft.net
3. https://teachforthephilippines.org
4. https://arvr.google.com/ar
5. https://www.canva.com
Activity 2.
Directions: Choose the letter of the best answer. Write the chosen letter on a separate sheet of paper.

1. Monochromatic uses one color in a design. Its advantage is to create balance and to match the color in an artwork. However,
this may lack energy and may look monotonous. How will you use the monochromatic scheme to create variations?
A. Use complementary colors
B. Adjust the saturation and value
C. Change the hue of the artwork or every element
D. Choose a design that is more suitable for the color scheme used

2. What is the purpose of creating a hierarchy in your design?


A. It gives consistency.
B. It adds visual weight.
C. To add beauty to the design.
D. Make the detail to stand out.

3. Which of the following refers to the plan of creating an idea through a combination of texts, images, and other elements that
are placed together artistically?
A. Design C. Layout B. Graphic D. Message

4. Which principle of design is when a designer arranges the elements or text according to its context?
B. Balance C. Harmony B. Emphasis D. Hierarchy

5. Which type of balance gives a mirror-like design that is proportionally equal to the other side?
A. Asymmetrical
B. Symmetrical
C. Semi-Balance
D. Semi-Proportion
Activity (by pair)
DIRECTIONS: Create a graphic novel with a minimum of 7 slides, and maximum of 10
slides using PowerPoint Presentation applying the basic principle of design and lay out and
integrating steps in creating an effective presentation.

• Creating an effective presentation


• Basic principles of Graphic Design and Lay out

You might also like