LESSON 6 - Imaging and

Design for Online

Environment

EMPOWERMENT
TECHNOLOGIES
PASSI NATIONAL HIGH SCHOOL
Senior High School
Imaging and Design for Online Environment
• Basic principles of graphics and layout
• Creating infographics
• Online file formats for images
• Principles and basic techniques of image manipulation
• Uploading, sharing, and image hosting

Lesson Objectives

At the end of this lesson, the students should be able to:

1. Understand the basic principles of graphics and layout;
2. Create a simple infographic using web tools;
3. Understand and use several file formats used on the web;
4. Easily manipulate images using a simple image editor; and
5. Upload and share images using Photobucket.
 Pre-Test
Multiple Choice: Write the letter of the correct answer on the space before each number.
1. Balance is to even distribution; emphasis is to
a. Attracting b. colors c. design d. weight
2. Movement is to guiding the eye; rhythm is to create
a. Attraction b. organization c. visuals d. unity
3. These are visual elements creating a sense of unity where they relate well with one another.
a. Style b. proportion c. variety d. emphasis
4. It uses several design elements to draw a viewer’s attention.
a. Style b. proportion c. variety d. emphasis
5. It makes complex data become more visually appealing to the average user.
a. Tables b. piktocharts c. infographics d. slideshow
6. The following are common image file formats used in the Internet EXCEPT
a. JPEG b. GIF c. PNG d. BMP
7. A free image manipulation tool that has batch edit, viewer, and paper print features
a. Picasa b. Photoscape c. GIMP d. IrfanView
8. It is the process of editing multiple pictures at once using one setting.
a. Batch editing b. animation c. paper printing
9. The file extension JPEG stands for
a. Joint Photographic Experts Group c. Jotter Prime Element Garnish
b. Japan Photo Excellence Guild d. None of the Above
10. A file format typically used for screenshots
a. PNG b. GIF c. RAW d. JPEG
Lesson Motivation
What is the most visited website in the world? Think about it for a second. No, it is not Facebook
nor Twitter. Here is a clue, the site’s mission statement is “to organize the world’s information and make it u
niversally accessible and useful.” you have probably guessed it by now, yes – it is Google.
on December 2014, Alexa.com, a renowned website for ranking web page popularity, ranks this
website number one in the entire world. Why do you think Google ranks number one despite the countless s
earch engines and wed sites in the Internet?

Lesson Discussion

Basic Principles of Graphics and Layout

1. Balance. The visual weight of objects, texture, colors, and spaces is evenly distributed on the screen. W
hen visiting a website, check if one side holds the same amount of weight on the other. The colors should al
so have a similar visual weight.
2. Emphasis. An area in the design that may appear different in size, texture, shape or color to attract the vi
ewer’s attention.
3. Movement. Visual elements guide the viewer’s eyes around the screen.
4. Pattern, repetition, and rhythm. These are repeating visual element on an image or layout to create uni
ty in the layout
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.
Infographics

Information graphics or infographics are used to represent information, statistical data, or knowledge i
n a graphical manner usually done in creative way to attract the viewer’s attention. Infographics make complex dat
a become more visually appealing to an average user.

Creating Infographics Using Piktochart

1. Create a Piktochart account by going to www.piktochart.com and click sign up on the upper right corner of the
page.
2. Fill up the information on the Sign up page; alternatively, you can connect with Google+ or Facebook.
3. Once you have created an account and logged in, select a template for your infographics. Since your data relat
e to marketing or sales, simply hover over the Presenta Board theme under Free Themes then select Create.
4. The Piktochart editor will open (may take a while to load depending on your Internet connection). The Present
a Board theme consists of three blocks (parts). Select the blocks and input the information as you see fit.
5. While editing a block, you can use the various tools on the left side of the page.
a. Graphics – allows you to insert lines, shapes, icons, and even photos
b. Uploads – allows you to upload images for your infographics
c. Background – changes the background of a selected block
d. Text – allows you to insert text to your infographic with the option to add text frames
e. Styles – allows you to modify the color scheme of your infographic
f. Tools – allows you to create charts(similar to the PowerPoint), maps (for a demographics), and videos
 Editing Tips:
• Double-click a text to edit the content.
• When working with objects, the toolbox on top of the topmost block will allow you to manipulate it. This is si
milar to working with objects in PowerPoint where you can arrange an object to be on top or bottom of anot
her.
• When working with charts, double-click the chart to open the datasheet editor.
• You may rename the title of your infographic on the top toolbar.

6. To save your work, click on Save on the top right of the page. To save it in your computer, click on Download. In
the Download options, select the medium-sized and the PNG file type.
Online Image File Format
Image file formats are standardized means of organizing and storing digital images. Image files are comp
osed of digital data in one of these formats that can be rasterized for use on a computer display or printer. An image f
ile format may store data in uncompressed, compressed, or vector formats. Once rasterized, an image becomes a gri
d of pixels, each of which has a number of bits to designate its color equal to the color depth of the device displaying
it.
Unlike images that are found in our computer, you have to consider that website images should be more comp
ressed because data travels over the Internet and not everyone has a fast Internet connection. Consequently, we hav
e to use compressed images on our websites. Likewise, even though a wide variety of website already support high-
definition (HD) photos, you do not have to use HD all the time. In fact most of the time, you do not even have to.

Here are common image file formats used on the web.

Supports Supports
Name File Extension Use transparency animation
1. Joint Photographic Real-life photographs, high
.jpeg or .jpg No No
Expert Group compression
2. Graphics Interchange
.gif Computer-generated graphics Yes Yes
Format
3. Portable Network
.png Screenshots, high compatibility Yes No
Graphics
 There are plenty of other image file formats used in the web but most of the time you will be using th
ese three because of their compatibility with all major web browsers.
When inserting text to a web page, you can simply copy a text to your HTML editor, or you can upload
it on a website as a PDF file. Most browsers support “add-ons” so that you can open PDF files without leaving the b
rowser.
Principles and Basic Techniques of Image Manipulation
Most of the time, we just capture an image and upload it on Facebook account. From there, Faceboo
k does the rest by formatting our image to best fit the standards set by Facebook. But once you run your own web
site, you will have to edit your images. It seems a simple task but you have to strike the balance between the right
image quality and the time for the page to load these images.
Personal websites do not necessarily have to downsize the file size of the images. But if you have a wi
der target audience, you need to make the necessary changes. Here are some tips to help you edit images for you
r website:
1. Choose the right file format. Try to make the 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.
2. Choose the right image size. A camera with 12 megapixels constitutes to a bigger image size. Monitors have r
esolution limit, so even you have a million megapixels, it would not display everything. Thus, it is not always
wise to make our image big, most especially in a website. Know how much space you want the image to cons
ume. Or have a “preview” image where the audience has the option to “see full size.”
3. Caption it. Remember to put a caption on images whenever possible. If it is not related to the web page, then re
move it.
Creating and Manipulating Images Using PhotoScape

There are plenty of image manipulation tools but if you are going to create a website, you hav
e to use the one which is efficient. PhotoScape is a good tool because it is feasible for beginners and adv
anced users alike.
 On PhotoScape main screen, you will see the many features it has that you can use for creating web
content as follows:
1. Viewer – as the name implies, is a picture viewer with features the same with most image viewers like
changing image orientation.
2. Editor – alters the appearance of a single image.
3. Batch Editor – alters the appearance of multiple images
4. Page – arranges several photos to create a single one; similar to mosaic
5. Combine – links several images together to form a bigger image
6. Animated GIF – allows you to create an animated GIF from several pictures
7. Print – readies pictures for printing
8. Splitter – divides a single photo into multiple parts
9. Screen Capture – captures the screen and saves it
10. Color Picker – grabs a pixel from your screen to be used in editing
11. Raw Converter – converts RAW images (uncompressed images usually from digital camera) to JPEG
12. Rename – allows you to rename a batch of photos
13. Paper Print – useful tool for printing your own calendars, sheets, lined paper, graph paper, etc.

For this lesson, we will only focus on the ones that we can use for our future website project: the Editor
and Batch Edit.
I. Editor Edit
For this exercise, take a photo from your camera. It can be a selfie, a groupie, or random photo. Make
sure that you are the one took it and that it is worth spending time with editing. Once you have it ready, pla
ce it in your computer in a directory most convenient to you.

1. Open PhotoScape then choose editor.

2. Choose the folder where the image you want to manipulate is located using the file explorer on the up
per left.

