LESSON 6: IMAGING AND DESIGNING

FOR ONLINE ENVIRONMENT

 Basic Principles of Infographics Creating and
Graphics and Layout Manipulating Images

CONTENTS
 BASIC PRINCIPLES OF GRAPHICS AND LAYOUT

1. Balance - the visual weight of objects, texture, colors, and space is

evenly distributed on the screen. When visiting a website, check if one
side holds the same amount of weight on the other. The colors should
also have a similar visual weight.
2. Emphasis - area in the design that may appear different in size,
texture, shape, or color to attract the viewer's attention .
3. Movement - visual element that guides the viewer's eyes around
the screen
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT

4.Pattern, Repetition, and

Rhythm - the repeating visual
element in an image or layout to
create unity in the layout or image.
Rhythm is achieved when visual
elements create a sense of
organized movement.
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT

5.Proportion-
visual element that
creates a sense of
unity where they
relate well with
one another.
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT

6.Variety- Uses
several design
elements to
draw a viewer’s
attention.
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.
ONLINE IMAGE FILE FORMATS
Unlike images that are found in our computer, you have to consider that v website
images should be more compressed because data travels over the Internet and
everyone has a fast Internet connection. Consequently, we have to use compres
images on our websites. Likewise, even though a wide variety of websites already
support high-definition (HD) photos, you do not have to use HD all the time. In fa
most of the time, you do not really have to. The following are common image file
formats used on the web. All of them are already discussed in Lesson 3. Here, we
will take a look at their use in the web.
Name File Use Supports Supports
Extension Transparenc Animation
y
1. Joint .jpeg or .jpg Real-life No No
Photographic photographs,
Experts high
Group compression

2. Graphic .gif Computer- Yes Yes

Interchange generated
Format graphics

3. Portable .png Screenshots, Yes Yes

Network high
Graphics compatibility
PRINCIPLES AND BASIC TECHNIQUES OF IMAGE MANIPULATION
Most of the time, we just capture an image and upload it on our Facebook account. From there,
Facebook does the rest by formatting our image to best fit the standards set by Facebook. But once
you create your own website, you will have to edit your images It seems a simple task but you have to
strike the balance between the 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 necessary changes. Here are some 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. 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, it is not always wise to make our image big, most especially in a website. 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 web
page, then remove it
CREATING AND MANIPULATING IMAGES USING PHOTOSCAPE
You can visit the website, this is an editing website that focuses on photography editing. It
contains the various features that you can use for creating web content.
http://www.photoscape.org./ps/main/index.php
 GROUP ACTIVITY: PHOTO MANIPULATION
DIRECTIONS: With your current group, edit any photos and use editing apps to
modify them. See examples in the next slides:
Rubrics
Content The photo achieved the
theme that was given 25

Creativity The photo presents an

outstanding creation 45

Organization The picture illustrates

organized patterns/ 15
rhythmic
Teamwork Each members
collaborates with the 15
idea
TOTAL 100
PHOTO MANIPULATION (MADE IN PICSART)

After
PHOTO MANIPULATION (MADE IN PICSART)

Y2K MOON X GALAXY

PHOTO MANIPULATION (MADE IN PICSART)

OVERLAY CYBERPUNK
PHOTO MANIPULATION (MADE IN PICSART)

FAIRYCORE MASK