BASIC PRINCIPLES OF

GRAPHICS AND LAYOUT

• Balance
• Emphasis
• Movement
• Pattern, Repetition and Rhythm
• Proportion
• Variety
 BALANCE
The visual weight of the objects, texture, colors and space is evenly
distributed on the screen. When visiting a website, check if one holds
the same amount of weight on to the other. The colors should also
have a similar visual weight. There are two types of balance:
• Symmetrical
• Asymmetrical
1. SYMMETRICAL BALANCE

Symmetrical balance is achieved by placing elements in a very even

fashion in the design. If you have a large, heavy element on the right
side, you'll have a matching heavy element on the left.
2. ASYMMETRICAL BALANCE

Asymmetrically balanced pages can be more challenging to design - as they don't

have elements matched across the centerline of the design. For example, you
might have a large element placed very close to the centerline of the design. To
balance it asymmetrically, you might have a small element farther away from the
centerline. If you think of your design as being on a teeter-totter or seesaw, a
lighter element can balance a heavier one by being further away from the center
of gravity.You can also use color or texture to balance an asymmetrical design.
 EMPHASIS

An area in the design that may appear different in size, texture, shape
or color to attract the viewer’s attention
 MOVEMENT

is the path the viewer’s eye takes through the work of art,
often to focal areas. Such movement can be directed along
lines, edges, shape, and color within the work of art.
 PATTERN, REPETITION, RHYTHM

These are the repeating visual element image or layout to

create unity in the layout or image. Rhythm is achieved visual
elements create a sense of organized movement.
 PROPORTION

Proportion is the feeling of unity created when all parts (sizes,

amounts, or number) relate well with each other. When drawing the
human figure, proportion can refer to the size of the head compared
to the rest of the body
 VARIETY

Variety is the use of several elements of design to hold the

viewer’s attention and to guide the viewer’s eye through and
around the work of art.
Tabs

Hyperlinks

Images
 Infographics
What is infographics?
WHAT ARE 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
visually appealing to an average user.
 WHAT ARE CONSIDERED
INFOGRAPHICS?
Anything that involves images or graphics visualizing or
substituting an information instead of words are considered
infographics i.e. Charts, Graphs, Posters, Advertisements etc.
 CREATING
INFOGRAPHICS
USING
PUBLISHER
 CREATING INFOGRAPHICS

There are ways to create infographics and various apps to help you
to easily create them. One of them is creating them using Piktochart
or the Microsoft Publisher.
1. OPEN MICROSOFT PUBLISHER AND
CHOOSE A CATEGORY
2. AFTER CHOOSING A CATEGORY
CHOOSE FROM THE TEMPLATES
3. ON THE LEFT CORNER YOU WILL SEE
THE ART EMPHASIS AREA
4. YOU CAN EITHER CONTINUE WITHOUT MODIFYING
ANYTHING OR CONFIGURE THE BUILT-IN TEMPLATES
5. AFTER CONFIGURING THE TEMPLATE CLICK
CREATE ON THE BOTTOM RIGHT AREA.
6. CLICK ON A TEXT OR IMAGE TO MODIFY A TEXT
6. AFTER MODIFYING THE TEMPLATE SAVE THE IMAGE
(CTRL+S OR CLICK SAVE BUTTON ON THE TOP LEFT)
7. DECIDE WHERE TO SAVE YOUR INFOGRAPHICS. MAKE
SURE TO PUT IT ON THE APPROPRIATE FOLDER OR DRIVE
WHERE YOU NEED TO SAVE IT.
7. RENAME THE FILE AND CHOOSE THE RIGHT FILE
FORMAT.
8. CLICK SAVE
 IMAGE FORMATS

Unlike images that are found in our computer, you have to consider
that website images should be compressed because data travels over
the internet and not everyone has a fast internet connection.
Consequently, we have to use compressed images on our photos,
you do not have to use HD all the time, In fact, most of the time, you
do not even have to.
 WHY IS IMAGE COMPRESSION
NECESSARY?
• Data Conservation
• Speed
• Size
 3 MOST USED IMAGE FILE FORMATS
ON THE WEB
• .jpg/ .jpeg
• .png
• .gif
 .JPG/ .JPEG
JOINT PHOTOGRAPHIC EXPERTS GROUP
Jpeg and jpg are file extensions for the file with non transparent
background while exporting or saving. This is because Jpg file are
highly compressed. This means discarding the data from the original
image or captured. This means reducing the image color channels,
and data loss which will make editing from the users more harder.
But this means, lower size of the image. Even though this means data
loss, this changes are invisible to the human eyes.
 .PNG
