Imaging and Design for

Online Environment

What I Need to Know

Content Standard

The learners demonstrate an understanding on how to manipulate text, graphics, and images
to create ICT content intended for an online environment

Performance Standard

At the end of the two-week period, the learners shall be able to: 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 Competencies

A. evaluate existing websites and online resources based on the principles of layout,
graphic, and visual message design
B. use image manipulation techniques on existing images to change or enhance their
current state to communicate a message for a specific purpose

Lesson Objectives
At the end of this lesson student should be able to:
 Understand the basic principles of graphics and layout;
 Understand and use several file formats used on the web; and
 Create simple infographic using web tools.

Lesson Introduction
Creating a web page is like creating a work of art. There are certain things that you need to consider in order to
get your message across. In the previous lesson, you learned how to create effective PowerPoint Presentation.
Some of those tips can help you in graphics and layout design.

Basic Principles of Graphic and Layout

According to Cameron Chapman 2020, one of the most difficult parts of talking about the principles of design
is figuring out just how many principles there actually are (are there five? seven? ten?). And once that’s been
figured out, which of these supposed design fundamentals should be included?

In reality, there are roughly a dozen basic principles of design that beginning and expert designers alike should
keep in mind when working on their projects. In addition, there are another dozen or so “secondary” design

1
principles that are sometimes included as basics (for example, the Gestalt Principles, typography, color, and
framing). The main design principles are explained and illustrated below.

The elements, or principles, of visual design include Contrast, Balance, Emphasis, Movement, White Space,
Proportion, Hierarchy, Repetition, Rhythm, Pattern, Unity, and Variety. These principles of design work
together to create something that is aesthetically pleasing and optimizes the user experience.

1. Balance. The visual weight of objects,

texture, colors, and space is evenly distributed
on the screen. When visiting a website, check
if one side holds the same amount of weight
on the other. The colors should also have a
similar visual weight.

2. Emphasis. An area in the design that may

appear in different size, texture, shape, or
color to attract the viewer’s attention.

3. Movement. Visual elements guide the

viewer’s eyes around the screen.

The edge of the stair leads the eye toward the green flag.
Its pattern also helps draw the viewer’s eye.

2
4. Pattern, Repetition, and Rhythm. These are
the repeating visual elements on an image or
layout to create unity in the layout or image.
Rhythm is achieved when visual elements
create a sense of organized movement.

5. Proportion. Visual elements create a sense

of unity where they relate well with one
another.

6. Variety. This uses several design elements to

draw a viewer’s attention.

3
Infographics
Information graphics 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. Infographics make complex data
become more visually appealing to an average user.

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.
Infographic makes data easily understood
at a glance and quickly communicates a
message especially to simplify the presentation
of large amounts of data. It is also used to easily
compare data patterns and relationships.
Like designing for a desktop publishing
whether for the web or not, there are also
important elements that should be considered in
designing an infographic.

When searching the net, you can find a lot of

principles and guidelines on how to create 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
infographics full of text.
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

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

4
How to Create an Infographic in 5 Minutes

Step 1: Log in and select a theme

First, begin by logging in to create.piktochart.com. You will first see the Piktochart dashboard. This is where
you can choose from three different visual formats – infographics, presentations and printables.
Select Infographic.

Browse for an infographic template layout that stands out to you. You can narrow down the categories by using
the search tool.

Mouse-over the template that you want and select Use Template.

Step 2: Configure your canvas

5
First, title your infographic at the top of the editor. You’ll notice that the canvas is set up with multiple blocks.
You can arrange each block depending on your needs.

o To add a new block, select Add Block ( + ).

o To delete a block, select Delete Block ( x ).
o To duplicate a block, select Clone Block ( = ).
o To change the order the blocks, click Move Up or Move Down (arrows) accordingly.

o To set the size of a block, select Settings and change the sizes accordingly.

Step 3: Edit your content

Edit the text of your content by double-clicking into a text box.

Remember that whenever you create infographic, always think about the principles, 6
graphic and layout design so that you will be guided from the beginning up until you
come up with your informative and attractive infographic
To change the font types, size, alignment and colors, use the editing toolbar.

