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

What is the most
visited website in
the world?
Google
 BASIC PRINCIPLES OF
GRAPHICS AND LAYOUT
1.Balance. The visual weight of objects,
texture, colors, and space is evenly
distributed on the screen.
2.Emphasis. An area in the design that may
appear different in size, texture, shape or
color to attract the viewer’s attention.
3.Movement. Visual elements guide the
viewer’s eyes around the screen.
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.
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 in a
graphical manner usually done in a
creative way to attract the viewer’s
attention.
 Online Image File Formats

*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.
 Add-ons
• These are small pieces of
software that add new features or
functionality to your installation of
browser.
 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.

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.

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.
Key Terms
• Balance – deals with the visual weight
of object, 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 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 – is a free image hosting
site that allows you to share photos
over the Internet.
• Bandwidth – amount of data used to
download your image by multiple
users.