Digital Graphics

By India Blissett
What is a vector graphic file?
A vector graphic file is a file composed of paths. These paths or
lines are either straight or curved, the data file for a vector image
contains points where the path starts and ends. Because vector files
are not made of pixels the images can be scaled very large without
losing quality (Vector 1). The quality would look the same on a
business card as it would on a billboard. Vector files deal better with
type-setting (Vector 3) or graphic design unlike raster. Behind a
raster image lies binary code made up of bits (binary digits) this is
made up of 1s & 0s and the amount of BPP which determines the
amount of colour in an image thereby effecting the quality of the
image.
Vector file types - India.ai // India.svg
What is a raster graphic file?
A raster graphic file is a file composed of pixels. Unlike vector files,
the resolution will become pixelated when zooming in and lose
resolution due to the fact that as the image enlarges so do the
pixels, as seen in the image on slide 5 (Raster 2). The resolution
and quality is lost (Raster 4). These graphic files deal better with
photographs and photo-realistic images, unlike vector. Raster
images tend to have more tonal detail meaning that you can have
more of a variety of tone. Unlike vector which makes solid colours
which does come into play when you want to illustrate drawings so
this is to be expected.
Raster file types - India.tiff // India.jpg // India.psd // India.png
File formats
There are 3 main graphic groups, raster, vector and meta.
JPG - (Joint Graphics Expert Group) this file format is quite common, as most cameras and digital
devices save images as JPEGs (most common format of images on the web).
PNG - Portable network graphic (bit-mapped image format used to improve GIF)
GIF - Graphics interchange format - This is one of the most popular file formats. These can be still
images or moving images that are looped.
PSD - Photoshop document - This is a layered format that is used in Adobe Photoshop. Photoshop is
the only place you can edit a PSD. Although they can be previewed and seen elsewhere.
BMP - Bitmap image file
TIF - Temporary image file - This is a high quality image file, if youre working on an image file in
photoshop and then save it as a TIF you will still be able to open and edit in Photoshop. Much like a
PSD but if saved as a JPEG it flattens all of the layers and wont be editable in Photoshop.
PDF - Portable Document Format - This is a metafile that can display both raster and vector imagery,
it is designed to be portable across the web.
SWF - This is a flash file that stores multimedia.
AI - Adobe Illustrator, it is editable until saved as a PDF or SVG export out of illustrator. Illustrator will
save them as PDFs or SVGs unless told not to.
SVG - Scalable Vector Graphic - You can scale this graphic up and down as much as you want and
never lose resolution.
JPEG and Bitmap
JPEG -
Is a compressed image file format that is not
limited to a certain amount of colour. JPEG's can
contain colourful, high-resolution data. The detail
can be lost if compressed excessively and also
lost in the process of being compressed.
Bitmap -
Is a file type that consists of a map of dots or bits
that result in a picture. Because they consist of
these dots or bits when you zoom in it is easy to
see these dots or bits.
Images: Raster and vector
Vector (1) x1600 Raster (2)
Vector (3) x600 Raster (4)
File size
This screen-shot shows that the larger the pixels the larger the file size.
File sizes
This screenshot shows the pixels and file sizes of the raster files. Here you can see that I have made an
image in photoshop and saved them individually as different file types. TIF has the most MegaBytes showing
that it is the largest file. All of them being raster shows that they have dependent resolution and more tonal
detail.
Saving in low quality
This here is a low quality JPEG
image. It has been saved as a
low quality image showing that
there are hardly any pixels
therefore demonstrating that the
image is pixelated. This is
known as lossy compression,
meaning that all of the
resolution has been
compressed hence why you can
see the pixels.
Saving in high quality
This is the same image as the
previous one yet it has been
saved in the highest quality JPEG,
hence why the image looks better
and the quality is perfect.
Here is a screenshot example of a low quality JPEG file and one which
is high quality. As you can see the one on the left is more pixelated
when zoomed in 300%. The low quality one has been compressed
resulting in a loss of resolution. This is an example of lossy
compression where the image was saved as 0 quality resulting in the
loss of resolution.
High quality TIF files
These can be edited in photoshop whereas
JPEG files cant. A JPEG file has only one layer
which cannot be edited in Photoshop. They
dont have the ability to have more than one
layer as a default although it can be added on
when editing your project
On the left is a picture from photoshop, the bpp has been changed allowing only
two colours (white and grey) for the pixels which we can see in the image below.
On the other hand the image on the right is the same as the left except, the bpp
has been changed to 4, allowing 16 colours for the pixels, there is a massive
difference between the two even though they are still pixelated you can see more
tonal detail with his facial features.
Here the BPP has been changed to 8 which allows 256 colours. This is the same
image as the previous two but despite the show of pixels the image looks a lot better
than them, this is because there are more colours allowing even better tonal detail.
When zoomed out this image would look near perfect but when zoomed in you will
see that it is still far from.
Lastly this picture is the same but has been changed to 24 BPP which is 16.7
million colours. This picture is perfect and looks the most realistic out of the
previous ones. This is due to it having a full range of colours allowing perfect tonal
detail.
Pixels have different qualities which
relates to BPP. The more bpp then the
better quality of the image simply
because there are more colours. Here
is a 1 bit image also known as
monochrome (black and white)
resulting in the lack of colour. There is
only two possible digits meaning that
there are only two possible colours to
be show 1s and 0s = black and white.
This results in a lack of quality due to
the minimal colour and tonal detail. In
a pixel of a 1 bit image there can only
be a 1 or a 0 where the pixel of a 4 bit
image will consist of 4 different binary
digits. This gives out 16 different
colour possibilities resulting in an
image with better resolution. A
massive amount of colour possibilities
is what makes the image look more
realistic.
In these images you can see
the obvious difference in a 4 bit
image (top) to a 8 bit image
(bottom). The image on the top
will consist of 16 different
colours giving him quite an
animated look. Evidently there
are less tones on his face
unlike the bottom pictures
which are 8 bit images which
means it contains 256 different
colours. This gives him a much
more realistic look, although in
the bottom close up you can
see small dots on his eyes
indicating that the resolution is
near to perfect but as it is 8 bit
it cannot capture every little bit
of colour on his face. Instead is
carries through 256 different
colours.
Text in Photoshop
Because Photoshop is a raster
programme, when text is placed on
top of an image it becomes
pixelated. Yet in the image here we
see that the picture behind the text
has lost no resolution and has
remained high quality. Most
programmes read text as vector as it
consists of simple lines and shapes
so there is no need for it to be made
up of pixels. Text is better off to be
used with vector because of the fact
that you can enlarge it and it wont
lose resolution or quality.
Saving as a PDF
Here you can see that neither
the text or image in the
background has lost resolution
and even when you zoom in the
text wont become pixelated.
This is simply because this
picture is saved as a PDF and
because PDF is a metafile it
combines both raster and vector
digital images. However even
though the text wont become
pixelated, the image in the
background will.
Illustrator
This picture is an example of live
trace in illustrator. This turns a
vector file into a raster file. By
using live trace no matter how
much you zoom in you dont
lose quality. Despite this, when
zoomed in the image isnt
incredibly clear because there
arent as many tones as it
leaves out tones that it cant
puck up. These images are
made up of shapes and lines
rather than vector which is made
up of square pixels.
Code behind the image
<rect width="120" height="80" fill="rgb(255,51,0)"
stroke="rgb(0,0,204)" stroke-width="4" />
<rect width="1200" height="800" fill="rgb(255,51,0)"
stroke="rgb(0,0,204)" stroke-width="4" />
The reason as to why a
vector image stays intact
and the quality isn't
tarnished is because the
mathematical structure
changes when zooming
in.
The width and height once
changed, enlarges or
minimizes the image and
if it is a vector file type the
image will look like the
one that is shown here.
Comparison: Raster and Vector
Raster formats (Bitmap) are suited to photographs and photo-realistic images,
where on the other hand vector formats (object-orientated) are used for
drawings and can be described by mathematically defined shapes.
The structure of Raster formats depend on resolution which causes the quality
to tarnish and diminish. It is a format most common with digitising analogue
images. On the other hand vector formats are structured mathematically and is
independent with its resolution causing the quality to remain and not be lost.
Vector is a format that is not usually used for digitising and it is a less common
web format unlike Raster which is a more common web format.
Also the layering of images is harder and less common with raster format unlike
vector which is easier and more common. Raster formats are usually larger in
file size but quicker to display, where on the other hand vector formats are
usually smaller in file size yet slower to display.
Finally it is difficult to convert a raster into a vector format as it will lose the
quality due to the amount of colour, whereas it is easier to convert a vector
format into a raster.
Metafile
An example of a metafile would be a PDF, SVG, CGM.
Metafile is a generic term for a file format that has elements
of vector, raster and type data. These files provide support
for an operating system's computer graphics e.g., Microsoft
Windows uses Windows Metafile and Mac OS X uses PDF.
Flash process (Screen shots)
Here in this screenshot you
can see some tools in Flash
player and this will be used
many times.
How I started
I created a new project
and then changed the
workspace into classic
Changing the raster to vector
This image has been zoomed in by 400% and
is pixelated as the image is raster.
Changing the raster to vector
This image is now a vector image where before
it was a raster
Photoshop
Selection tool when selecting the image or text
can resize the item and thereby sustaining a
vector image.
Vector image on illustrator