IMAGING AND DESIGN

FOR ONLINE
ENVIRONMENT
LESSON 4
LESSON OBJECTIVES:
At the end of this lesson, you should be able to:

• Understand the basic principles of graphics and layout;

• Create a simple infographic using web tools;
• Understand and use several file formats used on the web;
• Easily manipulate images using a simple image editor; and
• Upload and share images using Photobucket.
TOPICS:
• Basic principles • Online file
of graphics 01 03 formats for
layout images
• Principles and
• Creating
02 basic technique
Infographics 04 of image
manipulation
05 • Uploading, sharing, and
image hosting
 01
Basic Principles of
Graphics Layout
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 element create a sense of unity where they realte
well with one another.
6. VARIETY. This uses several design elements to draw a viewer’s attention.
 02
Creating Infographics
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. It makes complex data
become more visually appealing to
an average user.
5 Principles in Making an Effective
Infographic Design
1. Communicate once central idea.
2. Communicate the data clearly.
3. Be unique.
4. Be creative and bold.
5. Make it easy to navigate.
Best practices when creating
Infographics
❑ Maintain a structure
❑ Don’t use more than 3 color palletes
❑ Typography matters a lot
❑ Include source and references
 03
Online File Formats
for Images
Online Image File Formats
 04
Principles and Basic
Techniques of Image
Manipulation
Tips to help you edit images for your website:

01 02 03
Choose the right file Choose the right
Caption it
format. image size
Try to make a real-life Monitors have a resolution Remember to put a
photograph into GIF to see limit. It is not always wise to caption on images
the difference between make our image big, most whenever possible. If it is
PNG, GIF, and JPEG. especially in a website. not related to the web
page, then remove it.
 Image Manipulation Techniques
1. Cropping – cutting parts away to remove
distracting or irrelevant elements.
2. Color Balance. The ambience and the
tone of light of the picture. (Ex. Warm or
Cool lights)
3. Brightness and Contrast. Making the
image brighter or darker, one of the most
basic technique in image editing.
4. Compression and Resizing. The higher the
quality and the larger the photo is, the bigger
the file size of the picture is.
5. 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.
6. Cloning. Copying or duplicating a part of an
image.
7. Changing the background. Adding background
to make your image standout.
8. Removing the color. Removing certain color in
your image or desaturating the color of the
image.
9. Combining Text, Graphics, and Image. Adding
multiple elements in your layout.
 05
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.
● View Uploads – views photos you just uploaded which also grants you
options to share and edit them individually

● Share Album – shares everything you just uploaded plus the other
contents of your specified folder

● 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.
END
RESOURCES
• Empowerment Technologies ● Slides templates were downloaded
Innovative Training Works, Inc. from https://slidesgo.com/slidesgo-
First Edition. Rex Book Store. school
Copyright 2016. ● Photos in the presentation were
retrieved from google.com
• Empowerment Technologies
Teacher’s Resource Material
Innovative Training Works, Inc.
Second Edition. Rex Book Store.
Copyright 2019.