LESSON 5: 2

0
IMAGING AND 2
DESIGN FOR THE 4
ONLINE
ENVIRONMENT
Topics:
•PHOTO EDITING AND PHOTO
MANIPULATION

•IMAGE FORMATS

•FEATURES OF IMAGE EDITORS

 Objectives:
• Identify and distinguish the difference
between photo editing and photo
manipulation;
• Use image manipulation techniques on existing
images to change or enhance their current state to
communicate a message for a specific purpose; and

• Create an original or derivative ICT content to

effectively communicate a visual message in an online
environment to specific professional tracks.
What is an image?
What is an image?
●is a visual representation of something, such as a
person, object, scene, or concept.
●Images can be created in various forms, including
photographs, paintings, drawings, digital graphics, or
even mental pictures.
●They are often used to convey information, evoke
emotions, or communicate ideas.
●Images are widely used across multiple fields, such as
art, media, education, advertising, and technology.
What is graphics?
●refer to visual elements that are designed or generated
to convey specific information or artistic
expression. Graphics can include images but also
incorporate other visual elements such as icons, logos,
charts, typography, illustrations, and more.
●This are visual images on some surfaces.
 Key Differences
1. Content:
○ Images typically capture real-world objects (e.g., a photograph of a landscape).
○ Graphics are often designed and created intentionally to communicate something
(e.g., an infographic or a chart).
2. Scalability:
○ Images (raster) lose quality when resized.
○ Graphics (vector) can be scaled up or down without losing resolution.
3. Purpose:
○ Images are often used for representation, capturing reality, or documenting
moments.
○ Graphics are used for design, communication, or presenting data in a visually
structured way.
In short, all images can be part of graphics, but not all graphics are simply images.
Graphics can combine multiple visual elements, while images generally refer to single
visual captures or representations.
 PHOTO EDITING
• Photo editing encompasses the processes of altering
images, whether they are digital photographs,
traditional photo chemical photographs, or
illustrations. Traditional analog image editing is
known as photo retouching, using tools such as an
airbrush to modify photographs, or editing illustrations
with any traditional art medium.
PHOTO EDITING
BASIC OF IMAGE
EDITING
1. RASTER IMAGES are stored in a
computer in the form of a grid of picture
elements or pixels.
2. VECTOR IMAGES such as Adobe Illustrator,
Inkscape and etc. are used to create and
modify vector images, which are stored as
descriptions of lines, Bezier curves and text
 DIFFERENCE BETWEEN
RASTER & VECTOR IMAGES
 RASTER IMAGES use many colored VECTOR IMAGES alternatively, allow
pixels or individual building blocks to for more flexibility. Constructed using
form a complete image JPEGs, GIFs mathematical formulas rather than
and PNGs are common raster image individual colored blocks, vector file
types. Almost all of the photos found on types such as EPS, AI and PDF are
the web and in print catalogs are raster excellent for creating graphics that
images. frequently require resizing.
Advantages: Advantages:
● Great for complex, detailed images ● Infinite scalability without quality loss.
with many colors (e.g., photos). ● Smaller file sizes for simpler images.
● Widely supported across platforms. Disadvantages:
Disadvantages: ● Not suitable for complex or photo-realistic
● Quality loss when enlarged. images.
● Larger file sizes for high resolution. ● Limited by simpler color gradients and
shading compared to raster images.
 3D MODEL
3D MODELING (OR MODELLING) is the process of
developing a mathematical representation of any
three dimensional surface of an object via
specialized software. The product is called a 3D
model. It can be displayed as a two-dimensional
image through a process called 3D rendering or used
in a computer simulation or physical phenomena. The
model can also be physically created using 3D
3D MODEL
 7. 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
alignment we apply are center, right, left, and
justified.
 8. Hierarchy
It refers to the proper arrangement of the details
such as text, characters, numbers, and symbols.
Changing its character size, thickness, spaces, or
even font type to stand out is its most critical
features. By applying this principle, it can help the
viewer to recognize and navigate the highlight of
the event smoothly.
 9. 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.
 10. 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.
Why is Graphic Layout important?

It is crucial in design because it organizes and

arranges visual elements in a way that
communicates information effectively and creates a
visually appealing composition.

A well-executed layout ensures that the design is

functional, user-friendly, and aesthetically engaging.
ACTIVITY
 IMAGE FILE
FORMATS
JPEG is a commonly used method of lossy
compression for digital images, particularly
for those images produced by a digital
photography. Low storage need.
 IMAGE FILE
FORMATS
PNG (PORTABLE NETWORK GRAPHICS) is
a raster graphics file format that supports
lossless data compression. Larger file sizes
 IMAGE FILE
FORMATS
GIF (Graphics Interchange Format) is
a lossless format for image files that
supports both animated and static
images. But limited to a palette of 256
colors (8-bit color), which may not be
suitable for detailed images.
 IMAGE FILE
