CHRISTIAN SAMARITAN HEALTH SERVICES AND TECHNICAL SCHOOL, INC.

✓ Matandang Sora St., Zone 7, Poblacion, Tagoloan, Misamis Oriental

Name: Strand: Date: Score:

Subject : Empowerment and Technologies

Topic: Imaging and Design For the Online Environment
Content Standard: How to manipulate text, graphics, and images to create ICT content intended for an online
environment.
Performance Standards: At the end of the 2-week period independently apply the techniques of image
manipulation and graphic design to create original or derivative ICT content from existing images, text and graphic
elements for use in specific professional tracks.
Learning Competency: Evaluate existing websites and online resources based on the principles of layout, graphic,
and visual message design CS_ICT11/12-ICTPT-Ie-f-6; use image manipulation techniques on existing images to
change or enhance their current state to communicate a message for a specific purpose CS_ICT11/12-ICTPT-
Ie-f-7; create an original or derivative ICT content to effectively communicate a visual message in an online
environment related to specific professional tracks
CS_ICT11/12-ICTPT-Ie-f-8
References: https://www.slideshare.net/AngelitoQuiambao/imaging-and-design-for-online-
environment-169954819 Activity No.
7 & 8
DISCUSSION

What is an Image?
- An image is a representation of the external form of a person or thing in art.
- Images may be 2-dimensional, such as a photograph or screen display, or 3-dimensional,
such as statue or hologram. They may be captured by optical devices- such as cameras,
mirrors, lenses, telescopes, microscopes, etc. and natural objects and phenomena, such as
the human eye or water.
DEFINITION OF GRAPHICS AND LAYOUT
Graphics
- Are visual images or designs on some surface, such as a wall, canvas, screen, paper, or
stone to inform, illustrate, or entertain
- Are visual representations of data made on a computer and is displayed on a computer
screen or monitor.
EXAMPLE OF GRAPHICS:
 Drawing
 Line art
 Graphs
 Typography
- The process of planning and arranging graphic element in a page or template. A good
layout should have a balanced make up and alignment of elements.
- Layout is part of graphic design that deals in the arrangement of visual elements on a
page.

BASIC PRINCIPLE OF GRAPHICS AND LAYOUT

 BALANCE
- Means the equal distribution of weight.
- In layout, visual weight is determined by darkness or lightness, thickness of lines, and
size.
- Balance is crucial to the success of design
- There are two kinds of balance:
1
  Symmetrical Balance
 Asymmetrical Balance
 Symmetrical Balance
- The order of elements are evenly allocated on both sides of pages.
- The visual weight is distributed evenly, either vertically or horizontally.
- You can draw a line straight through the middle of the design, and the visual balance
Would be evenly distributed.
 Asymmetrical Balance
- The order of different objects of the same weight on each side of the page.
- There is an artistic and different intensity on one side of the page.
- Color, shape, size texture and value can be used on balancing elements.
 PROXIMITY
- Ensemble related objects together and moved them physically close to each other to
create less clutter and more organized layout.
- Organized information is more likely to read and most probably remembered.
- Things to remember:
 The organization is clearer.
 The white space is not trapped within elements.
 There appears to be more room on the page.
- Common materials that uses proximity: brochure, flyers and newsletter.
a. When there are several elements, add white space. White space can also mean empty space.
b. Related items should be placed near to each other.
 WHITE SPACING
- Is the art of nothing.
- Also known as the negative space.
- It is the portion of a page left unmarked: margins, gutters, and space between columns,
lines of type, graphics, figures, or objects drawn or depicted.
- Two kinds of white space:
 Undefined white space
 Active white space
 ALIGNMENT
- The Principle of Alignment: “Nothing should be placed on the page arbitrarily. Every item
should have a visual connection with something else on the page.”
 Create Order
 Look Clean
 REPITITION
- The process of repeating elements throughout a design to give a unified look.
- Repetition goes with consistency of your design on font, font size, patterns, and colors.
- Repetition aids to organize the information.
- Guides readers and helps to make parts of the design become more united.
- Infographics is an example that applied repetition to the design. It repeatedly used
callouts with identical font size of inside texts.
 INFOGRAPHICS
- Information graphics or infographics are used to represent information, statistical data
or knowledge in a graphical manner usually done in a creative way to attract the viewer’s
attention.
- Five Principles to create an effective infographics:
 Be unique
 Make it simple
2
  Be creative and bold
 Less is more
 The importance of getting it across
INFOGRAPHIC EXAMPLE:
- Infographic Video is a visual representation of data and knowledge in the form of an
online video, using chart or diagram.
 COLOR
- Determined by its hue (name of color), intensity (purity of the hue), and value (lightness
or darkness of hue).
- Used for emphasis, or may elicit emotions from viewers.
- Color Theory
 The study of how colors make people feel and their effects on design.
 CONTRAST
