Lesson 6

Imaging and Design for

Online Environment
 Basic Principle of
Graphics and Layout
• Balance
• Emphasis
• Movement
• Pattern, repetition and rhythm
• Proportion
• Variety
• Balance is the visual weight of object,
texture colors, and space is evenly
distributed on the screen.
• Emphasis is an area in the design that may
appear different in size, texture, shape or
color to attract the viewer's attention.
• Movement is where visual elements guide
the viewer's eyes around the screen.
• Pattern, repetition and rhythm are the
repeating visual element on an image or
layout to create unity in the layout or image.
rhythm is achieved when visual elements
create a sense of organized movement.
• Proportion is where visual elements create a
sense of unity where they relate well with one
another.
• Variety uses several design elements to draw
a viewer's attention.
Information graphics or infographics are
graphical visual representations of information,
data or knowledge intended to present
information quickly and clearly. They are used to
represents information, statistical data, or
knowledge in a graphical manner usually done in
a creative way to attract the viewers attention.
They make complex data become more visually
appealing to an average user.
One way of creating info graphics is using the
website piktochart.com
Piktochart is an easy infographic design
application that requires very little effort to
produce beautiful, high quality graphics.
Steps on how to make an account for piktochart.com:
• Create a piktochart account by going to
www.piktochart.com and click sign up on the upper
right corner of the page.
• Fill up the information on the sign up page ;
alternatively, you can connect with google+ and
facebook.
• Once you have created an account and logged in,
select a template for your infographic. since your
date relates to marketing or sales, simply hover over
the presenta board theme under free themes then
select create.
• The piktochart editor will open ( may take a while to load
depending on your internet connection). the presenta
board theme consists of three blocks (parts). select the
blocks and input the information as you see fit.
• While editing a block, you can use the various tools on
the left side of the page:
Graphics allows you to insert lines, shapes, icons and
even photos
Uploads allows you to upload images for your infographic
text allows you to INSert text to your infographic with the
option to add text frames
Styles allow you to modify the color scheme of
your infographic
Tools allow you to create charts (similar to the
ones in powerpoint, maps (for demographics)
and videos.
Photoscape is a good online application tool
used in creating and manipulating images
intended for beginners and advanced users in
creating websites.

Features of Photoscape of creating web content.

• Viewer - is a picture viewer with features the
same with most image viewers 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 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 picture for printing
• Splitter - divides a single photo into multiple
parts
• Screen Capture - captured the screen and saves it
• Color Picker - grabs a pixel from your screen to be
used in editing
• Raw Converter - coverts raw images (uncompressed
images usually from digital camera) to jpeg
• Rename - allows you to remain a batch of photos
• Paper Print - useful tool for printing your own calendars,
sheets, lined paper, graph paper, etc.
on photoscape's main screen, you will see the many
features it has that you can use for creating web
content as follows:
❑Editors edit
For this exercise, take a photo from your camera. it can
be a selfie, a groupie or a random photo. make sure that
you are he one who took it and that it is worth spending
time with editing. once you have it ready, place it in your
computer in a directory most convenient to you.
• Open photoscape then choose editor.
• choose the folder where the image you want to
manipulate is located using the file explorer on the
upper left.
• Once you have selected the folder, you will see a
preview of all the images found on that folder at the
bottom of the file explorer
• From the preview, select the image you want to
use. the image will now be shown on a much
bigger preview inside your work area
• Once you have selected the folder, you will see
a preview of all the images found on that folder
at the bottom of the file explorer.
• 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:
• Manipulate the image using the tools on the bottom.
home tab - this is where you can add a frame, resize,
sharpen and add filters and effects to your image.
➢ Home tab – is where to add frame, resize, sharpen
and add filters and effects to the image.
➢ Objects tab - this is where you can place a wide
variety of images like texts, shapes and symbols.
➢ Crop - this where various tools can be found in
order to properly crop an image to desirable size.
➢ Tools - includes other tools like red eve correction,
mole removal, mosaic effect, and brush tools. for
more information about the tool, simply click it and
a tip will be displayed describing how to use it.
• Click save located to the lower right of the program. the
save as dialog box will appear. save it in your activities folder
with the file name editorexer.jpg. check the file size and see
how much space you saved.
❑Batch Edit is one of the most useful tools when trying to easily
manipulate all images at the same time.
• 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 are.
• 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 filters tab.
• Resize the pictures so that they do not exceed 800 pixels in
width. Add filters if you want.
• Click on the ALL button found on the upper
right.
• The SAVE dialog box will appear that will allow
you o change the location, the name of the
images and file type.
Editing tips:
double-click a text to edit the content
when working with objects, the toolbox on top
of the topmost block will allow you to
manipulate it. this is similar to working with
objects in powerpoint where you can arrange
then working with chars, double-click the chart to open
the datasheet editor.
you may rename the title of your infographic on the top
toolbar.
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.
 Inserting, Uploading and Sharing Photos
over the Internet
Photobucket is image and videohosting website, web
services suite, and online community dedicated to
preserving and sharing the entire photo and video
lifecycle. It hosts more than 10 billion images from 100
million registered members. Its headquarters are in
Denver with regional offices in Chicago, Los Angeles,
New York and San Francisco. It was founded in 2003 by
Alex Welch and Darren Crystal and received funding
from Trinity Ventures.
Steps in Sharing Photos with Photobucket
• First, sign up for a Photobucket account on
photobucket.com
• Once your account is set up and you are already
logged in, click the Start Uploading button.
• 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.
• Once selected, a progress bar will appear indicating
that the image is uploading.
• Once you are done, the following indicators will be
appear:
➢ 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.
• 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.
• 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,
Forums, Emails, IM 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.

You may choose to share your photo to your friends

on Facebook.