Introduction to Graphics What is a Graphic? A graphic is an image that is used to enhance the presentation of information (decorative) or support the content (educational). This course introduces you to the electronic world of manipulating graphics that are to be presented on a monitor e.g. Web pages, Word Documents or Desktop Publishing. The information will be useful to people who prepare images for the Multimedia or Web presentations, and the knowledge gained will assist you in preparation of images which are printed at a desktop printer. Printed v/s Screen presentation A graphic that is printed on paper has entirely different parameters to an image that will only ever be viewed on screen. Your eyes interpret an image on paper using reflected light, and on the screen using emitted light from the red, green and blue (RGB) light cannons in the back of your monitor. You will never be able to perfectly match a photograph in your hand with the image on the screen. Optimisation Graphic designers face an eternal struggle between image quality and file size. The challenge is to maintain the highest quality image whilst reducing its file size as much as possible. This struggle is referred to as Optimisation. Inserting Graphics using different methods into different Programs will vary the file size and quality enormously. For example inserting a picture (40k jpg photo) into Word will increase the file size by 12k. The same file inserted into Publisher will increase the size by 1.25m. When preparing images that are to be viewed via the Web, it is essential that you consider the transmission speed or download time of the graphic. Graphics that have a large file size are slower to travel over the Internet and slower to appear on the screen. Cross Platform Issues When you are designing graphics, it is important to take into account the fact that users will be viewing your graphics on many different types of computers, including PC’s (Windows), Macintosh, and UNIX as well as different video cards, monitors and browsers. You have very little control over the final appearance of your graphic on someone else’s screen. For example, your graphic may look great on your 24-bit colour monitor, but it will look awful on a 4-bit colour monitor This is quite different to sending out a printed document where you choose the printer and paper it will be printed on. The printed document looks exactly the same from print to print. It’s a good idea to view your graphic on as many platforms as you can with a number of different resolutions. You should also try to pay attention to the brightness and contrast of the image, to ensure that the detail is clear. Decide what audience you are going to cater for. Images and Graphics.doc Apr-2010 Page 1/9 For instance, images and web page will look quite different depending on what monitor size and resolution they are viewed on. An image viewed on a 17 inch monitor with screen resolution of 800 X 600 will look smaller than an image viewed on a 15 inch monitor with screen resolution of 640 X 480. Colour palettes A colour palette is like a paint box of specific colours. PC’s, Macs and Web browsers all use different colour palettes to represent colours on your screen. “Paint” programs may offer you a colour range of 16 million colours (24bit) but there are only 216 colours that are common to all three. These are described as the “web safe colours” because you can be fairly sure they will have a consistent appearance no matter what computer or monitor you are viewing them on. Monitors Graphics will look different from one computer screen to another. Even in the Staff Training lab where all the computers and monitors are the same company products, an image can vary considerably in its appearance owing to the monitors’ position in the room and the adjustments that have been made to its brightness, contrast and colour controls. Vector and Raster Vector graphics Vector Graphics are composed of objects such as circles, boxes and lines, which are arranged or layered to present an image. Vector drawing, software programs are Adobe Illustrator or CorelDraw. The Vector graphic's file information contains the mathematical instructions for the computer to present the objects on the screen in a specified order/arrangement, including length and direction of lines, within a defined area. Vector graphics are usually used to create cartoons, clipart, animations or diagrams, often described as "line art". They can be stretched/resized without any loss of quality. They are used widely on the Web because of their small file size. Vector graphics are also referred to as “object orientated”. An example of these files would be Windows Metafiles (.wmf) or Windows ClipArt. Originally they were simple drawings that appeared in Black and White but now they can be coloured and more elaborate. When these graphics are re-sized they do not lose their colour or do not “break up”. The file size is also quite small. Microsoft ClipArt (.wmf Windows Metafile) Images and Graphics.doc Apr-2010 Page 2/9 Raster graphics Raster graphics are comprised of pixels. Pixels are small squares of colour, alongside each other arranged in a grid. It is the entire grid of pixels that make up the image, much as an impressionist artist creates an image through dabs of pure colour. With a little distance the image is comprehensible and quite clear but up close the effect is “pixelated”, that is it appears to break up. Pixels that have adopted the background colour may give the illusion of gaps or holes in the image, but there are NO HOLES in a pixel based image. It is simply by changing the colour of the pixels that you edit the image. Raster based programs include Photoshop, Paint Shop Pro, PhotoPaint, CorelPaint. Raster images are used for photographic images where there is continuous tone. The computer requires the information for the description of each pixel to recreate the image on your monitor, hence raster images can have a larger file size than vector images. Raster images are also known as “bitmapped images”. Raster image (.jpg file) A Raster image is made up of pixels and the clarity depends on the resolution and size that it's printed at. A Raster image file can be in bitmap (1-bit), Grayscale (8- bit), Index (8-bit), RGB (24-bit), or CMYK (32-bit) colour. See Colour Modes. File Formats If you have created graphics for printing you may have saved them as .tif, .eps, bmp or .pict file formats. These are simply different ways of describing the instructions for the appearance of the graphic to the computer. When you are creating graphics for the web you can only save them in GIF or JPG. Common Vector Formats .wmf Microsoft uses the .wmf or Windows Metafile for basic graphics. Images and Graphics.doc Apr-2010 Page 3/9 .cdr CorelDRAW package produces this form by default .cgm Computer Graphics Metafile also a common ClipArt format Others formats include .cmx Corel Clipart .eps Encapsulated PostScript .drw Micrografx Draw .gem Ventura/GEM .dfx Autodesk .pct Apple .emf Windows Enhanced Metafile .pic Lotus Development Corp. .hgl Hewlett-Packard Graphics Language Common Raster Formats .bmp Microsoft coined the term Bitmap for it’s version of a Raster graphic format. Was designed to use in Windows programs. Has a high quality but large file size. Won’t work on the Web .gif A format by Compuserve Graphics Interchange Gifs present the graphic as an 8-bit image or less which means that it is restricted to using only 256 colours so is generally a very small file size. Because of the limited colour depth, GIF compression works best with images with large blocks of the same colour. Photographs saved in GIF format lose some of the colour quality. Transparent gif Sometimes you may want your graphic to appear as though it has no background or border of it’s own, as though it is a free standing object or floating on top of the page background. When a graphic is saved as a transparent gif, the pixels of the transparent section are set to a certain value and that value is associated with the colour NULL or clear. If you open a transparent gif in Paint Shop Pro you can see that the pixels which are supposed to be transparent have a grey and white checker box appearance. For Web use, when saving a GIF file you will be given an option of “Interlaced” or “Non- interlaced”. Interlacing displays the image gradually in increasing detail as it is downloaded onto a web page. The image sharpens gradually as it loads. .jpg (jpeg in a Mac) A compressed format by Huffman, the jpg format was originally designed for photographic images and work well compressing these types of images without too much loss of quality. A JPG can be up to 24-bit images and have the capacity to display millions of colours depending on the level of compression (image quality) you choose when saving the file. They are not as suitable for line-art graphics such as cartoons because the file size is larger than with GIF files and it can cause blurring around the edges. For Web use, When saving an image in the .jpg format you will be given the option to save the file using either “progressive” or “Standard” encoding. Progressive encoding is similar to “interlacing” a GIF file.