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

LESSON OBJECTIVES

At the end of this lesson, tye 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 fornmats used on the web;
4. Easily manipulate images using a simple image editor; and
5. Upload and share images using Photobucket.

LESSON MOTIVATION

What is the most visited website in the world? Think about it for a second. No, it is unot 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?

LESSON 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

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

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.

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 infographic, Since
your data relates 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 Presenta 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 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
e. 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 computer, click
on Download. In the Download options, select the medium-sized and the PNG file type.

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.

Name File Extension Use Supports Supports

transparency animation

1. Joint Photographics Experts .jpeg or .jpg Real-life

Group Photographics, high
compression No No

2. Graphics Interchange Format .gif Computer- generated

graphics
Yes Yes

3. Portable Network Graphics .png Screenshots, high

compatibility
Yes No

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 wise to make our image big, most especially in a website. Know
how much space you want the image to consumne. 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 remnove 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.

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 amosaic
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 a random
photo. Make sure that you are the one who took it and that it is wortn spending time with
editing. Once you have it ready, place 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 upper left.
 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 explorer.
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:
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.

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

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.

b. Objects-tab - this is where you can place a wide variety of images like texts, shapes and
symbol.

c. Crop - this is where various tools can be founded 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 editorexer.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 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 recommended that your photos share the same 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).

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.

Resize the pictures so that they do not exceed 800 pixels in width. Add filters if you want.

Click on Convert All button found on the upper right.

The Save dialog box will appear that will allow 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 resources folder.

Inserting, Uploading, and Sharing Photos over the Internet

Sharing you 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 the case, you need an image host, image hosta 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 qouta is reached (measured by megabytes or gigabytes). This
qouta is reached when a lot of people have loaded the image using their own computers on a certain
amount of time (usually by a monthly basis).

Sharing Photos with Photobucket

There are plenty of three 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.

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 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.
5. Once you are done you will see these indicators.
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 Photobuckets 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.

Exploration 6.1. Jump Starting Your Social Media Campaign

It is time to push on with your social media campaign from lesson 1.

1. Take a look at your initial plan from lesson 1'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.
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 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 al 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 campaig Create an infographic about it and post it on your campaign site.

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 wel 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
helpyou 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

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