Elements of Design

Empowerment Technologies
Senior High School Applied - Academic
11
What will be the effect of using a graphic
oraganizer in presenting information?

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 33
 What do you
think about the
design?

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND
 ● Differentiate and Identify the
Elements of design (image)
Learning manipulation.
Objectives
● Appreciate how the elements can
At the end of the improve the design
lesson, you should be
able to do the
following: ● Follow and use the elements of
design.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 55
Empowerment Technologies
Senior High School Applied - Academic
TYPOGRAPHY
It describes the way a text is properly
designed, organized, and presented on a
website.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND
SHAPES
Two-dimensional (LW) element with an area on a plane.
FOR
COLOR
create balance and harmony
23
Advanced Image Manipulation Techniques

Familiarizing with an Image Editing

Application

Empowerment Technologies
Senior High School Applied - Academic
Empowerment Technologies
Senior High School Applied - Academic
Empowerment Technologies
Senior High School Applied - Academic
Empowerment Technologies
Senior High School Applied - Academic
Empowerment Technologies
Senior High School Applied - Academic
Have you tried editing
a picture?

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND
Learning ● Identify categories and types of
Objectives image editing application.
● Familiarize with Adobe
At the end of the Photoshop /GIMP interface.
lesson, you should be
able to do the
● Uilize the basic feature of
following: Adobe Photoshop/GIMP

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 30
30
GUESS
THE LOGO

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND
 It is free, 3D-modelling
program with tools that
allow you to create 3D
models of houses, -home
renovation, woodworking
projects, and other with
dimensional accuracy.
 A free photo editing tool
that is similar to Photoshop and
has more than 600 effects,
overlays, and borders that you
can use.
 A Windows-based
alternative to the MS
Paint editor. It is a free
and open source
available in Windows.

It can be used for photo editing like recolor, crop, text edit, rotate,
multiple layers, and other photo editing work
 A tool to create, modify, combine and optimize digital photos and
images, combines different image elements and keeps your images
GIMP or GNU image manipulation program is a free, open-source, image/graphics
program used for image retouching and editing, free-form, drawing /painting, and
other specialized tasks.
 Types of Basic
Image Editing
Application
● Built-in
Applications
● Third-Party
Applications

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 37
Built-in
Applications
● Windows (MS
Paint, MS Photos, etc)

● Android (Gallery,
Google Photos, etc.)

● MacOS (Apple
Photos)

● iOS (Photo
Applications in iOS)

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 38
 Third-Party
Applications
● Picsart
● Snapseed
● Snapchat
● Pixlr
● Pizap

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 39
39
Advanced Image Editing
Application

● good for those who want

to make additional
advanced adjustments to
the image.

● Users can apply different

effects on different parts
of the image.
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 40
40
 Adobe Photoshop

● This application
uses a layer-based
editing system that
allows its users to
create and edit
images with many
overlays, and save
them in one of
many formats.
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 41
41
 6 8
Photoshop 2
5

Interface
1.Document Window.
2. Document Tab
3. Zoom Level and
Status Bar
4. Toolbar
4
1 7
5. Options Bar
6. Menu Bar
7. Panels
8. Workspaces
9. Search Bar (in latest version)
3
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 42
 Opening and Creating New Images

Start off by clicking File in the menu bar, then Open.

A dialog box will appear that will help you locate and
select the existing image you want to work with. If
you want to create a new image, click File then
choose New.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 43
43
 Zooming and Panning

Along the toolbar, you can see the zoom and hand
tool. The zoom tool, which looks like a magnifying
glass, allows users to zoom the image in and out.
The hand tool, which looks like a hand, allows the
users to pan the image.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 44
44
 Undo a Command
● To undo the last thing you did, go to Edit found in the menu bar
and select Undo. You can use the keyboard shortcut CTRL+Z
for Windows and Command+Z for macOS. If you want to
undo multiple steps, select Step Backward multiple times.
● To redo the last thing you did, go to Edit found in the menu bar
and select Redo. You can also use the same keyboard shortcut
with undo.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 45
45
 Save your Work
● Save your image by clicking File; in the menu bar, then select
either Save or Save As.
● If you want to retain layers, type, and other editable Photoshop
properties, save your work in Photoshop format (.psd). If you
want it to be a standard image file that can be shared, opened
by other programs, and posted online, save your work in JPEG
(.jpg) or PNG (.png) format. It is best to save your work in both
ways.
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 46
46
Tip

Review other basic tasks like cropping,

rotating, and resizing images. Although
Adobe Photoshop is more advanced
among the image editing applications,
there are still some tools and commands
that share the same functionality.
47
 Wrap Up
Image editing applications help not only professionals
but also beginners who want to make basic and
advanced adjustments on images.
The categories of image editing applications are basic
editing and advanced editing.
Basic editing applications can either be built-in or a
third-party while advanced editing applications are
those with more tools and commands. Both categories
can either be installed or readily available online and
can be free or paid.
48
 Wrap Up
Adobe Photoshop or sometimes referred to as Photoshop
CC is the most popular software among advanced image
editing applications that uses a layer-based editing system
allowing its users to create and edit images with many
overlays, and save them in one of many formats.
Photoshop interface includes the following: Document
Window, Document Tab, Zoom Level and Status Bar,
Toolbar, Options Bar, Menu Bar, Panels, and
Workspaces. Some versions may also include Search Bar.

49
 Bibliography
Allen, Jennifer. “What is Photoshop?” Lifewire, March 9, 2020.
https://www.lifewire.com/what-is-photoshop-4688397

Chastain, Sue. “Adobe Photoshop Basics: Menu Bar Options.” Lifewire, May 21,
2020.
https://www.lifewire.com/navigating-the-adobe-photoshop-menu-bar-4091
953

