.

Republic of the Philippines

Department of Education
Region III
Schools Division of Bulacan

NORZAGARAY NATIONAL HIGH SCHOOL

Norzagaray, Bulacan

EMPOWERMENT
TECHNOLOGIES
GRADE 12

Introduction to Computer Imaging

and its Editing Basics

INTRODUCTION:

Image editing is considered a creative, artistic act. Image editing is done for
removing unwanted elements such as dust specks and scratches, adjusting the geometry
of the image like rotating and cropping, sharpening or softening the image, making
color changes or adding special effects to the image. Often the tasks involved in
image editing are repetitive and need intense processing. Manual image editing done
on traditional analog photographs requires a high level of expertise and attention
to detail. Image editing software applications are also available for editing images.

ET12.q4w11-12.ggccna+ Page | 1/19

 .

Unlike other conventional methods, these tools provide advanced image editing
operations like data compression, photo organization and selection of image
properties.

There are benefits associated with image editing. It enhances the original images in
accordance to the user's requirements. They can bring more color and life to the
image. It helps in bringing the best possible image in the interests of the viewers.

ABOUT COMPUTER IMAGING

Computer imaging is a wide field that includes digital photography, scanning, and
composition and manipulation of bit-mapped graphics. Computer imaging is often called
Digital Imaging. It is the use of computers to create, edit and display graphical
images, characters and objects. This is a broad field that consists of all computer
domains and applications that somehow deal with digital images.

Computer imaging primarily focuses on using computers for the purposes of photography
which includes modifying digital images. Generally, computer imaging requires
specialized software that interacts with the graphical hardware/features of the
computer.

ET12.q4w11-12.ggccna+ Page | 2/19

 .

The most used app in the industry of Computer Imaging is Adobe Photoshop.

In 1987, the brothers Thomas Knoll and John Knoll developed a graphics editing
program and named it DISPLAY, until it was renamed PHOTOSHOP in 1988. The company
Adobe Systems acquired the software, it was renamed ADOBE PHOTOSHOP which first works
on only at Apple Macintosh that time and to PC eventually, also the company hired the
Knoll Brothers as the original developers of the application.

view more at: https://youtu.be/cwk3O19rItQ

Two types of Computer Images

There are 2 types of Computer Images (also known as Computer Graphics), the RASTER
(or bitmapped) and VECTOR Graphics.

Raster

Majority of the images that you see on the web are raster images. Raster images are
good for images with thousands of different colors. Raster Images require a larger
file size and it means a long loading time. Another disadvantage of raster image is
that they are Resolution Dependent, example If your picture file is small on its
size, don’t attempt to stretch it, because it will look aliased (as displayed images
at the right).

ET12.q4w11-12.ggccna+ Page | 3/19

 .

Vector

Small file size, fast, and resolution independent such as lines and shapes. Vector
images describe the image in terms of coordinates (X and Y coordinates), but really
is as simple as saying “plot here and plot there”, and a line or a shape will be
drawn.

Vector images can work independently of display because let us just say “I want a
line from this point on the screen to the point on the screen”, and the line will
always be the same relative length and clarity, no matter what resolution you view
the picture at, no matter how far you zoom into a vector, the image will still stay
clear.

Two Dimensions of Computer Images

2D (Two-Dimension Graphics) - It has width and height.

Ex.: Shapes

3D (Three-Dimension Graphics) - It has width, height, and depth.

Ex. Game Models

ET12.q4w11-12.ggccna+ Page | 4/19

 .

OTHER APPLICATIONS OF COMPUTER IMAGING OR GRAPHICS

- Desktop Publishing
- Cartographic Sketching
- Computer Aided Design
- User Interface

Desktop Publishing

The use of a computer to produce high-quality documents containing text and graphics
formatted for a single-page publication. For example, desktop publishing is utilized
to create printed material such as posters, book covers, brochure, newsletter, and
fliers.

Example programs are: Microsoft Publisher, Adobe InDesign, Corel Draw, the pioneer
Aldus Page Maker (obsolete), and many more.

ET12.q4w11-12.ggccna+ Page | 5/19

 .