FORMATS
BMP or Bitmap Image File is a raster
graphics image used to store bitmap digital
images. There is no compression or
information loss with BMP files which allow
images to have very high quality, but also
very large file sizes.
 IMAGE FILE
FORMATS
SVG (Scalable Vector Graphics) is an
XML-based vector image format for two-
dimensional graphics with support for
interactivity and animation. Logos,
icons, and illustrations on websites.
 IMAGE FILE
FORMATS
EPS or Encapsulated PostScript file is a common
vector file type. EPS files can be opened in many
illustration applications such as Adobe Illustrator or
CorelDRAW. Print design (brochures, business
cards, posters).
 IMAGE FILE
FORMATS
.3ds is one of the file formats used by the Autodesk
3Ds Max 3D Modelling, animation and rendering
software. Game development and visualization
projects.
The 3DS file extension is short for 3D Studio, and
it stores information on the makeup of 3D vector
graphics. This includes mesh data, material attributes,
camera and lighting information, and more.
 IMAGE FILE FORMATS
.fbx is an exchange format, in particular for
interoperability between Autodesk products and other
digital content creation software.
It is a format used to exchange 3D geometry and
animation data. You can use different programs to open,
edit, and export high-fidelity 2D and 3D files. FBX files are
used in film, game, and Augmented Reality and Virtual
Reality (AR/VR) development.
Film and animation production. Architectural
visualization.
Features of Image Editors
 SELECTION
One of the pre-requisites for
many of the app mentioned
below is a method of selecting
part(s) of an image, thus
applying a change selectively
 SELECTION
MARQUEE TOOL LASSO TOOL MAGIC WAND

for selecting TOOL

for freehand selects objects or
rectangular or selection of a regions in the
other regular region image defined by
polygon-shaped proximity of color
regions or luminance
SELECTION
 LAYERS
which are analogous to sheets of
transparent acetate, stacked on top of
each other, each capable of being
individually positioned, altered and
blended with the layers below, w/o
affecting any of the elements on the
LAYERS
 IMAGE SIZE

resize images in a process often

called image scaling, making them
larger, or smaller. High image
resolution cameras can produce large
images which are often reduced in
IMAGE SIZE
 CROPPING
creates a new image by selecting a
desired rectangular portion from the
image being cropped. The unwanted
part of the image is discarded. Image
cropping does not reduce the
resolution of the area cropped.
CROPPING
 CLONING

uses the current brush to copy from

an image or pattern. It has many
uses: one of the most important is to
repair problem areas in digital photos
CLONING
IMAGE ORIENTATION
Image editors are capable of altering an
image to be rotated in any direction and to
any degree. Mirror images can be created
and images can be horizontally flipped or
vertically flopped. Rotated image usually
require cropping afterwards, in order to
IMAGE ORIENTATION
 PERSPECTIVE

is the art of drawing solid objects on a

two- dimensional surface so as to give
the right impression of their height,
width, depth and position in relation
to each other when viewed from a
PERSPECTIVE
 SHARPENING AND
SOFTENING

Sharpening makes images clearer. Too

much sharpening causes grains on the
surface of the image. Softening
makes images softer that removes
some of the highly visible flaws. Too
SHARPENING AND
SOFTENING
 SATURATION
is an expression for the relative
bandwidth of the visible output from
a light source. As saturation increase,
colors appear more “pure.’’ As
saturation decreases, colors appear
more ‘’ washed-out.’’
SATURATION
CONTRAST AND BRIGHTENING
• Contrast of images and brighten or darken the
image. Underexposed images can be often be
improved by using this feature.
• Brightening lightens the image so the photo
brightens up. Brightness is a relative expression of
the intensity of the energy output of a visible light
source.
• Adjusting contrast means adjusting brightness
because they work together to make a better
CONTRAST AND BRIGHTENING
PHOTO MANIPULATION

Photo manipulation involves

transforming or altering a
photograph using various
methods and techniques to
PHOTO MANIPULATION
DIFFERENCES BETWEEN PHOTO
EDITING & PHOTO MANIPULATION
 DIFFERENCES BETWEEN PHOTO EDITING
& PHOTO MANIPULATION
PHOTO EDITING – signifies the regular
process used to enhance photos and to
create them “actual editing simple
process’’. Also includes some of the regular
programs used for editing and expose how
 DIFFERENCES BETWEEN PHOTO EDITING
& PHOTO MANIPULATION
PHOTO MANIPULATION – includes all simple
editing techniques and have some manipulation
techniques like erasing, adding objects , adding
some graphical effects, background correction,
creating incredible effect, change elements in an
image, adding styles , eliminating blemishes from a
person’s face and changing the features of a
PHOTO MANIPULATION

Photo manipulation involves

transforming or altering a
photograph using various
methods and techniques to
Questions?
 ACTIVITY:

Using Canva or any other photo

editing applications, create an
invitation and a brochure about your
strand’s culminating activity.
 ACTIVITY:

Make sure to apply and follow all the

principles and guides in editing
photos or in doing a graphic design
output.