TECHNOLOGICAL UNIVERSITY OF THE PHILIPPINES

TAGUIG CAMPUS

CHAPTER 3

Prepared by: Patrick Justin L. Ariado

 01
Photo Editing Overview
 Photo Editing

• Photo editing is the process of modifying and

enhancing digital images using software tools.
• It allows you to adjust various aspects of an image,
such as exposure, colors, composition, and
sharpness, to create visually appealing and
impactful photos.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 3

 Photo Editing

• Photos play a vital role in web design, capturing

attention and conveying messages effectively.
• By using photo editing techniques, you can
enhance the visual impact of your web designs,
maintain consistency, and create a professional and
engaging user experience.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 4

 Photo Editing

• When editing images for web design, keep the

following considerations in mind:

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 5

 Image Optimization
Photo Editing

• Optimize your images for web by reducing file size

without compromising quality.
• This ensures faster loading times and better user
experience.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 6

 Consistency
Photo Editing

• Maintain a consistent visual style and image quality

throughout your website to create a cohesive and
professional look.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 7

 Responsive Design
Photo Editing

• Ensure your images are responsive and adapt well

to different screen sizes and devices.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 8

 Copyright and Image Licensing
Photo Editing

• Use images that comply with copyright laws and

consider using royalty-free or properly licensed
images.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 9

Popular Photo Editing Software
 Adobe Photoshop
Popular Photo Editing Software

• Adobe Photoshop is the industry-standard software

for photo editing and manipulation.
• It offers an extensive range of tools and features that
cater to the needs of professionals.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 11

 Adobe Photoshop
Popular Photo Editing Software

• Photoshop allows for advanced image retouching,

compositing, and creative editing.
• With its comprehensive set of tools and support for
layers and masks, Photoshop provides endless
possibilities for enhancing and transforming images.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 12

 GNU Image Manipulation Program
Popular Photo Editing Software

• GIMP is a free and open-source photo editing

software that provides many features similar to
Adobe Photoshop.
• It offers a customizable interface and a wide range
of tools for editing, retouching, and enhancing
images.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 13

 GNU Image Manipulation Program
Popular Photo Editing Software

• GIMP supports layers, masks, and various file formats,

making it a versatile choice for photo editing
enthusiasts and professionals on a budget.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 14

 Canva
Popular Photo Editing Software

• Canva is a web-based graphic design platform that

offers intuitive and user-friendly editing tools.
• While not as robust as Photoshop or GIMP, Canva
provides a simplified approach to photo editing,
making it accessible to beginners and individuals
who need quick edits for web graphics or social
media posts.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 15

 Canva
Popular Photo Editing Software

• Canva offers a wide range of pre-designed

templates, filters, and effects, allowing you to create
visually appealing designs without extensive
technical knowledge.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 16

 Paint.net
Popular Photo Editing Software

• Paint.net is a free and user-friendly photo editing

software available for Windows.
• It offers a straightforward interface and a range of
essential editing tools.
• Paint.net supports layers, special effects, and a
variety of plugins, making it a suitable choice for
beginners and users who need basic photo editing
capabilities.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 17

 02
Image File Formats
 Image File Formats

• When working with digital images, it's essential to

understand the different file formats available.
• Each format has its unique characteristics,
impacting image quality, compatibility, and file size.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 19

 Joint Photographic Experts Group
JPEG

• JPEG is a widely used and highly compatible file

format suitable for photographs and complex
images.
• It uses lossy compression to reduce file size, which
can result in some loss of quality.
• JPEG is excellent for web sharing and general use,
but repeated editing and saving can lead to further
degradation.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 20

 Joint Photographic Experts Group
JPEG

Best for:
• Web sharing, general use, photographs.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 21

 Portable Network Graphics
PNG

• PNG is a lossless file format known for its high-quality

images with support for transparency.
• It's commonly used for web graphics, logos, and
images with sharp edges or text overlays.
• PNG files retain more detail and provide better
quality than JPEG, but they have larger file sizes.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 22

 Portable Network Graphics
