Digital Graphics

Reece Hancock
 Pixels
Picture elements (pixels) are a physical point in raster images or the smallest element in a
display. Pixels like LCD pixels are displayed in a 2D grid and are represented by dots or
squares, each square or dot is a sample and the more samples you have the better the
image looks. All pixels are the same size which allows them to be organized horizontally and
vertically along your screen with no complications as the resolution set on the screen won’t
have any miss shaped pixels. Screens that are 4k have approximately 4000 pixels
horizontally, this makes the quality very good compared to other resolutions as the more
pixels make it a lot more defined. The more pixels there are also help with zoomed because
when zooming in the images resolution goes down so if you start with a higher resolution
you will have a higher amount when zooming compared to a lower resolution. The intensity
of a pixel can be represented in greyscale, these images have values for different
brightness's, they are normally done in 8 bit, this gives a possible of 0-255 outcomes, 0 is
represented as black and 255 is represented as white all the other numbers in-between are
different shades of black and change in brightness. Image resolution is how many dots
(pixels) are in an image, this is measured in dots per inch (dpi), images that are displayed on
a computer monitor should have 72-96 dpi.
 Raster images
• A raster graphic (bitmap) is an image captured by a camera or some device and are made up of
many x and y coordinates on a display. The raster file is larger than a vector file and when
modified can easily lose quality, GIF, JPG, BMP, PNG and PSD files are all bitmap, when zoomed
these files will lose quality as the resolution will go down as you zoom, this means if you want to
get a more high quality image you will need it to be a higher resolution which will take up more
space as a file. PSD files open photoshop as they are photoshops unique files where as files like
BMP will be opened onto the windows gallery. PNG files are lossless bitmap files and can be
opened using most file openers. Lossy files are images or a file that is stored to take up lower
space, this means when you store it or upload it, it loses quality and becomes a worse picture, the
pros of this is that it uses less space and takes less time to upload. Lossless files use up a lot of
space as when they are being saved or uploaded as they don’t lose any quality, this allows them
to look as good as they did but they take up more space. Depending on what quality is needed.
Compared to vector images they take up way more space but that is because they look a lot more
realistic instead of cartoony and don’t use block colours.
 Vector image
• Vector images use polygons to map images in two or three dimensional worlds, they are better than raster
images as they can be zoomed in and out without dropping any quality, this means they are better for
images that need to have there shape changed, like logos or a graphic that may need to be 16px
manipulated up to 64px. Vector images use less space up than raster images which gives them a big pro
against raster images. The main program that people use to create vector images is Adobe Illustrator.
Vector images are stored in .ai and .fla, these file types are editable in the software they were saved from.
Ai files are files that are saved from adobe illustrator for single page graphics. An fla file is one that is
made from adobe animate, this file type can contain more than adobe illustrators file type as it can store
videos. These. .eps files are files that contain images or text, they are used by computer drawing apps and
can also store font designs. Images that are saved like this can be used to go back and edit the text or
graphic where as when you save the image into GIF, JPG and PNG they cannot be edited. Vector images
are made from lines and curves, this allows them to be manipulated into an image, the line and curves are
then edited into polygons and are saved, vector images don’t look realistic as they aren’t using the pixel
based colour system which raster do to get the colours, they are normally made up of block colours which
gives them a very cartoon look. Vector images are never super realistic and used in graphics instead of
photography. Vector images have no data lost if stretched of manipulated. The lines and curves have
anchor points which join them together.
Bit depth
• Bit depth is the amount of colours that can be seen in an image, the lowest amount is 1 bit, this
would be 2 colours black and white, 1 and 0. the higher the bit depth the more colours can be
seen in the image. For example 8 bit can see 256 colours. Monochrome is an image that is in black
and white using shades of black to add texture, these use the same 8 bit depth, they just use 256
shades of black and white to create the image, this is also known as a greyscale image, they are
referred as monochrome because it uses two colours which is black and white, monochrome is
used to create more realistic pictures and blending as it doesn’t get the sharp edges and lines.
Monochrome is less quality than normal pictures. High colour is stored in 2 bytes which is the
equivalent of 15/16bits, they hold 65,536 colours. True colour is 24 bit, RGB colour. True colour is
better than high colour as it has more bits so it can store more colours. Deep colour is the best
though as it can use 30/36/48 bits which allows more colours.
Colour space
• The RGB colour model is where red, green and blue light are added together to reproduce a lot of
colours. RGB is used for electronic systems like television and computer display. It is also used for
photography. The RGB colour model is based on the human perception of colours.
• Greyscale in photography is where each pixel is represented by an amount of light, the light
carries intensity which corresponds with a different shade. Greyscale is also known as black and
white or monochrome.
• YUV is a colour space used in image pipeline. It takes human perception into account, this reduces
bandwidth and chrominance, compression artifacts can be masked by human perception than the
use of RGB.
• HSV Is a cylindrical-coordinate representations of points inside of the RGB colour model. HSV
rearranges the geometry of RGB in an attempt to be more perceptually relevant than other
representations.
Image capture
• Capturing an image needs a camera or scanner, this is called digitisation, the resolution is the
detail in a picture taken. The higher the resolution the better the quality. A lot of cameras now
can take very high quality pictures compared to old phones. 256x256 is the resolution found on
cheap phones. 1216x912 is a good resolution for printing. The higher the resolution the bigger
the file size will be there for phones might want to be kept on a lower resolution as they will use
up a lot of memory. Image scanners are used to scan photos you have to put them onto your
computer. Flatbed scanners are the most used scanner. The item is placed inside it and a glass
platen, this allows you to scan items that may be thicker like magazines or hardback books. The
size of the file may be bigger for different items you scan as If it is a small image it will take up less
space than a bigger magazine or book. Asset management is a system that monitors and
maintains a group.
 Optimising
• Target destination is where you want a graphic or image to be stored in your network, the person
saving the files will want to put all the graphics or images in the same folder as this allows the
web server to locate the files quickly which saves time from the web server searching for different
picture in different places. Bit depth is the amount of bits in a pixel. Reducing this will make the
file smaller but also make the image lose quality, the website creator will need to find a balance
between the two as if you have the highest bit depth it will make the site very slow as files will
take longer to load. If the creator doesn’t need very high quality turning the bit depth down will
increase performance in on the website. Different websites will need different image qualities as
they may need very high quality images. Resolution also has the same effect as bit depth.
Reducing the resolution will lower the quality but make the file size smaller, its all preference for
the person saving the image if they want the quality or the low file size. Changing the dimensions
can make the graphic fit where it needs to go and can be important for making things fit.
Changing the dimensions doesn’t change the resolution, so if you stretch a picture it will
manipulate the pixel to fit that place and can make a picture seem distorted compared to how it
first looked. This will make the image quality get worse. The intended image output is important
because you need to know what you are designing and design it for that purpose making it more
time efficient as the graphic will be ready to be put in to its output. The intended image output is
the data found in a computer file which informs on the graphic output.
Sources
• https://image.freepik.com/free-vector/colorful-pixels-background_1018-87.jpg
• https://en.wikipedia.org/wiki/Pixel
• https://homepages.inf.ed.ac.uk/rbf/HIPR2/value.htm
• https://en.wikipedia.org/wiki/Vector_graphics
• https://en.wikipedia.org/wiki/Image_Capture
• https://en.wikipedia.org/wiki/Color_space
• https://en.wikipedia.org/wiki/Bit_depth