Lesson 6 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

Objectives
At the end of this lesson, the students should be able to:
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.

99
Imaging and Design for Online Ehvironment
 Name: Score:
Section: Date:
Pre-Test c. Jotter Prime Element Garnish
Multiple Choice: d.Write the of
None letter of the correct answer on the space before each
the above
number. Balance is to even distribution; emphasis is to
I 10. A file format typically used for screenshots
PT a. PNG c. RAW
b. GIF d. JPEG

Imaging and Design for Online Environment 101

I
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 universally 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 search engines and websites in the
Internet?

>sson Discussion
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 an effective PowerPoint Presentation. Some of
those tips can help you in graphics and layout design.

Basic Principles of Graphics and Layout

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.
Emphasis. An area in the design that may appear different in size, texture, shape or
color to attract the viewer's attention.
 Google

Figure 1. An example page of balance and emphasis

Imaging and Design for Online Environment 103

3. Movement. Visual elements guide the viewer's eyes around the screen.

Figure 2. The edge of a drawer leads the eye toward the green frog. Its bright color,
which stands out in this picture, also helps draw the viewer's eyes.

4. Pattern, Repetition, and Rhythm. These are the repeating visual element 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.

Figure 3. This image uses pattern and repetition which create

harmony for the entire image.

Empowerment Technologies
 •104

Proportion. Visual elements create a sense of unity where they relate well with one
another.

Raceto feed 4.4 billion

Figure 4. A screenshot ofCNN.com web page shows how the font size of headers is
proportional to the size ofits content. This is done so that the viewer can easily see
what the article is all about.

6. Variety. This uses several design elements to draw a viewer's attention.

Figure 5. Bing uses a combination of text and images to make the site more
appealing but not distracting from the site's purpose.

Infographics

Information graphÎcs or infographics are used to represent information, statistical

data, or knowledge in a graphical manner usually done in a creative way to attract the

Imaging and Design for Online Environment 105

viewer's attention. Infographics make complex data become more visually appealing
to an average user.

Creating Infographics Using Piktochart

Retrieve your data from lesson 4's Take the Challenge. We will create an
infographic of your customer's age range using piktochart.com, a free online app that
allows you to create your own infographic. Each member of the group will create
his/her own infographic using the same data.
Create a Piktochart account by going to www.piktochart.com and click sign
up on the upper right corner of the page.

piktochart

Make Your Own Infographics

Making Information Beautifui Has Never Been Easier
START FOR FREE

DIGITAL MARKETING
fC)OML
EDUCATION ofSterg epare

Chat WIth us

Figure 6. The Sign Up button ofPiktochart is located on the upper right ofthe screen.

Fill up the information on the Sign Up page; alternatively, you can connect
with Google+ or Facebook.

Piktochart
WGth

Sub-scribeto
account, and

MY'ACCOtmr

106 Empowerment Technologies

 Figure 7. Piktochart's Sign Up page
3. Once you have created an account and logged in, select a template for your
infographic. Since your data relates to marketing or sales, simply hover
over the Presenta Board theme under Free Themes then select Create.

piktochort Saved

VB The Way gxsw

CREATE

Pte•setitðBoatd Minimalist

4. The Piktochart editor will open (may take a while to load depending on
your Internet connection). The Presenta Board theme consists of three
blocks (parts). Select the blocks and input the information as you see fit.

Click to sclect block

Figure 8. The Piktochart editor. The center of the page that takes up the most
space is your working area, and your editing tools can be found on the left.

5. While editing a block, you can use the various tools on the left side of the
page:

Imaging and Design for Online Environment 107

 a. Graphics - allows you to insert lines, shapes, icons, and even photos
