Imaging and design

1. LESSON 6- IMAGING AND
DESIGN FOR ONLINE
ENVIRONMENT

2. BASIC PRINCIPLES OF
GRAPHICS AND LAYOUT
1. BALANCE-visual weight of objects, texture,
colors and space is evenly distributed on the
screen
2. EMPHASIS- An area in the design that may
appear different in size, texture, shape or color to
attract the viewers’ attention.
Example of balance and emphasis

3. 3. MOVEMENT-Visual elements
guide the viewer’s eye around
the screen
The bright color which stands out
in this picture helps draw the
viewer’s eye.

4. 4. PATTERN, REPETITION AND
RHYTHM-these are the
repeating visual element on an
image or layout to create unity in
the layout or image.
The image uses pattern and repetition which create
harmony for the entire image.

5. 5.PROPORTION –visual
elements create a sense of unity
where they relate well with one
another.
This web page shows how the font size of headers is
proportional to the size of its content. This is done so that the
viewer can easily see what the article is all about.

6. 6. VARIETY- this uses several
design elements to draw a
viewer’s attention.
Bing uses a combination of text and images to make the site
more appealing but not distracting from the site’s purpose.

7. INFOGRAPHICS
 INFORMATION GRAPHICS or
INFOGRAPHICS- use to represent
information, statistical data or
knowledge in a graphical manner
usually done in a creative way to
attract the viewer’s attention.
 Make complex data more visually
appealing to an average user.

8. You can create an infographic
using a PIKTOCHART.COM
 A free online app that allows you to
create your own infographic

9. TOOLS USED FOR EDITING
(found on the left side of the
page)
 A. graphics- allows you to insert lines,
shapes, icons and even photos.
 B. uploads- allows you to upload images for
your infographic.
 C. background- changes the background of a
selected block.
 D. text- allows you to insert text to your
infographic with the option to add text frames.
 E. styles- allows you to modify the color
scheme of your infographic.
 F. tools – allows you to create charts maps
and videos.

10. ONLINE IMAGE FORMATS
NAME FILE
EXTENSIO
N
USE SUPPORTS
TRANSPAR
ENCY
SUPPORTS
ANIMATION
1. JOINT
PHOTOGRA
PHICS
EXPERT
GROUPS
.jpeg or .jpg Real-life
photographs
, high
compression
no no
2.GRAPHIC
S
INTERCHA
NGE
FORMAT
.gif Computer-
generated
graphics
Yes yes
3.PORTABL
E
NETWORK
GRAPHICS
.png Screenshots
, high
compatibility
Yes no

11. There are plenty of other image
file formats used in the web but
most of the time you will be using
these three because of the
compatibility with all major web
browsers.

12. PRINCIPLES AND BASIC
TECHNIQUES OF IMAGE
MANIPULATION
 EDIT YOUR IMAGES
 STRIKE THE BALANCE BETWEEN
THE RIGHT IMAGE QUALITY AND
TIME FOR THE PAGE TO LOAD
THESE IMAGES.

13. PRINCIPLES AND BASIC
TECHNIQUES OF IMAGE
MANIPULATION
 1. Choose the right file format-
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.
 3.Caption it- Remember to put a
caption on images whenever
possible.

14. PHOTOSCAPE-a free image
manipulation tool that contains many
features to help you in creating
images for websites (photo editing
software.)

15. INSERTING, UPLOADING, AND
SHARING PHOTOS OVER THE
INTERNET
IMAGE HOSTS – are websites
specializing in storing photographs.
These photographs can easily be
embedded to a web page or website.