DevEX - reference for building teams, processes, and platforms
Digital graphics technology
1.
2. Pictures are made up of millions of pixels. These are small squares of block colour which are put together in
order to create a picture. The more pixels per image, the better quality the image is. You can tell whether an
image is of good quality by how long it takes for the picture to pixelate when zooming in. The smaller and
closer the pixels in an image are the more clearer and better quality the picture is.
Good quality image In a picture the pixels are not
visible unless the image is very
This is a high resolution image because bad quality. Image resolution
you have to zoom in a lot for the image represents the quality of a
to pixelate. picture. The higher the resolution,
the better quality the image is.
Full size image Zoomed in until
pixelated
Bad quality image
Good quality image
This is a low resolution image
because you don’t have to
zoom in much for the image
to pixelate. The image is also
visually very blurry not very
detailed.
Full size image Zoomed in until
pixelated
Bad quality image
3. Compression (lossy, lossless) Original image
(lossless PNG, 60.1
KB size) —
Compression is where the file size of a photo is decreased. This helps when you uncompressed is
108.5 KB
have lots of photos because it means that you don’t lack in space to store it
and it doesn’t cost a lot to print. Although compression can decrease the
quality of the image. But if the image is compressed slightly, the image quality
doesn’t appear affected. Sometimes if your image loses quality it is ok as if you
use it for example in a site, you may only want the image very small for an icon
maybe. Therefore as the image is small, the loss in quality isn't very Low compression
recognisable. In a bitmap or raster image, when compressed it may lose (84% less
information than
quality depending on what file type it is saved as because the image is made uncompressed PNG,
up of pixels and when compressing raster images, pixels are taken from areas 9.37 KB)
of block colour and so the less pixels, the smaller the file size but the more
quality is lost.
Lossless data compression is a class of data compression algorithms that allows Medium
the exact original data to be reconstructed from the compressed data, meaning what compression (92%
less information than
appears as the same image is reconstructed uncompressed PNG,
4.82 KB)
Lossy data compression only allows an approximation of the original data to be
reconstructed, in exchange for better compression rates. data encoding method that
compresses data by discarding some of it.
File extensions e.g. bmp, png, gif, tiff, jpg, psd High compression
(98% less
information than
uncompressed PNG,
1.14 KB)
4. Vector graphics are made out of points, lines, curves, and shapes or polygons, which are all based on
mathematical equations, to represent images in computer graphics. An advantage of vector images is that
when zoomed into, the image does not pixelate as it is made up of lines as apposed to pixels unlike raster
images. Vector images are also generally a smaller file size although some systems may not support the raster
image format. When creating a graphic, there is a tool which you can use to create a polygon. You can then
manipulate this image by moving the lines and points of the polygon.
File extensions for vector graphics include:
Adobe Illustrator Artwork (AI) is a proprietary file format developed by Adobe Systems for representing single-
page vector-based drawings in either the EPS or PDF formats. The .ai file name extension is used by Adobe
Illustrator. Vector graphics can be made in Adobe Illustrator and there are many tools and brushes to create
any desired image. Anything made in Adobe Illustrator is saved as an ai flle type.
Encapsulated PostScript (EPS) is a standard format for importing and exporting
PostScript language files in all environments. It is usually a single page PostScript
language program that describes an illustration. The purpose of the EPS file is to
be included as an illustration in other PostScript language page descriptions. The
EPS file can contain any combination of text, graphics, and images. An EPS file is
the same as any other PostScript language page description, with some
restrictions.
Adobe Flash (FLA) is an image or animation created on Adobe Flash.
In this program you can use a variation of tools and effects to create vector
Graphics and animations.
5. Bit Depth is the depth of colour within each pixel. In an RGB image there 1 BIT
are 3 main colours that make up any other variations of colours in the (2 colour
colour space. variations)
Bits per pixel (BPP) is the number of distinct colours that can be
represented by a pixel which depends on the number of bits per pixel
(bpp). A 1 bpp image uses 1-bit for each pixel, so each pixel can be 2 BIT
(4 colour
either on or off. Each additional bit doubles the number of colours
variations)
available, so a 2 bpp image can have 4 colours, and a 3 bpp image
can have 8 colours.
16 bpp, 216 = 65,536 colours (“Highcolour" ) 4 BIT
24 bpp, 224 ≈ 16.8 million colours ("Truecolour" (16 colour
variations)
Monochrome (265 colour variations) describes images in one colour or
shades of one colour. A monochromatic object or image has colors in
shades of limited colours or hues. Images using only shades of grey (with
8 BIT
or without black and/or white) are called grayscale or black-and-white.
(256 colour
variations)
•Highcolour is a 16bpp image usually but sometimes supports 15bpp
image. Each pixel is represented by 2 bytes
16 BIT
•Truecolour is defined to mean at least 256 shades of red, green, and (65536 colour
blue, for a total of at least 16,777,216 colour variations. variations)
•Having more shades of colour can enhance a photograph.
•BPP
24 BIT
(16.8mill colour
variations)
6. Bit Depth can be changed In Photoshop so that the amount of colour used can either be reduced or increased.
This is achieved by opening your picture in Photoshop, then selecting “Image”, “mode” and then selecting the
number Bits you want the image to be adjustable to.
7. Colour Space refers to the 2 colour options in an image (RGB and CMYK)
RBG means that the image only includes the shades between the
colours red, blue and green. Whereas CMYK means that the image
includes all shades in-between Cyan, Magenta, Yellow and Black. .
RGBA is RGB with an additional channel, alpha, to indicate
transparency.
CMYK is another colour space. A wide range of colours can be created
by the primary colours of pigment (cyan (C), magenta (M), yellow (Y),
and black (K)). Those colours then define a specific colour space. To
create a three-dimensional representation of a colour space.
On computer screens, RGB is used for the display to create an accurate
copy of the image in CMYK. It is used in colour printing as a standard
format and this is how a picture may print off in odd colours if the image Additive colour
is in RGB because all colour printers are CMKY. mixing: Three
overlapping light
Greyscale (8 bit colour depth) only allow shades between black and bulbs in a vacuum,
white. It means adding together to
that in an image the value of each pixel is a single sample, that is, it create white.
carries only
intensity information. Images of this sort, also known as black-and-white,
are
composed exclusively of shades of grey, varying from black at the Subtractive colour
weakest mixing: Three
intensity to white at the strongest. splotches of paint
on white paper,
subtracting
together to turn the
paper black.
8. YUV (Luminance and chrominance) takes human perception into account. Historically, the terms YUV and Y'UV were used for a
specific analogue encoding of colour information in television systems. It’s a way of breaking the brightness and colours in the
image down into numbers, and it’s slightly different from RGB.
HSV (Hue, saturation, value) HSV is also known as the hex-cone colour model. Saturation indicates the range of grey in the colour
space. It ranges from 0 to 100%. Sometimes the value is calculated from 0 to 1. When the value is ’0,’ The colour is grey and when
the value is ’1,’ the colour is a primary colour. A faded colour is due to a lower saturation level, which means the colour contains
more grey. Value is the brightness of the colour and varies with colour saturation. It ranges from 0 to 100%. When the value is ’0′
the colour space will be totally black. With the increase in the value, the colour space brightness up and shows various colours.
Hue replaces each colour in an image with another. The colours that each one will turn into is shown in the
colour bars un the window. The top bar represents the colours already in the picture whilst the bottom shows
which colours will be replaced with which.
Saturation is the
richness of the
colours in an image.
The more saturation
in an image, the
richer the colours
and the less
saturation, the duller
the colours.
hex-cone colour model.
9. Scanners
An example of image capture is a scanner. The idea of a scanner is to insert a piece of paper with the image
into a machine which then when connected to a computer, copies the image onto the computer. From there
you can save or print the image you have scanned. Most the time, you can select one out of a few options on
how you would like to scan the image. For example: black and white, Colour or text.
There are 3 types of scanners:
Flatbed scanners, also called desktop scanners, are the most versatile and commonly used scanners
Sheet-fed scanners are similar to flatbed scanners except the document is moved and the scan head is
immobile. A sheet-fed scanner looks a lot like a small portable printer.
Handheld scanners use the same basic technology as a flatbed scanner, but rely on the user to move them
instead of a motorized belt. This type of scanner typically does not provide good image quality. However, it
can be useful for quickly capturing text.
Drum scanners are used by the publishing industry to capture incredibly detailed images. They use a
technology called a photomultiplier tube (PMT). In PMT, the document to be scanned is mounted on a glass
cylinder. At the centre of the cylinder is a sensor that splits light bounced from the document into three beams.
Each beam is sent through a colour filter into a photomultiplier tube where the light is changed into an
electrical signal.
Scanners are useful in businesses as you can copy and print a page you have without having to find a file on
the computer and print it off meaning you can print things off in mass.
10. Digital Cameras
Digital cameras take pictures and sometimes videos. They have LCD screens which allow you to change settings
and view photos that you have taken.
Compact cameras are designed to be tiny and portable and are particularly suitable for casual and "snapshot"
use. Hence, they are also called point-and-shoot cameras. The smallest, generally less than 20 mm thick, are
described as subcompacts or "ultra-compacts" and some are nearly credit card size.
Some of the settings you can change on a digital camera may include, Flash (Auto) (if a subject is too dark, the
camera will flash a small light when taking the photograph to lighten up the photo. There is also a setting to stop
flash so if you are shooting something in broad daylight. You may have several settings such as a landscape
setting (adapts the camera settings to what would be best when taking pictures of landscape), portrait which
gives overall soft skin tones, sports (fast shutter speed meaning you can capture fast moving objects) nature (for
maybe getting close up shots of things such as flowers or wildlife) and most cameras also come with a timer,
which is good if taking a group photo for example.
On some digital cameras you can change the aperture and shutter speed. The aperture controls the size of the
hole that the light passes through in order to get into the camera. By adjusting this to make the aperture lower
(hole smaller), it means that more light can get into the camera, meaning that your depth of field on the photo
(whether all of the photo including foreground and background)
will be small. This means that the part that you focus on will be focused
and any further away or closer. Whereas, by making your aperture larger
(bigger hole) you are letting more light in, meaning that more of the shot
will be focused, which is ideal for a large depth of field or if your planning
on getting a landscape photo. The shutter speed alters how much time
light has to enter the lens. For example, if you wanted to film a city with
cars going past but only want the lines left by the car lights visible, you
would select a slow shutter speed.
Generally, digital cameras are easy to operate and have a reasonably
Large storage. They aren't too expensive and they come with a lead to
Attach to your computer in order to transfer them. Pictures can be easily
Deleted.
11. Resolution
Image resolution ( measured in Pixels per inch)describes the detail an image holds. The term applies to raster
digital images, film images, and other types of images. Higher resolution means more image detail.
Digital cameras are available with different qualities. Some cameras boasts higher resolution photos and they
are generally more expensive. Whilst some cheap cameras may not take very good quality photos. The main
thing that determines how good a digital camera is along with the amount of zoom available , is the
Megapixels the camera has, which represents how many pixels are in the image. The more megapixels the
camera has, the better quality the image taken will be. The more megapixels, the better the resolution of the
photo. The only downside of this is that bigger resolution photos mean bigger file sizes.
12. Storage
Dependant on the resolution of the picture, image files generally take up a lot of space in comparison to
something like a word document because of all the information that is stored. There are several different
places to save these documents, each hold a set amount of space. An example of this is a USB Drive (Universal
serial bus) or memory stick. Memory sticks vary in space as you can get 1 GB of space where as on some, you
can get 8 GB.
Asset management is the organisation of files or images
in folders. It is important if you have a lot of files to keep
them organised in order to find the file you want if you
wanted to use it. Also, by giving your files relevant file
names when saving them, it makes the file easier to find,
especially when using the search bad. By separating
different files and putting them into named folders,
managing information and files in much easier and
quicker and means you have easy access to the files
you need.
13. Target Destinations are what an image is going to be used for, for example the internet or to be printed out.
Depending on the target destination, the image may need to be altered. If the image is to be put on a
website and it is a high resolution image with a large file size, the image may need resizing ort or compressing if
it is only going to be a small icon and in order for the image not to slow down the loading speed if the page
too much. One thing that can be done is resizing. When made smaller in dimensions, the image is a smaller file
size as there are less of each colour pixels in the image. Although, if made bigger, the quality may be
sacrificed. It is important when preparing an image for the web that you get the right balance between good
quality and fast loading time.
To resize an image, you can open it in Photoshop and press File then Image size. A new window is then
displayed which has options on the dimensions of the image you are editing. As you change the width, the
height is changed to counteract so not to stretch the photo.
14. An image can also be optimised in order to reduce file size. This is good if the image only has to be a small
icon on the website or if the picture only consists of a few colours. To optimise a photo, you open the image in
Fireworks, Select File and Image Preview. From here a window will then appear with several options. In this
window you can view how the image would look like on the web and in different file formats. This also displays
the loading time for the image on the web. Also, you can choose what percentage quality you want using the
scroll down bar.
Here I have changed the file type of the image to see how
it would look on the web. The one to the left is saved as a
JPEG and is good quality. But when I changed the image
file type to GIF, though the load time was quick like the JPEG
the picture showed noticeable quality loss.
JPEG GIF
Changing image quality