Empowerment Technology

Empowerment Technology
Lesson 6 – Imaging and Design for

Online Environment
1. 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:
• 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;
andupload and share images using
Photobucket.
Basic Principles of Graphics and
Layout
BALANCE
- A distribution of visual weight on either side of
the vertical axis. Symmetrical balance uses the
same characteristics. Asymmetrical uses
different but equally weighted features.
SYMMETRICAL BALANCE
ASYMMETRICAL BALANCE
CONTRAST
- Arrangement of opposite elements
(light vs. dark, rough vs. smooth,small
vs. large.,etc.) in a composition so as
to create visual interest.
INFOGRAPHICS
-Information graphics or infographics are used to
represent information , staistical 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 appealing to an average user.
Online Image File
Formats
How to share photos with
Photobucket
1.Open Photobucket and log-in to your account.
2.Click on "Library" tab and select "view library“
3. Select the album you want to upload photos to.
4. Click on Upload Now.
5.Click on Browse files. You can also choose to drag and drop photos.
6. Select the photos you want to upload and click Open.
7. After uploading you can add names to your photos and click "Continue to
Home".
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:
Viewer - as the name implies, is a picture viewer with features the

same with most image viewers like changing image orientation.
Editor - alters the appearance of a single image
Batch Editor - alters the appearance of multiple images
Page - arranges several photos to create a single one; similar to a
mosaic
Combine - links several images together to form a bigger image
Animated GIF - allows you to create an animated GIF from several
pictures
Print - readies picture for printing
Splitter - divides a single photo into multiple parts
Screen Capture - captures the screen and saves it
Color Picker - grabs a pixel from your screen to be used in editing
Raw Converter - converts RAW images (uncompressed images
usually from digital camera) to JPEG
Rename - allows you to rename a batch of photos
Paper Print - useful tool for printing your own calendars, sheets,
lined paper, graph paper, etc.
Editor Edit
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 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 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.
6. Manipulate the image using the tools on the
bottom.
Home Tab – this is where you can add a
frame, resize, sharpen, and add filters and
effects to your image
Objects Tab – this is where you can place

a wide variety images like texts, shapes,
and symbols
Crop – this is where the various tools can
be found in order to properly crop an image
to desirable size
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 save.
Batch Edit
Batch editing is one of the most useful tools when trying to easily manipulate all
image 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)
1.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 tool on the right to edit your photo. This is similar to the options in edit
except the Crop and Tools tab which are replays 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.
4.Click on Convert All button found on the upper right.
5. 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 resource folder.
END

Empowerment Technology

Uploaded by

Copyright:

Available Formats

Empowerment Technology

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Empowerment Technology

Uploaded by

Copyright:

Available Formats

Empowerment Technology

Lesson 6 – Imaging and Design for

There are plenty of image manipulation tools

Viewer - as the name implies, is a picture viewer with features the

1.Open PhotoScape then choose editor.

Objects Tab – this is where you can place

Tools – includes other tools like red eye

7. Click SAVE located on the lower right of the

You might also like