This document discusses different digital file formats for raster and vector graphics. It provides information on common raster file formats like JPEG, TIFF, GIF and BMP. It also covers vector formats such as PSD, AI, FLA, and WMF. The document defines concepts like compression, image capture methods, optimizing images, file sizes, naming conventions and asset management.

1. Digital Graphics
File Formats
Bob George Trelfa

2. Raster Graphics
• Raster is is one of two types of digital graphics,
raster is made up of bitmaps. Bitmap graphics
are made up of pixels and each pixel holds the
information for the colour of that part of the
image. Bitmap images have a fixed resolution
which means you can not resize the image
because it will result in distortion.

3. Vector Graphics
• Vector is the second type of digital graphics,
vector graphs are made up of things know as
paths and stokes also know as vectors. Theses
vectors have a start and an end and in
between them is a line that can have curve,
edges and angles from this information the
line can become any shape the image
demands e.g. Circle, Square and triangle.

4. Raster Graphics

5. JPEG
Stands For Joint Photographic Experts Group
Used For/Example Photographs and images on websites.
Advantage Quick and easy way of sending and
saving images also uploading them to
the internet.
Disadvantage Looses quality every time you open due
to when you close it it has to compress
the image so when you open it it has to
resize.

6. TIFF
Stands For Tagged Image File Format
Used For/Example TIFF files are mainly used by graphic
designers.
Advantage They can be saved as a multiple page
document to just one TIFF file. Unlike a
JPEG it doesn't loose quality every time
its compressed.
Disadvantage TIFF files have a file size so this means
you may need a larger storage device
for long term storage.

7. GIF
Stands For Graphics Interchange Format
Used For/Example GIFS are used for a short digital
animation and they are mainly on the
internet e.g. most banner ads on
websites
Advantage Most gifs use an 8 bit palette which has only
256 colours for the GIF to use, this sounds
like a bad thing but it results in the GIF file
not actually being that big, so it is smaller
and easier to get the point across than an
actual video.
Disadvantage Due to the nature of a GIF they are
never have good quality

8. BMP
Stands For Bitmap Image File
Used For/Example These are similar to JPEG and TIFF
and are used in similar ways.
Advantage They do not loose quality in
compression.
Disadvantage They have a large file size.

9. Vector Graphics

10. PSD
Stands For Photoshop Document
Used For/Example This is used for image manipulation and
is featured on the front of magazines,
adverts online or even movie posters.
Advantage These files save layers and page
formatting information from photoshop
so it is easy to go back to your work.
Disadvantage These files wont be recognised on any
other format than photoshop and a few
others.

11. AI
Stands For Adobe Illustrator Art
Used For/Example AI is normally used for logo creation
and is good for drawing images.
Advantage The images created on AI can be
scaled big and small since AI uses
vectors and they do not loose quality.
Disadvantage Newer versions of AI some times have
compatibility issues

12. FLA
Stands For Flash File
Used For/Example Flash file is used to create animations
and flash games on the internet.
Advantage Flash files advantage is that it can
create high quality work and still have a
low file size.
Disadvantage It can be difficult to understand and to
make a working video.

13. WMF
Stands For Windows MetaFile
Used For/Example Windows metafiles are like AI files, it
can be used to make logos and it uses
bitmaps and vectors.
Advantage Since Windows Metafiles uses vectors it
can be scaled to any size you want with
out loosing quality.
Disadvantage If you use bitmaps you wont be able to
resize the image with out loosing
quality. Some applications don’t
support direct editing of metafiles.

14. File Format Capture and
Optimising

15. Compression
Definition Compression is when a file sized is
reduced by reducing the information
that is saved.
Advantage The image will have a smaller file size
there for saving you space on your
computer and making it easier to send
over the internet.
Disadvantage The image will become more pixelated
with compression due to the lack of
colour information.

16. Image Capture
Method Scanner
How is it used for image capture of
graphics
This is used to capture an image by
scanning an already existing image and
copying it.
Method Camera
How is it used for image capture of
graphics
This is used to capture an image by
saying a picture.
Method Graphics Tablet
How is it used for image capture of
graphics
This captures an image by letting you
use the mouse like a pen to draw your
image, this gives you more control and
allows more detail.

17. Optimising
Why would you optimise? Optimising an image always easier
viewing on the internet.
How can you optimise? You can optimise by changing image
size in photoshop.
Advantage to optimising If you have a web page full of images and
they have all been optimised then that
webpage will load a lot quicker than none
optimised images.
Disadvantage to optimising When you optimise an image it can
loose quality.

18. Storage

19. File Size
What could affect a Working Scale
(Photoshop) document file size?
Adding more layers and content,
making adjustments, increasing
resolution.
How could you reduce the file size of
a Working Scale document without
affecting quality?
merge layers, hide layers, compress file
by putting it into a zip file
What is an advantage of scaling up
images before exporting?
Better for printing purposes and makes
the image quality a lot better.
What is a disadvantage of scaling up
images before exporting?
File size increase, Inappropriate for web use because it
will increase resolution and some screens cant handle
that much resolution so it would cause problems for
some viewers.

20. File Naming Conventions
What naming conventions could you
use when creating your video game
assets?
• http://stackoverflow.com/questions/2071687/naming-convention-for-assets-
images-css-js
• icon (e. g. question mark icon for help content)
• img (e. g. a header image inserted via <img /> element)
• button (e. g. a graphical submit button)
• bg (image is used as a background image in css)
• sprite (image is used as a background image in css and contains multiple
"versions")
• Example-names would be: icon-help.gif, img-logo.gif, sprite-
main_headlines.jpg, bg-gradient.gif etc.
(I didn't really know what this was so i got this off the internet.)
(my words)
I would name then individually like icon 1, icon 2 and icon 3.
Why is it a good idea to accurately
name your assets?
So you don’t confuse your files and
loose all your work in your folders,
also it will be easier to find it.

21. Asset Management
Why would you use folders when
storing your assets?
To make sure every thing is organised
and you dont loose your work.
What folders would you create and
what would you save within them
• If I was making an image in photoshop I would
make a photoshop folder then another folder in that
folder with the image name on it and then in that
folder every thing to do with the image I’m making
just so know where every thing is.