The document discusses various digital graphics file formats including raster graphics and vector graphics. For raster graphics, it describes common file formats like JPEG, TIFF, GIF, BMP and how they are used. JPEG is commonly used for photos on the internet due to its small file size and compatibility. TIFF maintains image quality and is used for printing. GIF supports animation and transparency. BMP stores uncompressed data but has large file sizes. For vector graphics, it discusses formats like PSD, AI, FLA, WMF. PSD maintains layers and effects for Photoshop. AI and Illustrator create scalable images. FLA is used for Flash files and animation. WMF contains both vectors and bitmaps.

1. Digital Graphics
File Formats
Robbie Hickman

2. Raster Graphics
• Raster Graphics are often referred to as ‘bitmap images’ due to the fact that they are made up of pixels. This is the name given to the millions of tiny
squares that make up an image and record the colour information within certain sections of it. Despite being difficult to see, it is possible for one to
identify a raster/bitmap image by studying it very closely e.g. by zooming in. Raster graphics usually have a large file size due to high amounts of DPI
(dots per inch) and PPI (pixels per inch). This is the case because the software will be forced to keep track of each pixel and be able to render them
successfully; the effort the software needs to put in has an adverse effect on file size. This could result in complications, especially if there is little server
or storage space on a computer. The fact that raster images have to be saved at a high DPI (e.g. Photoshop is set to 300DPI) and that attempting to
resize them can result in distortion can be considered another strong disadvantage. Things could go wrong in regard to the work and the storage space.
The reason why attempting to resize bitmapped images can have adverse effects is because they have a fixed resolution.
• Raster images are highly common; not only on the internet but also in digital publication. For example, almost all images found on Google are raster
images, and cameras also utilize them when it comes to creating files as a result of photographs. Printed mediums e.g. books and magazines use raster
images to reproduce photographs. However, raster images will not always work successfully with logos and illustrations due to the fact that files like
these are saved at low resolutions, thus rendering them incompatible with the requirements of raster images (high resolutions).
• Raster images tend to be made up of megapixels (which is a million pixels) because they require a high resolution i.e. lots of detail. The greater the
amount of pixels, the greater the detail within an image. This is the primary reason why raster images use megapixels; they need to be as detailed as
possible to make them look convincing as an actual image. For example, the Mona Lisa raster image looks like a traditional painting of a famous
individual from a certain distance, but if you zoom in on a certain part of the image e.g. her face, there will be strong, irrefutable evidence of
bitmapping as shown by the pixelated nature of that aspect up close.
• Megapixels relate to the amount of pixels which the software separates the picture into and records the colour of certain sections of the image.
• 1 Megapixel = 1,000,000 pixels
• There are ways to combat issues involving file size. A developer can crop or resize them to reduce file size, however they will be required to take great
care that the image is not reduced in terms of complexity and how well they fit into the design. This action is known as ‘compression’. Attempting to
reduce or increase file size too much will most likely result in blurriness or choppiness of the image, which will reduce its overall quality. For example, if
someone was to obtain an image from the internet, it might become pixelated as a direct result of the software attempting to compress it into less
megapixels.
• Basic file types: jpg. (JPEG raster format), .gif (GIF transparent file), png (Portable Network Graphic Transparent file), .tiff or tif (Tag Interleave Format)
These are actually both bitmap images; as
shown when one is to zoom in on a certain
section of the images. That section of image
looks pixelated; this creates an impression as
to how the images will have been
constructed using raster graphics.

