Issuu on Google+

Digital graphics 101.  Introduction. Within this article as an Assistant producer at Tudno Studio’s I have been given the task of writing an article covering the many aspects of Digital graphics.

What is a pixel? A pixel is what makes a raster graphic otherwise known as a bitmap image, it’s the equivalent of cells within the human body. It’s the smallest element of the graphic that can be controlled or manipulated. Due to how pixels work they have their own co-ordinates, Pixels are normally arranged in a two-dimensional grid, and are often represented using dots or squares. Some people create pixel graphics for example Mario started out as just basic pixel square like shapes as shown below.

1


Bit Depth. In computer graphics Bit depth tells us how many unique colours are in a raster graphic otherwise known as a bitmap. It’s also known by (bpp) “Bits per pixel” especially when talking about the number of bits used. This is a sample of 8bit depth colour “8-bit color graphics is a method of storing image information in a computer's memory or in an image file, such that each pixel is represented by one 8-bit byte. The maximum number of colors that can be displayed at any one time is 256.” – Wikipedia.

The bit depth also effects the quality of a digital image for example here is a series of images of varying Bit depth. 1bit (2colours)

8bit (256 colours)

2bit (4 colours)

4bit (16 colours)

24 bits (16,777,216 colors, "truecolor")

2


Raster images. A raster image is a digital graphic that consists of pixels. These pixels are displayed generally through a rectangular grid. A raster image is often called a Bitmap it has a variety of formats such as .gif, .jpg and .bmp. It represents an image in a series of bits of colour stored as information which gets transformed into pixels when displayed on screen. Below is an example of a pixel grid being shown in Photoshop.

When using a Raster image to edit it using the pixels it “pixelates� below is a sample of what an image looks like when pixelated.

3


Vector graphics. A vector graphic is simply put, the opposite of a Rasta image due to the fact it has no pixels and can’t be edited using them. A vector image is typically used for photographs and is often known as a 2D graphic.

“Example showing effect of vector graphics versus raster graphics. The original vector-based illustration is at the left. The upper-right image illustrates magnification of 7x as a vector image. The lower-right image illustrates the same magnification as a bitmap image. Raster images are based on pixels and thus scale with loss of clarity, while vector-based images can be scaled indefinitely without degrading quality.” – Wikipedia. 4


Colour space. There are a number of different colour spaces available to us the main two being RGB and YMC. RGB, Red,green, blue. RGB is all the possible colours that can be made from Red, green and blue when mixed together. “for example, shining three lights together onto a white wall: one red light, one green light, and one blue light, each with dimmer switches. If only the red light is on, the wall will look red. If only the green light is on, the wall will look green. If the red and green lights are on together, the wall will look yellow. Dim the red light and the wall will become more of a yellow-green. Dim the green light instead, and the wall will become more orange. Bringing up the blue light a bit will cause the orange to become less saturated and more whitish. In all, each setting of the three dimmer switches will produce a different result, either in color or in brightness or both. “ – Wikipedia. RGB is used for computer monitors and digital cameras. CMYK, Cyan, Magenta, Yellow and Black These are the main colours created by the RGB colour modes when they are crosses. The K represents black. The CMYK is used by printers, the reason the prints only print in CMYK is because printers approximate the colours to get the best colour match possible.

The reason that these colours are used is well described by Dan Bailey from http://thephotoletariat.com/colorspace-made-easy/

“No device, camera or computer monitor can accurately reproduce all of the colors that the human eye can discern. Thus, in order to ensure that color is accurately and consistently rendered across all devices, a system of standardized color spaces was developed for use within the digital imaging industry. Each color space, also referred to as a color profile, represents a specific range of color within the spectrum of visible light that a device is calibrated to reproduce.”

5


Image capture. Image capture is the process of capturing an image using methods such as digital cameras and scanners. Different digital camera’s have different image quality’s this is defined by the mega pixels and resolution. A megapixel (MP or Mpx) is one million pixels, and is a term used not only for the number of pixels in an image, but also to express the number of image sensor elements of digital cameras. The higher the image sensor elements the higher the MPX and the higher the quality of the image. Resolution is calculated like this; 1024x768, where 1024 is the amount of pixels along the width of the image and 768 is the amount of pixels along the height of the image. PPI are the amount of pixels that are present per inch. PPI is used in scanners to represent the number of pixels per linear inch when a digital image is being prepared to be scaled onto paper aka into the computer. DPI stands for dots per inch and is a printers native output resolution. Printers with a higher DPI produce a more detail and clearer output.

Image optimization. When aiming for the best quality of a digital graphic possible the format in which it is saved is crucial. There are many different file types each with a different purpose. JPEG is a compressed file format that supports 24 bit colour. This is the best format for photographs to be shown on the web or as email attachments. This is because the colour informational bits in the computer file are compressed and download times are minimized. GIF is an uncompressed file format that supports only 256 distinct colours. Best used with web clip art and logo type images. GIF is not suitable for photographs because of its limited colour support. TIFF is an uncompressed file format with 24 or 48 bit colour support. Uncompressed means that all of the colour information from your scanner or digital camera for each individual pixel is preserved when you save as a TIFF. TIFF is the best format for saving digital images that you will want to print. TIFF files are huge and take up a lot of memory and are rarely used.

6


Digital graphics 101