Scribd
Upload
12 views46 pages

DGNDGM

Fjetjwr

Uploaded by

solnat477
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
12 views46 pages

DGNDGM

Fjetjwr

Uploaded by

solnat477
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/ 46

Imaging and Design For the

Online Environment
Lesson Objectives:
By the end of this lesson, you will be able to:
• Understand the basic principles of graphics
and layout;
• Understand and use several file formats
• Easily manipulate images using simple image
editor.
ARE YOU
READY?
Elements of
Design
ELEMENTS OF DESIGN
Line – connecting two or more point.
It begins by extending one point
towards a specific direction.
ELEMENTS OF DESIGN
Shape – two-dimensional, enclosed
areas created by lines or contrasts in
color, value, or texture.
Basic Types of Shape
BASIC TYPES OF SHAPE

Geometric – triangle, square, rectangular,


and circle.
BASIC TYPES OF SHAPE

Natural – Animals and plants.


BASIC TYPES OF SHAPE

Abstract – Icons, stylized figures and graphic


illustrations.
Meanings of Shape
MEANINGS OF SHAPE

Circles, Ovals, Ellipses – represents unity, eternity,


protection, and completeness. Circles are associated
with wholeness, infinity, and warmth and are often
seen as friendly or soft.
MEANINGS OF SHAPE

Squares, Rectangles – reliable, gives stability and


suggest order.
MEANINGS OF SHAPE

Triangles – direction and power. Aggression and


energy. It also illustrates progression and direction.
ELEMENTS OF DESIGN
Color – conveys emotions, highlights
importance, and establish contrast. It’s
essential in creating mood and setting
the tone of a design.
COLOR WHEEL
PRIMARY COLORS
RED, YELLOW AND
BLUE
COLOR WHEEL
SECONDARY COLORS
ORANGE, GREEN AND
VIOLET
COLOR WHEEL
INTERMEDIATE
COLORS
RED-ORANGE,
YELLOW-ORANGE,
YELLOW-GREEN, BLUE
GREEN, BLUE-VIOLET
AND RED-VIOLET
COLOR WHEEL
COMPLEMENTARY
COLORS
Colors that are
opposites from one
another.
ELEMENTS OF DESIGN
Texture – refers to the
surface quality of a
design, whether it’s
smooth, rough, soft, or
hard.
ELEMENTS OF DESIGN
Space – can be categorized into two types: positive and
negative. Positive space is the area occupied by objects,
while Negative Space refers to the empty space
surrounding and between objects. Space, whether used
effectively or not, plays a crucial role in creating a
balanced and visually appealing design.
SPACE

Main Focus of the design. Helps the viewer focus on the


design.
ELEMENTS OF DESIGN
Form – adds depth to shapes, making them
three-dimensional (3D). This can include
spheres, cubes, and cylinders, adding realism
and dimension to designs.
ELEMENTS OF DESIGN
Value – Value refers to the lightness or
darkness of a color, which can help create
depth, contrast, and emphasis. It’s often
used to make elements stand out and give
them a sense of volume.
ELEMENTS OF DESIGN
Typography – refers to the art of arranging
fonts to make it readable and convey the
written message of the design.
Principles of
Graphic Design
C.R.A.P.
• CONTRAST
• REPETITION
• ALIGNMENT
• PROXIMITY
C.R.A.P.
Contrast – This principle states that elements
on a page should have enough contrast so that
they are easily distinguishable from one
another.
Contrast is all about making sure that different
elements on your page stand out from one
another. Use contrast to create visual interest
and highlight important information.
C.R.A.P.
Repetition – recurrence of a specific element
in a design. Repetition helps to create a sense
of unity on your design. It ties everything
together and makes it look like it belongs
together.
Using the same colors, texts, or shapes
throughout your design helps to create a
cohesive look that is easy for users to
understand.
C.R.A.P.
Alignment – refers to the positioning of
elements concerning each other within a
layout. Proper alignment is a fundamental
principle of design that contributes to a clean,
organized, and visually pleasing user interface.
When elements are aligned effectively, it helps
create a sense of order, clarity, and coherence
in the design.
C.R.A.P.
Proximity – related elements should be close
to each other so that users can easily see the
relationship between them. You can distinguish
unrelated items by creating distance between
them.
You can effectively communicate relationships between
different pieces of information by incorporating a sense of
proximity into your designs. It can help to organize and
understand your designs better.
Image File Formats
Image File Formats
1. JPEG (Joint Photographic Experts Group) –
File Extension: .jpg or .jpeg
Best For: Photographs and images with many
colors and gradients.
Image File Formats
2. PNG (Portable Network Graphics) –
File Extension: .png
Best For: Images requiring transparency or
sharp edges, like logos and icons.
Image File Formats
3. GIF (Graphics Interchange Format) –
File Extension: .gif
Best For: Simple animations and low-color
images like icons or simple graphics.
Image File Formats
4. SVG (Scalable Vector Graphics) –
File Extension: .svg
Best For: Logos, icons, and illustrations that
need to be resized without losing quality.
Image File Formats
5. WebP –
File Extension: .webp
Best For: Web use, especially for balancing
image quality and file size.
Image File Formats
6. BMP (Bitmap) –
File Extension: .bmp
Best For: High-quality images without
compression, though it's less commonly used
online.
Image File Formats
7. TIFF (Tagged Image File Format) -
File Extension: .tiff or .tif
Best For: High-quality images, particularly in
professional photography and printing.
Image Hosting
Platforms
PERFORMANCE TASK
Create a A4 Size Digital Poster using Canva
base on your advocacy theme.
Using of AI Generated Tools is highly
discouraged.
Submit it to the Google Drive provided.

Deadline is First Week of December.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy