Digital Graphics File FormatsBob George Trelfa

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.

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.

Raster Graphics

JPEGStands 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.

TIFFStands 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.

GIFStands 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

BMPStands 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.

Vector Graphics

PSDStands 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.

AIStands 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

FLAStands 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.

WMFStands 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.

File Format Capture and Optimising

CompressionDefinition 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.

Image CaptureMethod 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 CameraHow is it used for image capture of

graphicsThis is used to capture an image by saying a picture.

Method Graphics TabletHow is it used for image capture of

graphicsThis 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.

OptimisingWhy 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.

Storage

File SizeWhat 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.

File Naming ConventionsWhat 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.

Asset ManagementWhy 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.