Digital Graphics File Formats

Harry Williams

Raster Graphics

• Give a definition of Raster Graphics

• Made up of bitmaps.

Raster graphics are digital images created or captured (for example, by scanning in a photo) as a set of samples of a given space. A raster is a grid of x and y coordinates on a display space. (And for three-dimensional images, a - z coordinate.)

Vector Graphics• Give a definition of Vector Graphics

• Made up of vectors/paths.

Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygons all of which are based on mathematical expressions to represent images in computer graphics.

A few drawbacks of vector graphics are that their files have difficulty storing extremely complex images. An example of this is an image where the colours vary pixel by pixel.

High resolution raster displays are also required to effectively display the vector graphics. This means that specific output devices are required to display the vector graphics.

Raster Graphics

JPEGStands For Joint Photographic Experts Group.

Used For/Example JPEG compression is used in a variety of image file formats. JPEG is the most common image format used by photographic image capture devices. JPEG is the most common format for storing photographic images.

Advantage Has a small file size.The user independently selects the file size.Format is compatible and it is displayed correctly in any browsers.Suitable for realistic images with a lot of contrast and colour.Image quality is high with compression.

Disadvantage Image may “fall apart” when you squeeze it. Due to this smooth colour – transitions may become harsh or just disappear.Loses quality after multiple edits.

TIFFStands For Tagged Image File Format.

Used For/Example A tiff file has the ability to store image data in a lossless format. Unlike JPEG files, a TIFF file using lossless compression may be edited and re-saved without image quality loss.

Advantage Better image quality than even the JPEG fine quality Good for More tolerant of poorly exposed images, similar to print film. Saved at the camera’s max colour bit depth.

Disadvantage File size is very large, meaning slow saving. Fixing exposure in the photo editing program will degrade the image to a certain degree.

GIFStands For Graphics Interchange Format.

Used For/Example Gif files are also compressed, which gives them a small file size. You mainly use a gif file format for logos and graphics with solid areas of colour. You wouldn't use a photographic image, or a graphic with gradients.

Advantage • lossless compression• flat areas of colour with well defined regions• suitable for icons • support for transparency• suitable for small animations

Disadvantage • The oldest format for the web.• It has a bigger file size than formats.

BMPStands For Bitmap image file.

Used For/Example The BMP file format, also known as bitmap image file, is a raster graphics image file format used to store bitmap digital images.

Advantage No loss in compressionPixel values may be modified individually or as large groups by altering a palette if present. Bitmap files may translate well to dot-format output devices such as CRTs and printers.

Disadvantage They can be very large in file size.Data compression can shrink the size of pixel data and this can slow down the reading and rendering process considerably.

Vector Graphics

PSDStands For Prevention of Significant Deterioration.

Used For/Example PSD is a proprietary file that allows the user to work with the images' individual layers even after the file has been saved.

Advantage Saves everything.Saves, swatches, layers, page formatting information, etc.Image manipulationSupports transparency.

Disadvantage Large file size.Only people with Photoshop can view the image file.You cannot share a PSD on the internet.

AIStands For Adobe Illustrator.

Used For/Example AI is a file extension for vector graphics used in an Adobe Illustrator drawing. Mostly used for, editing, printing and creating vector artwork.

Advantage Can be scaled big and small as Vectors have no loss in definitionMost advanced vector format available.Wider compatibility for a native vector format.

Disadvantage The AI format is strictly limited.The Al file is also highly simplified subset of EPS.Recent versions may have compatibility issues. Is not a standard file format.

FLAStands For Flash file.

Used For/Example FLA file is an Adobe Flash editable movie or animation. Flash files, which are used to create games or animations.

Advantage High in quality, paired with a small file size making them more efficient for the internet, this is because they will not take as long to load.Flash files are able to include sound and videos.

Disadvantage The software that can open an FLA file is very limited.

WMFStands For Windows Metafile.

Used For/Example WMF is a windows format. It is used mainly in things such as clipart. WMF files are also similar to the Al file. WMF files are also used for company graphics and logos.

Advantage They can be scaled smaller and larger without loss in definition.The file can contain bitmap, as well as vector components.

Disadvantage The WMF file is only available on windows platforms. Meaning the files can only be generated on windows.

File Format Capture and Optimising

CompressionDefinition Lossy compression is when the file size is

reduced, causing the file size to reduce the amount of stored and saved information.

Advantage It reduces file size.Also reduces the amount of memory that the file requires.

Disadvantage Once compressed, the images lose quality. This makes them appear pixelated. This is because as the file is saved, less pixels are saved each time.

Image CaptureMethod Scanner

How is it used for image capture of graphics

A scanner is designed and used to digitalise physical images. An example of this is taking a drawing and converting it into a Photoshop document.

Method Camera

How is it used for image capture of graphics

Firstly, light enters the lens of the camera, which is then recorded by a sensor. The sensor then records the information for each individual pixel, which produces a digital image.

Method Graphics Tablet

How is it used for image capture of graphics

A tablet is a piece of technology designed specifically to allow you to control the mouse like a pen. This creates a better, more precise control of selection, drawing and hand writing.

OptimisingWhy would you optimise? Images that are uploaded to the internet are

optimised to make viewing easier and more accessible.

How can you optimise? One of the ways you can optimise an image is through the changing of image size. You can also optimise by reducing the bit depth, with regard to the pixel colour.Reduction of the resolution, as well as compressing images.

Advantage to optimising When optimising an image, you are reducing file size, meaning that the download speed is faster.

Disadvantage to optimising By optimising an image it reduces the amount of pixel information. Usually up to the point where images are no more than 500 pixels in width.

Storage

File SizeWhat could affect a Working Scale (Photoshop) document file size?

The size of the image inside the document.Colour bit depth.The numbers of layers and channels.

How could you reduce the file size of a Working Scale document without affecting

quality?

You could use compression to reduce the size of the file. If done in moderation compression can have a miniscule effect on the image quality.

What is an advantage of scaling up images before exporting?

When you resize raster content in In design you are altering the image pixel density - stretching and compressing existing pixels. When you reduce a raster image within InDesign you are "squishing" pixels together increasing the effective PPI of the image. When you enlarge a raster image within In design you decrease the pixel density and stretch the same number of pixels to cover a larger area.

What is a disadvantage of scaling up images before exporting?

When the image is exported it will appear low quality and pixelated. This is because the file cannot remember every individual pixel, instead it groups pixels of a similar colour together, giving a pixelated effect when exported.

File Naming ConventionsWhat naming conventions could you use when creating your video game assets?

Level artEnvironmentCharactersPropsDestructible objectsCars, planes and other vehiclesGuns and other weapons

Why is it a good idea to accurately name your assets?

It is a good idea to accurately name your assets because it makes them easier to organise when filing your assets. Accurate names for your assets also speeds up the hand in process, as you can quickly locate the specific asset you are wanting to hand in to be assessed.

Asset ManagementWhy would you use folders when storing

your assets?So that you can easily find your assets in a specific named folder. Instead of wasting time searching for them.

What folders would you create and what would you save within them

I would create several folders with specific names for each assets. For example if I had similar versions of assets I would save them within a folder which has a title depicting the type of asset in the folder. I would also have a folder which contains all of my assets. This means that when I come to hand in my work for assessment, I can quickly hand in all the assets, as opposed to sending each asset individually.