EMPOWERMENT TECHNOLOGIES

LEARNING MATERIAL 5

LESSON 6: IMAGING AND DESIGN FOR ONLINE ENVIRONMENT

In this lesson, you’ll be understanding how images and other visual elements are
important factors in developing ICT content especially in sharing meaningful information.

After going through this learning material, you are expected to:

understand the basic principles of graphics and design;

create a simple infographic using photo editing tools;
understand and use several image file formats;
easily manipulate images using a simple image editor; and
upload and share images using image hosting sites.

WARM-UP 1

A lot of image editing and manipulating tools are present today. We make images that are
visually pleasing to our eyes or to our audience’s. List down at least six (6) image editing tools
(can be a software/application or an online tool) and compare their advantages and
disadvantages.

Image Editing Tools Advantages Disadvantages

LET’S STUDY

PRINCIPLES OF GRAPHICS AND DESIGN

The following principles are followed to standardize image creation and manipulation using
any graphic software. It will help you create layouts and design web pages compliant with the
protocols.

1. Balance. It describes the placement of elements of equal

weight on the page. The three types of balance are
symmetrical, asymmetrical, and radial.
2. Movement. It describes the flow of elements on the page.
3. Unity. It is the sense of oneness of the elements that
creates balance and harmony.
4. Repetition. It describes the consistent and balanced
repetition of a design or element.
5. Proximity. It describes organization and relationship of
elements included in the design.

1
 EMPOWERMENT TECHNOLOGIES
LEARNING MATERIAL 5

6. Contrast. It is the combination of opposing characteristics

of an element like color, size, thickness, among others. It
allows emphasis on key elements.
7. Whitespace. It is the negative space or large margins that
allow your design to breathe within the elements.
INFOGRAPHIC
Information graphic or Infographic, also known as data visualization, is defined by
Oxford Dictionary as a visual image such as a chart or diagram that is used to explain
information or data. It makes the data easily understood at a glance, quickly communicates a
message and easily compare data patterns and relationships.
Here are some important elements that should be considered in designing an infographic.
1. Thesis/Story. The subject and the main idea of your infographic must be clear.
2. Data. Data must be well-organized and supports the main idea.
3. Simplicity (color, style, and illustrations). You must be able to create your own color
palette; your style must be able to attract readers so as not to make your infographic
full of text. Do not use stock photos.
4. Sources. You must cite your sources so as to give credibility to your data.
5. Branding/Shareability. Your infographic must be creative and innovative.
The following websites will help you create free infographic:

1. http://piktochart.com/ 3. https://venngage.com/
2. https://www.canva.com/create/infographics/ 4. https://infogr.am/

IMAGE FILE FORMATS

The most common file formats are JPEG, GIF, BMP, TIFF, and PNG.
▪ JPEG (Joint Photographic Experts Group) is the most popular and commonly used
method of ‘lossy’ compression for digital images, particularly for those images
produced by a digital photography.
▪ GIF (Graphics Interchange Format) a lossless format for image files that supports both
animated and static images. It is best used for diagrams, cartoons, and logos which
use few colors.
▪ BMP (Bitmap) image file or device independent bitmap (DIB), also called raster image,
file format used in Microsoft Windows operating system. It is an uncompressed file and
made up of dots called ‘pixels.’ It is not usually used on the web since it takes up a big
space in the memory and does not scale well.
▪ TIFF (Tagged Image File Format) is a file format created originally by Aldus
Corporation foe desktop publishing. A good format for graphic storage, processing,
and printing. It is also considered as a high-quality image format however takes up
huge disk consumption.
▪ PNG (Portable Network Graphic) is an image format developed as a nonproprietary
alternative to the GIF format. It supports full-color images and used for photographic
images however it results to much larger file size. PNG does best with line art, text,
and logo.

2
 EMPOWERMENT TECHNOLOGIES
LEARNING MATERIAL 5

FEATURES OF IMAGE EDITORS

1. Selection – one of the prerequisites for many of the app mentioned below is a method of
selecting part(s) of an image, thus applying a change selectively without affecting the
entire picture.
a. Marquee Tool for selecting rectangular or other regular polygon-shaped regions.
b. Lasso Tool for freehand selection of a region.
c. Magic Wand Tool selects objects or regions in the image defined by proximity of
color or luminance.
2. 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 other layers.
3. 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 size for Internet use.
4. 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.
5. 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. In Photoshop, it is known
as the Clone Stamp Tool.

