Etech Baby

Imaging and Design for Online
Environment
Lesson Objectives:
1. Understand the basic principles of graphics and layout.
2. Create a simple infographic using web tools.
3. Understand and use several files formats used on the
web.
4. Easily manipulate images using a simple image editor.
5. Upload and share images using Photobucket.
Basic Principles of Graphics and Layout
The nuts and bolts in graphic and layout
• Balance – it is the visual weigh of objects, texture,
colors, and space is evenly distributed on the screen.
• Emphasis – an area in the design that may appear
different in size, texture, shape or color to distract
the viewer’s attention.
• Movement – how the eye moves through the
composition leading the attention of the viewer
from one aspect to another.
• 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.
• Proportion – visual elements create a sense of
unity where they relate well with one another.
• Variety – this uses several design elements to draw a
viewer’s attention.
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.
CREATING INFOGRAPHICS USING PIKTOCHART
1. Create Piktochart account by going to

www.piktochart.com
2. Fill up the information on the sign up page, you can
connect with Google+ or Facebook
3. Once you have done, select a template for your
infographic.
4. Select the blocks and input the information as you see
fit.
5. While editing, you can use various tools on the left side
of page.
• A. Graphics – allows you to insert lines, shapes, icons, and
even photos.
• B. Upload – 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 colors scheme of your
infographic
• F. Tools – allows you to create charts, maps, and videos.
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
Name File Extension Use Supports Supports animation

transparency
1. Joint Real life No No
Photographic jpeg or jpg photographs, high
Experts Group compression
2. Graphics gif Computer generated Yes Yes

Interchange graphics
Format
3. Portable png Screenshots, high Yes No
Network compatibility
Graphics
Principles & Basic Techniques of Image
Manipulation
• 1. Choose the right file format- Knowing the
purpose is the key to finding out the best file
format.
• 2. Choose the right image size- Know how much
space you want the image to consume.
• 3. Caption it- Remember to put a caption on
images whenever possible.
CREATING AND MANIPULATING IMAGES USING
PHOTOSCAPES
PhotoScape Main Screen

Features
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 picture 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 to JPEG
12. Rename – allows you to rename a batch of
photos
13. Paper Print – useful tool for printing your own
calendar, sheets, lined paper, graph paper, etc.
EDITOR EDIT Steps
1. Open Photoscape then choose editor
2. Choose the folder where the image you want to manipulate is
located.
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 and the file size found on the bottom of the
preview.
6. Manipulating 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.
• B. Objective Tab – this is where you can place a wide
variety of images like text, shapes, and symbol.
C. Crop – this is where various tool can be found 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 tool.
7. Click SAVE location on the lower right of the
program. The Save as dialog box will appear.
Save it in your activities, folder with the file
name. Check the file size and see how much
space you saved.
Batch Edit Steps
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 work area (center).
2. Use the tools on the right to edit your photo. This similar
to the option 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 pixel in
width. Add filters if You want.
4. Click on Covert 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.
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 while others are free where you can
pay for more storage space or bandwidth.
Sharing Photos with Photobucket
1. First, sign up for a Photobucket accoun 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 choose them manually or the entire
folder to upload any photos you have right then.
4. Once selected, a progress bar will appear
indicating that the image is uploading.
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 Albums- 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. Share 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.

Etech Baby

Uploaded by

Copyright:

Available Formats

Etech Baby

Uploaded by

Document Information

Original Description:

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

Etech Baby

Uploaded by

Copyright:

Available Formats

Imaging and Design for Online

• INFOGRAPHICS Information graphics or

1. Create Piktochart account by going to

Name File Extension Use Supports Supports animation

2. Graphics gif Computer generated Yes Yes

PhotoScape Main Screen

You might also like