THEORY BOOK
Course Title: Introduction to Digital Imaging
Module Content
Session 1: Introduction to Digital Imaging and Raster Graphics, the Adobe Photoshop Interface
and Blogging
Session 2: Digital Colour Theory, Adobe Photoshop for Digital Photographers and Blogging
Session 3: Digital Design Principles, Adobe Photoshop for Graphic and Web Designers and
Blogging
Session 4: Vector Graphics, SVG and Blogging
Typical outline
Time
Duration
Task
6.30-7.15
45 minutes
Theory session (lecture)
7.15-7.20
5 minutes
Quiz
7.20-7.30
10 minutes
Tutorial demo
7.30-7.40
10 minutes
Break
7.40-8.50
70 minutes
Practical work
8.50-9.30
40 minutes
Research and Blogging time
Introduction to Digital Imaging
1
Session 1: Introduction to Digital Imaging and its
Industry, Raster Graphics, the Adobe Photoshop
Interface and Blogging
Theory session
What does ‘Digital’ mean?
In a general sense, anything ‘Digital’ relates to computer technology. I’m sure you have heard of the ‘Digital
Revolution’. More specifically, the word ‘Digital’ comes from the word ‘digit’ because ‘Digital’ refers to data that is
stored or processed using the digits ‘0’ and ‘1’, otherwise known as ‘binary’.
What is ‘Binary’?
Just the way we use a base-10 number system in everyday life (0,1,2,3,4,5,6,7,8,9), binary is a base-2 system (0,1)
used in computer technology. With the binary system, one bit (which stands for ‘binary digit’) represents a state
that can either be ‘on’ or ‘off’ and this is represented using the values ‘1’ (on) and ‘0’ (off) or vice versa. When using
a large number of bits, a lot of information can be represented on a computer. For example, the following binary
digits can be translated into the words, ‘Welcome to Digital Imaging’.
01010111 01100101 01101100 01100011 01101111 01101101 01100101 00100000 01110100 01101111
00100000 01000100 01101001 01100111 01101001 01110100 01100001 01101100 00100000 01001001
01101101 01100001 01100111 01101001 01101110 01100111
Visit the following Web address and see for yourself www.roubaixinteractive.com/PlayGround/Binary_Conversion/Binary_To_Text.asp
It is worth noticing that each letter in the sentence ‘Welcome to Digital Imaging’ is represented using 8 bits (for
example, the letter ‘W’ in the word ‘Welcome’ is represented in binary as ‘01010111’). Translating binary to text is
done using a standard called the American Standard Code for Information Interchange (ASCII).
Computer scientists use a set of standard terminology when referring to a specific number of bits. For example, 8
bits is also called a byte, and 16 bits is the same as 2 bytes. Refer to the following list for more definitions:






1 bit = a single digit (either ‘1’ or ‘0’)
8 bits = 1 byte (a combination of 1's and 0's)
1024 Bytes = 1 KB (kilobyte)
1024 Kilobytes = 1 MB (megabyte)
1024 Megabytes = 1 GB (gigabyte)
1024 Gigabytes = 1 TB (terabyte)
What is ‘Digital Imaging’?
Digital Imaging is the art and science of capturing, creating and editing digital images.
Capturing digital images from the real world can be done using:
 Digital Cameras (a compact camera or a DSLR = ‘Digital Single Lens Reflex’)
 Camera phones (iPhone, Blackberry etc)
 Digital Camcorders
 Web Cams
 Digital Scanners
What is a ‘Digital Image’?
A digital image is a graphic stored using the binary system. Therefore, every image or photo you view on a
computer is a digital image as opposed to an analogue image (i.e. a printed photo). Most digital images are raster
graphics.
Introduction to Digital Imaging
2
What is a ‘Raster Graphic’?
A raster graphic is also known as a ‘bitmap image’. A bitmap image/raster graphic is made up of pixels. The word
pixel stands for ‘picture element’. A pixel is simply a small square dot. Everything you see on your computer screen
is made up of small square dots/pixels. Today, computer screens can display millions of pixels, which give us the
high quality detail as seen in digital images and digital videos. The resolution on a typical Apple iMac LCD screen is
1920 pixels wide by 1200 pixels in height. Therefore by using basic Area from Maths we can calculate the actual
number of pixels on the screen 1920x1200 = 2304,000 pixels. People refer to High Definition (HD) when the
resolution is more than the standard-definition (768×576). A typical resolution of an HD screen is 1280×720
pixels.
Each pixel in a digital image (or raster graphic) displays a specific colour. However, the number of bits that have
been assigned to each pixel dictates the range of colours each pixel can display. In digital imaging, this is called ‘bitdepth, sometimes referred to as the ‘colour-depth’’.
What is ‘Bit-Depth’?
As an example, lets imagine 1 bit has been assigned to each pixel.
This 1 bit can only represent two states (‘1’ or ‘0’). Therefore
each pixel can only display one of two colours. This is why bitdepth is commonly referred to as ‘colour-depth’.
Take a look at the Figure to the right. Each square represents a
pixel and each pixel can only be black or white because the bitdepth is 1-bit. You could say that the figure displays a map of the
bits (you can see where the word ‘bitmap’ comes from). A digital
image with a bit-depth of 1-bit is called a bitonal image.
Nevertheless, it is unlikely that the bit-depth for an image will be
1 bit. A gray-scale image usually has a bit-depth of 8 bits and
digital colour images usually have a bit-depth of 24 bits. A digital
image with a 24 bit-depth allows each pixel to represent one of
16.7 million colours. Refer to the following list, which details the
range of colours that can be displayed with various different bitdepths.







