WEB GRAPHICS UNIT II Notes

 

 

WEB GRAPHICS

UNIT II :

 

FILE FORMAT

 

            A file format is a particular way to encode information for storage in a computer file. Since a disk drive, or indeed any computer storage, can store only bits, the computer must have some way of converting information to 0s and 1s and vice-versa. There are different kinds of formats for different kinds of information. Within any format type, e.g., word processor documents, there will typically be several different formats. Sometimes these formats compete with each other.

 

GIF :

 

(Graphics Interchange Format) is an 8-bit-per-pixel bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability.

 

The format uses a palette of up to 256 distinct colors from the 24-bit RGB color space. It also supports animations and allows a separate palette of 256 colors for each frame. The color limitation makes the GIF format unsuitable for reproducing color photographs and other images with continuous color, but it is well-suited for more simple images such as graphics or logos with solid areas of color.

 

            GIF images are compressed using the LZW lossless data compression technique to reduce the file size without degrading the visual quality. This compression technique was patented in 1985. Though the relevant patents have all since expired, the controversy over the licensing agreement between the patent holder, Unisys, and CompuServe in 1994 led to the development of the PNG (Portable Network Graphics) standard

 

JPEG:

 

In computing, JPEG (pronounced JAY-peg; ) is a commonly used method of compression for photographic images. The name JPEG stands for Joint Photographic Experts Group, the name of the committee that created the standard. The group was organized in 1986, issuing a standard in 1992 which was approved in 1994 as ISO 10918-1. JPEG should not be confused with MPEG (Moving Picture Experts Group) which produces compression schemes for video.

 

            JPEG itself specifies both the codec, which defines how an image is compressed into a stream of bytes and decompressed back into an image, and the file format used to contain that stream. The compression method is usually lossy compression, meaning that some visual quality is lost in the process, although there are variations on the standard baseline JPEG which are lossless. There is also an interlaced "Progressive JPEG" format, in which data is compressed in multiple passes of progressively higher detail. This is ideal for large images that will be displayed whilst downloading over a slow connection, allowing a reasonable preview before all the data has been retrieved. However, progressive JPEGs are not as widely supported.

            The file format is known as 'JPEG Interchange Format', as specified in Annex B of the standard. This is often confused with the JPEG File Interchange Format (JFIF), a minimal version of the JPEG format that was deliberately simplified so that it could be widely implemented and thus become the de-facto standard. Most image editing software programs that write to a "JPEG file" are actually creating a file in JFIF format.

 

 

            Image files that employ JPEG compression are commonly called "JPEG files". The most common file extension for this format is .jpg, though .jpeg, .jpe, .jfif and .jif are also used. It is also possible for JPEG data to be embedded in other file types, such as TIFF format images.

 

JPEG/JFIF is the format most used for storing and transmitting photographs on the World Wide Web. For this application, it is preferred to formats such as GIF, which has a limit of 256 distinct colors that is insufficient for color photographs, and PNG, which produces much larger image files for this type of image. The JPEG compression algorithm is not as well suited for line drawings and other textual or iconic graphics, and thus the PNG and GIF formats are preferred for these types of images.

 

CREATING IMAGES:

 

•Eventually, you will want to start generating your own custom graphics for your web site.

 

•Unlike with using other people's images, with custom graphics you have the ability to define a uniform color, font, size, and style. Thinking in terms of a common look and feel is the first step in making a clean looking web page.

•Besides creating a standard look and feel, you should be aware of a few other design concepts before you start creating your own graphics.

If you are serious about web design, you should get a copy of Adobe Photoshop. If you are really serious about web design, you should get several filters like Kai's Power Tools.

 

•First, designing for the web is not like designing for print. Don't attempt to align pages to the pixel or colors to the RGB value. Alignment, margins, colors, and most everything else about design is highly dependent upon the browser software, operating system, and hardware that the person is using to look at your web page.

 

•It is impossible to design a web page that will look exactly the same way in all circumstances unless you code to the least common denominator. And this is a pretty ugly web page.

 

•Instead, you must allow for a fluid design and take care to test using different browsers, different operating systems, and different monitor settings (including black and white versus color, different resolution, and different bit depth).

 

•Finally, you must take care to choose the right file formats, the right color map, and the right image size if you are to have top of the line graphics. Let's take a look at those topics...

Image Creation Resources

 

•Adobe

•Graphic Converter (Shareware Graphics Manipulation for the Mac)

