- 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
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
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.
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
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
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.
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
c. Background – changes the background of a
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.
Here are common image file formats used on the
web. We will look at their use in the web.
Real - life
.gif Computer -
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.
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
3. Batch Editor - alters the appearance of
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
9. Screen Capture- captures the screen and
10. Color Picker - grabs a pixel from your screen
11. Raw Converter - converts RAW images
(uncompressed images usually from digital
camera) to JPEG
12. Rename - allows you to rename a batch of
13. Paper Print - useful tool for printing your
own calendars, sheets, lined paper, graph