Page 1

Unit 19 – Digital graphics for interactive media In this assignment I am going to be giving a broad explanation on the basics of Digital  Graphics. I will be covering Pixels, Raster images, Vector images, Bit depth, Colour  space, Image capture and Image optimization. Pixels: Pixels in images represent tiny squares that make up the image by having certain  colours or shades. The highest resolution is 4,096 x 3,112 which means in total there are  12,746,752 pixels on that in particular screen. As  you lower the number of pixels the quality of the  image will also decrease, by this I mean the image  will appear slightly more blurred and edges could  appear slightly jagged. If you save your images as  a bitmap file then it will be stored with all of these  pixels set to one colour, whereas if you save your  image as a vector then it will be stored as a series  of commands that the computer will use to then  create the image.                                                               http://tinyurl.com/6jngkhf                                                       Vector image: Vector images are made up from shapes, lines and a series of co­ordinates. Instead of  being stored as pixels, vector images are stored as a series of commands, this allows  the user to reshape and resize the image without any quality loss. Vector – Good quality even when zoomed in as it uses the co­ ordinates to redraw the shape to the correct resolution. Bitmap – Loss of quality due to stretched pixels.

Raster image: Raster images start off as vector images and are then later rasterised, turning it into a  format like BMP or PNG. When a raster image is viewed, the pixels usually smooth out  visually for the user, who sees a photograph or drawing. When blown up, the pixels in a  raster image become apparent.  Bit Depth: Bit depth is the number of bits used to represent the colour of a single pixel in a  bitmapped image or video frame buffer. This concept is also known as bits per pixel  (bpp), particularly when specified along with the number of bits used. Higher colour depth  gives a broader range of distinct colours.


On the right is a perfect  example of how images change  as you higher the bit depth. In  the first picture there are only 2  shades of grey and just meet  each other with a clear line at  the meeting point, whereas in  the last image there are 256  different shades which makes  the image look like its blending  into itself from dark to light  without lots of obvious change  points. Image found on:         http://luminousnepal.com/files/Bit%20depth%20in%20greyscale.jpg  Colour space: There are two main types of colour space, RGB and  CMYK. RGB is most commonly used on computer  monitors and scanners, whereas CMYK is used more  commonly in printers. The main difference between the  two is that CMYK gives out a wider variety of colours  and more vibrant colours, and requires a more  advanced monitor. RGB is used on pc monitors as it is  easy to format with all screens.  RGB – Red, Green and Blue CMYK – Cyan, Magenta, Yellow and Black Image optimisation: An Image Optimizer lets you easily optimize your gifs, animated gifs, jpgs, and pngs, so  they load as fast as possible  on your site. Furthermore,  you can easily convert from  one image type to another.  The main reason to optimise  an image is so that the user  can put there image on a  website without pixilation,  also for the image to take up  a smaller amount of space,  therefore loading quicker.  Image found on: http://pelfusion.com/tools/17­excellent­image­optimization­tools/


Original image, 556.841 bytes.         Optimised image, same quality, 41.006 bytes.

Digital graphics 101  

Something i did in coll for an assignment