computer for e further improvement and modification.
These are mostly
EMPOWERMENT TECHNOLOGY
Quarter 3: Module 4- Imaging and Design for Online (Week 4)
LEARNING OUTCOMES:
 Evaluate existing websites and online resources based on the
principles of layout, graphic, and visual message design.
 Use image manipulation techniques on existing images to
change or enhance their current state to communicate a
message for a specific purpose.
 Create an original or derivative ICT content to effectively
communicate a visual message in an online environment related
to specific professional tracks
Introduction
In order to create a good ICT content for an online environment, you
have to know first the principles of layout and techniques in text, graphic,
and image manipulation. But before proceeding with manipulation and
layout, you have to source first the photos and know the appropriate
image file formats to use.
Sources of Photos and Graphics
There are many sources of photos and graphics. They can come direct
from your camera, old pictures, free from the Internet or purchased from
the Internet or stores.
1. Personal and Professional Photos are photos taken by amateur or a
professional photographers using a digital camera. These images are
downloaded and are stored in the computer. They are sources of images
for any project that you may embark. They are original and definitely
something one would like to work on.
2. Scanned Images are those that you transfer from printed photos and
graphics using scanning devices which you can transfer to your
Week 4 – Empowerment
old photographed before the digital age.
3. Stock Photo Library are several photographs and created images
that are available for sale. They come in CD or DVD format and many of
these images are royalty-free, which means that they can be used
without additional fees.
4. Online Stock Photos are found in the World Wide Web. The WWW is
now the dominant source of photos and graphics around the globe
because of the widely available choices and reasonable prices. Other
sites even offer copyright-free photos and other media. One advantage
of this set-up is that you do not have to go to places where most of these
photos were taken. Another is that before you purchase or get a picture,
you can view it and if you decide to buy, simply download it to your
computer.
Online Digital File Formats for images and Text
A computer will have a certain method of encoding information for
storage in the hard drive or any form of computer storage. The ways of
encoding and storing this information to storage, is called file format.
Digital file formats are categorized as either proprietary or open.
Proprietary formats are owned and controlled by individuals or
corporations and the file format specifications are not available to the
public. They are usually covered by copyright and the owner has
exclusive control of the present and future technology development of
this format. An example of a proprietary format is the one used in the
storage for Microsoft Word, Excel, and PowerPoint.
Open formats are means and ways for storing digital information that
are free, can be used by the public and are not encumbered by
copyrights or patents. These formats are also called free file formats and
the specifications for these formats are usually sustained and maintained
by a group of individuals or organizations. Examples of these formats are
those used in the storage for OpenOffice and other free or open
software.
Page | 1
File format uses suffixes that are added to the end of a filename, called
filename extensions. The file extension is a means of identifying the
format of the file, with a period before it after the filename. The file
extension has usually two or more characters, although historically there
were only three, but modern operating systems are not constrained
anymore by that number of characters, more are now allowed.
Digital file formats are classified into three major groups:
1. Uncompressed or raw format — is usually used for storing original
file format, it is a flexible form but needs bigger memory to store.
2. Lossless file format — is a file format that was compressed to
replicate the original quality but at a reduced file size. This type is ideal
for storing important files (images, audio or video).
Lossy file format — is a file format that was compressed as an
approximation of =e original file but is good enough. This file has better
compression rate requiring least memory.
Image File Formats
Image file formats are means of storing and organizing digital images,
photos and illustrations. Image file formats may be classified into two
types; raster image files and vector image files.
A. Raster Image Files
Raster image or bitmap image is a means of representing digital
images in bits of information for storage, which translates into
pixels when viewed on the screen. Majority of raster files are
lossy. A pixel is the smallest information of an image. Images
using pixels are usually represented in dots or squares that are
arranged and added together to form the picture. The word pixel
comes from the words picture (pix) and element (el). Raster
Image Format is the common formats you will encounter in the
Internet and with many digital image files, such as those coming
from digital cameras. The raster images are stored as bit maps.
Examples of this type are the JPEG, GIF, and PNG files.
The most common type raster images are the following:
Week 4 – Empowerment
*.bmp - Bitmap Image File is an image file format developed and
used on Microsoft Windows environment and is stored in a
graphics file format called device-independent bitmap (DIB) and
has a file extension of .bmp or .dib. Not a common format on the
World Wide Web because of its large file size.
*.gif - Graphical Interchange Format File is an image file format
that is very popular on the World Wide Web because of its
portability (small file size) and support for animation. It is ideal for
images with large areas of | | uniform color, small images,
images with text, navigation buttons but it is not good to use for
photographic images. It supports only a small 8-bits per pixel
color scheme.
*.jpg - JPEG Image File standardized by the Joint Photographic
Experts Group (JPEG) is a common method for photographic
images as well as transmission of photos on the World Wide
Web since it supports 24-bits per pixel color scheme. Many
digital camera store photographs in JPEG format, 3PEG is not
ideal for use on line art
*.png Portable Network Graphic (PNG) is a free, open-source
bitmap image | | format made to improve on GIF which has smal
file but can handle more colors since it supports 24-bit per pixel
color scheme and supports true color (16 million colors). Unlike
GIF, PNG does not support animation. PNG ' employs a lossless
compression, meaning it does not lose the quality of the image
despite successive editing.
*.psd - Photoshop Document (PSD) is a native file format for
Adobe Photoshop, and since many are using this program to
create images, it is | very popular. Photoshop has the ability to
read all of the above formats and edit them
B. Vector Image or Vector Graphics Files
Vector images are lossless files created using mathematical
geometric equations to represent images in digital computer
graphics. Vector graphics has the advantage of retaining its
quality at any desired image size, unlike raster images that
appear pixilated when displayed in expanded image sizes.
Page | 2
 Vector Format or Graphic is the preferred format for those who