3. Vector Graphics
• Vector Graphics are referred to as images that are rooted in a mathematical manner. They are made up of geometrical primitives including
lines, curves and points which are otherwise known as paths or strokes. Hence their name, vector graphics are made up of ‘vectors’ which
lead through locations called nodes. Vectors are also based on shapes and polygons. All of these primitives are mathematical expressions
which are used to represent images in computer graphics in a completely different manner compared to raster graphics.
• Compared to raster graphics, vectors appear more flexible due to their ability to be resized and stretched without risking distortion to the
images. For example, an image stored as a vector will look better in terms of resolution on certain media devices e.g. mobiles. This shows
that vector graphics are superior to raster graphics which tend to appear bitmapped regardless of the resolution of a device. The overall
effectiveness of vector graphics can be further proven by the fact that they are utilized by many sophisticated graphics systems e.g.
animation software. However, like raster graphics, vectors need to be translated into bitmaps prior to becoming output. This highlights the
similarity of the two types of raster graphics. A key difference between them is the fact that vector graphics are not translated into bitmaps
straightaway, but at the last minute.
• Vectors, also known as paths (as they ‘lead’ through nodes) are defined by segments and vertices, the latter of which determines both the
start and end points of each segment of path; segments are the lines/curves connecting the vertices. The shapes of paths can be altered by
dragging their vertices, and the curves, points and angles remain smooth and connect these paths. Based on all of this, paths can be drawn
into common geometric shapes; the path can be either ‘open’ or ‘closed’. An example of a ‘closed’ path would be a circle due to the fact
that the line is continuous and has no beginning or end; an example of an ‘open’ path would be a straight line as its beginning point is not
the same as its end point.
• On certain programs, e.g. Adobe Photoshop/Adobe Fireworks different types of shape paths can be drawn onto a shape layer e.g. a
parametric shape path. These paths can be linked and painted with use of expressions. In rendered output, a path has no visual
appearance; it is merely a collection of information. A path will only be visible if an effect e.g. the Stroke Effect is applied in a program.
Because there is no loss in definition for the overall image, vectors can be scaled as large or small and either way, will be successfully able
to maintain crisp edges and full detail. They are resolution-independent; this means that they can be resized in almost any way, and yet
retain their detail. It is this resolution-independence which makes vector graphics the best option for the creation of logos for a company
and even images on business cards (small) and billboards (large).
This image shows the difference between raster graphics and vector graphics in terms of
quality when it comes to resizing an image. As clearly depicted, the illustration on the left
shows how distorted an image can become upon enlargement (raster graphics) whereas
the illustration on the right highlights the ability of vector graphics to maintain the detail
of an image when resizing it.

4. Raster Graphics

5. JPEG
Stands For Joint Photographic Experts Group
Used For/Example The term JPEG refers to a common image file format
used for the storage of photographic images on the
internet e.g. when uploading photos to Facebook.
Advantages It is the most popular and recognized image file
format. With the JPEG format, the file size would be
small, therefore images would not take up too much
storage space. The picture quality would be high and
the format is compatible with a wide range of
browsers, graphics programs etc. This provides a wide
range of options for the format. Images would be
displayed correctly on all computer and mobile
devices, thus reducing the chances of any
complications.
Disadvantages The JPEG format does not support transparency and if
its size is decreased, the pixels within the image may
be analysed together. This would result in harsh
transitions between the colours of the image.
Compressing or recompressing the image would
degrade its quality.

6. TIFF
Stands For Tagged Image File Format
Used For/Example TIFF is a common format for exchanging bitmap images
between applications. It is utilized often in graphic
design, print, and desktop publishing. An example of a
TIFF file would be a large, high quality image like a
photo.
Advantages When uncompressed, TIFF images maintain their
maximum amount of image data, including quality
from the camera. The format is compatible and
recognized by most computers e.g. MACs and PCs. It is
useful for printing photos and can be compressed to
reduce file size without risking loss of image data. This
is known as lossless compression.
Disadvantages The file size is very large, therefore larger storage
spaces are required. The processing and loading of
images can be quite time-consuming and a good
specification computer is needed. Most websites do
not support TIFF images; this results in limited options
for users. Those that do support them can take a long
time to transfer TIFF images.

7. GIF
Stands For Graphics Interchange Format
Used For/Example A GIF is an image file format that is commonly used for images
on the internet and sprites in software programs. It allows for a
series of separated frames to be played together in a loop, in
order to create the appearance of a video e.g. a short digital
animation.
Advantages GIFs have relatively small file sizes, therefore they will not take
up too much storage space. It is easy to use them online as they
load quickly whilst maintaining a high quality and smooth flow
of action. GIFs also support transparency. This could give a
website a professional look if an animation is placed over a
different background. Unlike images, GIFs can communicate
emotion through movement. They may also be able to attract
younger viewers e.g. children who could be easily amused by a
moving image.
Disadvantages GIFs have a limited colour palette, therefore they tend to be of a
low quality compared to other types of format. Once the images
have been rendered, there will be no way to re-edit the image if
there is dissatisfaction, therefore if any changes were to be
made the user would be required to start again. GIFs also
heavily rely on internet connection, therefore if the connection
is poor, the GIF might not play properly/its quality might
decrease.