1 bit (21) = 2 colours
2 bits (22) = 4 colours
3 bits (23) = 8 colours
4 bits (24) = 16 colours
8 bits (28) = 256 colours
16 bits (216) = 65,536 colours
24 bits (224) = 16.7 million colours
What is ‘Resolution’?
Resolution is often referred to as the number of pixels in an image. For example, an image may be 800x600 (800
pixels wide by 600 pixels in height = 480,000 pixels in the image). This kind of resolution is called ‘dimensional
resolution’. However, there is also ‘linear resolution’ which is different.
Linear resolution is the number of Pixels Per Inch (ppi). This has also been called Dots Per Inch (dpi). Interestingly,
computer screens can only display 72 dpi. For example, if you opened an image that was 300 dpi on a computer,
the display screen (e.g. LCD) will only show the image at 72 dpi. However, a printer will proceed to print this
image at 300 dpi. Hence a printed image can have a higher dpi resolution when compared to a computer display
screen.
At this point you might think the more pixels and the higher the bit-depth an image has, the better. However, a
computer scientist will say that a lot of pixels with a high bit-depth is costly in terms of memory, file size and
bandwidth. You might respond and say that we have high capacity hard drives today, however, in terms of
browsing the Internet, no one wants to wait on a Web page loading because the digital images are too big in terms
of file size.
Introduction to Digital Imaging
3
How to you know the file size of a bitmap image?
The file size of an uncompressed bitmap image can be worked out using the following equation:
File Size in bytes = (width x height x bit depth) / 8
For example, if the dimensions of a bitmap image is 2048 pixels (in width) x 3072 pixels (in height) with a bit
depth of 24, the file size can be worked out:
(theWidth x theHeight x bit-depth) / 8 = (2048 x 3072 x 24) / 8 = 18, 874, 368 bytes.
NOTE: Dividing by 8 simply converts the bits into bytes.
What is ‘Digital Image Compression’?
A number of computer algorithms have been developed to compress an image and reduce the size of the actual file.
There are, however, two types of compression techniques, i.e. ‘Lossy’ and ‘Lossless’. Lossy is when the image losses
information, detail and quality as a result of the compression technique. Lossless is where the image is reduced in
file size but still retains its original quality when decompressed. The following image illustrates how the quality of
an image degrades the more a lossy compression technique is applied (i.e. low, medium, high compression).
Example of digital image compression in use:
1.
2.
3.
4.
An author of a webpage compresses a
digital image (e.g. a picture saved as
.JPG file) and inserts it into a webpage.
The webpage along with the
compressed digital image is uploaded
to a server.
A user downloads the webpage along
with the compressed digital image.
The user's browser decompresses the
digital image and displays it.
NOTE: The software routines used to compress and decompress multimedia files are often called ‘codecs’.
Most compression methods involve removing data from the file and replacing it when the file is decompressed.
They most likely use one or more of the methods below:
Repetition
In most digital images some pixels are redundant, i.e. the same
information can be listed over and over again. For example, look at the
image to the right, the bottom half of the image contains a lot of white
pixels.
As dicussed, each pixel is stored on
a computer as a binary number
representing the colour of that pixel.
For example, if there is a row of 200
pixels where every pixel is white,
the same binary information is stored 200 times. This could instead be stored
as one instruction that basically says 'the next 200 pixels are all white'. This
would dramatically reduce the file size. This compression technique is called
Run Length Encoding (RLE). Therefore, instead of using one byte per pixel,
RLE uses one byte to represent numerous pixels. This is done by storing ‘key
bytes’. The computer will read a ‘key-byte’ which represents a decimal
number. Imagine a key-byte represents the number 27. This means that the
colour represented in the next byte will also be the colour used for the next
27 pixels.
Introduction to Digital Imaging
4
Averaging
Suppose an image contains six adjacent pixels that are slightly different shades of the same colour. For these six
pixels you need to store six different numbers. If you average the colour and replace the different shades with one
colour then you could run a repetition compression scheme to further reduce the file size. This method is used in
the JPEG format, however this method can result in the image looking slightly blocky.
Selectivity
In a digital image certain sections stand out more than others, for example the sharp edge of an image. By being
selective and increasing the compression on those sections that do not stand out , a smaller file size for the
perceived quality can be achieved.
Remember image compression schemes can be divided into two categories:
1. Lossy techniques (e.g. JPEG)
A filter function is applied to the image, which reduces the quantity of data, but some of the original data in the
image is lost. This means that the original image cannot be exactly reproduced from the compressed image.
2. Lossless techniques (e.g. BMP’s RLE, TIFF’s LZW)
Lossless refers to compression schemes that conserve space on disk without sacrificing any data in the image. The
original image is always reproduced.
NOTE: Most images on the web are compressed with the JPEG or the GIF system. Photographic images are most often
compressed as JPEGs, and line drawings are most often compressed with GIF.
Compression Ratio
Definition: The Compression Ratio represents the size of the original image divided by the size of the compressed
image. It is basically how much the digital image has actually been compressed.
Compression Ratio = Compressed image size / Uncompressed image size
Some compression schemes yield ratios that are dependent on the image content: a busy image of a crowd of
people may yield a small compression ratio, whereas an image of a blue sky and ocean may yield a high
compression ratio. The higher the compression ratio the smaller the compressed file size.
What file formats are available to store raster images?
There are a large number of file formats for storing raster images. The table below details just a sample of the
available formats.
File format
Extension used
Bit-depth
Bitmap
Tagged Image File Format
Joint Photographic Experts Group
Portable Network Graphics
Graphics Interchange Format
Photoshop Document
.bmp
.tiff
.jpg
.png
.gif
.psd
Variable
Variable
24
Variable
8
Variable
Web
compatible
Yes
No
Yes
Yes
Yes
No
Support for Image
Compression
No
No
Yes
Yes
Yes
No
At the start of each digital image format is a ‘header’ section, which tells the computer what kind of file it is. For
example, 'this is an image file using the JPEG format'. After the header section is the actual data that represents the
image. Without the header section, the computer would not know what format the file is in. The format of a file
refers to the way the numbers are arranged.
The BMP file format
What do we mean when we say file format? Let's use the BMP image file format as an example and examine it in
more detail. The BMP is the native bitmap image file format of the Microsoft Windows environment. The file must
somehow store pixel values - but what else?
Elements of a BMP file specification
Each bitmap file contains a bitmap-file header, a bitmap-information header, a colour table, and an array of bytes
that defines the bitmap bits. Refer to the BMP file specification figure.
Introduction to Digital Imaging
5
Number of bits per pixel
As discussed, the number of bits per pixel is basically the bit-depth. The possible values for the BMP format are:
 1 bit - (black/white)
 4 bits - (16 colours)
 8 bits - (256 colours)
 24 bits - (16.7 million colours)