PNG

Best for:
• Web graphics, logos, images with transparency.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 23

 Graphics Interchange Format
GIF

• GIF is a file format suitable for simple animations and

graphics with limited colors.
• It uses lossless compression and supports
transparency.
• GIFs are commonly used for web graphics, icons,
and simple illustrations.
• However, they are not ideal for high-quality
photographs due to the limited color range.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 24

 Graphics Interchange Format
GIF

Best for:
• Simple animations, icons, web graphics.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 25

 Tagged Image File Format
TIFF

• TIFF is a flexible file format known for its lossless

compression, making it suitable for professional
photography and print production.
• TIFF files preserve high-quality image data and are
used for archiving and high-resolution printing. They
can have large file sizes due to the lack of
compression.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 26

 Tagged Image File Format
TIFF

Best for:
• Professional photography, print production,
archiving.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 27

 Photoshop Document
PSD

• PSD is the native file format of Adobe Photoshop, a

popular software used in web design and graphic
editing.
• PSD files are essentially project files that contain
multiple layers, masks, and other elements, allowing
for extensive editing and manipulation.
• They are primarily used during the design process to
retain all the editable components of an image,
including text, shapes, and effects.
BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 28
 Photoshop Document
PSD

Best for:
• Web design mockups, design iterations, and
collaborative design workflows.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 29

 Scalable Vector Graphics
SVG

• SVG is a vector-based file format that defines

graphics using mathematical equations, allowing for
infinitely scalable images without loss of quality.
• Unlike raster formats like JPEG or PNG, SVG images
are composed of lines, curves, and shapes, making
them resolution-independent.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 30

 Scalable Vector Graphics
SVG

• SVG files can be edited with vector editing software

and are commonly used for logos, icons, and
illustrations on the web. They also support
interactivity and animation.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 31

 Scalable Vector Graphics
SVG

Best for:
• Scalable graphics, logos, icons, and illustrations on
the web that require flexibility and responsiveness.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 32

 WebP
WebP

• WebP is a modern image format developed by

Google that offers advanced compression
techniques while maintaining high-quality visuals.
• It provides superior image compression, resulting in
smaller file sizes compared to formats like JPEG or
PNG without significant loss in image quality.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 33

 WebP
WebP

• WebP supports both lossy and lossless compression,

as well as transparency and animation.
• However, it's important to note that WebP is not
universally supported by all web browsers.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 34

 WebP
WebP

• The name "WebP" is derived from the words "Web"

and "P" (short for "Picture").
• It was chosen to reflect the format's purpose, which
is to provide an efficient image format specifically
designed for the web.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 35

 WebP
WebP

• The "Web" part of the name indicates its intended

use for web-based applications and websites, while
the "P" represents "Picture" to emphasize its focus on
delivering optimized and visually appealing images
for web content.
• The name "WebP" was coined by the developers at
Google who created the format.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 36

 WebP
WebP

Best for:
• Web design assets requiring high-quality visuals and
smaller file sizes, when browser compatibility allows.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 37

Image File Format for Web
Design
 Image File Format for Web Design
Image File Formats

• The file format that is best for web design depends

on the specific needs of your website and the type
of content you want to display.
• However, two commonly used file formats for web
design are JPEG and PNG.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 39

 Image File Format for Web Design
Image File Formats

• When deciding between JPEG and PNG for web

design, consider the type of image content you are
working with.
• If you have complex photographs or images with
gradients, JPEG is generally the preferred format
due to its smaller file size.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 40

 Image File Format for Web Design
Image File Formats

• However, if you have graphics with transparency or

sharp edges, such as logos or icons, PNG is the
better choice to preserve image quality.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 41

 Image File Format for Web Design
Image File Formats

• It's worth noting that newer image formats, such as