b. Uploads - allows you to upload images for your infographic
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
Styles - allows you to modify the color scheme of your infographic
f. Tools - allows you to create charts (similar to the ones in PowerPoint),
maps (for 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 similar to working with objects
in PowerPoint where you can arrange an object to be on top or bottom
of another.
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
PILYANG
HUSBAND
computer, click on
Download. In the Download Choco Crinkles

options,
select the medium-sized and Sales Result

March 2015 f/l'/llå/..

the PNG file type.
Who bought our crinkles?

PHP50

Wesold 50boxesofcringesin I

day

108 Empowerment Technologies

 Pictochart

Figure 9. A sample infographic illustration

Imaging and Design for Online Environment 109

Online Image File Formats
Unlike images that are found in our computer, you have to consider that website
images should be more compressed because data travels over the Internet and not
everyone has a fast Internet connection. Consequently, we have to use compressed
images on our websites. Likewise, even though a wide variety of websites 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. All of them are already
discussed in lesson 3. Here, we will take a look at their use in the web.
SuÞportS Supports
Name File É*tensgon Use transpätency animation
1. Joint Real-life
Photographics Jpeg or Jpg photographs, high No No
Experts Group compression

2. Graphics
Computergenerated
Interchange .gif Yes Yes
graphics
Format
3. Portable
Screenshots, high
Network .png Yes No
Graphics compatibility
There are plenty of other image file formats used in the web but most of the time
you will be using these 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 browser.

Principles and Basic Techniques of Image Manipulation

Most of the time, we just capture an image and upload it on our Facebook
account. From there, Facebook does the rest by formatting our image to best fit the
standards set by Facebook. But once you run your own website, 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 wider target audience, you need to make the necessary
changes. Here are some 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.
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. Thus, it is not always

110 Empowerment Technologies

 wise to make our image big, most especially in a website. Know how much
space you want the

forOnline

image to consume. 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 remove it.

Creating and Manipulating Images Using PhotoScape

There are plenty of image manipulation tools but if you are going to create a
website, you have to use the one which is efficient. PhotoScape is a good tool because
it is feasible for beginners and advanced users alike.

Figure 10. PhotoScape

On PhotoScape's 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 a 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

Imaging and Design Environment 111

 9. Screen Capture - captures the screen and saves it
10, Color Picker - grabs a pixel from your screen to be used in editing
1 1 . Raw Converter — converts RAW images (uncompressed images usually
from digital camera) to JPEG

1 2. Rename - allows you to rename a batch of photos

1 3. 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.

l. Editor Edit
For this exercise, take a photo from your camera. It can be a selfie, a
groupie, or a random photo. Make sure that you are the one who took it and that
it is worth spending time with editing. Once you have it ready, place it in your
computer in a directory most convenient to you.
PhotoScape Viewer! Editor I
Desktop

1 . Open PhotoScape then choose editor. Libraries

Oleander
2. Choose the folder where the image you want to Computer

manipulate is located using the file explorer on the Network

grade 8_data
upper left. Grade 10 BEC LBASS

Figure 1 1. PhotoScape's File Explorer

From Pad C

InsäntCDD'
My Games
Neverwinte

544.ipa 545.bQ 546.ipa

3. Once you have selected the folder, you will see a

547.ipq 548.ipq 549*ipq preview of all the images found on that folder at
the bottom of the file explorer.

551.ba

112 Empowerment Technologies

 Figure 12. Preview of the images found on the selected
folder
553.iÞQ 554.pnq 555.ipa

556.ipa 557.pnq 558.ipa

for Online

Imaging and Design Environment 113

4. From the preview, select the image you want to use. The image will now be
shown on a much bigger preview inside your work area similar to what is
shown below:

a- Adob•
Any

6arz-*3

•gi//þ;iŽü

3000
aaaau

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.

oleander'svaatbn.JPG FñãÃ000x3000

Figure 13. Image properties found on the bottom of the image preview

On the image above, notice that the photo is 4000 x 3000 pixels and has
a size of 3.3 MB. 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 file.

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 effects to your image

Home aaaaø
No Frame

If you have similar problem as mentioned in the previous step, try

to reduce the size of the image. Most monitors with the aspect ratio of
 16:9 support resolutions of 1366 x 768. Try to resize your image to
lower than 800.

I t 2 Empowerment Technologies———
b. Objects tab - this is where you can place a wide variety of images like
texts, shapes, and symbols
Home Object Toog
Opacity

Thickness
T 0 00
þ2 Photo +
Objects

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

Crop S±ct the area you wTh to crop. You an

the down on
bar the
rove screen by hoUhg the and dragghg area wth
CCrop Round Inage Save Cropped Area

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.
Home Object Tools
Screen Scrol Drag a smal box around each
eye t' Let dick the tmuse and
drag a
Pant Brush eye wa be removed.

Mote Removal Cbne

@
M0Ric Effect Bru±l

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 editorexer.jpg.
Check the file size and see how much space you saved.

ll. 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 sizes uniform to what you have
specified. For this exercise, you will need to take at least ten pictures and save in
your desired folder. It is highly recpmmended that your photos share the same
Imaging and Design Environment 115
 orientation (portrait or landscape). Select the folder where your photos are located,
then on the Preview window, drag the photos you want 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 apply to all your photos.
3. Resize the pictures so that they do not exceed 800 pixels in width. Add filters if
you want.

forOnline

4. Click on Convert All button found on the upper right.

Convelt Current Photo—

Home er

No Frame

ReSze
Sie

Interpolation
Bicubic
Adjust Vertial Photo SŽeCl

& Round

Initùe

Figure 14. The tools used for batch editing found on the right side of the program

5. The Save dialog box will appear that will allow you to change the location, the
name of the images, a d the file type. Since we are working on photographs, we
116 Empowerment Technologies
 are going to keep it as PEG. For this exercise, save the batch images in a new
folder labeled as "batch" inside your resources folder.
Loatìon of saved fies
@ Create your output folder under the frst changed photo
Cancel
oCreate output folders under each changed photo
OSave your photo n the designated folder
C:þutput\

Narmg saved Nes

@ Savè as the same name
OSave as new name

Separator Date - Tine Starthg Nun-ber

Fie Date YYYYMMDD

Photo Date HHMMSS

@ 'Today's Date

Ex) testJpg wi change to te•jpg