•Paint Shop Pro (Shareware Graphics Generation for Windows)

 

BRUSHES

 

Paintbrushes are used for applying ink or paint. These are usually made by clamping the bristles to a handle with a ferrule.

The styles of brush tip seen most commonly are as follows:

 

•Round: The long closely arranged bristles of these brushes make them useful for detail.

 

•Flat: These are used for spreading paint quickly and evenly over a surface. They will have longer hairs than their Bright counterpart.

 

•Bright: These are flat brushes with short stiff bristles and can be useful driving paint into the weave of a canvas in thinner paint applications, as well as thicker painting styles like impasto work.

 

•Filbert: Flat brushes with domed ends. They allow good coverage and the ability to perform some detail work.

 

•Fan: These are used for blending broad areas of paint.

 

•Angle: These, like the Filbert, are versatile and can be applied in both general painting application as well as some detail work.

 

•Mop: A larger format brush with a rounded edge for broad soft paint application as well as for getting thinner glazes over existing drying layers of paint without damaging lower layers.

 

•Rigger: Round brushes with longish hairs, traditionally used for painting the rigging in pictures of ships. They are useful for fine lines and are versatile for both oils and watercolors.

Sizes and materials

Decorators' brushes

 

The sizes of brushes used for painting and decorating, usually given in mm or inches, refer to the width of the head.

 

COMMON SIZES ARE:

•⅛ in, ¼ in, ⅜ in, ½ in, ⅝ in, ¾ in, ⅞ in, 1 in, 1¼ in, 1½ in, 2 in, 2½ in, 3 in, 3½ in, 4 in.

•10 mm, 20 mm, 30 mm, 40 mm, 50 mm, 60 mm, 70 mm, 80 mm, 90 mm, 100 mm.

            Bristles may be natural or synthetic. Natural bristles are preferred for oil-based paints and varnishes, while synthetic brushes are better for water-based paints as the bristles do not expand when wetted.

 

Handles may be wood or plastic; ferrules are metal (usually nickel-plated steel).

 

ARTISTS' BRUSHES

 

BRUSH

 

Artists' brushes are usually given numbered sizes, although there is no exact standard for their physical dimensions.

From smallest to largest, the sizes are:

 

•10/0, 7/0 (also written 0000000), 6/0, 5/0, 4/0, 000, 00, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 22, 24, 25, 26, 28, 30. Brushes as fine as 30/0 are manufactured by major companies, but are not a common size.

 

•Sizes 000 to 20 are most common.

 

•Artists' brushes are most commonly categorized by type and by shape.

 

            Types include: watercolor brushes which are usually made of sable, synthetic sable or nylon; oil painting brushes which are usually made of sable or bristle; and acrylic brushes which are almost entirely nylon or synthetic. Turpentine or thinners used in oil painting can destroy some types of synthetic brushes. However, innovations in synthetic bristle technology have produced solvent resistant synthetic bristles suitable for use in all mediums. Natural hair, squirrel, badger or sable are used by watercolorists due to their superior ability to absorb and hold water.

 

Shapes are quite varied and often watercolor brushes come in the most variety of shapes. Rounds (pointed), flats, brights (shorter than flats) and filbert are the most common. Other shapes include stipplers (short, stubby rounds), deer-foot stipplers, liners (elongated rounds), daggers, scripts (highly elonged rounds), eggberts, fans, among others.

Bristles may be natural -- either soft hair or hog bristle -- or synthetic.

 

•Soft hair brushes are made from Kolinsky sable or ox hair (sabeline); or more rarely, squirrel, pony, goat, or badger. Cheaper hair is sometimes called camel hair... but doesn't come from camels.

 

•Hog bristle (often called china bristle or Chunking bristle) is stiffer and stronger than soft hair. It may be bleached or unbleached.

 

•Synthetic bristles are made of special multi-diameter extruded nylon filament.

Artists' brush handles are commonly wooden but can also be made of moulded plastic handles. Many mass-produced handles are made of unfinished raw wood; better quality handles are of seasoned hardwood. The wood is sealed and lacquered to give the handle a high-gloss, waterproof finish that reduces soiling and swelling.

Metal ferrules may be of aluminum, nickel, copper, or nickel-plated steel. Quill ferrules are also found: these give a different "feel" to the brush. The top of the range brushes, however, usually have ferrules made from transparent plastic tightened in place by thin wire.

 

GRID

 