Cartographic Sketching

A Cartographic Sketcher creates the face of a suspect according to the witness’ or

victim’s identification to hunt the identified suspect by the police.

Computer Aided Design (CAD)

Example of creating a design about the product or plan of the building. It is used
by the engineers and architects.

User Interface

Example in Windows or Mobile OS, the objects such as window, icons, buttons, scroll
bars, or toolbars are called GUI (Graphical User Interface), which the user just
point these objects to command functionalities.

ET12.q4w11-12.ggccna+ Page | 6/19

 .

Other Terms to Remember Related to Computer Imaging

- PIXEL (Picture Elements)

- ANIMATION
- SIMULATION
- RENDERING
- MORPHING
- ROTOSCOPING
- MULTIMEDIA
- PICTURE / IMAGE FILE FORMATS: .bmp , .jpg , .png , .gif , .psd

Pixel (or Picture Elements)

A pixel is a single point in a graphic image. Monitors display pictures by dividing

the display screen into thousands or millions of screen dots (pixel for instance),
arranged in rows and columns.

It is also a unit of measurement in Screen Resolution (ex. 1024x768 ; 1280x720 or

High-Definition [HD] 720p in video ; 1920x1080 or HD 1080p in video, 3840x2160 up to
4096x2160 or 4K Ultra High Definition [UHD] in video)

8K is a higher resolution than 4K. 1080p screens have a resolution of 1,920 by 1,080
pixels. 4K screens double those numbers to 3,840 by 2,160 and quadruple the number
of pixels. 8K doubles the numbers again, to a resolution of 7,680 by 4,320. That's
four times the number of pixels as 4K, which means it's 16 times that of a 1080p
display.

ET12.q4w11-12.ggccna+ Page | 7/19

 .

Animation

Creating the illusion of movement in by saving the series of images that show slight
change in the position of displayed objects, and then displaying these images back
fast enough that the eye perceives smooth movement.

Simulation

The representation of the behavior or characteristics of one system through the use
of another system, especially a computer program designed for the purpose.

ET12.q4w11-12.ggccna+ Page | 8/19

 .

Rendering
The conversion of an outline drawing into a fully formed 3D image.

Morphing
A revolutionary animation technique used to modify existing images and video.

Lively Transforms into…

Rotoscoping

The process of copying images from moving video into an animation.

ET12.q4w11-12.ggccna+ Page | 9/19

 .

Multimedia

Presenting information by using more than one medium of communication such as text,
graphics, sound, video and animation. A Web Page / Web Site is one of many best
example of multimedia presentation which may include text, image, audio, video, and
animation in a single page. In today’s modern life, multimedia is almost encountered
in our daily lives.

/* There is a separate full lesson all about multimedia in the next module. */

Picture / Image File Formats

.BMP (BITMAP) – The BMP file format is comprised of a set of image encoding
specifications implemented for the production of uncompressed raster image files.
BMP files allocates large file size.

.JPG (JOINT PHOTOGRAPHIC EXPERTS GROUP) - the .JPG or .JPEG file format is implemented
for storing digital photos and images, JPG files allocates small file sizes, this
makes the JPG file format a default standard for digital cameras or smartphones.

.PNG (PORTABLE NETWORK GRAPHICS) – PNG files are compressed raster image files usually
implemented for visual elements found in a website among other Web graphics.

ET12.q4w11-12.ggccna+ Page | 10/19

 .

.GIF (GRAPHICS INTERCHANGE FILE/FORMAT) - It is developed by CompuServe in 1987,

since then it come into widespread usage on the WWW due to its wide support and
portability. It supports short animations and displays up to 256 colors.

.PSD (PHOTOSHOP DOCUMENT) – A .PSD file is a layered image file used only in Adobe
Photoshop, and the default format that Photoshop uses for saving imaging data. PSD
is a proprietary file that allows the user to work with the images’ individual layers
even after the file has been saved.

When an image is complete, Photoshop allows to

convert the flat image into a non-proprietary file
(like .JPG , .GIF , and so on...)

IMAGE EDITING

Encompasses the processes of altering images, whether they be digital photographs,

