Here it is! The final article to my outstanding collection, and hereon in we will be discussing Digital Graphics.
Let's skip the funny banter and all that and get straight down to brass tacks of Digital Graphics.
Pixels, Resolution & Stuff
Pixels! What are pixels? Well, look at your screen now, the image you are seeing is made up of pixels, the single point in a raster image (more on raster's later). It is the smallest unit that a picture can be represented by. Otherwise known as an illumination of your screen, one of many which comprise the actual image.
Now, this is directly linked to resolution, because resolution is how many pixels are on your screen at one time! Simple isn't it? NO.
Let's start with a basic chart of commonly used screen, video and graphic resolutions.
Resolution
|
Horizontal Pixels
|
Vertical Lines
|
Total Pixels
|
HD
|
1920
|
1080
|
2073600
|
HD
|
1280
|
720
|
921600
|
SD
|
720
|
480
|
345600
|
VGA
|
640
|
480
|
307200
|
CIF
|
352
|
258
|
90816
|
QVGA
|
320
|
240
|
76800
|
QCIF
|
176
|
144
|
25344
|
If you can decipher this chart, well done, if you can't, read on.
The Resolution column is the name of the chosen resolution, with the top two being 1080 HD and 720 HD respectively.
Generally, the more pixels you have in an image, the greater the quality, depth and colour.
A comparison between a SD and 1080 HD image is above, as you can see, greater depth, more colour, detail and vivid imagery.
Now, quickly lets go over bit rate, or, compression rate.
If you snip back to my video article you can learn the different types of compression, and once you've done that come back here and we will carry on.
Done it?
Ok, "The objective of image compression is to reduce irrelevance and redundancy of the image data in order to be able to store or transmit data in an efficient form." So what this means in Laymans terms, the objective of image compression is to reduce parts of the images data in order to be able to store or send the image in a smaller, quicker size.
If you head on down to this image here you can find a really helpful image on this, but unfortunately it is too large to post here without loosing quality, and there fore being coming irrelevant. (see what I did there?)
I'll use this one for now though, see how along the edge of the compressed image there is a loss in quality? You can also see the pixelation of different aspects of the image within it.
Raster & Bitmap
To start off, a raster graphics image, or bitmap, is an image representing a generally rectangular grid of pixels, or points of colour, viewable via a monitor or other display medium. Raster images are stored in image files with varying formats of compression. A bitmap corresponds bit-for-bit with an image displayed on a screen, generally in the same format used for storage in the display's video memory, or maybe as a device-independent bitmap.
Raster graphics are resolution dependent. They cannot scale up to a specific resolution without loss of apparent quality. This property contrasts with the capabilities of vector graphics, which easily scale up to the quality of the resolution wanting to be rendered by them. Raster graphics deal more practically than vector graphics with photographs and photo-realistic images, while vector graphics often serve better for typesetting or for graphic design.
 |
| Anyone used this joke yet? |
Raster-based image editors, such as Painter, Photoshop, MS Paint, and GIMP, revolve around editing pixels, unlike vector-based image editors, such as Adobe Illustrator or Inkscape, which revolve around editing lines and shapes (vectors). When an image is rendered in a raster-based image editor, the image is composed of millions of pixels. At its core, a raster image editor works by manipulating each individual pixel. Most pixel-based image editors work using the RGB color model, but some also allow the use of other color models such as the CMYK color model.
Side note!
I'm frequently talking about RGB and CMYK, but what are these?
RGB and CMYK are colour models, which is mathematical algorithm for how much colour can be used via multiples.
 |
| No, not you. |
The CMYK colour model is a subtractive colour model used in colour printing and can also be used to describe printing itself, the CMYK is used to break down the 4 colours used in printing, Cyan, Magneta, Yellow & Key (black, or if you're french, noire). The CMYK model works by partially and sometimes entirely masking colors on a white background. The ink reduces the light that would otherwise be reflective, this model is called subtractive because it's inks subtract brightness from white.
 |
| We've all seen this creating a custom colour in MSPaint |
Now, RGB colour model or, red green blue, is an additive colour model in which RGB colours are mixed together to create a vast array of different colours. The RGB model name comes from the initals of the three additive primary colours, red, green and blue! Geddit? The main purpose of the RGB colour model is for representation of images on electronic displays, like televisions and computers, but it has also been used in photography, sometimes. Typical inputs for RGB in cameras and scanners!
Stop, vector time
Right, so the opposite of Raster is Vector, the kind of imagery you find in Adobe Flash and Illustrator, is a very much mathematical algorithm based mechanic of graphics.
The video above might help.
Ok, no it didn't help but it's still taking your mind of this mind numbing stuff right? Anyhow, I have digressed rather largely. Vector graphics is made up of vectors, or paths/strokes, which lead through locations called control points. Each of these points has a definite position on the x and y axis work plan. So since vector images are composed of strokes and not pixels, you can change the colour of individual objects without worrying about individual pixels. Colouring vector objects is like colouring with crayons. A drawing program with allow a user to click inside an object and define its colour. Colouring these is much easier than raster. So where can we use this? Well Vector art is ideal for printing since the art is made from a series of mathematical curves it will print very smoothly even when resized, for example, you can print a vector logo onto a business card, then change it to billboard size without a loss in quality. A low res raster graphic would look absolutely destroyed if you attempted this.
 |
| Vector art by Petra Stefankova |
Bit Depth
 |
| 1 Bit |
 |
| 24 Bit or, Truecolor |
 |
| This bad boy is true 8 bit, yes sir. |
 |
| 8 Bit |
Colour space
In the world of graphics, colour is reproduced one of two ways as I already said, CMYK and RGB, to keep things simple i'm going to stick with RGB for colour space.
No device, camera or monitor can accurately reproduce all of the colours that the human eye can see and use. Therefore in order to ensure that colour is accurately and consistently rendered across all the devices, a system of standardized colour spaces was developed for use within the industry (much like PAL and NTSC, not SECAM though, no one likes SECAM). Each colour space, also referred to as a colour profile or model, represents a specific range of colour within the spectrum of visible light that a device is calibrated to reproduce (Spectrums, this reminds me of GCSE science ): )
So what colour spaces are there? sRGB, developed by the big lads at Microsoft and HP, sRGB is the standardized color space for photographers and the internet. It was used to and designed to standardize colours on monitors and printers for typical home and office viewing conditions.
sRGB has the smallest gamut (the complete set of colours), although its range is still huge compared to usual photo papers. If you use sRGB for emailing photos or using consumer printers, you will get consistent results.
Adobe RGB developed by, Adobe, is a colour space in which attempts to duplicate the spectrum that is reproduced by the professional printing CMYK process. It was designed for professional graphic arts users and has become the standard for more advanced photographers, as it is more of a working model than a device model, it's adjustments after are made in aRGB. Use this colour space if printing onto a professional printer, inkjet or if just using your photos for a more professional context.
Conclusion
Right, lets conclude on something a bit more cheery...like, how scanners work?
Here is a little guide from the website HowStuffWorks on how scanners work, don't worry, i'll be adding to this with how this relates to how cameras work, and how this is used within Digital Graphics.
Here are the steps that a scanner goes through when it scans a document:
- The document is placed on the glass plate and the cover is closed. The inside of the cover in most scanners is flat white, although a few are black. The cover provides a uniform background that the scanner software can use as a reference point for determining the size of the document being scanned. Most flatbed scanners allow the cover to be removed for scanning a bulky object, such as a page in a thick book.
- A lamp is used to illuminate the document. The lamp in newer scanners is either a cold cathode fluorescent lamp (CCFL) or a xenon lamp, while older scanners may have a standard fluorescent lamp.
- The entire mechanism (mirrors, lens, filter and CCD array) make up the scan head. The scan head is moved slowly across the document by a belt that is attached to a stepper motor. The scan head is attached to a stabilizer bar to ensure that there is no wobble or deviation in the pass. Pass means that the scan head has completed a single complete scan of the document.
- The image of the document is reflected by an angled mirror to another mirror. In some scanners, there are only two mirrors while others use a three mirror approach. Each mirror is slightly curved to focus the image it reflects onto a smaller surface.
- The last mirror reflects the image onto a lens. The lens focuses the image through a filter on the CCD array.
So how do digital cameras work too? Well, a digital camera is a camera which takes still images (and videos sometimes) by digitally recording images via an electronic image sensor, or CCD chip.
An image sensor is a device that converts a physical image into an electrionic signal. Early analog sensors were video camera tubes, but are more currently used as Charge Coupled Devices or Complementary Metal Oxide Semiconductors (mouthfull) active pixel sensors.
With a CCD chip an image is projected through a lens onto a capacitor array (or the region of which the photo is there), causing each capacitor to garner an electric charge in ratio with the light intensity of the location. A 1d array, used in in line scan cameras, captures a single slice of the image, which a 2d aray, used in video and still cameras, captures a two dimensional picture corresponding to the image projected onto the lens of the sensor.
Once the array has been exposed to the image, a circuit causes each capacitor to transfer its contents to another chip. The last capacitor in the array dumps its charge into a charge amplifier, which then converts the charge into a volt.
In a digital camera, these volts are sampled, digitized and stored in memory (such as an inbuilt memory or an external SD card).
Well thank you for reading all my articles! I hope you enjoy what else I have to put on here, and for this, you win the winning screen image from the second worst game ever made (as voted by PC World) Big Rigs Over The Road Racing.
Thank you, and goodnight.
