2. - There are certain things that you need to
consider in order to get your message across.
Basic Principles of Graphics and Layout
1. Balance - The visual weight of objects, textures,
colors and space is evenly distributed on a
screen.
2. Emphasis – An area in the design that may
appear different in size, texture, shape or color
to attract the viewers attention.
3. Movement - Movement guides the viewer’s
eye around the screen.
4. Pattern, Repitition and Rhythm - Visual

3. elements that are repeated to create unity in the
layout or image.
5. Proportion - Visual elements create a sense
of unity where they can easily find one another.
6. Variety – This uses several design elements to
draw a viewers 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
vissually appealing.

4. Creating Infographics Using Piktochart
1. Create a piktochart account by going to
www.piktochart.com and click Sign In 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.

5. 4. The Piktochart editor will open. The Presenta
Board theme consists of three blocks or parts.
Select the blocks and input the information as
you see fit.
5. While editing a block, you can use the variation
tools on the left side of the page.
a. Graphics – allows you to insert lines, shapes,
icons and even photo.
b. Uploads – allows you to upload images for
your infographics.
c. Background – changes the background of a
selected block.

6. d. Text – allows you to insert text to your
infographic with the option to add text frame.
e. Styles – allows you to modify the color scheme
of your infographic.
f. Tools – allows you to create charts 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.

7. Here are common image file formats used on the
web. We will look at their use in the web.
Name File
Extension
Use Supports
Transparency
Supports
Animation
1. Joint
Photographics
Experts
Group
.jpeg
or .jpg
Real - life
photographs,
high
compression
No No
2. Graphics
Interchange
Format
.gif Computer -
generated
graphics
Yes Yes
3. Portable
Network
Graphics
.png Screenshots,
high
compatability
Yes No

8. 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 find out the
best file format.
2. Choose the right image size - A camera with
12 megapixels conctitutes to a bigger image
size. Monitors have a resolution limit, so even if
you have a millin megapixels, it will not
dispayeverything. Thus, it is not always wise to
make our image big, most specially in a website.
Know how much space you want the image to
consume. Or have a “preview” image where the
audience has the option to “see full size.

9.  3. Caption it - Remember to put a caption on
images whenever possible. If it is not related to
the web page, then remove it.
 - On PhotoScape’s main screen, you will see
the may 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 appearanceof a single
image
 3. Batch Editor - alters the appearance of

10. 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 pictures for printing
8. Splitter - diveides a single photo into multiple
parts
9. Screen Capture- captures the screen and
save it
10. Color Picker - grabs a pixel from your screen

11.  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.