Photoscape’s File Explorer

3. Once you have selected the folder, you will see a preview of
all the images found on that folder at the bottom of the file explo
rer.

Preview of the images found on the selected folder

4. From the preview, select the image you want to use. The image will now be shown on a much bigger p
review inside your work area similar to what is shown below.
5. Notice the properties of the image like the file name, the image size (in pixels), and the file size found
on the bottom of the preview.

Image properties found on the bottom of the image preview

On the image above, notice that the photo is 1600 x 1000 pixels and has a size of 289.8 KB. Most
monitors today do not support that resolution and would probably fill up the entire web page. Due to this
big resolution, the file size is affected even though this is JPG.

6. Manipulate the image using the tools on the bottom.

a. Home tab – this is where you can add a frame, resize, sharpen, and add filters and affects to your
image.
b. Objects tab – this is where you can place a wide variety of images like texts, shapes, and symbols.

c. Crop – this is where various tools can be found in order to properly crop an image to a desirable
size

d. Tools – includes other tools like red eye correction, mole removal, mosaic effect, and brush tools.
For more information about the tool, simply click it and a tip will be displayed describing how to use
it.
7. Click Save located on the lower right of the program. The Save As dialog box will appear. Save it in your
activities folder with the file name editor.jpg. Check the file size and see how much space you saved.

II. Batch Edit

Batch editing is one of the most useful tools when trying to easily manipulate all images at the same time
. This is most useful when you create a gallery of photos for a website. You can make their size uniform to w
hat you have specified. For this exercise, you will need to take at least ten pictures and save in your desirab
le folder. It is highly recommended that your photos share the same orientation (portrait or landscape).
1. Select the folder where your photos are located, then on the Preview window, drag threw photos you w
ant to be part of the batch edit to the work area (center).
2. Use the tools on the right to edit your photo. This is similar to the options in edit except the Crop and
Tools tab which are replaced by the Filters tab. The Filters tab is used to add a certain filter that will a
pply to all your photos.
3. Resize the pictures so that they do not exceed 800 pixels in width. Add filters if you want.
4. Click on Convert All button found on the upper right.

The tools used for batch editing found on the right

side of the program.
5. The Save dialog box will appear that will allo
w you to change the location, the name of the
images, and the file type. Since we are working
on photographs, we are going to keep it as
JPEG. For this exercise, save the batch images
in a new folder labeled as “batch” inside your re
source folder.
Key Terms
• Balance – deals with the visual weight of objects, texture, colors, and space
• Emphasis – the area designed to attract the viewer’s attention
• Movement – guides the viewer’s eye around the screen
• Proportion – visual elements that create a sense of unity where they relate well with one another
• Variety – uses several design elements to draw a viewer’s attention
• Infographics – or information graphics; used to represent information, statistical data, or knowledge in a
graphical manner
• Piktochart – an example of a free online app that allows you to create your own inforgraphics
• PhotoScape – a free image manipulation tool that contains many features to help you in creating images
for websites
• Batch Editing – one of the most useful tools when trying to easily manipulate all images at the same time
• Photobucket – an image hosting site
• Bandwidth – amount of data used to download your image by multiple users

Lesson Summary
The basic principles of graphics and layout include balance, emphasis, movement, pattern, repetition and
rhythm, proportion, and variety. Balance deals with the visual weight of objects, texture, colors, and space.
Emphasis is the area designed to attract the viewer’s attention. Movement guides the viewer’s eye around
the screen. Pattern, repetition, and rhythm are visual elements that are repeated to create unity in the layout
or image. Proportion includes visual elements that create a sense of unity where they relate well with one
another. Lastly, variety uses several design elements to draw a viewer’s attention.
 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 info
graphics.
Similar to MS Word, you can use several image file formats over the Internet; the most commonly used a
re JPEG, GIF, and PNG. Each of which can be used in different instances depending on what you need. In us
ing images, remember to choose the right format, the right image size, and to caption it.
PhotoScape is a free image manipulation tool that contains many features to help you in creating images
for websites. One of its features is the batch editor that edits multiple pictures at once.
Photobucket is a free image hosting site that allows you to have share photos over the Internet. Simply c
reate a Photobucket account and you can start uploading pictures and share them to a wide variety of
Platforms.