WebP and SVG, are gaining popularity in web
design due to their advanced compression
techniques and support for interactivity.
• These formats offer additional benefits for specific
use cases but may require more advanced
implementation and browser support.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 42

 03
Image Resolution
 Image Resolution

• Image resolution represents the level of detail and

clarity in an image.
• It is determined by the number of pixels contained
within the image's dimensions.
• Higher resolution images have more pixels, resulting
in finer detail and sharper visuals.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 44

 Pixels

• Short for “picture elements,” are the building blocks

that make up a digital image — the tiny individual
dots that a computer uses to display images
onscreen.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 45

 Pixels

• Pixels are the individual points of color that make up

a digital image.
• DPI (Dots Per Inch) or PPI (Pixels Per Inch) refers to
the number of pixels present in a printed image.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 46

 Pixel

• DPI/PPI is relevant for print purposes, indicating the

density of pixels per inch on paper.
• Screens, on the other hand, display images based
on the pixel dimensions, not physical measurements
like DPI/PPI.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 47

 Pixel

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 48

Pixel Density
 Pixel Density

• Pixel density refers to the number of pixels per unit of

physical measurement, usually expressed as pixels
per inch (PPI) or pixels per centimeter (PPCM).
• It represents the concentration or density of pixels
within a given area.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 50

 Pixel Density

• Pixel density is a measurement used to describe the

sharpness and clarity of displays, such as screens on
smartphones, tablets, and monitors.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 51

 Pixel Density

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 52

 Pixel Density

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 53

Resolution
 Resolution

• The total number of pixels contained within an

image or display, typically expressed as width x
height.
• It defines the size and dimensions of an image or
display area in terms of pixels.
• For example, a display with a resolution of 1920x1080
has a total of 1920 pixels in width and 1080 pixels in
height.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 55

 Pixel Density vs Resolution

• While resolution specifies the overall number of

pixels, pixel density determines how closely these
pixels are packed within a given physical area.
• Pixel density is influenced by the screen size and the
resolution of the display.
• A larger display with the same resolution as a smaller
display will have a lower pixel density because the
same number of pixels is spread over a larger area.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 56

 Print Resolution

• Print resolution is crucial for obtaining high-quality

prints with sharp details.
• A higher resolution is generally required for print
materials, such as brochures, posters, or magazines.
• Common print resolutions range from 300 DPI for
professional-quality prints to 150 DPI for standard-
quality prints.
• Higher resolutions ensure finer details and smoother
gradients.
BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 57
 Web Resolution

• Web resolution refers to the resolution used for

images displayed on websites and digital platforms.
• Unlike print, web images are typically displayed at a
standard resolution of 72 DPI/PPI.
• However, the perceived size of an image on the
web is determined by its pixel dimensions rather than
DPI/PPI.
• Web images should have appropriate pixel
dimensions to fit the intended display size.
BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 58
 Web Resolution
Pixel Dimensions

• Web resolution is determined by the pixel dimensions

of an image, which specify the width and height in
pixels.
• Common web resolutions include 800x600, 1024x768,
and 1920x1080.
• The appropriate pixel dimensions depend on the
intended display size and the device's screen
resolution.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 59

 Web Resolution
Standard Web Resolution

• While there is no fixed standard, a common web

resolution is 72 DPI (or PPI - Pixels Per Inch).
• However, it's important to note that for web images,
DPI/PPI is not as significant as the pixel dimensions.
• The 72 DPI/PPI value is mainly a reference for
compatibility with image editing software and does
not affect the actual display on screens.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 60

 04
Photo Editing Techniques
 Photo Editing Techniques
For Web Design

• When it comes to web design, photo editing

techniques play a crucial role in enhancing the
visual appeal and overall aesthetics of a website.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 62

 Cropping
Photo Editing Techniques

• Cropping allows you to remove unnecessary

elements and focus on the key subject of an image.
• It helps in creating visually balanced compositions
and eliminating distractions.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 63

 Resizing
Photo Editing Techniques

• Resizing ensures that images are optimized for web

