Chapter 6 - IMAGING & Design For Online Environment

IMAGING & DESIGN FOR ONLINE
ENVIRONMENT
OBJECTIVES
1. Understand the basic principles of graphics and layout
2. Create a simple infographics and layout;
3. Understand and use several file formats used on the web;
4. Easily manipulate images using a simple image editor; and
5. Upload and share images using photobucket.

BASIC PRINCIPLES OF GRAPHICS & LAYOUT
1. BALANCE – The visual weight of
objects, texture, colors, & space
is evenly distributed on the
screen.
2. EMPHASIS – An area in the

design that may appear
different is size, texture, shape
or color to attract the viewer’s
attention Figure 1. An Example page of balance and emphasis
3. MOVEMENT – Visual elements
guide the viewer’s eyes around
the screen
Figure 2. the age of a drawer leads the eye toward the

green frog , its bright color, which stands out in this picture,
also helps draw the viewers eyes.
4. PATTERN, REPETITION, AND
RHYTHM – These are the
repeating visual elements on an
image or layout to create unity in
the layout or image.
Figure 3. This image uses pattern and repetition which

create harmony for the entire image
5. PROPORTION – Visual elements
create a sense of unity where
they relate well with one another.
Figure 4. A screenshot of cnn.com web page

6. VARIETY – This uses several
design elements to draw a
viewer’s attention.
Figure 5. Bing uses a combination of text and images

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 viewers
attention.
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.
1. Create a PIKTOCHART account by
going to WWW.PIKTOCHART.COM
and click SIGN-UP on the upper
right corner of the page.
Figure 6. The Sign up button of piktochart is located on the

upper right of the screen.
2. Fill up the information on the
SIGN UP page; alternatively,
you can connect with google+
or facebook.
Figure 7. Piktochart’s Sign Up Page

3. Select a template for
your infographic.

4. The piktochart editor will
open. Select the blocks and
input the information as you
see fit.
Figure 8. The Piktochart Editor

5. Various tools on the left side of the page
a. Graphics : allows you to insert lines
b. Uploads : allows you to upload images for your infograohic
c. Background : Changes the back ground of a selected block

d. Text : allows you to insert text to your infographic with the
option to add text frames
a. Styles : allows you to modify the color scheme of your info graphic
b. Tools : allows you to create charts, maps and videos

EDITING TIPS:
 Double click the 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
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 a medium-sized
and the PNG file Type.
TOP 10 SITES ON THE WEB
1. Google.com
2. Youtube.com
3. Facebook.com
4. Baidu.com
5. Wikipedia.org
6. Qq.com
7. Taobao.com
8. Yahoo.com
9. Tmall.com
10. Amazon.com
TOP 10 SITES IN THE PHILIPPINES
1. Google.com
2. Youtube.com
3. Google.com.ph
4. abs-cbn.com
5. Facebook.com
6. Yahoo.com
7. Inquirer.net
8. Gmanetwork.com
9. Wikipedia.org
10. Lazada.com.ph
ONLINE IMAGE FILE FORMATS
Supports Supports
Name File Extension Use
Transparency Animation
Real Life
1. Joint Photographics
.jpeg or .jpg Photographics, No No
Expert Group
High Compression
Computer
2. Graphics
.gif Generated Yes Yes
Interchange Format
Graphics
3. Portable Network Screenshots, High

.png Yes No
Graphics Compatibility
ONLINE IMAGE FILE FORMATS
.JPEG .GIF .PNG
PRINCIPLES & BASIC TECHNIQUES OF IMAGE
MANIPULATION
1. Choose the right format
2. Choose the right image size
3. Caption it
CREATING & MANIPULATING IMAGES USING PHOTOSCAPE
CREATING & MANIPULATING IMAGES USING PHOTOSCAPE
PhotoScape
• is a graphics editing program,
developed by MOOII Tech, Korea.
The basic concept of PhotoScape is
'easy and fun', allowing users to
easily edit photographs taken from
their digital cameras or even mobile
phones.
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
appearance of a
single image
3. BATCH EDITOR
• Alters the
appearance of a
Multiple images
4. PAGE
• Arranges several
photos to create a
single one; similar
to a mosaic
5. COMBINE
• Alters the
appearance of a
single image
6. ANIMATED GIF
• Allows you to
create an animated
GIF from several
pictures
7. PRINT
• Readies pictures for
printing
8. SPLITTER
• Divides a single
photo into multiple
parts
9. SCREEN CAPTURE
• Captures the screen
and saves it
10. COLOR PICKER
• Grabs a pixel from
your screen to used
in editing
11. RAW CONVERTER
• Convert RAW images
to JPEG
12. RENAME
• Allows you to rename
a batch photos
13. PAPER PRINT
• Useful tool for
printing your own
calendars, sheets, line
paper, graph paper,
etc.
EDITOR EDIT
1. Open PhotoScape then
choose editor.
2. Choose the folder where
the image you want t
manipulate is located
using the file explorer on
the upper left.
Figure 11. Photoscape’s File Explorer