- Contrast is the divergence of opposing elements (opposite colors on the color wheel, or
value light/dark, or direction- horizontal/vertical).
- Contrast allows us to emphasize or highlight key elements in your design.
- Contrast can be applied through the following:
 Color
 Size
 Shape
- In graphic design, colors do not need to be on opposite segments (Bear, J.H., 2014)

PRINCIPLES OF VISUAL MESSAGE

 VISUAL INFORMATION AND MEDIA
Examples of visual media:
 Photography
 Video
 Screenshots
 Infographics
 Data Visualization (charts and graphs)
 Comic Strips/Cartoons
 Memes
 Visual Note-taking
 PURPOSE OF VISUAL INFORMATION
 Gain Attention
 Create Meaning
 Facilitate Retention

ONLINE FILE FORMATS FOR IMAGES AND TEXT

 FILE FORMAT
- A standard process that data is encoded for storage in a computer file.
- Defines how bits are used to encode information in a digital storage device.
- Most information comes from different format
FILE TYPE FILE FORMAT
TEXT .DOCX,.PDF
IMAGE AND GRAPHICS .JPEG, .GIF, .PNG
AUDIO .WAV, .MP3
VIDEO .MP4, .MPEG, .AVI
3
 FILE COMPRESSION
- Lossy: this compression type removes some information from the image and lowers the
overall quality in order to reduce the file size.
- Lossless: this compression type does not remove any information from the image, but it
usually cannot reduce the file size as much as lossy compression.
 JPEG
- JPEG stands for Joint Photographic Expert Group
- Most common used format by Digital Camera and other Capturing Device.
- Most common Format when saving pictures on the internet.
- SIZE over QUALITY
- Loss of data due to file compression (Lossy Compression).
 GIF
- GIF stands for Graphic Interchange Format.
- Not recommended for large images with many colors.
- File size are very small and load very fast.
- Good choice for simple animation.
 PNG
- PNG stands for Portable Network Graphics.
- Support 24-bit images and generate background transparency without jagged edges.
- Best format for logos that involves transparency and fading.
 PDF
- PDF stands for Portable Document File.
- It is optimized in smaller file size without losing the file quality.
- Can be viewed using its reader or through Web Browser.
 DOC
- DOC is short for Document File
- File format created by Microsoft Word.
- Can include charts, illustration, formatted text, tables and etc.

PRINCIPLES AND BASIC TECHNIQUES OF IMAGE MANIPULATION

 CROPPING
- Cropping. Cutting parts away to remove distracting or irrelevant elements.
 COLOR BALANCE
- The ambience and the tone of light of the picture (ex. Warm or cool light)
 BRIGHTNESS AND CONRAST
- One of the most basic techniques in image editing, making the image darker or lighter.
 FILTERS
- Making the image look sketched, grainy, classic black and white or even let it have neon
colors. This gives your image a twist from its original look.
 CLONNING
- Copying or duplicating a part of an image.
 CHANGING THE BACKGROUND
- Adding background to make your image stand out.
 REMOVING COLOR
- Removing certain colors in your image or desaturation of the image.
 COMBINING TEXT, GRAPHICS ANDD COLOR
- Combining Text Graphics and Images, Adding multiple elements in your layout.

UPLOADING, SHARING, AND IMAGE

4
Hosting Platforms
IMGUR
- Free image hosting sited and doesn’t need to create an account.
- Media sharing capabilities through a unique link.
- Doesn’t affect the quality when uploading an image.
- Popular for Memes.
GOOGLE PHOTOS
- Developed by GOOGLE
- One of the most used image hosting sites.
- Automatically backup and sync of photo from your gallery through your google account
- Easy to organize and edit photos based on tags and category
- Unlimited free storage for android smartphone.
FLICKR
- One of the oldest image hosting sites
- Also offers editing features.
- Album creation is available with a maximum storage of 1TB.
PHOTOBUCKET
- An image and video hosting website, web service suite, and online community dedicated to
preserving and sharing the entire photo and video lifecycle.
IMAGESHACK
- Offers unlimited storage space as long as it is less than 25mb.
- Allows you to create albums, make tags and set your own privacy setting.
INSTAGRAM
- An online mobile photo and video sharing, and social networking service created by Kevin
Systrom and Mike Krieger, and launched in October 2010 as a free mobile app. It allows
its users to take pictures and videos, and share them on social networking platforms such
as Facebook, Twitter, Tumblr and Flickr. The service was acquired by Facebook last April
2012. It has an estimated 100 million monthly visitors.

ACTIVITY1:
Make an INFOGRAPHICS about “USING OF HIGH TECHNOLOGY NOWADAYS”. Use 1/8
ILLUSTRITION BOARD for your output.
RUBRICS
Cleanliness 20
Content 30
Creativity 25
Originality 25

ACTIVITY2:
Using your mobile phone, take a photo of you then enhance and make modification using any
application that will improve your photo. Mark your photo with BEFORE and AFTER then print it.
(Don’t use DIRECT FILTER)