Image Format
PNG fles are of higher quaò' than JPG ffes, but they are
Format bigger are but an display a nuximžrn of 256 colors. BMP
fies are uncorrpressed fles and are very big h Ste,
JPEG QuaR-y
We recormend
quatty
Low Quality Quahf (95 or more),you gve your photo at
95 If you save your photo at low quawr the fie size be
snulg but lose ts resobtion.

Etc
Maintain the Exf Information n DPI
n Preserve Fie Date

Figure 75. The Save dialog box when batch editing

Inserting, Uploading, and Sharing Photos over the Internet

Sharing your photos over the Internet has never been so easy using social media.
However, it is highly recommended to put your social media photos private and
separated from the ones that are posted over the Internet. In that case, you need an
image host. Image hosts are websites specializing in storing photographs. These
photographs can easily be embedded to a web page or website.
There are plenty of image hosting sites out there; some of them have fee while
others are free where you can pay for more storage space or bandwidth. Storage space
is pretty straightforward; it is like having a 16GB flash drive where it limits you to just
16 GB. Bandwidth limits hinders an access to your image once a certain bandwidth
quota is reached (measured by megabytes or gigabytes). This quota is reached when a

Imaging and Design Environment 117

lot of people have loaded the image using their own computers on a certain amount of
time (usually by a monthly basis).

for Online

Sharing Photos with Photobucket

There are plenty of free image hosting sites out there, and Photobucket is one of
the oldest. Feel free to check out other free image hosting sites over the Internet.
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.

It looks you haverft uptoaded anything yet.

Photobucket makes it easier than ever uptoad alt of your photos and videos!

3. A new page will load allowing you to drag and drop your photos or to choose
them manually or the 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.
118 Empowerment Technologies
 5. Once you are done you will see these indicators:

4 4 Btxket

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
6. Let us assume you will share a photo individually. To do this, click on View
Uploads then once the page loads, click the photo you want to share.
7. 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
8. 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.

S Skill Exploration
E Exploration 6.1. Jump Starting Your Social Media Campaign
It is time to push on with your social media campaign from lesson 1.

Imaging and Design Environment 119

 1. Take a look at your initial plan from lesson I's Exploration 1.1. Identifying
the Correct Web Platform for Social Change.
2. It is time to set up your website. If you are not knowledgeable with the
platform you chose, feel free to change it. You can do a research on how to
set up accounts for the platform you chose as well. Creating a Facebook page
would be an easy task.
3. Make sure you use the principles of design when layouting and adding
content for your page.
4. Once set up, try adding content like photographs. Use PhotoScape to edit
these photos.

for Online
5. Use Photobucket to share these photos to your page and wherever you see fit.
6. Your teacher will check the status of your site after a few weeks.

Your Turn to Shine

1. Give three websites that you visit. What makes their site design work?
2. Research on Photobucket and two more free image hosting sites and check
out the limitations of the free account. What is the best hosting site for you
and why?
3. What are the limitations of PhotoScape compared to other image editors?

Take the Challenge!

Create a short three-question survey for the community members who are also
affected with the problem you are campaigning for. Ask them to scale their
thoughts (e.g., On a scale of 1-5, do you think this problem would ever be
solved?). Make sure you ask at least 15 members of the community to make a
strong case for your campaign. Create an infographic about it and post it on your
campaign site.

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 ele ents to draw a viewer's attention
Infographics - or information graphics; used to represent information,
statistical data, or knowledge in a graphical manner
120 Empowerment Technologies
 Piktochart - an example of a free online app that allows you to create your
own infographic
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
L Lesson Summary
S 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.

Imaging and Design Environment 121

 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 infographic.
Similar to MS Word, you can use several image file formats over the Internet; the
most commonly used are JPEG, GIF, and PNG. Each of which can be used in different
instances depending on what you need. In using 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 share photos over the
Internet. Simply create a Photobucket account and you can start uploading pictures and
share them to a wide variety of platforms.
 ImagingandDesignforOntine Envirmment

Name:Score:

Section: Date:
I

POSt-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 c. design
b. colors d. weight

I 2. Movement is to guiding the eye; rhythm is to create

a. attraction c. visuals
b.
organization d. unity
3. These are visual elements creating a sense of unity where
they relate well with one another.
a. style c. variety
b. proportion d. emphasis
4. It uses several design elements to draw a viewer's attention.

a. style c. variety
b. proportion d. emphasÌs
5. It makes complex data become more visually appealing to the average
user.
a. tables c. infographics
b. piktocharts d. slideshows
6. The following are common image file formats used in the Internet
EXCEPT

a. JPEG c. PNG
b. GIF d. BMP
7. A free image manipulation tool that has batch edit, viewer, and paper
print features
123
 a. Picasa c. GIMP
b. PhotoScape d. IrfanView
8. It is the process of editing multiple pictures at once using one setting.
a. batch edit c. paper print
b. animation d. collage
9. The file extension JPEG stands for

a. Joint Photographic Experts Group

b. Japan Photo Excellence Guild
c. Jotter Prime Element Garnish
d. None of the above
10. A file format typically used for screenshots
a. PNG c.
b. GIF d. JPEG
Imaging and Design for Online Environment 121