Creating meaningful Graphics, Icons and Images.

1. Creating Meaningful Graphics, Icons & Images
Austria, Sarah Jane
Emilio, Allan
Javier, Jentzen Paolo
Villaruz, Jireh Kimberly

2. • Overview:
Graphics (Definition, Classification, Types, Creation)
Icons (Definition, Categorizing, Creation)
Images (Definition, Types, Quality, Creation )
References

3. • Graphics:
• Graphics appear on the Web or User Interfaces in many
forms. They can be images, backgrounds buttons, icons,
navigational items, maps, and logos. Graphics often
illustrate complex ideas.
• The first step to any good graphic is the idea, not the
image. However, acquiring the image or designing the
image is crucial to the success of the product. Web
designers can obtain images in a number of ways,
including being created using paint and drawing software,
scanning an image, or manipulating an existing image.

4. • Graphics contained in Web pages serve several distinct
purposes, which can be classified as follows:
♦ Navigational - To identify links that may be followed.

5. ♦ Representational - To illustrate items mentioned in the text.

6. ♦ Organizational - To depict relationship among items mentioned in text.

7. ♦ Explanative - To show how things process or work.

8. ♦ Decorative - To provide visual appeal or emphasis.

9. • Types of Graphics:
♦ Bitmap - Bitmap images (also known as raster images) are made up of
pixels in a grid. Pixels are picture elements; tiny dots of individual color that
make up what you see on your screen. All these tiny dots of color come
together to form the images you see.
- Bitmap images are resolution dependent.
- difficult to increase or decrease their size without sacrificing a degree
of image quality.

10. ♦ Vector - are made up of many individual, scalable objects. These objects
are defined by mathematical equations rather than pixels, so they always
render at the highest quality.
- You can freely change any number of object attributes without
destroying the basic object.
- The process of converting vector to bitmaps is called rasterizing.
- The most common reason for wanting to convert a vector to a bitmap
would be for use on the Web. At this time, the most common and accepted
format for vector images on the Web is Shockwave Flash (SWF).
- Another standard for vector images on the Web is (SVG), a graphics
programming language based on XML. Due to the nature of vector images,
they are best converted to GIF or PNG format for use on the Web.

12. ♦ Metafiles - are graphics that contain both raster and vector data.
- For example, a vector image that contains an object which has a
bitmap pattern applied as a fill, would be a metafile. The object is still a
vector, but the fill attribute consists of bitmap data.

13. In creating graphics..
■ Provide:
— Supplement textual graphics.
(Use graphics to supplement text, not as a substitute for it.)
— Convey information not possible using text.
(Use graphics to convey information that can’t be effectively conveyed
using text.)
— Enhance navigation.
(Able to identify the content areas faster using meaningful graphical
identifiers rather than text.)
— Limit long-loading graphics.
(Limit the use of graphics that take a long time to load.)
— Coordinate graphics.
(Coordinate graphics with the to better its clarity.)

14. • Icons
• Icons are most often used to represent objects and
actions with which users can interact with or that they can
manipulate. These types of icons may stand alone on a
desktop or in a window, or be grouped together in a
toolbar.
• A secondary use of an icon is to reinforce important
information, a warning icon in a dialog message box, for
example.

15. • Marcus (1984) suggests icons fall into these categories:
♦ Icon. Something that looks like what it means.
♦ Index. A sign that was caused by the thing to which it refers.
♦ Symbol. A sign that may be completely arbitrary in appearance.
• A true icon is something that looks like what it means. It is
representational and easy to understand.

16. • Rogers (1989) provided an expanded definition for the
kinds of icons:
♦ Resemblance - An image that looks like what it means.

17. ♦ Symbolic - An abstract image representing something.

18. ♦ Exemplar - An image illustrating an example or characteristic of
something.

19. ♦ Arbitrary - An image completely arbitrary in appearance whose meaning
must be learned.

20. ♦ Analogy— An image physically or semantically associated with something.
(Relating to meaning in language or logic.)

21. In creating icons..
■ Provide icons that are:
— Familiar.
— Clear and Legible.
— Simple. (and no larger than 16 pixels square)
— Consistent.
— Direct.
— Efficient. (also, it must look as good in black and white as in color.)
— Discriminable. (able to be distinguished)
■ Also consider the:
— Context in which the icon is used.
— Expectancies of users.
— Complexity of task.