8. BMP
Stands For Bitmap Image File
Used For/Example The BMP file format is a raster graphic file that is used
for the storage and exchange of bitmap digital images
on the internet/between programs e.g. when
uploading/transferring high quality photos.
Advantages Bitmap graphics are uncompressed, therefore there is
no loss of quality during alteration of an image. The
format is widely supported, therefore a wide range of
programs can utilize it e.g. software and web browsers.
It can display colours in a high quality, thus making
them suitable for photos. It is stored in a computerized
form.
Disadvantages The format has a large file size, therefore it can be
quite difficult to upload or email a BMP image. BMPs
are also highly unpopular, especially among companies
and web publishers. This can result in problems for
users due to limited options with the format.

9. Vector Graphics

10. PSD
Stands For Photoshop Document
Used For/Example PSD is the default format for saving data on Photoshop.
It is a proprietary file which allows for the user to save
any changes made only to a Photoshop document e.g.
image manipulation. Certain images may have used
the PSD file format e.g. magazine covers.
Advantages The format is created by Adobe for use in Photoshop. It
maintains all the original, uncompressed image data as
well as any adjustments made to it e.g. new layers,
page formatting information, swatches and full image
history. It is ideal for use during the processing of
images. The file can be saved and returned to later on
for any alterations if there is any dissatisfaction with
the way the overall image looks. The format also
supports transparency.
Disadvantages The format is recognised solely by Photoshop software,
as well as similar types of image manipulation software
e.g. Adobe Fireworks. Therefore, the advantages of the
format are limited only to specific programs. A PSD file
will not be suitable for a blog or website and it is
difficult to print.

11. AI
Stands For Adobe Illustrator Art
Used For/Example AI is a drawing program used for the creation
and manipulation of images. It is extensively
used by designers worldwide to create
exceptional graphics e.g. detailed cartoons and
photo finish logos (which can be used to
represent companies).
Advantages The program is flexible and allows customization
of the workspace. Because it is a vector based
program, graphics are scalable to almost any
extent e.g. big or small without any loss in
definition and whilst maintaining crisp and
sharp edges. The file formats are fairly small,
thus allowing for easy sharing, mailing etc.
Disadvantages The software is quite complicated, therefore a
lot of practice will be required to master it. It
can be difficult and time-consuming to create
photo-realistic drawings and this requires
patience.

12. FLA
Stands For Flash File
Used For/Example The FLA file format is the basic document file
associated with the program Adobe Flash, a software
platform utilized to create vector graphics. All source
files within Flash are in the FLA format and contain
graphics, animation and embedded assets e.g. bitmap
images.
Advantages The file format is only small, therefore it will be easy to
send and it will not take up too much storage space on
a computer. An image with this file format will also be
easy to load on Google. A flash file can also include the
use of sound and video whilst maintaining a high
quality thus making it superior to other formats.
Disadvantages FLA files are required to be converted to a different
format to enable them to be added onto the internet
(SWF format). Flash also requires high internet speeds
in order to load successfully, though this would depend
on the size of the file. The format can only be opened
in a few programs, thus resulting in decreased ways to
view the file.

13. WMF
Stands For Windows Metafile
Used For/Example WMF format is a graphics file format that is used
extensively around the world for creation of
exceptional graphics e.g. logos for companies. This is
similar to AI (Adobe Illustrator) file formats.
Advantages Can contain both vector and bitmap components.
The format has the ability to contain both vector
graphics and bitmap components, therefore it can
display information regarding multiple files. The format
is also portable between various applications and can
be compressed without loss of resolution (an aspect of
vector files). The highest quality is always maintained.
Disadvantage A reliable image converter is required to convert WMF
images to other formats e.g. TIFF, JPEG and GIF files.
This could waste time and money and it highlights the
fact that the format cannot be used properly without
the installation of additional programs to ensure the
system runs as one desires it to.

14. File Format Capture
and Optimising