traditional analog photographs, or illustrations. Graphics / Image editing software
programs can be broadly grouped into vector graphics editors, raster graphics editors,
and 3D modelers.

There are the primary tools which a user may manipulate, enhance, and transform
images.

ET12.q4w11-12.ggccna+ Page | 11/19

 .

Many image editing programs are also used to render or create computer art from
SCRATCH, USING A SPECIALIZED DRAWING DEVICE IS AN ADVANTAGE.

IMAGE EDITING PROGRAMS

DUE TO THE POPULARITY OF DIGITAL CAMERAS, IMAGE EDITING PROGRAMS ARE READILY
AVAILABLE. MINIMAL PROGRAMS THAT PERFORM SUCH OPERATIONS AS ROTATING AND CROPPING
ARE OFTEN PROVIDED WITHIN THE DIGITAL CAMERA ITSELF, WHILE OTHERS ARE RETURNED TO
THE USER ON A COMPACT DISC (CD) WHEN IMAGES ARE PROCESSED AT A DISCOUNT STORE.

ADOBE PHOTOSHOP IS A RASTER GRAPHICS EDITOR DEVELOPED AND PUBLISHED BY ADOBE SYSTEMS
FOR MACOS AND MICROSOFT WINDOWS. IT WAS INITIALLY RELEASED IN MACOS IN YEAR 1988, IN
MID 2000’S, PHOTOSHOP WAS RELEASED IN CS EDITIONS (CREATIVE SUITE – CS2, CS3, CS4,
CS5, CS6) IN ADOBE MASTER COLLECTION PRODUCTS, AND THE CURRENT VERSION IS CC 20XX
(CC MEANS CREATIVE CLOUD SINCE 2013-PRESENT) WITH THE SAME COLLECTION AS THE PREVIOUS
MASTER COLLECTION. SINCE THEN, IT HAS BECOME THE INDUSTRY STANDARD IN RASTER GRAPHICS
EDITING.

ET12.q4w11-12.ggccna+ Page | 12/19

 .

BASICS OF IMAGE EDITING

Raster images are stored in a computer in the form of a grid of picture elements (or
pixels). These pixels contain the image's color and brightness information. Image
editors can change the pixels to enhance the image in many ways. The pixels can be
changed as a group, or individually using the image editors.

However, vector graphics software is used to create and modify vector images, which
are stored as descriptions of lines, and text instead of pixels. Most people like
vector images because they are easy to modify, containing descriptions of the shapes
in them for easy rearrangement, as well as scalable.

Common Image Editing or Manipulation Techniques

• Selection • Sharpening and Softening (Blur)

• Layers • Image Merging
• Size Alteration • Color Depth
• Crop • Contrast and Brightness Correction
• Selective Color Change • Color Adjustments
• Retouch / Cloning • Filters
• Orientation • Optimization (Important for saving
• Perspective Correction images To Be Used in WWW)

Selection

One of the prerequisites for many of the applications mentioned below is a method of
selecting part(s) of an image, thus applying a change selectively without affecting
the entire picture. Most graphics programs have several means of accomplishing this,
such as a marquee tool (square selection), lasso(free-form selection), and vector-
based pen tools (polygonal selection).

ET12.q4w11-12.ggccna+ Page | 13/19

 .

Layers

Another feature common to many graphics applications is that of Layers, which are
analogous to sheets of transparent acetate (each containing separate elements that
make up a combined picture), stacked on top of each other, each capable of being
individually positioned, altered and blended with the layers below, without affecting
any of the elements on the other layers.

This is a fundamental workflow which has become the norm for the majority of programs
on the market today, and enables maximum flexibility for the user whilst maintaining
non-destructive editing principles and ease of use.

Size Alteration

Image editors can resize images in a process often called image scaling, making them
larger, or smaller. High image resolution on cameras can produce large images which
are often reduced in size for Internet use.

Image editor programs use a mathematical process called resampling to calculate new
pixel values whose spacing is larger or smaller than the original pixel values.
Images for Internet use are kept small; say 640 x 480 pixels which would equal 0.3
megapixels.