display, reducing file sizes and improving loading
times.
• Cropping and resizing are fundamental techniques
to ensure images fit appropriately within website
layouts.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 64

 Color Correction and Adjustment
Photo Editing Techniques

• Color correction and adjustment techniques help in

enhancing the colors and overall tonal balance of
images.
• This includes adjusting brightness, contrast,
saturation, and hues to create a visually pleasing
and consistent color palette across images on a
website.
• It ensures that images appear vibrant and cohesive,
enhancing the overall visual experience.
BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 65
 Retouching
Photo Editing Techniques

• Retouching involves removing imperfections,

blemishes, or unwanted objects from images.
• It helps in achieving a polished look and maintaining
a professional appearance for product images,
portraits, or other visual assets.
• Editing techniques like spot healing, clone stamping,
and content-aware fill can be utilized to seamlessly
remove unwanted elements.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 66

 Image Optimization
Photo Editing Techniques

• Optimizing images for the web is essential to ensure

fast loading times and optimal performance.
• This involves utilizing compression techniques to
reduce file sizes without significant loss in visual
quality.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 67

 Image Optimization
Photo Editing Techniques

• Tools like JPEG compression, optimizing PNG files,

and using modern image formats like WebP can
help strike a balance between image quality and
file size, improving website speed and user
experience.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 68

 Image Overlay and Transparency
Photo Editing Techniques

• Incorporating image overlays and transparency

effects can add depth and visual interest to web
design.
• Overlaying text, shapes, or graphics onto images
can create dynamic visual compositions and
highlight important information.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 69

 Image Overlay and Transparency
Photo Editing Techniques

• Techniques like adjusting opacity, blending modes,

and using layer masks can be employed to achieve
seamless integration of overlays with images.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 70

 04
Web Design Mockup
 Wireframe
A wireframe is a visual representation or blueprint of a web
page or interface.
It is a simplified, low-fidelity layout that focuses on the structural
elements and content hierarchy of a website or web
application, without including detailed design elements such as
colors, typography, or imagery.
 Wireframing
Web Design

• In web design, wireframing is the process of creating

a simplified visual representation of a website or
web application's layout and structure.
• It is a crucial step in the early stages of the design
process and serves as a blueprint for the overall
design and functionality of the website.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 73

 Wireframing
Web Design

• The primary purpose of wireframing is to establish the

basic structure and arrangement of content
elements on a web page without getting distracted
by detailed design elements such as colors,
typography, or imagery.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 74

 Wireframing
Web Design

• It focuses on the placement of key components,

such as headers, navigation menus, content
sections, sidebars, and other important elements, in
order to create a clear and logical hierarchy of
information.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 75

 Wireframing
Web Design

• Wireframes are typically created using simple and

minimalistic shapes, lines, and placeholders to
represent different elements and sections of a web
page.
• They are often grayscale or black and white,
allowing designers and stakeholders to focus solely
on the layout and content organization.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 76

 Wireframing
Web Design

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 77

Mockup
 Mockup
Web Design

• In Web Design, a mockup refers to a visual

representation or prototype of a website or web
application.
• It is a static design layout that showcases the
structure, layout, and visual elements of a website
before it is developed and implemented.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 79

 Mockup
Web Design

• The purpose of creating a mockup is to provide a

visual representation of the intended design,
allowing designers, clients, and stakeholders to
review and evaluate the proposed design concept.
• Mockups help in visualizing the overall look and feel
of the website, including its color schemes,
typography, imagery, and layout composition.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 80

 Mockup
Web Design

• Mockups are typically created using design software

or tools specifically designed for web design, such as
Adobe Photoshop, GIMP, Canva, or other similar
applications.
• Designers use these tools to create detailed visual
representations of web pages, including the
placement of various elements such as headers,
navigation menus, content sections, forms, and
other interactive components.
BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 81
 Mockup
Web Design

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 82

 Mockup
Web Design

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 83