To add more text boxes, click on Text on the left panel and select the desired type.

Step 4: Add graphics via drag and drop

You can add shapes, lines, icons or photos to your content. Select Graphics on the left panel.

Then, choose a category and browse for the icon or photo you would like to add.

7
Or search for icons using the search toolbar.

Once you find an icon, drag and drop it onto the chosen canvas block. Use the tools on the toolbar to configure
your icon size and color.
Step 5: Insert data visualization—charts, maps or videos
To insert data visualization tools, select Tools on the left panel. Unfamiliar with data visualization? Get a crash
course in our blog post here.

To insert a chart

1. Select Charts. Then select the chart type on the left panel as indicated below.
2. To add data, you can:
a. manually input data on the spreadsheet,
b. import data from a locally saved spreadsheet, or
c. insert complex data via a Google Spreadsheet link.
3. Then, go to the Settings tab to configure the format, legend and colors.
8
 4. Finally, click Insert Chart to add the chart to your canvas.

To insert a map

1. Select Maps. Then select the type of map — countries, or regions — on the left panel as indicated
below.
2. Click on Edit Map to start configuring your map.
3. Add your data to the spreadsheet.

4. To change the color of the map, select the Map and Border Color buttons.
5. Finally, click Insert Map to add the map to your canvas.

9
To insert a video

 Select Videos. Insert a Youtube or Vimeo URL in the text box. Then, click Insert.

Step 6 : Save and export

o To save your infographic, click Save at the top of the editor.
o To download your infographic onto your local drive as a PDF or image, click Download.
o To publish your infographic to the Web, click Share.

o Once you have published your infographic, you can set it to public, password-protected, or
private.
o To directly share your infographic with friends or on social circles, either copy the listed URL or
click on the social media share icons. You can also share via direct email, an export to other
apps, or embed via HTML.

 You can even pesent your infographic as slides via Presentation Mode!

10
 And that’s it! That is all it takes to create an infographic with Piktochart.

There’s another thing that you need to know. Since the introduction of graphics
on the web, file formats also became an important aspect in the design stage. The
most common file formats are JPEG, GIF, TIFF, BMP, and PNG. Continue reading
so you’ll fully understand why they are important.

IMAGE FILE FORMAT

Jpeg or Joint Photographic Experts Group is the most popular image file format
used on the web. JPEG files are very “lossy” file where much of the information
JPEG about the image is lost from the original state to keep the image file size small.
Jpeg files are used mostly by photographers, artists, graphic designers, medical
imaging specialists, art historians, and other groups because image quality and
color fidelity are important in the field.
GIF or Graphics Interchange Format is limited to the 8-bit palette with only 256
colors. This format was popularized in the 1980s as an efficient means to transmit
GIF images across data networks and on the web since it uses the basic form of file
compression.
GIF is best used for diagrams, cartoons, and logos which use few colors and it is
the chosen format for animation effects
BMP or Bitmap image file or device independent bitmap (DIB) file format is the
image used in the MS Windows operating system. It is an uncompressed file and is
BMP made up of millions of dots called “pixels,” with different colors and arrangements. It
is also called raster image.
BMP is not usually used on the web since it makes up a big space in the memory
and does not scale well.
TIFF or Tagged Image File Format is a file format created originally by Aldus
Corporation for Desktop publishing. TIFF is supported by many imaging programs
TIFF and is a good format for graphic storage, processing, and printing. This makes TIFF
the superior raster image format by the year 2009, its control was transferred to
adobe systems.
PNG or Portable Network Graphic is an image format developed by a group of
graphic software developers as a nonproprietary alternative to the GIF format. This
PNG format supports full-color images and used for photographic images. However, the
resulting file is much larger than with lossy JPEG compression. And sometimes
PNG is not good to match with line, art, text, and logos.

Remember image file format is important. That’s why you should know what type of
image you are going to use whether you’re editing it or just using it as a material. Most
of these image files are common and versatile. You can use these at any platform.

Principles and Basic Techniques of Image Manipulation

Tips to help you edit images for your website:

1. Choose the right file format. Try to make a real-life photograph into GIF to see the difference
between PNG, GIF, and JPEG. Knowing the purpose is the key to finding out the best file format.