desire quality prints and display of images. Examples of this type
of format are: PDF, Encapsulated Postscript, Scalable Vector
Graphics, and Windows Metafile.
*.ai - Adobe Illustrator File is the file extension for graphics
created using Adobe Illustrator which is created using paths and
lines connected by points instead of bitmaps, which may include
objects, color, and text.
*.drw - Drawing File is a generic drawing created and stored in a
vector format that uses lines or paths to represent images. These
images are output of the following programs, Apple Appleworks,
Microsoft Picture It, CorelDRAW and Corel Paint Shop Pro.
*.dxf - Drawing Exchange Format File is a drawing format
developed and introduced by Autodesk the maker of AutoCAD
and is used for computer-aided design (CAD) vector images.
This format is similar to .drw file but is universal so that AutoCAD
can be opened using other programs such as Vectorworks,
ArchiCAD, Corel Draw, and other CAD programs.
*.ps PostScript File is a page description language (PDL)
developed by Adobe, basically a language for printing documents
on laser printers and image setters (high resolution printers)
used to produce camera ready copies. PostScript files whether
images or fonts can be changed in size without image quality
reduction or pixilation and can be printed on a PostScript printer
even without an open program.
*.svg - Scalable Vector Graphics (SVG) File is the most common
vector graphic format on the internet; it was developed by ‘The
World Wide Web Consortium (W3C) to display vector graphics.
SVG is an open format and can be opened by Adobe, Corel and
open graphics programs,
Other File Formats include TIFF (Tagged Image File Format),
RAW (Raw Image format), GIF (Graphics Interchange Format),
and the PSD (Photoshop Document).
Basic Principles of Graphics and Layout
Week 4 – Empowerment
Layout is the process of planning and arranging graphics or text in a
page or book. A good layout should have a balanced make up and
alignment of elements. Remember that simplicity is the key to a good
layout.
 Symmetrical - a layout may be symmetrical where there are