15. Compression
Definition Image Compression is the action of minimizing
the size of bytes in a graphics file without
reducing the overall quality of the image to a
level that is considered unacceptable e.g. low
quality.
Advantages Compression of data can save and prolong storage
capacity, ensure file transfer is faster and decrease
costs for storage hardware. It is performed by a
program that uses an algorithm of its own i.e. a
formula that determines how to shrink the size of the
data and by how much. Compressing data is also a
lossless process; it enables the restoration of a file to
its original state without the risk of that file losing any
data. If it does, the loss would only be a tiny amount.
Disadvantages Repeated utilization of CPU and memory resources to
compress and decompress data can have a negative
impact on system resources; this necessitates the
installation of hardware acceleration software which
can be quite time-consuming and expensive. The
performance can also consume memory and processor
cycles.

16. Image Capture
Method Scanner
How is it used for image capture of
graphics
A scanner is an image-capturing device which scans
photographic prints, posters, magazine covers etc. so as to
display them on computers for editing. A captured image can be
modified on a computer via software that is usually provided
with the scanner. There are various types of scanner, including
high resolution scanners and low resolution scanners. Both are
fairly adequate enough to capture images for display on
computers.
Method Camera
How is it used for image capture of
graphics
A digital camera is able to record and store
photographic images in a digital format. These images
can also be uploaded to a computer for editing and are
able to be stored within the camera for viewing or
uploading at a later time. Most cameras are able to
capture both images and videos.
Method Graphics Tablet
How is it used for image capture of
graphics
A graphics tablet is a device which can enable an artist to
draw/sketch in a digital manner through use of a stylus onto a
screen. The software on the computer then converts the
sketches made into a digital form, therefore this method is a
useful way for one to create his/her own graphics as the
computer captures the drawings.

17. Optimising
Why would you optimise? One might want to optimize something if they want a specific program to
function rapidly and effectively whilst minimizing the amount of storage space
the performance of the program would take up. One would also use
optimization to add code that is used only for the improvement of a computer’s
performance, or if the memory of a system has a premium i.e. needs to be paid
for. In the latter case, optimization would be utilized with the purpose of less
memory being taken up on a computer.
How can you optimise? Optimization is defined as a process involving the modification of a software
system with the purpose of ensuring it runs smoothly and is faster. It can result
in a computer system becoming optimal (the most advantageous it can get and
therefore incapable of further improvement). It is possible to optimize by
choosing a slower algorithm which can result in less memory being taken up, as
well as adding new bits of code to improve performance. Therefore,
optimization relies on code being added to the software. Updating and
designing new software is also a way to optimize as it keeps the computer
performance up-to-date and allows it to run more smoothly.
Advantages to optimising Optimization results in a system being able to function more effectively than
before; it allows for one to save storage space whilst working on a computer
and for the system they are working on to load more rapidly. This is beneficial
because one could be able to complete work faster and load certain programs
with ease. Optimization can also provide a computer with the highest possible
aspects in terms of quality.
Disadvantages to optimising Adding new code during optimization can result in complications within
programs and systems, therefore making them far more difficult to maintain.
Bugs can appear unexpectedly, and no new features are added to the existing
code. The process of optimizing can be time-consuming and therefore requires
a lot of patience. This can be an issue because it might take up too much time
and may require multiple attempts, therefore resulting in frustration.

18. Storage

19. File Size
What could affect a Working Scale
(Photoshop) document file size?
There are multiple ways a Working Scale document can become too large in
terms of file size. Regarding Adobe Photoshop, it could be that an extensive
amount of layers are significantly affecting the size of the file, or that the
Maximise Photoshop Compatibility option is being deactivated constantly. This
option forces the document to save a flattened version of all the layers, therefore
increasing the Photoshop file size to a great extent.
How could you reduce the file size of a
Working Scale document without
affecting quality?
It is possible to reduce the size of a Working Scale document. For example, when
saving files in Photoshop, the PSD file size can be reduced by up to 20% by simply
hiding all the layers before saving. This is a simple method which does not affect
the quality of the work or even the work itself as a whole e.g. layers getting
deleted. Saving an image in a PSD file format after changing the ‘maximise PSD
compatibility’ option to ‘never’ can also reduce the file size by 20-30% without
altering the quality, therefore this is a good option. These options ensure that the
Working Scale document does not take up too much storage space, and will also
allow for the file to maintain the previously set quality e.g. resolution set to 72.
What is an advantage of scaling up
images before exporting?
Photoshop and other Working Scale documents utilize scaling algorithms which
highlight every pixel and determine how they can be scaled. An image within a
Working Scale document can be scaled up to a huge size (up to 200% that of its
original) whilst still being able to maintain its original quality e.g. all the details
and colours put into it. This means that one will not have to make any adjustment
before exporting the work. The process is fairly straightforward and it therefore
won’t be too time-consuming. Scaling up also ensures that the overall image will
not look distorted or blurry or lose some of its colours following export.
What is a disadvantage of scaling up
images before exporting?
The image can only be scaled up to a point where it is considered to be too large.
In this case, the image could would be severely hindered in regard to quality and
this could result in complications arising e.g. the person using the program may
be required to make alterations or struggle to restore the original quality to
his/her work. Following the scaling-up of an image, it is not a good idea to save
the document because all the layers will merge into each other, therefore it will
be impossible to make any alterations to the work you have produced if you are
not satisfied with the result after exporting it.

