IMAGING AND TEXT

DESIGN
EMPOWERMENT TECHNOLOGY
IMAGING AND TEXT DESIGN
Creating a web page is like creating a work
of art. There are certain things that you need to
consider in order to get your message across. In
the previous lesson, you learned how to create
an effective PowerPoint Presentation. Some of
those tips can help you in graphics and layout
design.
ACTIVITY
 KEY
1. K
2. G 1. I
3. J 2. O 1. E
4. B 3. L 2. F
5. M 4. A 3. H
5. N 4. C
5. D
 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 – An area in the design that may
appear different in size, texture, shape, or color
to attract the viewers attention.
3. Movement – Visual elements guide the
viewer’s eye around the screen.
4. Pattern, Repetition, and Rhythm – These 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.
5. Proportion – Visual elements create a sense of
unity where they relate with one another.
6. Variety – This uses several design elements to
draw a viewer’s attention.
 ONLINE IMAGE FILE FORMATS
Unlike images that are found in our computer,
you have to consider that website images should
be more compressed because data travels over
the internet and not everyone has a fast internet
connection. Consequently, we have to use
compressed 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 fact, most of the time, you do not even have
to.

Here are common image file formats used on the

internet.
1. Joint Photographic Experts Group (.jpeg
or .jpg).
- Use for real-life photographs, high
compression.
-Not supports transparency and animations.
2. Graphics Interchange Format (.gif)
- Use for computer-generated graphics.
-Supports transparency and animations.
3. Portable Network Graphics (.png)
- Use for screenshots, high compatibility.
- Supports transparency but not supports
animation.
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 their compatibility with
all major web browsers.
When inserting text to a web page, you can
simply copy a text to your HTML editor, or you
can upload it on a website as a PDF file. Most
browsers supports “add-ons” so that you can
open PDF files without leaving the browser.
 PRINCIPLES AND BASIC TECHNIQUES OF
IMAGE MANIPULATION

Most of the time, we just capture an image and

upload it in our Facebook account. From there,
Facebook does the rest by formatting our image
to best fit the standards set by Facebook. But
once you run 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 images. But if you have a wider
target audience, you need to make the necessary
changes.
 TIPS TO HELP YOU EDIT IMAGE 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 you
have a million megapixels, it will not display
everything. Thus, it is not wise to make our
image big, most specially in a website. Know
how much space you want the image consume.
3. Caption it –remember to put caption on
images whenever possible. If it is not related to
the web page, then remove it.
 CREATE AND MANIPULATE IMAGES
USING PHOTOSCAPE
There are plenty of image manipulation tools but
if you are going to create a website you have to
use the one which is efficient. PhotoScape is a
good tool because it is feasible for beginners and
advance users alike.
 Features of Photoscape
1. Viewer
as the name implies, is a picture viewer
with features the same with most image
viewers like changing image orientation.
 Features of Photoscape
2. Editor
Alters the appearance of a single image.

3. Batch Editor
Alters the appearance of multiple
images.
 Features of Photoscape
4. Page
arranges several photos to create a
single one; similar to mosaic.

5. Combine
links several images together to form a
bigger image.
 Features of Photoscape
6. Animated GIF
allows you to create an animated GIF
from several pictures.

7. Print
readies pictures for printing.
 Features of Photoscape
8. Splitter
divides a single photo into multiple
parts.

9. Screen Capture
captures the screen and saves it.
 Features of Photoscape
10. Color Picker
grabs a pixel from your screen to be
used in editing.

11. Raw Converter

converts RAW images
(uncompressed images from digital
camera) to JPEG.
 Features of Photoscape
12. Rename
allows you to rename a batch of photos.

13. Paper Print

useful tool for printing your own
calendars, sheets, lined paper, graph paper,
etc.
 PHOTOSCAPE EDITOR AND BATCH
EDIT
Editor
For this, let’s take a photo. It can be a selfie, a
groupie, or a random photo. Make sure that you
are the one who took it and that it is worth
spending time with editing. Once you have it
ready, place it on your computer in a directory
most convenient to you.
 Exploration
Using one of your group members photo create a
photo mosaic of it using your selfies or groupies,
your output will be a tarpapel and put your art
work on a ¼ illustration board.

Output: Photo Mosaic Art

 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.