“Image Editing 101: Image Editing Software.” GCF Global. Retrieved 12 May 2020,
from
https://edu.gcfglobal.org/en/imageediting101/image-editing-software/1/

Kabili, Jan. “Get to Know Photoshop.” Adobe. Retrieved 12 May 2020, from

50
 Bibliography
Maida, Jesse. “Global Photography Services Market 2019-2023 | Growing Use of
Technologically Advanced Services in Photography to Boost Demand |
Technavio”. Businesswire, June 5, 2019.
https://www.businesswire.com/news/home/20190605005528/en/Global-Phot
ography-Services-Market-2019-2023-Growing-Technologically

Patterson, Steve. “Getting to know the Photoshop Interface.”

photoshopessentials.com. Retrieved 12 May 2020, from
https://www.photoshopessentials.com/basics/getting-know-photoshop-interf
ace/

Patterson, Steve. “Photoshop Layers Panel Essentials.” photoshopessentials.com.

Retrieved 12 May 2020, from
51
https://www.photoshopessentials.com/basics/layers/layers-panel/
Image Manipulation Techniques

Online File Formats and Principles

of Image Manipulation

Empowerment Technologies
Senior High School Applied - Academic
 When you edit your pictures,
what file format do you use?

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 53
53
 ● Define image.
Learning ● Identify the classification of
Objectives image file formats.
● Appreciate the types of file
At the end of the formats in connection to
lesson, you should be
able to do the
maintaining the quality of an
following: image.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 54
54
What is Image?

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 55
 Image is a
representation
of something
that conveys
meaning like
photographs,
paintings,
drawings,
illustrations,
sculptures,

ENGAG
abstracts, etc.
EVALUAT
EXPLOR
EXPLAIN EXTEND 56
Image has
various formats
but classified
into two
categories:
● Printable
File Format
● Online File
Format
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 57
 Printable Image
File Format are
those image
formats that can
be uploaded on
the internet and
can be printed out
(as the name says)
to have a hard
copy of the image.
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 58
58
Printable Image
File Formats
● JPEG
● PDF
● EPS
● TIFF

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 59
 Joint
Photographic
Experts Group
(JPEG)
● refers to the file
format of a still
and flat image. It is
a file extension
that still pictures
are saved as
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 60
60
Portable Network
Graphics (PNG)
● used for creating
flyers and posters
● even if the image is
resized into a larger
size or a smaller
size, it will not
reduce its quality

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 61
Portable Document
Format (PDF)
● converts word processed
document, spreadsheet,
and even presentations
into an image file format
where they can still read
the document even if they
are away from their
desktop computers
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 62
62
Tagged Image
File Format
(TIFF)
● used for raw
files that came
from filmed
cameras

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 63
 Online Image
File Formats
● Images that can
be uploaded
and shared
online

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 64
Online Image
File Formats
● GIF
● BMP
● SVG

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 65
 Graphic
Interchange
Format (GIF)
● refers to a
graphic file
format that has
movements
(interchanging
movements)
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 66
Bitmap (BMP)
● refers to a file
format for colors
per pixel
● used for creating
animated
characters in a
low resolution
where pixels
(colors per box)
are shown
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 67
67
 Scalable Vector
Graphics (SVG)
● commonly used
file format for
images on web
pages and
websites

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 68
How do a printable file format and
an online file format differ from
each other?

69
Difference of Online and Printable Image File Formats

File Format Printable Online Use

JPEG (JPG) Yes Yes with some quality
compression
PNG Yes Yes with same file quality
PDF Yes Yes but as a document file
EPS Yes No due to high quality
compression
TIF (TIFF) Yes Yes with some quality
compression
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 70
70
Difference of Online and Printable Image File Formats

File Format Printable Online Use

GIF Yes but with low quality Yes
printing
BMP Yes with low quality printing Yes
SVG Yes but very low quality Yes
printing and small image only

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 71
71
How can you manipulate such
image file formats?

72
 Wrap Up

Image is a representation of something that

conveys meaning like photographs, paintings,
drawings, illustrations, sculptures, abstracts, etc.
Image File Formats are classified into two
categories: Printable File Formats and Online
File Formats.

73
 Wrap Up
Printable File Formats and Online File Formats
have similarities yet differences in usage and
capacities.

Under Printable File Formats are JPEG, PNG, PDF,

EPS and TIFF. On the other hand, under Online
File Formats are GIF, BMP, and SVG

74
 Bibliography
Daculan, M. n.d. “PRINCIPLES AND BASIC TECHNIQUES OF IMAGE
MANIPULATION.” Academia.edu. Accessed May 13, 2020.
https://www.academia.edu/31500683/PRINCIPLES_AND_BASIC_TECHNIQUE
S_OF_IMAGE_MANIPULATION
.

Lundquist, Samual. 2020. “Image file formats: when to use each file type.”
99designs. 99designs. January 24, 2020.
https://99designs.com/blog/tips/image-file-types/.

Magdaraog, Lany Lyn. 2019. “Empowerment Technologies - Principles and Basic

Techniques of Image Manipulation” LinkedIn SlideShare. January 12, 2019.
https://www.slideshare.net/LanyLynMagdaraog/empowerment-technologie
s-principles-and-basic-techniques-of-image-manipulation
75
.
 Bibliography

Nehring, Cathy, Dan Polden, and Dan Polden. n.d. Print File Formats. Accessed May
12, 2020. https://dcopy.net/support/file-formats/print-file-formats.php.

“Scalable Vector Graphics.” 2020. Wikipedia. Wikimedia Foundation. May 7, 2020.

https://en.wikipedia.org/wiki/Scalable_Vector_Graphics.

76