Imaging and Design for Online Environment

Image- a representation of the external form of a person or thing in art. It may be 2-

dimensional(photograph) or 3-dimensional (statue or hologram) and may be captured by
optical devices such as cameras, mirrors, lenses, etc.

Graphics – are visual images or designs on some surface, such as a wall, canvas, screen, paper or
stone to inform, illustrate or entertain.

Examples: photographs, drawings, line art, graphs, diagrams, typography, numbers, symbols, etc.

Sources of Photos and Graphics

1. Personal and Professional Photos

are photos taken by amateur or professional photographers using a digital camera.

2. Scanned Images
are those that you transfer from printed photos and graphics using scanning devices which you
can transfer to your computer for further modification and improvement.

3. Stock Photo Library

are several photographs and created images that are available for sale. They come in CD/DVD
format and many of these images are royalty-free, which means that they can be used without
additional fees.

4. Online Stock Photos

are found in the World Wide Web. The WWW is now the dominant source of photos and
graphics around the globe because of the widely available choices and reasonable prices.

Image File Formats

are means of storing and organizing digital images, photos and illustrations. Image file formats
may be classified into two: raster image files and vector image files.

A. Raster Image Files B. Vector Image or Vector Graphics Files

raster image or bitmap image is a means of representing
digital images in bits information for storage, which translates
into pixels when viewed on the screen. Majority of raster files
are lossy. A pixel is the smallest information of an image.
Images using pixels are usually represented in dots or squares
that are arranged and added together to form the picture.
Raster format is the common formats you will encounter in the
Internet.
Example: JPEG, GIF, PNG files.
.bmp Bitmap Image File is an image file format developed and
used on Microsoft Windows environment and is stored in a
graphics file format called device-independent bitmap (DIB)
and has a file extension of .bmp or .dib. Not a common
format on teh World Wide Web because of its large file size.
.gif Graphical Interchange Format is very popular on the web
because of its portability (small sifile size) and support for
animation. It supports only 8-bits per pixel color scheme.
.jpg Joint Photographic Experts Group is a common method for
photographic images as well as transmission of photos on
the Web since it supports 24-bits per pixel color scheme.
Many digital camera store photographs in JPEG format and
Are lossless files created using mathematical
geometric equations to represent images in digital
computer graphics. It has the advantage of retaining
its quality at any desired image size, unlike raster
images that appear pixilated when displayed in
expanded image sizes. It is the preferred format for
those who desire quality prints and display of images.
Example: PDF, Encapsulated Postcript, Scalable
Vector Graphics and Windows Metafile.
.ai Adobe Illustrator is the file extension for graphics
created using adobe Illustrator which is created
using paths and lines connected by points instead
of bitmaps, which may include objects, colors and
text.
.drw Drawing File is a generic drawing created and
stored in a vector format that uses lines or paths to
represent images. These images are output of the
following programs, Appleworks, Microsoft
Picture It, CorelDraw and Corel Paint Shop Pro.
.dxf Drawing Exchange Format is a drawing developed
and introduces by Autodesk the maker of AutoCad
and is used for computer-aided design(CAD)
vector images.
 it’s not ideal for use in line art.
.png Portable Network Graphic is a free, open-source bitmap
image format to improve on GIF which has a small file but
can handle more colors since it supports 24-bit per pixel
color scheme and supports true employs a lossless
compression, meaning it does not lose the quality of the
image despite successive editing.
.psd Photoshop Document is a native file format for Adobe
Photoshop, and since many are using this program to create
images, it is very popular. Photoshop has the ability to read
all of the above formats and edit them.
.ps PostScript is a page description language (PDL)
developed by Adobe, basically a language for
printing documents on laser printers and image
setters(high resolution printers) used to produce
camera ready copies.
.svg Scalable Vector Graphics(SVG) is the most
common vector graphic format on the internet; It
was developed by The World Wide Web
Consortium (W3C) to display vector graphics. It is
an open format and can be opened by Adobe,
Corel and open graphics programs.

Other File Formats include TIFF(Tagged Image File Format), RAW (Raw Image Format),
GIF (Graphics Interchange Format), and the PSD(Photoshop Document).

Basic Principles of Graphics and Layout

Layout – is part of graphic design that deals in the arrangement of visual elements on a page. A
good layout should have a balanced make up and alignment of elements.

Balance- it is the visual weigh of objects, texture, colors, and space is evenly distributed on
the screen.
Symmetrical - a layout where there are equal weight of elements on both sides of the page.

Asymmetrical - a layout where there is an artistic and different intensity on one side of the page.

 Emphasis – an area in the design that may appear different in size, texture, shape or color to
attract the viewer’s attention. There should be one point of interest in a page.
 Movement – how the eye moves through the composition leading the attention of the viewer
from one aspect to another.
 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.
 Proportion – visual elements create a sense of unity where they relate well with one another.
 Variety – this uses several design elements to draw a viewer’s attention.

Examples

Balance Emphasis Movement Pattern Repetition Rhythm Proportion

Variety
 Infographics (Information graphics) 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.
An effective infographic grabs your attention and keeps it just long enough to
deliver an important message or teach you important information.

Principles in Creating Infographics

1. Be Unique - make it engaging and memorable with unique twist on something that everyone
can relate to and can capture the audiences’ attention.
2. Be Simple - don’t throw in so much detail and extraneous information, people will probably
going to turn away or click somewhere else because it looks too complicated to be worth
their time.
3. Be Creative and Bold it’s important to make sure that your main message is bold and obvious.
It is your key to grabbing attention quickly and getting your message across with effective
info-graphics.
4. Less is More keeping your text minimal will most likely produce more impact than a page full
of words. The goal is to entice audience to stop scrolling and look at your info-graphic.An
effective image will grab the attention of the audience with something as simple as an
effectively displayed word that makes them stop and read the important information.
5. The fortunate is in the forwarding most important thing you want from an effective
infographic is a simple way to people to share it with their friends. Be sure to include links
reminding people that they want their friends to enjoy the information they have just
found.

Creating Infographics using Piktochart

1. Create a Piktochart account by going to www.piktochart.com and click sign up on the upper
right corner of the page.
2. Fill up the information form; alternatively, you can connect with Google+ or Facebook.
3. Once you have created an account and logged in, select a template for your infographic. Since
your data relates to marketing or sales, simply hover over the Presenta Board theme under
Free Themes then select Create.
4. The Piktochart editor will open. The Presenta Board theme consists of three blocks(parts).
Select the blocks and input the information as you see fit.
5. 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 uploading images
 Background- allows changing the background of a selected block
 Text- allows inserting text with the option to add text frames
 Styles-allows modifying the color scheme
 Tools- allows to create charts (similar to PowerPoint), maps, and videos.
6. Save your work, click on Save. To save it in your computer click Download.

Principles of Basic Techniques of Image Manipulation

Most of the time, we just capture an image and upload it on our

Facebook account and let it does the rest by formatting our image to best fit the standards set by
Facebook. Personal website do not necessarily have to downsize the file size, but if you have a
wider target audience, you need to make the 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.
3. Caption it. Remember to put a caption on images whenever possible. If it is not related to
the web page, then remove it.