2. Raster Graphics
Raster Graphics are one of the main types of digital
graphics. They are made up of Bitmaps (or pixels) which
record the colour information of that section of the
image. Bitmapped images have a set resolution meaning
that changing the size of the image results in it
becoming distorted (or pixelated).
3. Vector Graphics
Vector Graphics are another main type of digital graphics.
They are made up of Vectors (or paths/strokes) which are
defined by the start point and end point, with curves and
angles between them. Vectors can be resized infinite times
and pixilation won’t occur. This means that Vector Graphics
are good for commercial uses such as company logos that
need to be in many different formats/sizes.
4. Distinction between Raster and
Vector Graphics
Raster graphics will become pixilated after resizing an
image, whereas, Vector graphics offer lossless
compression – retaining all of the original data, even
after resizing.
Here is a diagram to help explain the fundamental
difference between the two:
6. JPEG
Stands For Joint Photographic Expert Group
Used For/Example JPEGs are primarily used for
photographs and on websites. They
are used widely on the internet.
Advantage • Small file size.
• Good for use on websites where
data usage is important.
• Widely compatible with most
mobile phones, tablets, computers,
cameras etc.
Disadvantage • Sacrifice image quality for file size
meaning that they aren’t always
optimal visually.
• Because JPEG is a Raster Graphic,
changing the size of the JPEG will
result in it becoming pixilated.
7. TIFF
Stands For Tagged Image File Format
Used For/Example Newspapers/magazines/publishing.
Useful for graphic designers.
Advantage • Lossless compression means that
the file doesn’t lose composition.
• TIFF enables multipage documents
in a single file, which is extremely
useful for magazine covers and
publishing.
Disadvantage • Large file size compared to other
raster graphic formats – could be
inconvenient.
• Isn’t available on as many
platforms as JPEG, for example.
May required specialised software
to be able to view.
8. GIF
Stands For Graphics Interchange Format
Used For/Example Mainly used for low file size animation
on the internet.
Advantage • GIFs are essential a series of images
played quickly to create the illusion
of movement. This means that they
have a low file size in comparison
to other video formats. GIFs are a
good alternative to larger video
formats.
• Offers lossless compression
meaning that this format will not
lose resolution.
Disadvantage • Due to GIFs being very compressed,
their quality can be poor and
pixilated.
9. BMP
Stands For Bitmap Image File
Used For/Example Common format in image processing
programs.
Advantage • Lossless compression means that
the file doesn’t lose composition.
• Optimised for Windows operating
systems.
Disadvantage • BMP has a large file size meaning
that it could be inconvenient to
upload to the internet.
11. PSD
Stands For Photoshop Document
Used For/Example PSDs are used almost exclusively for
Image Manipulation in Adobe’s
Photoshop.
Advantage • Specialised – designed for a
particular purpose and are good at
what they do.
• Saves all of the layer information
and page formatting in a single
document.
• Lossless compression – No loss in
definition. PSDs can be perfectly
reconstructed.
Disadvantage • File sizes can become extremely
large which means that they have
to be converted if needed to be
viewed effectively as an image.
• Not necessarily compatible with
12. AI
Stands For Adobe Illustrator Art
Used For/Example Used for creation of logos/designs in
specifically in Adobe’s Illustrator.
Advantage • One of the main features of AI is
that they are vectors and so have
lossless compression. They can be
stretched, resized, uploaded,
downloaded and changed in any
way, but will not lose definition.
Disadvantage • Can create some massive file sizes
unless the image is rasterised.
• Designed for use in a specific
program and so is only compatible
with particular programs.
13. FLA
Stands For Flash File
Used For/Example Used to create animation and games
in Adobe’s Flash systems.
Advantage • Can produce a high quality file with
a relatively small file size.
• Files can also record sound and
video which is something not many
other image formats have.
• Widely readable/used on the
internet and with most software.
Disadvantage • Created for specific use in Adobe
programs, so there may be
platforms/software that can’t read
FLA.
14. WMF
Stands For Windows Metafile
Used For/Example An image format originally created for
Microsoft Windows in 1990. Can be
used to create designs and logos.
Advantage • WMF have lossless compression
meaning that they do not lose
definition unless they are
rasterised.
Disadvantage • Have become largely irrelevant and
replaced by more efficient file
formats (such as AI.)
• As this format was designed in a
particular operating system, it
might not be compatible with
systems like Apple’s Mac or Linux.
16. Compression
Definition Compression is reducing the amount of
bits in an image to reduce the file size. If
a file has lossless compression, then the
image will never lose definition. But if a
file has lossy compression, then it has
been changed by reducing the
information in each pixel to make the
file size smaller.
Advantage The primary advantage of using
compression in images is that the file is
carrying less information and therefore,
the file size is reduced substantially. It is
sacrificed for a lesser quality of the
image in general as all of the bits will
have less colour information.
Disadvantage The disadvantage is that the quality and
clearness of the image is largely affected
by compression, meaning that the image
will appear blurry and distorted instead
of clear and in it’s original quality.
17. Image Capture
Method Scanner
How is it used for image capture of
graphics
Scanners can be used to process
physical documents and turn them
into digital copies so that they can be
sent/used online. They are useful in
professional office working
environments.Method Camera
How is it used for image capture of
graphics
Cameras are commonly used to create
photographs of surroundings and to
record data via an image. They create
a digital copy of this information so
that it can be imported to a computer
and used online.
Method Graphics Tablet
How is it used for image capture of
graphics
Graphics tablets have the primary
function to manipulate images on a
mobile device – essentially a portable
version of Adobe’s Photoshop.
18. Optimising
Why would you optimise? You would optimise an image if you
were uploading it to the internet as if
an image is not optimised, it might
take a long time to load that web
page.
How can you optimise? One way to optimising an image is
changing the size and dimensions of
it. This is a basic function in any
photograph manipulation software. In
Photoshop, it can be done by going
into Image>Image size.
Advantage to optimising • The file size is smaller making it
easier and quicker to view on the
internet.
Disadvantage to optimising • The file is smaller, meaning that it’s
not in it’s original format.
• Some forms of optimising can make
the file lose quality.
20. File Size
What could affect a Working Scale
(Photoshop) document file size?
The Working Scale will affect the
dimensions of the image, meaning that the
larger the width and height, the larger the
file size is going to be. This is because as
the width and height are increased, so is
the amount of pixels in an image.
How could you reduce the file size
of a Working Scale document
without affecting quality?
To reduce a file size without affecting the
documents quality, you would have to give
the image a smaller resolution by going
into Image > Image Size in Photoshop.
What is an advantage of scaling up
images before exporting?
Making an image larger before it is
exported is good because this means the
picture will last longer (damaged through
saves and uploads.)
What is a disadvantage of scaling up
images before exporting?
A disadvantage of this is that by scaling up
the image, you could cause pixilation and
reduce the quality of the image.
21. File Naming Conventions
What naming conventions could you
use when creating your video game
assets?
To keep organised, I will have a
structure in my files to make them
easier to find. They will be named
exactly what they are: for example, if
there is a rotoscope of an elephant, it
will be name elephant1.psd (or .jpeg
or whichever format it is in. If there is
an updated version of this file, it will
be name elephant2.psd and so on.
Why is it a good idea to accurately
name your assets?
It’s good to be organised so that you
don’t lose any work as what I will be
working on are large files which I will
spend many hours on.
22. Asset Management
Why would you use folders when
storing your assets?
Folders are a good idea because this
keeps your work in order and
organised. This avoids having a messy
storage device which has lots of
randomly named files and many
different projects.
What folders would you create and
what would you save within them
• I will have all of my work saved into
a folder called “Print Based Media”
and then that folder sectioned into
sub-catergories such as
“Rotoscoping” or “Lecture
Powerpoints”. This will enable me
to know where everything is and
keep a clean, pristine storage
system.
23. References
1. Various. (2015). Vector graphics. Available: https://en.wikipedia.org/wiki/Vector_graphics. Last accessed 24th November 2015.
2. Various. (2015). Raster graphics. Available: https://en.wikipedia.org/wiki/Raster_graphics. Last accessed 24th November 2015.
3. Various. (2015). JPEG. Available: https://en.wikipedia.org/wiki/JPEG. Last accessed 26th November 2015.
4. Various. (2015). Tagged Image File Format. Available: https://en.wikipedia.org/wiki/Tagged_Image_File_Format. Last accessed 26th
November 2015.
5. Various. (2015). GIF. Available: https://en.wikipedia.org/wiki/GIF. Last accessed 26th November 2015.
6. Various. (2015). BMP file format. Available: https://en.wikipedia.org/wiki/BMP_file_format. Last accessed 26th November 2015.
7. Various. (2015). Adobe Photoshop. Available: https://en.wikipedia.org/wiki/Adobe_Photoshop#File_format. Last accessed 27th
November 2015.
8. Various. (2015). Adobe Illustrator Artwork. Available: https://en.wikipedia.org/wiki/Adobe_Illustrator_Artwork. Last accessed 27th
November 2015.
9. Unknown. (2015). FLA file extension. Available: http://www.file-extensions.org/fla-file-extension. Last accessed 27th November 2015.
10. Various. (2015). Windows Metafile. Available: https://en.wikipedia.org/wiki/Windows_Metafile. Last accessed 27th November 2015.
