Page 261 - Open Soource Technologies 304.indd

Unit 11: Graphics

• Explain how to creating and drawing images in graphics Notes

• Discuss dynamic generation of buttons
• Understand how to scaling the images
• Explain the colour handling

Introduction

The process and art of combining text and graphics and communicating an effective message in
the design of logos, graphics, brochures, newsletters, posters, signs, and any other type of visual
communication is the formal, short definition of graphic design. Today’s graphic designers often
use desktop publishing software and techniques to achieve their goals.

An image is a rectangle of pixels that have various colours. Colours are identified by their
position in the palette, an array of colors. Each entry in the palette has three separate colour
values—one for red, one for green, and one for blue. Each value ranges from 0 (this colour not
present) to 255 (this colour at full intensity).

Image files are rarely a straightforward dump of the pixels and the palette. Instead, various file
formats (GIF, JPEG, PNG, etc.) have been created that attempt to compress the data somewhat
to make smaller files.
Different file formats handle image transparency, which controls whether and how the
background shows through the image, in different ways. Some support an alpha channel,
an extra value for every pixel reflecting the transparency at that point. Others simply designate
one entry in the palette as indicating transparency.
Antialiasing is where pixels at the edge of a shape are moved or recoloured to make a gradual
transition between the shape and its background. This prevents the rough and jagged edges that
can make for unappealing images. Some functions that draw on an image implement antialiasing.

With 256 possible values for each of red, green, and blue, there are 16,777,216 possible colours
for every pixel. Some file formats limit the number of colours you can have in a palette (e.g.,
GIF supports no more than 256 colours); others let you have as many colours as you need. The
latter are known as true colour formats, because 24-bit colour (8 bits for each of red, green,
and blue) gives more hues than the human eye can distinguish.

11.1 Embedding an Image in a Page

The command to place an image is constant. You will use the same format every time. Now
might be a good time to talk about where to store everything on your web server because you
are starting to call for additional items to fill up your home page. Until now, all you did was
put text on the page.

At this point in your HTML, it is a good idea for you to place whatever images you are going
to use in a subdirectory called “images”. That means place the image in a directory (to be called
“images”) under the directory where your web pages are located (which would be the “root”
directory for your site).
Here’s the format for placing an image:

<IMG SRC=”image.gif” ALT=”some text” WIDTH=32 HEIGHT=32>

LOVELY PROFESSIONAL UNIVERSITY 255