11
 2. Choose the right image size. A camera with 12 megapixels constitutes to a bigger image size.
Monitors have a resolution limit, so even if you have a million megapixels, it will not display everything.
3. Caption it. Remember to put a caption on images whenever possible. If it is not related to the web
page, then remove it.

Sharing Photos with Photobucket

There are plenty of free image hosting sites out there, and Photobucket is one of the oldest. Here’s how to
access it:
1. First, sign up for a Photobucket account on photobucket.com. Just like Piktochart, you may use your
Google+ or Facebook account to automatically sign up.
2. Once your account is set up and you are already logged in, click the Start Uploading button.

3. A new page will load, allowing you to drag and drop your photos or to choose them manually or to
choose an entire folder to upload. Select a folder, add a password (optional), then feel free to upload
any photos you have right then.

4. Once selected, a progress bar will appear indicating that the image is uploading. This may take a
moment and will depend on your Internet connection. Once you are done, you will see an indicator
similar to the one shown in the image below.

12
a. View Uploads – views photos you just uploaded which also grants you options to share and edit them
individually
b. Share Album – shares everything you just uploaded plus the other contents of your specified folder
c. Edit Photos – uses Photobucket’s photo editing tools to manipulate your image
5. Let us just assume you will share a photo individually. To do this, click on View Uploads. Once the page
loads, click the photo you want to share.
6. On the top of the image, you will see the following options:

A – shares your photo directly to social media and blogging platforms: Facebook, Twitter, Google+, Tumblr,
and Pinterest, respectively
B – gives you a variety of link codes for HTML, Forums, Emails, Instant Messaging, and a direct link
C – shares your image via email
D – allows you to download your image
E – shares your image to social media sites with the option to add a custom message

7. You may choose to share your photo to your friends on Facebook. If you are done sharing, you may
now log off and close the browser.

The basic principles of graphic and layout include balance, emphasis, movement,
Let’s Summarize It! pattern, repetition and rhythm, proportion, and variety. Infographics or information
graphics is used to represent information, statistical data, or knowledge in a
Graphical manner.
Piktochart is an example of a free online app that allows you to create your own infographic.
Similar to MS Word, you can use several image file format over the internet; the most commonly used are
JPEG, GIF, PNG, BMP, and TIFF. Remember to choose right format, the right image size, and caption it.

Lesson Activity: What have

you learned?
1. Why do you need to learn imaging and design? Cite 3 importance of this topic?
 _______________________________________________________
 _______________________________________________________
 _______________________________________________________

2. What and where can you apply the skills that you may acquire in imaging and design?

13
 SKILL PRACTICE: FIRST PERFORMANCE TASK OF
2ND QUARTER

Using Piktochart.com create an INFOGRAPHIC assuming that you are

promoting your school and the STRANDS it is offering. Apply the
principles of graphic and layout in making your infographic.

15 POINTS: 10 POINTS: 5 POINT: NEEDS

EXCEEDS MEETS WORK
EXPECTATIONS EXPECTATIONS
Topic/ The topic/purpose The topic/purpose The topic/purpose
Purpose of the infographic was somewhat of the infographic
was clear and broad and did not was not clear and
concise. allow viewer to concise.
understand the
purpose.
Data Data of the Data of the Data of the
infographic was infographic was infographic was
accurate and somewhat not accurate and
relevant to topic accurate and was not relevant
relevant to topic. to topic.
Layout The infographic The graphics were The graphics had
had a great layout, somewhat nothing to do with
with applicable applicable to the the topic and had
graphics. infographic, a poor layout.
creating an There was an
average layout. overload of text.
Color/Font The font was The font was The font was not
legible and the somewhat legible legible and the
color scheme and the color color scheme
enhanced the scheme didn't detracted from the
infographic. affect the infographic.
infographic.

Sourcing Citations for the Citations for some No citations of the

infographic's of the sources infographic’s
sources were used were sources were
included. included. included.

14
 Sample
Output

By: Aira Bianca

Dayag By: Arold
Domingo

By: Trisha By: John Paul

Luna Dauz 15