Scribd
Upload
2K views61 pages

Imaging and Design For Online Environment PDF

Uploaded by

Querubin Ruiz Timogan

This document provides information about imaging and design for online environments. It discusses basic principles of graphics and layout such as balance, contrast, emphasis, movement, pattern, proportion, and variety. It also discusses common image file formats used on the web like JPEG, GIF, and PNG. The document demonstrates how to create infographics using Piktochart and manipulate images using the photo editor Photoscape. It explains various tools in Piktochart and Photoscape for editing, combining, and arranging images.

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt

Imaging and Design For Online Environment PDF

Uploaded by

Querubin Ruiz Timogan
2K views61 pages
This document provides information about imaging and design for online environments. It discusses basic principles of graphics and layout such as balance, contrast, emphasis, movement, pattern, proportion, and variety. It also discusses common image file formats used on the web like JPEG, GIF, and PNG. The document demonstrates how to create infographics using Piktochart and manipulate images using the photo editor Photoscape. It explains various tools in Piktochart and Photoscape for editing, combining, and arranging images.

Original Title

Imaging and Design for Online Environment.pdf

Copyright

© © All Rights Reserved

Available Formats

PDF, TXT or read online from Scribd

Did you find this document useful?

Is this content inappropriate?

This document provides information about imaging and design for online environments. It discusses basic principles of graphics and layout such as balance, contrast, emphasis, movement, pattern, proportion, and variety. It also discusses common image file formats used on the web like JPEG, GIF, and PNG. The document demonstrates how to create infographics using Piktochart and manipulate images using the photo editor Photoscape. It explains various tools in Piktochart and Photoscape for editing, combining, and arranging images.

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
2K views61 pages

Imaging and Design For Online Environment PDF

Uploaded by

Querubin Ruiz Timogan
This document provides information about imaging and design for online environments. It discusses basic principles of graphics and layout such as balance, contrast, emphasis, movement, pattern, proportion, and variety. It also discusses common image file formats used on the web like JPEG, GIF, and PNG. The document demonstrates how to create infographics using Piktochart and manipulate images using the photo editor Photoscape. It explains various tools in Piktochart and Photoscape for editing, combining, and arranging images.

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
You are on page 1/ 61

Imaging and Design for

Online Environment
At the end of the lesson, you 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 image using a image-editor;
and
5. Upload and share images using Photobucket.
What is the most visited
website in the world?

Think about it for a second.


It is not Facebook or Twitter
Here is a clue, the site’s mission
statement is to organize the world’s
information and make it
universally accessible and useful.”
On March 23, 2016, 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?
Basic Principles of
Graphics and Layout
What principle of design applies in the
given image below?
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.
Which one is the symmetrical,
asymmetrical balance?
What principle of design applies in the
given image below?
Contrast
•The arrangement of opposite
elements in a composition so
as to create visual interest.
light vs. dark,
rough vs. smooth,
small vs. large, etc
What principle of design applies in the
given image below?
Emphasis

Used to make certain parts of


an Artwork stand out. It creates
the center of interest or focal
point. It is the place in which an
Artist draws your eyes first.
What principle of design applies in the
given image below?
Movement
•How the eye moves through
the composition;
•leading the attention of the
viewer from one aspect of the
work to another.
•Can create the illusion of
action.
What principle of design applies in the
given image below?
Pattern
• The repetition of specific visual
elements such as a unit of shape
or form. A method to organize
surfaces in a consistent regular
manner.
Which one shows pattern?

The other image shows what


principle of design?
Rhythm
• Regular repetition of, or
alternation in elements to create
cohesiveness and interest.
What principle of design applies in the
given image below?
Proportion
• Visual elements create a sense of
unity where they relate well with
one another.
What principle of design applies in the
given image below?
Variety
• This uses several design elements
to draw a viewer’s attention.
Formative Activity for
Graphics and Layout
• Using Piktochart, create individual images that
would tell something about yourself and would
project each of the following principles of graphic
and layout.

• 1. Balance
• 2. Emphasis
• 3. Movement
• 4. Pattern, Repetition, and Rhythm
• 5. Proportion
• 6. Variety
HOA #4-1 – Infographics using Piktochart

• Signup for free using your google account


• Explore the online platform
• Choose template to create infographics
(your profile)
• Save final output to JPEG
Use filename:
Surname-section-HOA#4-1-Infographics
• Do not forget to send through Edmodo
• Remember to backup your files
Imaging and Design for
Online Environment
LET US DISCUSS…
• Based on Experience in creating
Infographics in Piktochart, what
editing tips you can give or
suggest?
What are different TOOLS did you
used in creating INFOGRAPHICS
in PIKTOCHART?
Tools in Piktochart
1. Graphics

allows you to insert lines, shapes,


icons and even photos.

2. Uploads
allows you to upload images for
your infographic
Tools in Piktochart
3. Background
changes the background of a
selected block

4. Text
allows you to insert text to your
infographics with the option to add text
frames.
Tools in Piktochart
5. Styles
allows you to modify the color scheme
of your infographics.

6. Tools
allows you to create charts and videos
COMMON
IMAGE FILE FORMAT
USED ON THE WEB
Image File File Supports Supports
Use
Format Extension transparency animation

Joint .jpeg or jpg Real-life


Photographic photographs,
Experts high NO
NO
Group compression

Graphics Computer
Interchange generated
Format graphics
YES NO
Screenshots,
high
compatibility
Portable Screenshots,
Network high
Graphics compatibility YES NO
Principle & Basic Techniques
of Image Manipulation

1. Choose the right


file format
Principle & Basic Techniques
of Image Manipulation

2. Choose the right


image size
Principle & Basic Techniques
of Image Manipulation

3. Caption IT
CREATING AND
MANIPULATIONG IMAGES
USING PHOTOSCAPE
Practice:
• Explore all the features of Photoscape.
• Upload your photo/ photos
• Save edited images, rename file to Surname-section-
image1.jpeg
surname-section-image2.jpeg
and so on..
Paste your output in PowerPoint presentation.. Save the
file as HOA4-3-surname-section. pdf
Viewer - 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 mosaic
Combine – links
several images
together to form a big
image.
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–
Capture the screen
and saves it.
Raw Converter–
Converts RAW images
to jpeg.
Rename–
Allows you to rename
a batch of photos.
Paper Print–
Useful tool for printing
your own calendar,
sheets, lined paper,
graph paper, etc

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy