IMAGING AND DESIGN

FOR THE ONLINE

ENVIRONMENT
CHAPTER 3
Title and Content Layout with List
The birth of computer graphics that started in the
field of medicine and engineering has paved its way
into the mainstream use of technology. Almost every
aspect of the community today needs computer or
technology intervention to deliver whatever
objectives it had established. Since its development
and integration with gaming and internet, the
principles that backed graphics designed have also
evolved.
Key Questions
1. What are the basic principles of graphics and design?
2. What are the elements that should be emphasized in
creating infographics?
3. What are the basic principles in image manipulation?
4. How can you effectively create images with text and other
graphic elements?
5. What are the processes to be taken in sharing images
online?
PRINCIPLES OF GRAPHICS AND DESIGN
Across disciplines, the following principles are followed in order
to standardize image creation and manipulation using any
graphic software. It will help you create layouts and design web
pages compliant the protocols.
1. Balance. It describes the placement of elements of equal weight on the
page. The three types of balance are symmetrical, asymmetrical, and
radial
2. Movement. It describes the flow of elements on the page.
3. Unity. It is the sense of oneness of the elements that creates balance
and harmony.
4. Repetition. It describes the consistent and balanced repetition of a
design or element.
5. Proximity. It describes the organization and relationship of
elements included in the design.
6. Contrast. It is the combination of opposing characteristics of an
element like color, size, thickness, etc. it allows emphasis on key
elements.
7. Whitespace. It is the negative space or large margins that allow
your design to breathe within the elements.
INFOGRAPHIC
Infographic, also know as data visualization, is
defined by Oxford Dictionary as a visual image such
as a chart or diagram that is used to explain
information or data.
Infographic makes the data easily understood at a
glance and quickly communicates a message
especially to simplify the presentation of large
amounts of data. It is also used to easily compare
data patterns and relationships.
Like designing for a desktop publishing whether for
the web or not, there are also important elements
that should be considered in designing an
infographic.
When searching the net, you can find a lot of principles and
guidelines on how to create an infographic.
1. Thesis/Story. The subject and the main idea of your infographic
must be clear.
2. Data. Data must be well-organized and supports the main idea.
3. Simplicity (color, style, and illustrations). You must be able to
create your own color palette; your style must be able to attract
readers so as not to make your infographic full of text. Do no use
stock photos.
4. Sources.You must cite your sources so as to give credibility to
your data.
5. Branding/Shareability.Your infographics must be creative and
innovative.
The following websites will help you create free infographic:
1. http://piktochart.com/
2. https://www.canva.com/create/infographics/
3. https://venngage.com/
4. https://infogr.am/
IMAGE FILE FORMATS
Since the introduction of graphics in the web, file formats
also became an important aspect in the design stage. The
most common file formats are JPEG, GIF, BMP, TIFF, and
PNG.
JPEG
JPEG or Joint Photographic Experts Group is
the most popular image format used in the
web. JPEG files are very lossy files where
much of the information about the image is
lost from the original state to keep the image
file size small.
JPEG files are used mostly by
photographers, artist, graphic designers,
medical imaging specialists, art historians,
and other groups because image quality and
color fidelity is important in the field.
GIF
GIF or Graphics Interchange Format is limited
to the 8-bit palette with only 256 colors. This
format was popularized in the 1980s as an
efficient means to transmit images across
data networks and in the web since it uses the
basic form of file compression.
GIF is best used for diagrams, cartoons, and
logos which use few colors and is the chosen
format for animation effects.
BMP
BMP or Windows Bitmap file is the
image file used in the Microsoft
Windows operating system. It is an
uncompressed file and is made up of
millions of dots called pixel, with
different colors and arrangements. It is
called raster image.
BMP file is not usually used on the web
since it takes up a big space in the
memory and does not scale well.
TIFF
TIFF or Tagged Image File Format is a file format created
originally by Aldus Corporation for desktop publishing. TIFF is
supported by many imaging programs and is a good format
for graphic storage, processing, and printing. This makes TIFF
the superior raster image format. By the year 2009, its
control was transferred to Adobe Systems.
TIFF is considered as a high-quality image format, where all
color and date information are stored. However, it produces
a very large file size and takes huge disk consumption.
PNG
PNG or Portable Network Graphic is an image format
developed by a group of graphic software developers
as a nonproprietary alternative to the GIF format.
This format supports full-color images and used for
photographic images. However, the resulting file is
much larger than with lossy JPEG compression. PNG
does best with line art, text, and logos.
PRINCIPLES AND BASIC TECHNIQUES OF
IMAGE MANIPULATION
There are many available programs on
the web for instant image manipulation
and other editing techniques. However,
whether you are using free software or
purchased one, there are basic
techniques common to all image editing
programs.
1. Cropping. It is process of removing
unwanted parts of the image focusing
only on the subject. When cropping, one
must always follow the rule of thirds to
organize the image composition.
2. Color Balance. In any image manipulating program, this
command will allow you to make changes in the mixture
of colors in an image.
3. Adjusting the Brightness and Contrast. This command is the most
basic when adjusting the image tone (highlights, shadows, and
midtones)
4. Compression and Resizing. Compressing and resizing an
image is an important aspect in image manipulation. Images
to be uploaded on the web must be of the standard
resolution of 72 dpi (dots per inch) to maintain its image file
size of 30-50 KB. If the image is for printing, set the
maximum resolution to 300 dpi and set its physical printing
size in inches.
5. Color Blending. Use the different special effects buttons
available in the different image editing software. You can
combine colors and commands that will give you a more
dynamic image result.
6. Combining Multiple Images. Compositions must be
planned and conceptualized first so that you will be able to
render the best image and message possible.
ONLINE GRAPHICS SOFTWARE
There is not doubt that Adobe Photoshop came to be the
standard of photo editing since it started in 1990s. However,
there are a lot of image editing sites on the net that also offer
that basic and advanced techniques that we can do with
other professional software.
Based on TechRadar, the following are the list of websites
that you can try as beginners in the field or for professionals
who would like to try other software.
1. Picasa
It is Googles free desktop image editing program. It can be
downloaded and help you manage your photos and upload them to an
online album.
2. Fotor
It is a multiplatform photo editing software. It offers a wide range of
effects and tools for editing images.
3. Pixlr.
It is also a multiplatform image editing program. You can choose
between the editor for editing images or creating an original image
right through the browser. The tools are almost similar to Photoshop
that makes it easier for you to manipulate.
Other image editing suite that can be
downloaded for free:
1. Photoscape
2. Serif PhotoPlus Starter Edition
3. GIMP
4. Paint.Net
IMAGE HOSTING SITES
Images also can be shared online through the
different web hosting sites that are free. You just
need to create a freed account, and you will be able
to post, organize, and share your photos. The
following is a lists of different hosting sites that you
can try.
1. Imgur.