20. File Naming Conventions
What naming
conventions could
you use when
creating your video
game assets?
• I would need to name each layer I use in a manner that is considered appropriate and not too confusing.
Usually when it comes to adding new layers on Photoshop, the software will automatically name a new
layer as Layer 1, 2, 3 etc.
• I would accurately name my layers in relation to the assets of my video game e.g. soldiers, helicopters,
tanks. I would need a lot of different layers if I hope to create the appearance of weapons firing or
chopper blades rotating so as to give my game a near-professional look. I would save certain layers as
Chopper Blade Large, Chopper Blade Medium etc. or as Gunshot Large, Gunshot Medium, Gunshot Small.
These three layers would represent the way certain assets move during alteration between frames.
• I would name my images of soldiers and civilians as Soldier 1, 2, 3 and Red-Shirt Civilian, Scared Civilian
respectively, with the former assets being named in accordance to the order of which they appear on-
screen e.g. 1 will appear first. I would name the in-game environment as ‘Landscape’ and also ‘Landscape
Copy’ if I hope to make the in-game environment look bigger.
Why is it a good idea
to accurately name
your assets?
It is a good idea to ensure all assets within Photoshop are given a name and are not just referred to as Layers 1
through 10. Allowing Photoshop to name my assets for me can lead to complications during production,
especially when it comes to finding the layer I want to move, edit, delete etc. Also, the fact that the layers are
not given accurate names does not imply a professional standard of working. Naming each asset as closely as I
can in relation to what I have created within it ensures that I know where everything is and I won’t have to go
through with the stress of trying to determine which layer is which.
The nature of the highly vivid, war-driven in-game environment I hope to create ensures that it is vital that I
name every layer accordingly and not just as Layer 1 through 10. I need to know where everything is and be
able to locate it easily. This will ensure that the creation of my game is not too time-consuming, especially
because the number of layers and video game assets will be quite large.

21. Asset Management
Why would you use folders when storing
your assets?
It would be a good idea to use folders to store the many
different types of video game asset I will be constructing in.
There is a chance that I might create additional assets rather
than just the in-game environments and gameplay animations I
plan to make. There is also a good chance that the GIFs/images I
create and save will be saved onto the desktop rather than on
my memory stick, therefore causing the desktop to become
cluttered with a wide range of PSDs, JPEG image files and GIF
animations, with additional folders unrelated to my video game
production also on the desktop.
Creating folders would make it easier for me to locate the PSD
file I want to continue working on, just by clicking on one folder
and finding it easily among a small number of others rather than
struggling to find it on the desktop amongst a large number of
documents.
What folders would you create and what
would you save within them
The assets I would create could include practice assets and GIFs,
images of soldiers to place onto the environment, GIFs of
helicopters, tanks and other infantry vehicles, as well as civilian
characters appearing within my game among many others. To
achieve an understanding of how much progress I have made, I
will be creating file folders and naming them ‘Practice
Animations’, ‘Gameplay Docs’ ‘Characters’ ‘Menus and Logos’. I
will then be storing the documents I create within these files;
each asset will be placed in the folder relevant to the name of
the asset e.g. ‘soldier GIF’ will be placed within the ‘Characters’
Folder’ and ‘Practice GIF’ will be placed in the ‘Practice
Animations’ folder.