Digital Graphics File FormatsRobbie Hickman

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.

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.

Raster Graphics

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

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

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

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

Vector Graphics

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

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

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

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

File Format Capture and Optimising

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

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

graphicsA 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 TabletHow is it used for image capture of

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

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

Storage

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

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

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