It is a free image hosting site wherein you can upload

images from your computer. You can also edit your
images before posting it online.
It is an image social networking site. You can save and
manage your photos for it offers a 1 TB storage
capacity in your account.
It is almost similar features with Flickr as you can
upload and share your images over the internet
through your account.
It is an online image-hosting service that also allows
you to upload and store an unlimited number of
photos online. You can create as many albums, and it
also offers professional editing of images.
It is an online image-hosting site that does not only
allow you to upload image but also lets you create
and online image website for your images.
3D Graphics and Printing
Images that appear on a screen like a computer is said to be two-
dimensional since it has length and width. But if you watch the movie
Toy Story and play a computer game, there is another perspective that
you can see. Give developers and animators have developed the
perspective of depth as 3D or three-dimensional.
This innovation did not halt on the screens of our computers because
today, we have the 3D printing that allows images come to life using a
3D printer. Read more about these by searching the following topics
over the internet.
1. Advances in 3D printing:
http://www.digitalartsonline.co.uk/guides/3d-printing/
2. The first 3D printing pen: http://the3doodler.com/
Digital Arts
Since its breakthrough in the 1970s, computer graphics and
imaging have paved the way for the most popular programs
that we have today. Whether it is applied in astronomy,
medicine, education, entertainment, and military, computer
graphics have been very beneficial in the history of
computing.
However, there are also disadvantages that goes along with.
According to Joseph Arrington in his article The Advantages
and Disadvantages of Digital Art, there are several notes
that can be seen in this field.
 It never changes. Digital arts is not threatened by the
physical environment; however, it can also be destroyed in
one key press.
It can be replicated with precision. For digital art, what you
see is what you get. Its replicate is not a copy; it is a clone of
the original.
Almost limitless possibilities. There is a wide range of colors
that can be chosen from by a digital artist; however, a
photographic precision is required.
Tools of dreams are used. There are a lot of tools that
represent real world instruments in every software that
allow the artist to make the most of his imagination.
Concepts at a Glance
1. Balance, movement, unity, repetition, proximity, contrast,
and whitespace compose the basic principle of graphics
and design.
2. Infographic is also known as data visualization.
3. For infographic to be effective, it must have the following:
thesis, well-organized data, simplicity in color, style, and
vivid in illustrations. It must contain reliable sources and
must be creative for public sharing.
4. Common image file formats that are used for the web are
JPEG, GIF, BMP, TIFF, and PNG.
5. In any image editing programs, the following
techniques are applied; cropping, adjusting the color
balance, brightness and contrast, compression and
resizing of the image, color blending, and combining
multiple images.
6. Computer graphics can be generated and edited using
online or offline image editing program like Picasa,
Fotor, Pixlr, Photoscape, GIMP, Paint.Net, and Serif
PhotoPlus.
7. Images can be shared online using the different image
hosting sites like Imgur, Flickr, Photobucket, SlickPic,
and Zenfolio.
Thank you!