Basic principles

of graphics and
layouts
Infographics
and how to
create
infographics
After Going Through This Module,
You Are Expected To…

Appreciate
Understand the Use of an
the Basic Create Image Editor
Principles of Original ICT for Image
Graphics and Content Manipulation
Layout and Graphics
Design
Graphic Design
A sought-after skill that can help produce high-
end designs to promote brands at a national
and international scale. Adding graphics to
your design can help you showcase your
creative skills and make a good impression on
your clients. It equips students with the
necessary skills to apply for a position in the
fields of advertising or marketing across all
business sectors.
 Basic Principles
Of
Graphics and Layout
 Symmetrica
l
There should be equal
weights or elements on
both sides of the page.
 Asymmetrical
It may be asymmetrical
when there is an artistic
and different intensity
on one side of the page.
 Text
It should be:
• Legible
• Has appropriate font face
• Left justified, right justified,
centered
• The flow of the text should be
 Imag
e
Images should be:
• Proportionate
• Sharp in color
• With high resolution
• With appropriate
captions.
Proximity and Harmony
The elements should be close
together and scattered and
arranged apart from each
other. Elements should not be
cluttered and not compete
with each other.
 Consistenc
y
The elements should be close
together and scattered and
arranged apart from each
other. Elements should not be
cluttered and not compete
with each other.
 Color and
Shape
Use color to create interest
by providing variety in the
design (color contrast and
shapes).
 Emphasi
s
There should be one point
of interest in a page. The
elements to be
emphasized should have a
different size, color, shape,
or background.
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. It makes
Creating Infographics Using
Piktochart
Piktochart is a web-based
infographic application which allows
users without intensive experience
as graphic designers to easily create
infographics and visuals using
themed templates. Let us create an
infographics using piktochart.com!
 1.
In your Browser. Go to
Piktochart.com and click
sign up found at the upper
right corner of the page to
create your Piktochart
account.
 2.
Fill up the information on
the Sign Up page. You can
use to auto-signup using
Google+ or Facebook
account.
 3.
Once you have created
your account and logged
in, click infographics then
select a template.
 4.
The Piktochart editor will
open (may take a while to
load depending on your
internet connection). You
can now edit the template.
 5.
While editing, you can use
the various tools on the
left side of the page.
 5. a.

Graphics: Allows you to

insert lines, shapes, icons,
and even photos.
 5. b.

Uploads: Allows you to

upload images for your
infographics.
 5. c.

Backgrounds: Changes
the background of a
selected block.
 5. d.

Text: Allows you to insert

text to your infographic
with the option to add
text frames.
 5. e.

Styles: Allows you to

modify the color scheme
of your infographic.
 5. 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
Creating and Manipulating
Images Using Adobe
Photoshop
Adobe Photoshop is a raster
graphics editor, an imaging and
graphic design software. Not only is
it for photos but you can use
Photoshop for designing websites,
editing videos, and creating 3D
artwork.
Getting Started
When you open the program, you’ll
see the main menu along the top,
like other programs. Along the left
side you’ll see a sidebar that shows
the main tools. On the right side,
you’ll see the color tool and the
layers tool. Photoshop file have a
default .PSD which stands for
Photoshop Toolbox
The toolbox in the left sidebar will
be your best friend. The tools are
organized based on what they do:
The top section
The second
features The third section
section features
selection, is drawing and
retouch and
cropping, and typing tools.
paint tools.
slicing tools.
Image Adjustments:
Grayscale
Open the photo you want to edit.

Go to Image Menu > Mode > Grayscale.

The original Red-Green-Blue (RGB) is now Black and White.

Do a SAVE AS.
Alternate Method

Open the photo you want to edit.

Go to Image Menu > Adjustments > Hue and Saturation.

Slide all the triangles all the way to the left (-100) and you de-
saturate (or remove) all the color.
Inserting, Uploading, and
Sharing Photos over the
internet
In creating a website, you usually
upload photos. In this case you need
an image host. Image host are
websites specializing in storing
photographs. These photographs
can be easily embedded to a web
Photobucket
There are plenty of image hosting sites
in the internet, and Photobucket is one
of them.
1. Sign up for a Photobucket
account on photobucket.com.
You may use your Google+ or
Facebook account to
automatically sign up.
Photobucket
There are plenty of image hosting sites
in the internet, and Photobucket is one
of them.
2. Once your account is set
up and you are logged in,
click the Start Uploading
button.
Photobucket
There are plenty of image hosting sites
in the internet, and Photobucket is one
of them.
3. A new page will load allowing
you to drag and drop photos or
choose them manually or the
entire folder to upload. Select a
folder, add a password (optional).
Photobucket
There are plenty of image hosting sites
in the internet, and Photobucket is one
of them.
4. Once selected, a
progress bar will appear
indicating that the image/s
is/are uploading.
Photobucket
There are plenty of image hosting sites
in the internet, and Photobucket is one
of them.
5. Once you are done you will see the following indicators.
View Uploads – views photos you just uploaded which also grants you options to
share and edit them individually

Share Album – shares everything you just uploaded plus the other contents of your
specified folder

Edit Photos – uses Photobucket’s photo editing tools to manipulate your image
Photobucket
There are plenty of image hosting sites
in the internet, and Photobucket is one
of them.
6. Let us assume you will share a
photo individually. To do this,
click on View Uploads then once
the page uploads, click the photo
you want to share.
Photobucket
There are plenty of image hosting sites
in the internet, and Photobucket is one
of them.
7. On the top of the image, you will see the following options:
A – shares 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
Photobucket
There are plenty of image hosting sites
in the internet, and Photobucket is one
of them.
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.