equal weight of elements on both sides of the page. The layout
may be left braced or right braced.
 Assymetrical — a layout may be assymetrical where there is
an artistic and different intensity on one side of the page.
 Text — the text type should be legible, appropriate font face,
and arranged either left justified, right justified, or centered. The
flow of the text and picture should be easy to read.
 Image — the image should be proportionate, with sharp color
and high resolution. The images used should have captions.
 Proximity and harmony — the elements should be close
together and not scattered and arranged apart from each other.
Elements should not be cluttered and not compete with each
other.
 Consistency — there should be uniformity of theme on each
page.
 Color and shape — use color to create interest by providing
variety in design like the use of color contrast and shapes.
 Emphasis — there should be one point of interest in a page.
The element to emphasized should have a different size, color,
shape, or background
Principles and Basic Techniques of Image Manipulation
There are various ways to manipulate images like resizing, cropping,
adjusting color background, balance, brightness and contrast, combining
photos, combining text and photos, and adding effects. You have to have
a good and clear image to be used in your webpage, blog or presentation,
but with the use of a photo editing tool, you can improve and edit the
Page | 3
pictures to be able to use them the way you want to be able to send your
message to your viewers.
Techniques of image manipulation: Shadow — Using shadow effect will make the image realistic.

Background color — you can change the background if it does not

match the image or the totality of the presentation. You also add effects to
the background.

Multiple Images - You can combine multiple images to make a point or

use to highlight your message. Proportion - When combining images, resize the image to make it
proportionate and realistic.

Page | 4
Week 4 – Empowerment

Blending Color - You can use color blending to match the background
with the other elements in the page.
Texture — Adding texture allows you to blend different images. Textures
add to the depth of your art. Blending will allow smooth transition of one
image to another.
Week 4 – Empowerment
Emphasis — There should be a focal point to a page that will attract
viewers. The element you want to emphasize should be sharp, big, and
most vibrant in your design.
Combining Text, Graphics, and images
Combining text, graphics and images in your presentation, infographics
or web page will make your message clearer.
Transparent shapes — Add simple shapes with a slight transparency
behind your text to clearly see the text you want to emphasize.
Page | 5
Fonts and shapes - Fonts and shapes should complement each other.
You can use rounded shapes with rounded fonts and sharp shapes with
sharp fonts.
Text and background - Text and background should be aligned to have
an organized look. You can align text with shapes or geometric figures in
the image.
Week 4 – Empowerment
Clean and clear background - Use a clean and clear background for
the message to be readable. Background should not washout your
message.
Basic Image Manipulation Using Offline or Open-Source Software
Photo editing and designing tools allow you to manipulate or edit images,
apply effects, filters, add frames, crop, add text, change background
color, make photo collage, and photo album that you would like to do in
an image.
There are various offline or open-source you can use for image editing.
Usable platform/applications include:
1. Picasa — Picasa is Google’s free photo manager to edit and
organize your photos. & has tools for photo editing like crop,
straighten, rotate, red-eye removal, contrast, and filters.
Page | 6
 2. Paint.net — Paint.net is a Windows-based alternative to the MS
Paint editor. It is 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.
3. Google Sketch Up — Google SketchUp is a free, 3D-modeling
program with tools that allow you to create 3D models of houses,
home renovation, woodworking projects, and others with
dimensional accuracy.
4. Autodesk Pixir — Pixir is a free photo editing tool that is similar to
Photoshop and has more than 600 effects, overlays, and borders
that you can use.
Week 4 – Empowerment
5. Adobe Photoshop — Adobe Photoshop is a tool to create,
modify, combine and optimize digital photos and images. It is
used to perform changes such as adjusting brightness and
contrast of the images, combines different image elements and
keeps your images organized.
6. GIMP — GIMP or GNU Image Manipulation Program is a free,
open-source image/graphics editing program used for image
retouching and editing, free-form drawing/painting, and other
specialized tasks.
Page | 7
 Page | 8
Week 4 – Empowerment