In 1-bit mode the colour table has to contain 2
entries (usually white and black). If a bit in the
image data is 0, it points to the first palette entry. If
the bit is 1, it points to the second. In 4-bit mode the
colour table must contain 16 colours. Every byte in
the image data represents two pixels. The byte is
split into the higher 4 bits and the lower 4 bits and
each value points to a palette entry. In 8-bit mode
every byte represents a pixel. The value points to an
entry in the colour table which contains 256 entries.
In 24-bit mode three bytes represent one pixel. The
first byte represents the red part, the second the
green and the third the blue part. In 24-bit mode
there is no need for a palette because every pixel
contains a literal RGB-value, so the palette is
omitted.
Colour Look-up Table (CLUT)
The colour look-up table, contains as many
elements as there are colours in the bitmap. As already identified, the colour look-up table is not present for
bitmaps with a bit-depth of 24-bits. The colours in the table should appear in order of importance. This helps a
display driver render a bitmap on a device that cannot display as many colours as there are in the bitmap.
Pixel Data
The pixel data, immediately following the colour look-up table, consists of an array of byte values representing
consecutive rows, or "scan lines," of the bitmap. Each scan line consists of consecutive bytes representing the
pixels in the scan line, in left-to-right order. The number of bytes representing a scan line depends on the colour
format and the width, in pixels. The scan lines in the bitmap are stored from bottom up. This means that the first
byte in the array represents the pixels in the lower-left corner of the bitmap and the last byte represents the pixels
in the upper-right corner.
What is Digital ‘Sampling’?
A digital image is said to be a sampled representation of a scene. Given actual scenes have continuous colour, a
digital image is a sample of those colours that can be used to represent the scene. Sampling has also been called
digitization. Below is an illustration of a 10x10 grid (100 pixels), which is a low sample of pixels from a scene.
Introduction to Digital Imaging
6
What are the problems with sampling?
When a scene is sampled, two basic problems arise:
1. Loss of detail. When an item falls between two sample points the item may not be included.
2. Inaccurate representation of the sampled data. When an item is larger than the sample point, this could lead
to inaccurate representation of the sampled data.
What is Anti-aliasing?
This is defined as the removal of jagged edges and the correct representation of sub-pixel detail.
There are hardware solutions to anti-aliasing. For example, ‘Pixel Phasing’ entails finer positioning of the electron
beam in a CRT monitor. However, although practical and financial considerations make this unsuitable for most
applications, we must look at solving the problem using software. Anti-aliasing in software can take 3 approaches.
1st approach: Supersampling - Increase the sample points, resulting in a greater number of smaller steps. This is
an expensive solution as doubling the resolution quadruples the memory cost.
2nd approach: Postfiltering - Apply a smoothing filter to the completed
image. It removes jagged edges, but as the filter is applied globally to the
image, the appearance of other objects is affected. This however does
nothing to resolve the problem of lost detail.
3rd approach: Prefiltering - 2 ideas (Crow 77 & 81) (a) Intensity
related to area - treat a pixel as bounding a finite area and illuminate
according to the amount of the area covered by the object being drawn,
(b) Spread the effect - the effect of objects influencing a pixel is spread
over neighbouring pixels using an intensity matrix centered on the pixel
and decreasing towards the edges.
As an example of anti-aliasing we will use the Intensity related to area
method. Take a look at the donut shape in the figure. We are going to use
a 9x9 grid to sample the shape.
Introduction to Digital Imaging
7
Using the rules of intensity related to area we will look at the coverage in each sample square and illuminate the
area with the corresponding intensity i.e:
• 100% coverage => full intensity
• 75% coverage => 75% intensity
• 50% coverage => 50% intensity
• 25% coverage => 25% intensity
• 0% coverage => 0% intensity (the background colour)
This gives a soft-edging effect...
At this magnification the result looks fairly unimpressive, but
at normal viewing resolutions anti-aliasing can significantly
reduce aliasing effects, albeit at the expense of a certain
fuzziness.
Introduction to Digital Imaging
8
Session 2: Digital Colour Theory, Adobe Photoshop for
Digital Photographers and Blogging
Theory session
What is colour theory?
It is the theory behind colour mixing and colour combination. Colour mixing is a process where particular colours
are combined to create other colours. This can simply be done using physical ink or pigments. However, colour
mixing in digital technology (televisions, data projectors, LCD and Plasma screens etc) is done using coloured
beams of light as opposed to physical ink.
How do we humans perceive colour?
Rods and cones of the Human eye! Rods are sensitive to light however the cones are more sensitive to colour. The
6 to 7 million cones in the human eye can be divided into ‘red’ cones (64%), ‘green’ cones (32%), and ‘blue’ cones
(2%).
How do we create colours?
From School we should know that by combining primary colors, a large number of other colours can be created
(these have been called secondary and tertiary colours etc). However, usually only three primary colors are
needed to produce a large range of other colours. This is because human color vision is said to be ‘trichromatic’.
Remember the three types of cones in the human eye.
The primary colours chosen and the technique used to create other colours is called a colour model. There are
three popular colour models called RYB, RGB and CMYK. Red, Yellow and Blue (RYB) are the primary colours we
used at School to mix and create other colours. However, this RYB colour model cannot produce as many colours
as we were led to believe and as a result, this colour model has not been implemented in digital technology.
What is CMYK?
CMYK stands for Cyan, Magenta, Yellow and Key (or blacK). These CMYK colours
are actual inks that are mixed at different levels to create a large number of
different colours. As a result, CMYK is the colour model used by most modern
printers. Yes, that’s why printers often need four ink cartridges (one for each
colour). The ‘K’ in CMYK stands for ‘Key’, which is short hand for ‘key printing
plate’. To put it simply, this is black ink.
CMYK is known as a ‘subtractive colour model’. This is because the model
subtracts from white light (white paper) and moves towards black by mixing the
three colours - Cyan, Magenta and Yellow. When these three colours are equally
mixed together, the result is a black colour and when these colours are totally
subtracted, the result is white. This is because white is usually the background colour of the canvas (e.g. the actual
colour of the paper).
A person might ask, if CMY can produce black, why do we need the extra black ink (the ‘K’ in CMYK)? Although
CMY can create black, it is often a muddy black (almost a brown like colour) and because it is expensive to create
black using the three inks (CMY), it makes sense to have dedicated black ink.
NOTE: When black is created using CMY, it is called ‘composite black’ or ‘process black’, and when black is created
using the dedicated black ink, this black is called ‘rich black’.
Introduction to Digital Imaging
9
What is RGB?
The acronym RGB stands for Red, Green and Blue. Again, these colours can be
mixed to create a large number of other colours. Notice the similarity between RGB
and the three various kinds of cones in the human eye.
Unlike CMYK, the RGB colour model is used to create colour on electronic and
digital devices such as televisions, computer screens, LCDs, CRTs, LED screens,
Plasma screens, data projectors and mobile phones. Although the CMYK colour
model uses actual ink to create other colours, the RGB model combines three
differently coloured beams of light (i.e. Red beam, Green beam and a Blue beam) to
create additional colours.
The RGB colour model has been called an ‘additive colour model’. This is because coloured light beams are added
together to create additional colours. When the full intensity of the Red, Green and Blue light beams are combined,
the result is white. Likewise, when the RGB colours are completely subtracted, the result is black (because the
absence of light is black). Notice that the RGB model is the opposite of the CMYK model, where the full intensity of
CMY creates black and the absence of CMY creates white.
What does RGB have to do with Digital Imaging?
Each pixel in most digital images get their colour from the RGB model. In fact, each pixel is digitally stored using
three separate values, each value representing the intensity of Red, Green and Blue respectively. In Photoshop,
these are called the Red, Green and Blue Channels. Interestingly, if you could zoom into a computer screen at the
pixel level, you would see that each pixel on the physical screen is made up of three close but separate RGB light
sources. However, from our normal viewing distance, these separate light sources cannot be seen, which gives us
the illusion of solid color.
With respect to Chapter 1, when we say that the bit-depth of a colour image is 24-bits, this means each pixel
assigns 8-bits to represent the Red intensity, 8-bits for the Green intensity and 8 bits to represent the Blue
intensity (8+8+8=24 bits). As you know from binary, 8 bits can be used to represent 256 distinct states (this is
calculated by 2 to the power of 8 - 28 = 2x2x2x2x2x2x2x2 = 256). Therefore, each pixel can represent 256
intensities of Red, 256 intensities of Green and 256 intensities of Blue. Think about the combinations and colours
you can create using 256 reds, 256 greens and 256 blues. Well, you can calculate this by 256x256x256 = 16.7
million colours. A bit-depth of 24 bits is often referred to as ‘true colour’.
How do we numerically represent RGB colours?
You will find that there are a number of ways to specify an RGB colour. The following is a table of the common
approaches used to denote RGB colours in computing.
The arithmetic approach uses float values
between 0.0 and 1.0 to represent the intensity of
each the RGB colours. In this approach, (1.0, 0.0,
0.0) would produce a solid red given the red
channel is set to 1.0 whilst the green and blue
channels have been set to 0.0.
The percentage approach is similar to the
arithmetic approach. In this approach, each RGB
channel is represented by a percentage. For
example, (0%, 100, 0%) would produce green.
The digital 8 bit per colour channel (bit-depth =
24-bits) approach has been adopted by many image processing applications such as Adobe Photoshop. This is
where each of the RGB colour channels are represented using 256 values (its not 255 values because you need to
count 0 as a value, i.e. 0-255 = 256 values). This approach has been adopted because 256 colours can be
represented using 8 bits. Although these numeric representations may seem intuitive, you will find that RGB
colour values are very often represented using hexadecimal notation.
Introduction to Digital Imaging
10
What is hexadecimal?
Just the way we use a base-10 number system and the binary number system is base-2, hexadecimal is a base-16
number system. To be base-16, the hexadecimal system uses both numbers and letters to represent 16 different
states. Therefore one hexadecimal (or hex) number can have one of the following values - 0123456789ABCDEF.
Before we go any further and explain the hexadecimal system, try understanding the following list. If you
understand the following, you understand the various number systems we have mentioned.







