IMAGING AND DESIGN
FOR ONLINE
ENVIRONMENT
Basic
Principles of
Graphics and
Layout
Balance
The visual weight of objects,
texture, colors, and space is
evenly distributed on the
screen
Emphasis
An area in the design that may
appear different in size,
texture, shape, or color to
attract the viewer’s attention
GOOGLE
An example page of
balance and emphasis
Movement
Visual elements guide the
viewer’s eyes around the
screen
LEADING
LINES
The lines draw the eyes
of the viewers
COLORS
The only different color
gives emphasis to the
subject, therefore,
pulling the attention of
the viewer
BACKGROUND
BLUR
The clear image of the
subject makes the
viewers turn their eyes
to it
Pattern, Repetition, and
Rhythm
Repeating visual element on
an image or layout to create
unity in the layout of image.
Organized movement.
ROWS OF
CHAIRS
It has an organized
movement which sets a
pattern
Proportion
Visual element create a sense
of unity where they relate well
with one another
CNN
Newspage
The fonts are
proportional by the
articles’ size. It can also
state what the newstory
is about.
Proportion
Visual element create a sense
of unity where they relate well
with one another
CNN
Newspage
The fonts are
proportional by the
articles’ size. It can also
state what the newstory
is about.
Creating
Infographics
Infographics
Information graphics or infographics are
used to represent information, statistical
date, or knowledge in a graphical
manner usually done in a creative way to
attract the viewer’s attention.
CREATING
INFOGRAPHICS
USING
PIKTOCHART
Step 1
Create a Piktochart
account by going to
[Link]
and click sign up on the
upper right corner of the
page.
Step 2
Fill up the information
on the Sign Up page;
alternatively, you can
connect with Google+
or Facebook
Step 3
Once you have created an
account and logged in,
select a template for your
infographic. Since your
data releases to
marketing or sales,
simply hover over the
Presenta Board theme
under Free Themes the
select create.
Step 4
The Piktochart editor
(may take a while to load
depending on your
internet connection). The
Presenta Board theme
consists of three blocks
(parts). Select the bloacks
and input the information
as you see fit.
Step 5
While editing a block
you can us the various
tools on the left side of
the page.
GRAPHICS insert lines, shapes, icons, and
even photos
UPLOADS upload image for your infographic
BACKGROUND changes the background of
a selected block
TEXT insert text with the option to add text
frames
STYLES modify the color scheme
TOOLS create charts (similar to the ones in
PowerPoint), maps (for demographics), and videos
Editing Tips
-Double-click a text to edit the content
-When working with objects, the toolbox on the
top of the topmost block will allow you to
manipulate it.
-When working with charts, double-click the chart
to open the data sheet editor
-You may rename the title of your infographic on
the top of the toolbar.
Step 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
Online File
Formats for
Images
Common Image File Format used on
the web
Name File Use Supports Supports
Extension transparency animation
Joint .JPEG OR .JPG Real-life No No
Photographics photographs,
Experts Group high
compression
Grpahics GIF Computer- Yes Yes
Interchange generated
Format graphics
Portable PNG Screenshots, Yes No
Network high
Graphics compatibility
Principles and
Basic
Techniques of
Image
Manipulation
Tips to help you edit images
for your website
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 finding out the best file format
2. Choose the right image
size
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 webpage, then remove it.
CREATING AND
MANIPULATING
IMAGES USING
PHOTOSCAPE
Features that can be used for
creating Web Content
VIEWER image viewer like changing image orientation
EDITOR alters the appearance of a single image
BATCH EDITOR alters the appearance of multiple images
PAGE arranges the several photos to create a single one; similar
to a mosaic
COMBINE links several images together to form a bigger
image
ANIMATED GIF allows you to create an animated GIF from
several pictures
PRINT readies pictures for printing
SPLITTER divides a single photo into multiple parts
SCREEN CAPTURE captures the screen and saves it
COLOR PICKER grabs a pixel from your screen to be
used in editing
RAW CONVERTER convers RAW images (uncompressed
images usually from digital camera) to JPEG
RENAME allows you to rename a batch of photos
PAPER PRINT useful tool for printing your own calendars,
sheets, line paper, graph paper, etc.
I. EDITOR EDIT
Step 1
Open PhotoScape then
choose editor.
Step 2
Choose the folder where the
image you want to
manipulate is located using
the file explorer on the upper
left
Step 3
Once you have selected
the folder, you will see a
preview of all the
images you found on
that folder at the bottom
of the file explorer
Step 4
From the preview, select
the image you want to
use. The image will now
be shown on a much
bigger preview inside
you work area similar to
what is shown below.
Step 5
Notice the properties of
the image like the file
name, the image size (in
pixels), and the file size
found on the bottom of
the preview
Step 6
Manipulate the image
using the tools on the
bottom.
a. HOME TAB
-add frame
-resize
-sharpen
-add filters and effects
Step 6
b. OBJECTS TAB
-place a wide variety of
images like texts,
shapes, and symbols
Step 6
b. CROP
-this is where various
tools can be found in
order to properly crop
an image to a desirable
size
Step 6
b. TOOLS
-includes other tools like
red eye correction, mole
removal, mosaic effect,
and brush tools.
Step 7
Click Save located on
the lower right of the
program. The Save As
dialog box will appear.
Save it in your activities
folder with the file name
[Link]. Check
the file size and see how
much space you saved.
I. BATCH EDIT
Step 1
Select the folder where
your photos are located,
then on the Preview
window, drag the photos
you want to be part of
the batch edit to the
work area.
Step 2
Use the tools on the right to
edit your photo. This is
similar to the options in edit
except the Crop and Tools
tab which are replaced by
the Filters ab. The Filters
tab is used to add a certain
filter that will apply to all
your photos
Step 3
Resize the picture so
that they do not exceed
800 pixels in width. Add
filters if you want
Step 4
Click Convert All button
found on the upper
right.
Step 5
The Save dialog box
will allow you to change
the location, the name of
the images, and the file
type.
Uploading,
Sharing, and
Image
Hosting
Step 1
Sign up for a
Photobucket account on
[Link]. Just
like Piktochart, you may
use your Google+ or
Facebook account to
automatically sign up
Step 2
Once your account is set
up and you are already
logged in, click the Start
Uploading
Step 3
A new page will load
allowing you to drag and
drop your photos, or to
choose them manually or
the entire folder to upload.
Select a folder, add a
password (optional), then
feel free to upload any
photos you have right then
Step 4
Once selected, a
progress bar will appear
indicating that the image
is uploading. This may
take a moment and will
depend on your internet
connection
Step 5
Once you are done, you
will see these indicators:
a. VIEW UPLOADS
-views photos you just
uploaded which also
grants you options to
share and edit them
individually
Step 5
Once you are done, you
will see these indicators:
b. SHARE ALBUM
-shares everything you
just uploaded plus the
other contents of your
specified folder
Step 5
Once you are done, you
will see these indicators:
c. EDIT PHOTOS
-uses Photobucket’s
photo editing tools to
manipulate your image
Step 5
Once you are done, you
will see these indicators:
c. EDIT PHOTOS
-uses Photobucket’s
photo editing tools to
manipulate your image
Step 6
Let us assume you will
share a photo
individually. To do this,
click on View Uploads
then once the page
loads, click the photo
you want to share.
Step 7
On the top of the image,
you will see the
following options:
A- shares your photo directly to social media and blogging platforms
B- gives you a variety of link codes for HTML, Forum, 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 with the option to add a custom message