22. In creating icons..
■ Successful icons are:
— Looks different from all other icons.
— Is obvious what it does or represents.
— Is recognizable when no larger than 16 pixels square.
— Looks as good in black and white as in color.

23. • Images:
• Image is an artifact that depicts or records visual
perception, for example a two-dimensional picture, that
has a similar appearance to some subject.
- Usually a physical object or a person, thus providing
a depiction of it.

24. • Types of Images:
♦ Line Art - is the term used to describe drawings that contain flat colors
without tonal variations. These images generally contain only black and
white pixels; however, they could also be drawings that incorporate different
colors.

25. ♦ Continuous-tone - graphics that have tonal variations, such as color
photographs.
- A grayscale image is a continuous-tone image consisting of black,
white, and gray data only. This is an image comprised of a range of grays,
typically up to 256 levels of gray.

26. ♦ 2-Dimensional (2.D) - Images can turn to 2-dimensional by adding
depth to them.
- Composed of X & Y axis only.

27. ♦ 3-Dimensional (3.D) - 3-dimensional images are much more lifelike
than two-dimensional images. However, they are more difficult to create
and they require greater computer resources to work with and display.
- Composed of X, Y & Z axis.

28. ♦ Hypergraphics - are clickable graphics. When a graphic is a link, the
pointer will usually change to a pointing finger when you place it on a
hotspot.

29. ♦ Image Maps - are graphics that contain more than one link. A single
image usually takes less time to download than do multiple images,
which is why designers commonly use image maps on the opening
menu screens of Web pages.
- Faster to load than several images.
- The user can quickly find their way through your pages without having
to search for the buttons and just hotspots.

30. • Image Quality:
♦ Color Resolution - measures the number of bits of stored information
per pixel. Color resolution ranges from 1-bit color (2 colors) to 32-bit
color (16.7+ million colors).
- Color resolution is. also called bit resolution, pixel resolution,
color depth, bit depth, or pixel depth
- An image with a greater color resolution will be more colorful and of
higher photographic quality.
- While 32-bit color depth will produce a higher quality image, it will also
make the file size much larger because more information must be stored
for every pixel.

31. ♦ Image Resolution - Refers to the amount of information stored for each
image, and is measured in pixels per inch (PPI).
- Images must be at a certain minimum resolution to avoid a pixilated or
out-of-focus appearance.
■ Designers can optimize most images if they do the following:
— Reduce the color resolution (number of colors) to the minimum necessary for
the image.
— Reduce the image resolution to no more than 72 ppi (pixels per inch).
— Choose and apply the image size (in pixels) that you will need for your final
Web page.
— Crop to the smallest area possible.
— Web graphics should not exceed 30K.

32. ♦ Image Compression - Mathematical Algorithm used to create smaller
file sizes.
- File compression reduces the file size of a graphic and therefore
reduces the transfer time to the user’s computer. Files are compressed
before they are sent to the user’s computer and decompressed before
they are displayed.
■ Two kinds of compression are most common:
— Lossless compression: None of data actually lost during compression.
— Lossy compression: Some data is lost during compression.

33. In creating images..
■ General:
— Use developed and tested images.
— Use images consistently.
— Produce clear images.
— Provide descriptive text or labels with all images.
— Distinguish navigational images/graphics from decorative images/graphics.

34. In creating images..
— Minimize:
(The number and size of presented images.)
(Image animations.)
— Restrict single images to 5K.
— Restrict page images to 20K.
— Provide thumbnail size images.
— Avoid extraneous or gratuitous images.
■ Color:
— Minimize the number of colors in an image.

35. In creating images..
■ Format:
— Produce images in the most appropriate format.
• GIF.
• JPEG.
■ Internationalization:
— Provide for image internationalization.
■ Screen design:
— Reuse images on multiple pages.

36. End.

37. • References:
Galitz, Wilbert (2002). The Essential Guide to User
Interface Design, 2nd Edition. John Wiley & Sons, Inc. ,
Canada
Galitz, Wilbert (2007). The Essential Guide to User
Interface Design, 3rd Edition. John Wiley & Sons, Inc. ,
Canada
http://www.google.com.ph/
http://www.wikipedia.com/