Using the Base-2 system (Binary), two bits can represent 4 different states (22), i.e. 10, 01, 00, 11
Using the everyday Base-10 system, two numbers can represent 100 different states (102), i.e. from 00 to
99
Using the Hexadecimal Base-16 system, two hex numbers can represent 256 states (162), i.e. from 00 to FF
Using the Base-2 system, three bits can represent 8 different states (23)
Using the everyday Base-10 system, three numbers can represent 1000 different states (103), i.e. from 000
to 999
Using the Hexadecimal Base-16 system, three hex numbers can represent 4096 different states (163), i.e.
from 0000 to FFFF
and so on…
Why do we see RGB colour values represented in hexadecimal? The reason being is that each hexadecimal number
is equivalent to 4 binary bits (4 bits is also called a nibble). Therefore two hexadecimal digits are equivalent to 8
binary bits (or one byte). Given 8 bits is assigned to each of the RGB colour channels, two hexadecimal numbers
can be used to represent each of three RGB values. As a result, because 2 hexadecimal numbers are used to
represent each of the RGB colours, 6 hexadecimal numbers can be used to represent the exact RGB colour. The
hexadecimal system is therefore more user-friendly when compared to the binary system. For example, the colour
Red can be represented in binary as ‘111111110000000000000000’ or in hexadecimal as ‘FF0000’.
NOTE: To avoid confusing hexadecimals with the other number systems, hexadecimal numbers are normally prefixed
with ‘0x’ or ‘#’ to indicate that the number is actually hexadecimal and not for example decimal. For example, the
hexadecimal number #FF0000 represents the colour Red given FF means put the Red channel to full intensity, the
following 00 means put the Green channel to zero intensity and likewise the following Blue channel is put to 00.
The following Figure shows the colour picker feature in Photoshop. You will recognize the hexadecimal and the
RGB options that can be used to specify a colour, however you may not familiar with the Hue Saturation Brightness
(HSB) model that can also be used to specify a digital colour.
Introduction to Digital Imaging
11
What is HSB?
Like RGB, Hue Saturation
Brightness (HSB) is another
colour model used to specify a
colour in the digital domain.
Hue defines the tint of the
colour, Saturation defines the
intensity of the colour and
Brightness obviously defines
the brightness or lightness
(also called value) of the
colour.
The HSB colour model is based on a cylinder (refer to the image on
the left). The circle at the top end of the cyclinder has been called
the colour wheel (refer to the image on the right). As you can see from the colour wheel, the Hue is represented in
degrees, for example, 0 degrees = red and 60 degrees = yellow. Therefore, when using Photoshop the Hue can be
specified by a value between 0-360 degrees. As illustrated in the cylinder, the Saturation is defined by moving
between the edge and the centre of the circle. When at the centre of the circle, the Hue is said to be fully
desaturated. Defining the brightness has also been illustrated in the cycliner diagram.
Unlike the Hue, both Saturation and Brightness are defined using percentages. For example, 100% saturation is
full intensity in terms of saturation and 100% Brightness is full brightness.
What is a Colour Gamut?
We know that computer monitors and
screens use the RGB colour model and
most printers use the CMYK colour
model. However, each device will use
these models in a slightly different way
and are said to have their own colour
profiles. A colour gamut is simply the
number of colours a device can
produce. The Figure illustrates a
number of common colour gamuts.
You can see the colour gamut for
human vision in the background. This
is called the CIE colour space that was
created by the International
Commission on Illumination (CIE) in
1931. Notice there is no RGB gamut
that can represent the entire colour
spectrum in human vision. Also, notice
there are different RGB profiles with
different colour gamuts. Most digital
images use the sRGB colour profile
whilst professional photographers like
to use the ProPhoto RGB colour profile
because they want to have more colour
variation. Notice that the CMYK colour
gamut in the diagram. This CMYK
gamut is actually, for an Epson printer.
See how small a typical CMYK colour
gamut is in comparison to the RGB gamuts. This can be problem for many professionals since they use the RGB
model in Photoshop and then print their photos using the CMYK colour model.
Introduction to Digital Imaging
12
What is Gamut Conversion?
Gamut conversion is where an image is converted from one colour space into another. The most common being
from an RGB colour profile to a CMYK colour profile. When an image is scanned, the colour in the image is
converted to the RGB colour space (this is called ‘quantization’) and when the image is printed, the RGB colours
are converted to CMYK. As we seen from the previous Figure, this is a problem because not all RGB colours can be
reproduced in CMYK. Ideally, the gamut conversion is done using colour profiles, i.e. the proper colour profile for
the image (e.g. sRGB) and the proper CMYK profile for the printer. Nevertheless when you print an RGB image
using a CMYK printer, the printed image is only an approximation. This is why knowledge of colour and colour
management is important, particularly in the digital imaging industry!
If you want to find out more about digital colour theory, you should research how a Super-Video Graphic Array
(SVGA) works and how a Liquid Crystal Display (LCD) works. Or even go back in history and look at how an old
Cathode Ray-Tube (CRT) works.
Introduction to Digital Imaging
13
Session 3: Digital Design Principles, Adobe Photoshop
for Graphic and Web Designers and Blogging
Theory session
In this section we will discuss design principles used by graphic and Web designers. Believe it or not, you don’t
have to be artistic to do good graphic design; you can simply memorize the following principles. Most design
principles are not modern but originate from Gestalt psychology and studies on human perception.
RULE 1: Know about information hierarchy (also called visual hierarchy)
After you have established what graphical elements are to be displayed on your poster or your website, you must
think about the information hierarchy. Information hierarchy is simply making important elements important and
less important elements less important. For example, should the logo be more important than the disclaimer or the
copyright information? Should the slogan for the advertisement be the most important element in the design? A
simple example of information hierarchy is the fact that documents like this one, make headings bigger and bolder
when compared to the body text. Imagine what a poster would look like if all the information elements were of the
same font size? A question to ask yourself is ‘What do you want the user to see first, second and third?’
RULE 2: Know about proximity
This overlaps with the previous rule. However, proximity relates to the position of your graphical elements.
Consider why and where to position different elements. For example, should a logo on a Website go on the bottom
right or in the top left? In this scenario, the logo should be positioned top left since the user starts reading from the
top left, and the ownership (logo) of the website should be the first message to the user.
Proximity also relates to where you position graphical elements in relation to each another. For example, those
elements that are related should be close and those that are not related should at least be separated in terms of
proximity.
RULE 3: Know about alignment
Alignment of graphical elements can be left aligned, right aligned,
centered or justified. Remember body-text should never be centered
(centered body-text can be difficult to read). Left alignment should
be our preference because we read text from left to right (unless
your Arabic).
You should try and use a grid to design the layout of a design because
a good digital design ensures all graphical elements line up (this
includes photos, images, logos, text etc). Just remember, that when
you include a graphical element in your design, just make sure and
check that it lines up with another element! You have tools in digital
design packages to help you with this, i.e. guides, grids and rulers.
RULE 4: Know about repetition
Repetition is consistently using the same colours, fonts and style throughout the design. This is important
especially if you’re designing more than one page, slide or webpage. Repetition is essential for the ‘corporate’ look.
For example, the logo should be consistently positioned on every page. For a Website, you should normally use the
same layout on every page but simply change the content. Remember, all main headings and sub-headings should
consistently have the same font size and font type. Repetition makes multiple pages look as if they belong to the
same magazine/website and thus the same company/owner.
RULE 5: Know about contrast
Contrast is similar to information hierarchy. This rule includes making things that are different, different.
However, if two elements are together in terms of proximity, you can use contrast to make them look different!
Digital designers usually create contrast using colour and degrees of boldness. A simple rule is to make sure that
there is enough contrast between the background colour and the foreground text. The best contrast for
readability/legibility is black text on a white background, or vice versa. Try red text on a green background and
you will see what it’s like reading text with insufficient contrast.
Introduction to Digital Imaging
14
RULE 6: Know good typography
Typography is the art of arranging and designing fonts (some call it ‘fontography’). It has its roots in the
Guttenberg press in the 16th century. Nevertheless, typography like most things have been digitized and now new
fonts are being designed every week using digital techniques. The real question is: how many fonts should you
have in a single digital design? The general rule is that you should only use 1 font for consistency and certainly no
more than 2.
When you think about typography, you must consider legibility and the readability of your type. It is known that
people read 25% slower on screen when compared to paper. However, it is also known that certain fonts are more
readable on a computer screen. Sans-serif fonts are those that do not have the fancy tails. It is sans-serif fonts like
Verdana and Arial that are more readable on a computer screen when compared to other fonts. In fact, many
fonts have been specifically designed for computer screens. On the other hand, it is serif fonts (the fonts with the
fancy tails) such as ‘Times New Roman’ that are more readable on paper. The number of elements to be considered
when presenting text in a digital design is endless. In your own time you should learn more about kerning, leading,
tracking and
alignment. These
elements when set
correctly can make
your text more
readable and more
attractive.
You should never
type paragraphs in
uppercase. This
makes body-text
difficult to read.
With uppercase, the
user has to read each letter, but with lowercase, the user can actually read the shape of the words. Try it out! You
will find that you can read lowercase words faster than uppercase words. You should also consider the width of
your body-text. According to research, humans cope better with 12 words per line.
Finally, one last rule - never use the font ‘comic sans’. Digital designs never look professional with Comic Sans as
the font.
RULE 7: Know about colour
The colour scheme or colour palette is very important in a digital design (the same way as it is in interior design).
As a general rule, you should not use any more than 3-5 colours in a digital design, whether that be a website, a
pamphlet or an interface design. These colours should also complement each other.
You should be aware of colour psychology. Colour psychology is knowing what a colour means and knowing what
kind of emotions they stimulate in the human mind. For example, red often has a negative connotation; it can mean
danger, stop and warning. However, red can be used to stimulate the human mind and induce adrenaline. It can
also mean love (St. Valentine’s Day).
Do not forget to consider those who are colour blind. One in 20 men are affected and 1 in 200 women are affected.
Protanopia colour blindness is when the retina does not respond to red and green, deuteranopia is when the retina
does not respond to the colour green and, tritanopia is when the retina fails to respond to the colours blue and
yellow.
If you are unsure about designing a colour scheme, go and use the Adobe Kuler application
(http://kuler.adobe.com/), and select ‘Create’. This program allows you to specify a colour scheme using the
colour wheel. When using this interactive colour wheel, you can specify five types are colour schemes: analogous,
monochromatic, triad, complementary, compound and shades. Also notice how Adobe Kuler does not allow you to
specify more than 5 colours! Another popular way of designing a colour scheme is using photos from nature.
Digital designers often take a photograph of a flower and use the colour picker in Photoshop to select 3-5 colours
from the digital image. This is due to the fact that colours in nature are very complementary and pleasing to the
eye.
Introduction to Digital Imaging
15
RULE 8: Less is more (coined by Mies Van Der Rohe, a German architect)
When you have decided on which graphical elements are to be included in your digital design, just bear in mind
that ‘less is more’. If you have too many elements/ideas, don’t try and squeeze them into your design.
Simplistic/minimalism has been a successful modern approach to design in the past decade. Remember to use
‘white space’ because good use of white space can be used to attract users to other areas in the design. For
example a logo surrounded with white space stands out! If you want to learn more about this you should learn
about the idea of ‘balance’ in graphic design.
RULE 9: KISS (Coined by ‘Kelly Johnson’, An American aeronautical engineer)
Most people remember this rule because of its abbreviation. KISS stands for ‘Keep It Simple Stupid’ and was coined
by Lockheed Skunk Works (an airplane engineer). Being creative does not mean complicated. This rule is
especially for useful in interactive digital designs. For example, navigation on a Website should be simple, you
shouldn’t have to play a game, or select ten hyperlinks to find the contact page.
RULE 10: Remember P.A.R.C
PARC is an acronym that stands for Proximity Alignment Repetition and Contrast. Remember these four rules and
you will be a good Digital Designer.
RULE 11: Know how to Storyboard design and creativity
Professional digital designs start without the use of a computer. Instead digital designers use pen and paper to
specify and think about their ideas. Before using Photoshop to design a Website or a Poster, you should always
storyboard your ideas on paper. By doing this, you will not be thinking about how to use Photoshop, you are likely
to concentrate more on the idea and the design.
Introduction to Digital Imaging
16
Session 4: Vector Graphics, Adobe Illustrator, SVG and
Blogging
Theory session
What is a ‘vector graphic’?
We know that a raster image contains detailed information about each pixel in a digital image. Well, unlike a raster
image, a vector image does not contain information about the pixels. However, a vector image instead stores
mathematical expressions that can used to represent an image. In other words, vector graphics are made up of
lines and curves defined by mathematical objects called ‘vectors’.
What do we mean by mathematical expressions?
The phrase ‘mathematical expressions’ does not necessarily mean that vector graphics are difficult to understand.
All we mean is that an image can be represented using even the simplest of maths. For example, to store an image
of a circle using vector graphics, a vector graphics format will simply store the following 5 items of information:
-
Some indication that its a circle
The radius of the circle
The x, y location of the circle in a 2D coordinate system
Stroke line style and colour
Fill style and color
In this example a vector graphic only needs to have 5 items of information as opposed to a raster image where
information about each pixel is stored. With vector graphics, by using the radius of the circle and the x, y location
etc, the computer can use this information to draw a circle (NOTE: the computer uses the stored vector data to
draw the circle using pixels). In vector graphics, a circle is called a primitive. There are however many other
primitives.
What are the primitives in vector graphics?
Within vector graphics, there are number of
primitive objects that are commonly used. We
have already mentioned the circle, however,
there are a number of others:
- Ellipse
- Rectangle
- Path
- Polyline
- Polygon
- Bezier curve
- Text
What digital image formats support vector
graphics?
We know that JPEG and PNG are formats for
storing raster graphics. However, three popular
formats for storing vector graphics are:
- CGM (Computer Graphics Metafile)
- Gerber Format (RS-274X)
- SVG (Scalable Vector Graphics)
- AI (Adobe Illustrator)
There are however a number of formats that support both raster and vector graphics, i.e. SWF (Shockwave Flash),
PDF (Portable Document Format) and EPS (Encapsulated PostScript).
Introduction to Digital Imaging
17
SVG (Scalable Vector Graphics)










W3C = World Wide Web Consortium
SVG 1.0 became a W3C Recommendation in 2001
SVG is used to define vector-based graphics for the Web
SVG is an open standard
SVG defines the graphics in XML format
Every element in SVG can be animated
SVG images can be created and edited with any plain text editor
SVG images can be searched
Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari support SVG
IE8 and earlier needs a plug-in - Adobe SVG Viewer.
Vector Graphics vs. Raster Graphics: How do they compare?
Please refer to the following table, which details the advantages
and disadvantages of using raster graphics and vector graphics.
The main advantage of using vector images over raster images is
the fact that a vector image can be scaled without losing image
quality or becoming pixelated. This advantage has been
illustrated by the Figure on the right.
Vector graphics
Raster graphics
Advantages
- Requires little information to store a digital
image
- Usually small file sizes
- Good for drawing shapes
- Images can be scaled without pixelation
and degrading image quality
- Good for rendering text
- Easy to manipulate
Advantages
- Can represent photo realistic images using
continuous colour
- A computer can render the image quickly
- Most raster formats are widely supported
- Can manipulate the image easily using
image processing software
- Not processor intensive
Disadvantages
- Not good for photo realism
- Can be large in terms of file size if its used
for storing photo like images
- Not all popular vector formats are widely
supported (e.g. Internet Explorer does not
support SVG)
- Can be processor intensive especially for
animation
Introduction to Digital Imaging
Disadvantages
- Can have large file sizes
- Image pixelates when scaled
- Not good for rendering text
18
Who uses vector graphics?
Graphic designers
Given vector graphics can be scaled without losing quality or becoming pixelated, vector graphics are very popular
in the printing industry. For example, a company logo is normally designed using a vector graphics software
package because the logo can be reproduced on letter headed paper and also scaled to a billboard size without
losing quality.
Digital typographers
Vector graphics are also used by digital typographers because each glyph (character) in a digital font is stored
using cubic or quadratic mathematical curves. This means that digital fonts and type can be scaled to any size
without show pixelation. Examples of vector formats for storing and representing digital fonts are Postscript fonts
and TrueType fonts.
Digital illustrators
A popular technique in the digital art industry is digital illustration. This is where digital artists draw impressive
images using a vector graphics software package such as Adobe Illustrator. Some renowned Digital Illustrators
include are Catalina Estrada, Petra Stefankova, Nathan Jurevicius, J. Otto Seibold, Matthew Inman and Leo
Blanchette.
What is vector-to-raster conversion?
Although we said vector graphics are stored and drawn using
mathematical equations, however because computer screens
only display pixels, every time you open a vector image, the
computer calculates the image and it is then temporarily
converted into a raster image at the last second for screen
display purposes. This is called ‘viewing transform’. Also when
printing a vector image, the image itself is converted into a
raster image. However, you if you want to print a vector image
without converting it to raster, you can use a plotter. A plotter is
widely used in the technical drawing industry. It basically plots
vector directly onto paper.
What is raster-to-vector conversion?
Converting an image from raster to vector can be easily done, however to convert a raster image to vector requires
advanced image processing. The process of converting a raster image to a vector image has been called
‘Vectorisation’ or ‘Image Tracing’.
A popular algorithm for vectorisation is Optical Character Recognition (OCR). This is used to extract text from a
raster image. For example, a person may scan a document and use OCR to convert the rasterised text into
vectorised text, which can allow for digital editing, for example in Microsoft Word.
Introduction to Digital Imaging
19