Crop

Crop technique creates a new image by selecting a desired portion from the image
being cropped. The unselected or unwanted part of the image is discarded. It does
not reduce the resolution of the area cropped. Best results are obtained when the
original image has a high resolution.

Crops into…

ET12.q4w11-12.ggccna+ Page | 14/19

 .

Selective Color Change

Some image editors have color swapping abilities to selectively change the color of
specific items in an image, given that the selected items are within a specific color
range.

Retouch / Cloning

This technique uses color cloning (color copying) to duplicate a part of a photo with
the same color output based on its stamped color source (using Clone Stamp Tool in
Photoshop). It can RETOUCH photos such as removing its blemishes or restoring a
damage part of an old photo by duplicating a stamped color into damaged area.

Image Orientation (Mirror, Flipping, Rotation)

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 or vertically
flipped. A small rotation of several degrees is often enough to level the horizon,
correct verticality, or both. Rotated images usually require cropping afterwards, in
order to remove the resulting gaps at the image edges.

ET12.q4w11-12.ggccna+ Page | 15/19

 .

Perspective Correction and Distortion

Some image editors allow the user to distort (or "transform") the shape of an image,
while this might also be useful for special effects. It is the preferred method of
correcting the typical perspective distortion which results from photographs being
taken at an oblique angle to a rectilinear subject.

Care is needed while performing this task, as the image is reprocessed using
interpolation of adjacent pixels, which may reduce overall image definition.

Sharpening and Softening (blur) Images

Graphics programs can be used to both sharpen and blur images in a number of ways.
The Blur softens image, and are useful for retouching. They smooth transitions by
averaging the pixels next to the hard edges of defined lines and shaded areas in an
image.

The Sharpening focuses blurred images by increasing the contrast of adjacent pixels
to improve the clarity of an image.

Image Merging

Many graphics applications are capable of merging one or more individual images
into a single file. (also known as Collage)

ET12.q4w11-12.ggccna+ Page | 16/19

 .

Changing the subject’s background image also requires separate files. (for the subject
and the background image)

Change Color Depth

It is possible, using software, to change the color depth of images. Common color
depths are 2 colors (1 bit), 4 colors (2 bit), 16 (4 bit), 256 (8 bit), 65,576
thousand colors (16 bit) and 16.7 million colors (24 bit).

The JPEG, PNG, and BMP image formats are capable of storing 16.7 million colors. In
addition, grayscale images of 8 bits or less can be created, usually via conversion
from a full color image.

Contrast and Brightness Correction

Image editors have provisions to change the contrast of images and brighten or darken
the image. Underexposed images can often be improved by using this feature. Recent
advances have allowed more intelligent exposure correction whereby only pixels below
a particular luminosity threshold are brightened, thereby brightening underexposed
shadows without affecting the rest of the image.

ET12.q4w11-12.ggccna+ Page | 17/19

 .

Color Adjustments

The color of images can be altered in a variety of ways. Colors can be faded in and
out, and tones can be changed using curves or other tools. The color balance can be
improved, which is important if the picture was shot indoors with daylight film, or
shot on a camera that with an incorrectly adjusted white balance.

Special effects, like sepia and grayscale can be added to an image, In addition more
complicated procedures such as the mixing of color channels are possible using more
advanced graphics editors.

Filters

Filters let you change the look of your images, for instance by giving them the
appearance of impressionistic paintings or mosaic tiles, or adding unique lighting
or distortions.

You can also use some filters to clean up or retouch your photos. (ex. artistic,
brush strokes, distort, sketch, texture, emboss, etc.)

Optimization (especially saving images for www use)

When preparing images for the web and other online media, it is needed to compromise
between image display quality and the file size of the image.

ET12.q4w11-12.ggccna+ Page | 18/19

 .

Image editing software provides several controls for compressing the file size of an
image while optimizing its online display quality.

Basically the “Save As” command will re-save an image as a GIF (up to 256 colors) or
JPEG depending on the file format, then it can specify image quality, color display,
and other various settings for reducing / adjusting file size.

ET12.q4w11-12.ggccna+ Page | 19/19