Web Graphics

Group 4

Outline
Introduction
Purpose
Implementation
- HTML tags
- CSS
- Creating Graphics (images and formats),
graphic tools
- SVG
Types of Graphics
Guidelines for using graphics in HTML pages
Advantages and Disadvantage

Introduction
What are Web graphics?
visual representations used on websites to
enhance the representation of an idea or
feeling in order to reach the website user
(w3c)
Graphic designing is a creative process that
combines art and technology to
communicate ideas

Intro continued
- Examples of graphic designing include
- creating interlaced and transparent
images
- creating drop down shadows
- creating gradient and pattern fills
- creating 3D buttons

Purpose of graphics on
websites
enhance the look and feel of the website
Create a visual structure of information and
links on the page
Provide a way of communicating or
explaining ideas visually

Implementation
HTML and CSS
e.g. using the <i></i> to present text in
italics
using the text-shadow CSS property to
create drop down shadows.

Most graphics are in the form of images and so to

incorporate them into a web pages we can use;
- the <img> tag (HTML)
- CSS statements like, body{background- image:
imagename.extension}

Creating Graphics
can be created using graphic tools such as;
- Adobe Photoshop
- Paint shop Pro
- Colleral draw
- Gimp and so on
NOTE: Different formats for created
graphics have different implications on the
final output of the graphic. An elaboration
follows

Creating Graphics
continued

1.

2.

Formats for created image graphics

GIF: Good for line drawings or images
mostly composed of flat colors. (it is
limited to 256 color palette.)
PNG: Good for images that require a fully
transparent background.

3.

JPEG: good for images that contain

continuous color tones e.g. gradients. Such
images retain high images qualities and
achieve smaller qualities when saved as
JPEG.

Types of Graphics
Raster Graphics/ bit-mapped graphics
represent graphical images as a pattern of
dots, called a bit map.
Raster formats break an image down into
rows and columns of dots, called picture
elements or pixels, for short
The pixel density, known as the resolution,
determines how sharply the image appears
often expressed in dots per inch (dpi) or simply by
the number of rows and columns, such as 800 by
600

Type of Graphics
Vector Graphics/ object-oriented
graphics
images are represented as mathematical
formulas that define the shape of all objects
in the image.
Vector graphics look the same, even when
you scale them to different sizes. Raster
graphics tend to become ragged-looking
when you change their size.

Guidelines of using
Graphics
1.

2.

should be inline with the purpose,

organization, and style of the page. Avoid
using graphics with large file sizes that add
to the load time of the pages.
They should help guide the viewers focus
to the important content on the page

4.

5.

Avoid repetitive use of overly bright or

potentially obnoxious images.
Avoid use of graphic to convey textual
content information.
search engines cant index such information

6.

7.

Make sure there is efficient contrast

between text and the background.
Be sure to provide a textual equivalent
alternatives for graphic content e.g.
provide descriptions to graphic images in
contextual format.

Advantages of graphics
Enhance the look and feel of a website
They create a visual structure of information
They provide a way of communicating or
explaining ideas visually

Disadvantages
If graphics are not used correctly
They end up diverting the attention of
users of from important information
They increase the load time of pages
They compromise the visibility of text

Disadvantage continu
It

is time consuming to make

graphics i.e. decisions must
be made in advance for layout
color, material e.t.c
Its technical in nature.
Requires audience knowledge
to interpret or understand

THE END
Group 4
Bester Mangisoni (BIT/10/NE/006)
Zione Bwetu (BIT/10/NE/002)
Grant Makata (BIS/10/NE/011)
James Phiri (BIT/10/NE/017)