6. 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 requires cropping afterwards, in order
to remove the resulting gaps at the image edges.
7. 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 particular point.

3
 EMPOWERMENT TECHNOLOGIES
LEARNING MATERIAL 5

8. 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 much causes the image to blur.

9. 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.’’

10. 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 image.

PHOTO MANIPULATION
Photo manipulation involves transforming or altering a photograph using various methods
and techniques to achieve desired results. Some photo manipulations are considered skillful

4
 EMPOWERMENT TECHNOLOGIES
LEARNING MATERIAL 5

artwork while others are frowned upon as unethical practices, especially when used to deceive
the public, such as that used for political propaganda, or to make a product or person look
better.
DIFFERENCES:
▪ 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 to use them.
▪ 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
person’s body.

ONLINE GRAPHICS SOFTWARE

Adobe Photoshop is one of the most popular software for editing and manipulating images
but consumes a lot of memory space and it may not function well at some versions of
Windows. So, here are some online graphics software wherein you can edit or manipulate
images without installing Photoshop.
1. Google Photos. It is Google’s free image editing program. It can be downloaded and help
you manage your photos and upload them to an online album.

5
 EMPOWERMENT TECHNOLOGIES
LEARNING MATERIAL 5

2. Fotor. It is a multiplatform photo editing website. It offers a wide range of effects and tools
for editing images.

3. Pixlr. It is also a multiplatform image editing program. You can choose between the editor
for editing images or creating an original image right through the browser. The tools are
almost similar to Photoshop that makes it easier for you to manipulate.

Other image editing suite that can be downloaded for free:

1. Photoscape
2. Serif PhotoPlus Starter Edition
3. GIMP
4. Paint.Net
IMAGE HOSTING SITES
Images can be shared online through different web hosting sites that are free. Just create
a free account and you’re good to go. The following is a list of different hosting sites that you
can try.
▪ Imgur. It is a free image hosting site wherein you can upload images from your
computer. You can also edit your images before posting it online.

6
 EMPOWERMENT TECHNOLOGIES
LEARNING MATERIAL 5

▪ Flickr. It is an image social networking site. You can save and manage your photos
for it offers a 1 TB storage capacity in your account.
▪ Photobucket. It has almost similar features with Flickr as you can upload and share
your images over the internet through your account.
▪ SlickPic. It is an online image-hosting service that also allows you to upload and store
an unlimited number of photos online. You can create as many albums, and it also
offers professional editing of images.
▪ Zenfolio. It is an online image-hosting site that does not only allow you to upload
image but also lets you create an online image website for your images.
3D GRAPHICS AND PRINTING
Images that we can see in a screen like computer is said to be two-dimensional (2D) since
it has length and width. But if you watched Toy Story or any animation movies from Disney,
there’s another perspective that you can see. Game developers and animators have
developed the perspective of depth as 3D or three-dimensional.
Also, these 3D graphics is not only on screens of our computer. Today, we have the 3D
printing in which it allows 3D images or graphics come to life using a 3D printer.

Good job! You’ve finished the lesson!

Before you take the next lesson,
you may go grab a drink or snack
or listen to your favorite music.

7
 EMPOWERMENT TECHNOLOGIES
LEARNING MATERIAL 5

SELF-TEST

1. Visit the following websites and select at least five websites. Evaluate each based on the
principles of designs discussed. Use a word processing program to document your
research.
▪ https://www.thebestdesigns.com/designs/
▪ http://www.verynicesites.com/
▪ http://bestwebgallery.com/
2. Visit one of the given online image editing applications and perform basic editing or your
display picture in one of your social networking sites (Facebook, Twitter, Instagram,
etc.). Screenshot the website you used (as you edit your pictures) in editing. Make sure
that I can see the website with the photo you are working on. Then, use a word
processing program to place your output.
3. From your Tree Planting Project, create an infographic about tree planting and its
importance using any of the image editing softwares mentioned above. Rubrics will be
given in the submission post.
Note: Compile your outputs in one file only, not separated.

REFERENCES
▪ Regis, J. (2018). Empowerment Technologies LESSONS 1-15. Retrieved from
Wordpress: https://ictcom444251764.wordpress.com/2018/03/31/empowerment-
technologies-lessons-1-15/
▪ Callo, E. R. (2018). Empowerment Technologies. Quezon City: Sibs Publishing House
Inc.