This document provides information on imaging and design for online environments. It discusses basic principles of graphics and layout such as balance, emphasis, movement, pattern repetition and rhythm, proportion, and variety. It then discusses infographics and how they can be used to represent information graphically to make complex data more visually appealing. It provides steps for creating infographics using Piktochart. Finally, it discusses photo manipulation and differences from photo editing, and features of image editors such as selection tools, layers, image size adjustment, cropping, and cloning.

1. LESSON 6:
IMAGING AND DESIGN FOR ONLINE
ENVIRONMENT

2. Basic Principle of Graphics
and Layout

3. 1. BALANCE
 The visual weight of objects, texture, colors, and
space is evenly distributed on the screen.
 The colors should also have a similar visual
weight.

4. 2. EMPHASIS
 An area in the design that may appear different
in size, texture, shape or color to attract the
viewer’s attention.

5. 3. MOVEMENT
Visual elements guide the viewer’s
eyes
around the screen.

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

7. 5. Proportion
Visual elements create a sense of
unity where they relate well with one
another.

8. 6. VARIETY
This uses several design elements to draw a
viewer’s attention.

9. INFOGRAPHICS

10. Infographics (Information Graphics)
 Used to represent information, statistical data or
knowledge in a graphical manner usually done in
creative way to attract the viewer’s attention.
 Infographics make complex data become more
visually appealing to an average user.

11. Creating Inforgraphics Using Piktochart
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

12. Creating Inforgraphics Using Piktochart
4.
The Piktochart editor will
open (may take a while to
load depending on your
Internet connection). The
Presenta Board them
consists of three blocks
(parts). Select the blocks
and input the information
as you see fit.
5.
While editing a
block, you use the
various tools on the
left side of the page

13. Photo
Manipulation
INVOLVES TRANSFORMING
OR ALTERING A
PHOTOGRAPH USING
VARIOUSMETHODS AND
TECHNIQUES TO ACHIEVE
DESIRED RESULTS.

14. DIFFERENCES
Photo Editing
 Signifies the regular process
used to enhance photos and
to create them “Actual
editing simple process.
Photo Manipulation
 Includes all simple editing
techniques and have some
manipulation techniques

15. FEATURES OF IMAGE EDITORS

16. SELECTION
One of the prerequisites for many
of the app mentioned below is a
method of selecting part(s) of an
image,

17. MARQUEE TOOL
 For selecting rectangular or other regular polygon-
shaped regions.

18. LASSO TOOL
 For freehand selection of a region.

19. MAGIC WAND TOOL
 Selects objects or regions in the image defined by
proximity of color or luminance.

20. LAYERS
 Which are analogous to sheets of transparent acetate, stacked on
top of each other, each capable of being individually positioned,
altered and blended with the layers below.

21. IMAGE SIZE
 resize images in a process often called image
scaling, making them larger, or smaller.

22. CROPPING
 Creates a new image by selecting a desired
rectangular portion from the image being cropped.

23. CLONNING
 uses the current brush to copy from an image or
pattern.

24. That’s all thank you!