EDITOR EDIT
3. 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.
Figure 12. Preview of the images found

on the selected folder
EDITOR EDIT
4. 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.
Figure 12. Preview of the images found

on the selected folder
EDITOR EDIT
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.
Figure 13. Image properties found on

the bottom of the image preview
EDITOR EDIT
6. Manipulate the image using the tools on the bottom.
a. Home tab – This is where you can add frame, resize, sharpen, and add
filters and effects to your image.
EDITOR EDIT
b. Objects tab – this is where you can place a wide variety of images
like texts, shapes, and symbols

EDITOR EDIT
c. Crop – this where various tools can be found in order to properly
crop an image to a desirable size.

EDITOR EDIT
d. Tools – includes other
tools like red eye
correction, mole removal,
mosaic effect, and brush
tools.
7. Click save located on the
lower right of the
program, the save as
dialog box will appear.
EDITOR EDIT
7. Click save located on the
lower right of the
program, the save as
dialog box will appear.

BATCH EDIT
1. Select the folder where your photos

SHARING PHOTOS WITH PHOTOBUCKET
1. First Sign Up for a photobucket account on a photobucket.com. Just
like Piktochart you may use your goolge account or facebook to
automatically sign up.
2. Once your account is set up and you are already logged in, click the
Uploading button.
3. A new page will load allowing you to drag and drop you 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.
4. Click convert all
button found on the
upper right.
Figure 14. The tools used for batch editing found on

the right side of the program
CREATING & MANIPULATIONG
IMAGES USING PHOTOSCAPE
5. The dialog box will
appear that will
allow you to change
the location, the
name of the images,
and the file typ.
PHOTO BUCKET
•is an American image hosting and video hosting website, web

services suite, and online community.
•Photobucket hosts more than 10 billion images from 100
million registered members, who upload more than four million
images and videos per day from the Web and connected
digital devices.
1. First, sign up for a photo bucket account on photbucket.com. Just like
the piktochart, you may use your 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 or
to choose theme manually or the entire folder to upload. Select
folder, add a password (optional), then feel free to upload any
photos you have right then.
4. Once selected a
progress bar will
appear indicating
that the image is
uploading.
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
b. Share Album – shares everything you just uploaded plus the other
contents of your specified folder.
c. Edit photos – use photobuckets photo editing tools to manipulate
your image
6. Click View Uploads then once the page loads, click the photo you
want to share.
7. On the top of the image, you will see the following optons:
a. Shares your photo directly to social media and blogging platforms: Facebook, Twitter, Google+, Tumblr, and Pinterest.
b. Shares your emaige via email
c. Gives you a variety of links codes for HTML, Forums, Emails, Instant Messaging, and direct link.
d. Shares your image to social media sites with the option to add custom message.
e. Allows you to download your image

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.

Chapter 6 - IMAGING & Design For Online Environment

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 6 - IMAGING & Design For Online Environment

Uploaded by

Copyright:

Available Formats

IMAGING & DESIGN FOR ONLINE

2. Create a simple infographics and layout;

3. Understand and use several file formats used on the web;

4. Easily manipulate images using a simple image editor; and

5. Upload and share images using photobucket.

2. EMPHASIS – An area in the

Figure 2. the age of a drawer leads the eye toward the

Figure 3. This image uses pattern and repetition which

Figure 4. A screenshot of cnn.com web page

Figure 5. Bing uses a combination of text and images

Figure 6. The Sign up button of piktochart is located on the

Figure 7. Piktochart’s Sign Up Page

Figure 7. Piktochart’s Sign Up Page

Figure 8. The Piktochart Editor

c. Background : Changes the back ground of a selected block

option to add text frames

Figure 7. Piktochart’s Sign Up Page

3. Portable Network Screenshots, High

2. Choose the right image size

Figure 11. Photoscape’s File Explorer

Figure 12. Preview of the images found

Figure 12. Preview of the images found

Figure 13. Image properties found on

Figure 13. Image properties found on

Figure 13. Image properties found on

Figure 13. Image properties found on

Figure 13. Image properties found on

Figure 14. The tools used for batch editing found on

•is an American image hosting and video hosting website, web

b. Shares your emaige via email

e. Allows you to download your image

You might also like