A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner. The less common printing term "reference grid," is an unrelated system with roots in the early days of printing.

 

IMAGE SCALING

 

In computer graphics, image scaling is the process of resizing a digital image. Scaling is a non-trivial process that involves a trade-off between efficiency, smoothness and sharpness. As the size of an image is increased, so the pixels which comprise the image become increasingly visible, making the image appear "soft". Conversely, reducing an image will tend to enhance its smoothness and apparent sharpness.

 

            Apart from fitting a smaller display area, image size is most commonly decreased (or subsampled or downsampled) in order to produce thumbnails. Enlarging an image (upsampling or interpolating) is generally less common. The main reason for this is that in "zooming" an image, it is not possible to discover any more information in the image than already exists, and image quality inevitably suffers. However, there are several methods of increasing the number of pixels that an image contains, which evens out the appearance of the original pixels.

 

SCALING METHODS

 

An image size can be changed in several ways. Consider doubling the size of the following image:

           The easiest way of doubling its size is nearest neighbour interpolation, replacing every pixel with four pixels of the same color:

The resulting image is larger than the original, and preserves all the original detail, but has undesirable jagginess. The diagonal lines of the W, for example, now show the characteristic "stairway" shape.

 

            Other scaling methods are better at preserving smooth contours in the image. For example, bilinear interpolation produces the following result:

Linear (or bilinear, in two dimensions) interpolation is typically better than the nearest-neighbor system for changing the size of an image, but causes some underiable softening of details and can still be somewhat jagged. Better scaling methods include bicubic interpolation:

A PALETTE IS:

 

•a surface on which a painter mixes colour pigments. A palette may be made of wood, glass, plastic, ceramic tile or other inert material and can vary greatly in size and shape. The most commonly known type of painter's palette is made of thin wood board designed to be held in the artist's hand and rest on the artist's arm.

            Palette: the same type, but for mixing cosmetics.

            Cosmetic Palette: an archaeological form: Palette, from Ancient Egypt and SW Asia.

•a set of colours put on a palette, or in a more general sense, a particular set or quality of colours.

 

•an analogous range of choices in fine arts or design, e. g. Ravel's orchestral palette.

 

•Palette (computing): in computer graphics, a set of colors.

 

•Palette window, in computing: a window type often containing tools.

 

•the valve under an organ pipe which is connected to the keyboard(s)—as opposed to the stop valve.

 

•the name of a mannequin humanoid robot designed for the fashion and service industry by Tatsuya Matsui of Flower Robotics, Inc.

 

•Palette AOC, a wine AOC in the Provence region of southern France.

A palette should not be confused with the following orthographically distinct items:

 

•palate, the roof of the mouth.

 

•pallet, a holder for goods for use with a forklift.

 

SCREENCAPTURING:

 

SCREENSHOT OF A KDE DESKTOP

 

A screenshot, screen capture, or screen dump is an image taken by the computer to record the visible items displayed on the monitor or another visual output device. Usually this is a digital image taken by the host operating system or software running on the computer device, but it can also be a capture made by a camera or a device intercepting the video output of the computer.

 

            Screenshots, screen dumps, or screen captures can be used to demonstrate a program, a particular problem a user might be having or generally when computer output needs to be shown to others or archived.

All three terms are often used interchangeably; however, some people distinguish between them as follows:

 

SCREENSHOT

 

Outputting the entire screen in a common bitmap image format such as BMP, PNG, or JPEG.

 

SCREEN DUMP

 

The display system dumps what it is using internally upon request, such as XWD X Window Dump image data in the case of X11 or PDF in the case of Mac OS X. As of Mac OS X 10.4, pictures are no longer saved as PDF. They are saved as PNGs.

 

SCREEN CAPTURE (SCREENCAPS) :

Capturing the screen over an extended period of time to form a video file. (see video capture)

Palette Records, a record label

 

STYLE PALETTE:

 

The Style Palette goes well beyond simply saving text styles, although this feature alone is quite significant. Red ships with over 150 saved text styles. The number grows even higher when you consider that any combination of parameters may be applied, so that the shadow and edge treatments of one saved style may be combined with the fill and typeface of another saved style.

 

            The fact is that any design element may be saved to the style palette, and edited and applied whenever it's needed. Other elements that may be saved include colors, gradients, natural media, paintbrushes, spline combinations of stroke and fill, materials applied to 3D objects, and extrusion parameters for extruded objects. More styles will be made available as free downloads on a regular basis.