Digital Graphics File Formats

Sam Hughes

Raster Graphics

• Give a definition of Raster Graphics• Most pictures you see on your computer screen are raster graphics, pictures you

import from the web and digital cameras, pictures you put on social media, there all raster graphics. Raster graphics are digital images which can be created or captured. What I mean by this is that they can be created by scanning a photo. The images have a real looking effect, unlike vector graphics. Raster files are usually larger than vector files. They include image file types like GIF and JPEG. Raster graphics are made up of a grid of pixels, there are sometimes referred to as Bitmap. This is because when you zoom in on the photos they start to look pixelated. JPEG and GIF help to compress the images.

Here you see a raster graphic, and how it looses quality as each individual pixal breakes apart from the image as you zoom in. It looses quality.

Vector Graphics• Vector graphics are made up of objects, this allows individual objects on the image to be edited for

example, change the size, position, colour, shape etc. Unlike raster graphics, the file sizes of vector images are quite small, and they don’t loose quality and definition when they are edited/resized. They are able to be scaled to new sizes without loosing quality because they aren’t made up of a specific number of dots. Vector Graphics sometimes look like cartoon images.

• Vector graphics are often used for company logos, as they need to be scaled to different sizes. When you zoom in on a vector image the edges on the object will stay smooth and clean.

Here shows an exaple of vector graphics in practice. You see the comparison between a vector graphic and a bitmap. It shows how the graphics change. You can see every pixal on the bitmap where as the vector graphic dosent loose quality as you zoom in.

Raster Graphics

JPEGStands For

Used For/Example Joint photographic experts group (Jpeg) images are usually used when putting images up onto the internet/social media sites. Jpeg images are also used for compression.

Advantage The advantages of using JPEG images is that they are great for quality photographs, artwork, advertisement etc... JPEG images give you a full colour resolution. JPEG images also help compress large files, which gives a shorter transfer times.

Disadvantage JPEG images can break apart and start to look pixelated when you zoom in on the image. As well, JPEG images do not support transparency.

TIFFStands For

Used For/Example TIFF is a format which supports raster graphic images. It is popular among the publishing industry and photographers.

Advantage TIFF is a recognised format by most computers. Uncompressed images keep the full amount of image data from the camera.

Disadvantage Most websites and online galleries do not allow uploads from TIFF formats, most likely due to their slow uploads. Because of how large the files are.

GIFStands For

Used For/Example The graphics interchange format (GIF) is the second most common image format in the world after JPEG. It is a file type which allows you to use a series of separated frames and put them in order to make an animation. It is used on social media sites like Facebook, where you can exchange GIFS on messenger.

Advantage There are several advantages to GIFS, one being that they are relatively small file sizes, which means they can be used quickly online. GIFS also have transparent backgrounds, which therefore can show a professional look on websites.

Disadvantage GIFS are dependant on the internet connection, they should run smoothly online but they need connection to do so. Another negative is that they have a maximum colour pallet of 256 colours, so they sometimes don’t look as good as other image file types like JPEG.

BMPStands For

Used For/Example BMP is a raster graphic file used to store bitmap digital images. It is used on Microsoft windows.

Advantage They are easily created by existing pixel data. Pixel values may be modified individually or in large groups by altering a palette.

Disadvantage The drawbacks are that the file sizes are often very large, especially if there's a lot of colours. Also, the images themselves do not scale well, shrinking the image can effect the image in a way that will damage the quality of the image. Because the pixels are being thrown away.

Vector Graphics

PSDStands For

Used For/Example PSD files is created by adobe for its uses in Photoshop. Photoshop uses PSD files for saving data.

Advantage It is ideal for processing images when you want to save the file and go back to it at a later point.

Disadvantage PSD files are generally only recognized by Photoshop and some other photo manipulation formats, which limits what you can use it for.

AIStands For

Used For/Example AL is a file format used in adobe illustrator drawing. Company’s may use this for logo’s.

Advantage The images do not loose quality or definition when rescaled and resized.

Disadvantage AI files need a specific software to actually open the file, therefore this limits when and what you can view the file on.

FLAStands For

Used For/Example FLA files are used by the Adobe flash application. They are used when you might be making an animation in flash, you would save it as a FLA.

Advantage Using it can create good animations using vectors or imported bitmaps, and it allows scripting, sound and video. Flash

Disadvantage FLA can cause problems if your connection is weak, and the file will not work if the user has flash content blocked.

File Format Capture and Optimising

WMFStands For

Used For/Example WMF is a file extension for a graphics file with Microsoft windows. It is most commonly used for designing artwork.

Advantage It allows compression of large files wihout loosing quality of the image. It is supported on various portable video devices and streaming media clients.

Disadvantage The biggest disadvantage with WMF is its non compatibility with non-windows platforms.

CompressionDefinition File compression is used to reduce

the size of one or more files.

Advantage The advantages of file compression are that files transfer faster, there is less disk space, and it provides faster writing and reading for viewers.

Disadvantage The disadvantages are that compressing files adds complication, there are errors in the process of transmission.

Image CaptureMethod Scanner

How is it used for image capture of graphics

Scanners can be used to convert images or text on paper into a digital format which is compatible with the computer.

Method CameraHow is it used for image capture of

graphicsCamera’s are used to capture images by snapping shots of still images digitally. They are automatically saved as JPEG.

Method Graphics TabletHow is it used for image capture of

graphicsA graphics tablet is a device which allows users to hand draw images, animations and graphics. It is as similar as it could get to real real drawing with a pencil and paper.

OptimisingWhy would you optimise? People would optimising to

compress certain images in JPEG and PNG formats to the minimum possible size.

How can you optimise? You can optimise by saving images as JPEGs or GIFs.

Advantage to optimising Image optimisation provides many benefits like, free product promotion. The optimised images show up in search engines like Google, Yahoo, Google images etc.

Disadvantage to optimising The disadvantages of optimising is that it is more difficult to find posts that have been published at an earlier date, and all the effects of branding and visual styles are not shown.

Storage

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

Compressing a file by exporting the file as a certain file type could affect the documents file size. For example using Jpeg would make the file size alot smaller by compressing it. Users may also optimize the file so it is the minimum possible size.

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

without affecting quality?

Saving a file as an AI file reduces the size of the file without it loosing quality. If you were to save the file as a Jpeg the file would loose quality and as you zoom into the picture the image would break apart and become pixelated.

What is an advantage of scaling up images before exporting?

Because it allows you to change the size of the image. Smallen it without loosing quality because the image is already big, you dont need to worry about its quality.

What is a disadvantage of scaling up images before exporting?

Its hard to find files that will support this large document. And the file size itself will be quite large.

File Naming ConventionsWhat naming conventions could

you use when creating your video game assets?

I will make a large folder containing all of my video game assets, with little folders within it named for example “animations” “characters” “backgrounds” etc… Within them smaller folders i will store all of my content.

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

So that finding my work is alot easier and quicker. My files will be easier to find which will allow me to continue with my work quicker and to the best standard.

Asset ManagementWhy would you use folders when

storing your assets?People would use assets because they are resourceful, they allow you to place any file you want in the folder.

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

As i said in the previous slide, i would create large folders where i wuld base all of my content based on what the document was. Where it was a character, background, weapon, power up or animation it would go in its own folder containing them particular documents.