PORTABLE NETWORK GRAPHICS
Opposite to the JPG, PNG file formats are lossless. This means the
color depth of the image are higher without data loss resulting in
higher size of image. PNG also supports transparency.
 .GIF
GRAPHIC INTERCHANGE FORMAT
GIF is an image file format commonly used for images on the web and sprites in
software programs. GIF are also lossless compressions meaning it also supports
transparency. However, GIFs store image using indexed colors, meaning a
standard GIF image can include a maximum of 256 colors.
 PRINCIPLES AND
BASIC TECHNIQUES OF
I M A G E M A N I P U L AT I O N
Some people just capture an image and upload it on their social
media accounts. From there, Facebook does the rest by formatting
our image to best fit the standards set by Facebook. But once you
run your own website, you will have to edit your images. It seems to
be a simple task but you have to strike the balance between right
image quality and the time for the page to load these images.
Personal websites do not necessarily have to downsize the file size of
the images. But if you have a wider target audience, you need to
make the necessary changes.
 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
finding out the best file format.
 CHOOSE THE RIGHT IMAGE SIZE

A camera with 12 megapixels constitutes to a bigger image size. Monitors have a resolution limit,
so even if you have a million megapixels, it will not display everything. Thus result to sometimes
“sharper” images which reduces the visual impact of the image.
CREATING AND
MANIPUL ATING
IMAGES
(PHOTOSCAPE)
There are plenty of image manipulation tools but if you are going to create a
webpage you have to use the one which is efficient:
• Photoshop
• PiZap
• Photoscape
 PHOTOSCAPE
PhotoScape is a good tool because it is easy to use both for beginners and
advance users.
 PHOTOSCAPE MAIN MENU
On the photoscape main screen, you will see the many basic features it has that you can use
creating web content as follows.
 VIEWER

As the name implies, viewer’s purpose is to view the pictures with features the
same most image viewers has. This include basic manipulation particularly
changing image orientation.
 EDITOR
Alters the appearance of a single image
 BATCH EDITOR
Alters the appearance of a multiple images.
 PAGE
Arranges several photos to create a single one; similar to a mosaic
 COMBINE
Link several images together to firm 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

Captures screen and saves it.

 COLOR PICKER
Grabs a pixel from your screen to be used in editing
 RAW CONVERTER

Converts RAW images to JPEG

 RENAME
Allows you to batch rename photos.
 PAPER PRINT

Useful tool for printing your own calendars, sheets, lined paper, graph paper, etc.
SHARING IMAGES
Sharing your photos over the Internet has never been so easy using social.
However, it is highly recommender to put your social media photos
private and separated from the ones that are posted over the Internet. In
this case, you need an image host. Image hosts are websites specializing
in storing photographs. These photographs can be easily embedded to a
web page or website.
There are plenty of image hosting sites out there; some of them have fee
while some are free where you can pay for more storage space or
bandwidth. Storage space is pretty straightforward; it is like having a 16gb
flash drive where it limits you to just 16gb. Bandwidth limits hinders access
to your images once a certain bandwidth quota is reached. This quota is
reached when a lot of people have loaded the image using their own
computers on a certain amount of time. (Usually by a monthly or yearly
basis) and this are called subscriptions.
There are plenty of free image hosting sites out there, and
Photobucket is one of the oldest (newer ones like imgur are
easier to use and can be used without registering account).
Feel free to check out other free image hosting sites over
the internet.
SHARING PHTOS WITH PHOTOBUCKET

1. First sign up for a Photobucket account on

photobucket.com. Just like photobucket you may use
Google+ or Facebook account to automatically sign up.
2. Once your account is set up and you are already
logged in, click the Start uploading button.
3. A new page will load allowing you to drag and drop your photos manually or
the entire folder to upload. Select a folder to upload. Select a folder,You can
choose whether to add password or to make it public, then feel free to upload
any photos you have right then.
4. Once selected, a progress bar will appear indicating that
the image is already uploading. This may take a moment and
will depend on your internet connection and the size of the
image that you are uploading.
Once you are done you will see these indicators that may look a little bit like this:

4 of 4 photos successfully uploaded to Your Bucket

View Uploads Share Album Edit Photos

Let us assume you will share photo directly to your social media or blogging platforms. To do this,
click on View Uploads then once the page loads, click the photo you want to embed or share.
On the top of the image you will see the following options:

f tweet G+ t P