Web Graphics

Web GraphicsGroup 4IntroductionPurposeImplementation- HTML tags- CSS- Creating Graphics (images and formats), graphic tools- SVGTypes of GraphicsGuidelines for using graphics in HTML pagesAdvantages and Disadvantage

OutlineWhat 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

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

enhance the look and feel of the websiteCreate a visual structure of information and links on the pageProvide a way of communicating or explaining ideas visually

Purpose of graphics on websites5HTML and CSS e.g. using the to present text in italicsusing 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 tag (HTML) - CSS statements like, body{background- image: imagename.extension} Implementationcan be created using graphic tools such as;- Adobe Photoshop- Paint shop Pro- Colleral draw- Gimp and so onNOTE: Different formats for created graphics have different implications on the final output of the graphic. An elaboration followsCreating Graphics Formats for created image graphicsGIF: 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.Creating Graphics continued

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.

Raster Graphics/ bit-mapped graphicsrepresent 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 appearsoften expressed in dots per inch (dpi) or simply by the number of rows and columns, such as 800 by 600

Types of Graphics Vector Graphics/ object-oriented graphicsimages 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.Type of Graphicsshould 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 pageGuidelines of using GraphicsAvoid repetitive use of overly bright or potentially obnoxious images.Avoid use of graphic to convey textual content information. search engines cant index such informationMake 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.

Enhance the look and feel of a websiteThey create a visual structure of informationThey provide a way of communicating or explaining ideas visually

Advantages of graphicsIf graphics are not used correctlyThey end up diverting the attention of users of from important informationThey increase the load time of pagesThey compromise the visibility of text

DisadvantagesIt is time consuming to make graphics i.e. decisions must be made in advance for layout color, material e.t.cIts technical in nature. Requires audience knowledge to interpret or understand

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

THE END