Digital Graphics File Formats

Joe Hill

Raster GraphicsRaster Graphics are made up of bitmaps, these are made up of pixels/ squares. Each pixel records colour for each sector. So every pixel is one colour, these are grouped together to form a graphic or a shape. Digital camera’s use bitmaps to create raster graphics (digital photo’s).

Vector GraphicsVector graphics are made up of vectors which are paths created by a computer calculation. The path is made by a start and end point: this allows curves, points and angles. This can be used to make shapes like lines, curves, triangles, squares and polygons. The benefit of vector graphics is that they can be manipulated and always have a good quality finish, unlike bitmap which becomes pixelated when enlarged.

Raster Graphics

JPEGStands For Joint Photographic experts group

Used For/Example ● Photographs ● Web Formats

Advantage ● universal -available on all devices● compressed file size- quick viewing/

download● easy for website space (small)

Disadvantage ● lossy compression can be a disadvantage. The image can lose quality when compressed. when the image is edited more than once, every time after the picture loses more quality. If a graphic designer was not careful they could lose the best quality of the original image.

TIFFStands For Tagged Image File Format

Used For/Example ● Desktop Publishing● Multi-page documents● large images (posters)

Advantage ● High quality● choice of lossy/ lossless compression● allows image manipulation (due to being an

Adobe file type)

Disadvantage ● Large file sizes can be an inconvenience ● limited to certain software that can open the

file type

Film posters• Film posters are ways of advertising new films

that are being released in cinemas. • A Film poster would most likely be created in

Photoshop or some other image manipulation software. The file would be saved most likely as a .Tiff however due to it supporting large images, which is perfect for posters.

• It also can choose to have lossless or no compression, so the image quality is always high.

• In this particular example there is a lot of detail on the poster, therefore allowing high quality make the poster more aesthetically pleasing and capturing to the public.

GIFStands For Graphics Interchange Format

Used For/Example It’s a file format that supports a small amount of animation by having images play in a loop.

Advantage ● Small file size- advantage for web use● an alternative to full videos if short enough● universal for devices and software● can support transparency

Disadvantage ● low quality● no sound● limited colour range

BMPStands For Bitmap Image File

Used For/Example A ‘windows’ based file format, it was made in order to help support bitmap images and avoid any other bitmap problems.

Advantage ● No loss in compression● Universal to most devices● High Quality● alternative for Windows systems

Disadvantage ● Larger file size due to high quality files● Restricted to windows platform● Image manipulation can turn out badly

depending on resizing.

Vector Graphics

PSDStands For Photoshop Document

Used For/Example Photoshop documents are able to save files whilst keeping layers for the graphics. This allows for future image manipulation.

Advantage ● Saves all file information (layers, page formatting info)

● supports transparency ● lossless ● high quality

Disadvantage ● Extremely large file sizes (up to GB size)● Restricted access (only certain Adobe

software can open these files)

Magazine front cover

• Magazine covers work in the same way as movie posters to capture an audience's attention.

• They also contain graphics and images to appeal to the audience.

although smaller, magazine covers still need a lot of detail and graphics. A .Psd file format would work well due to the high quality and support of layers. Alternatively a .Ai file format could work as well.

AIStands For Adobe Illustrator

Used For/Example Many graphics created under this file format would be along the lines of logo’s and larger graphic sizes.

Advantage ● Image scale doesn’t distort quality due to use of vectors

● Good way to create vector styled graphics

Disadvantage ● Limited access due to the file is only able to be opened and edited within the Adobe Illustrator programme.

FLAStands For Flash File

Used For/Example These files are used to create animations and small games through Adobe Flash.

Advantage ● High quality files whilst remaining small in size

● can be interactive (games)● support of sound and video

Disadvantage ● Requires Adobe flash software or plugin if accessed through the internet.

(not enough info found on file to say disadvantages)

WMFStands For Windows Metafile

Used For/Example Logo’s and large graphic files, it works in a similar way to the AI file format.

Advantage ● Vectors allow graphics to be scaled easily● can use both vectors and bitmaps● Universal access- most software can open

these files

Disadvantage (limited info on these file types)

Logo’s• Logo’s are designed to be a visual

representation of a brand/ company.

• Many logo’s will be seen either online or smaller on the actual product itself.

• An .Ai or .WMF would work well for these because they use vectors which can be scaled easily and not lose quality. The software (Adobe illustrator) is also designed for smaller graphics like these.

File Format Capture and Optimising

CompressionDefinition “Compression is a reduction in the number of bits needed to represent data. “

http://searchstorage.techtarget.com/definition/compression

Compression is used to reduce a file’s size, this helps save space and allows many other positive extras (such as quicker opening times on websites). There is 2 types of compression, lossy and lossless. Lossy compression is where less amounts of data is saved in order to reduce file size. Lossless compression is where an algorithm can restore the original data out of the compressed version.

Advantage ● Small file sizes allows for faster downloading, and website space/ viewing.

● faster file transfer● Cost/ saving on larger storing space (e.g. USB stick, hard drive

etc…)

Disadvantage ● Every time an image or file is opened and edited, it loses more quality due to the file being compressed over and over again.

● when opening a compressed file, the computer may use memory to ‘uncompress’ it, if the computer's memory is full then this can lead to memory errors.

● a computer will struggle to scan a compressed file for viruses

Image CaptureMethod Scanner

How is it used for image capture of graphics A ‘flatbed scanner’ is the most conveniently used. It works by digitizing a physical image. It’s used mostly for sketches, photographs, and other mixed media products.

Method CameraHow is it used for image capture of graphics A digital camera works by capturing light, and

using ‘photosites’ to create a digital image of what’s been captured. it’s used to take pictures of real life objects and landscapes which can be put onto a computer for image manipulation.

Method Graphics TabletHow is it used for image capture of graphics A graphics tablet allows a user to draw freehand

using a stylus like a computer mouse. The tablet can create images by drawing on it, which is then drawn on the computer.

OptimisingWhy would you

optimise?Images are optimized for web use. This is to make them easier to download. If an image has a large file size then it takes longer to download, therefore optimizing reduces the file size by reducing the amount of pixels in the image (an optimized image should be 500 pixels wide).

How can you optimise? ➔ Reducing bit depth: ◆ this would be reducing how many colours are available within

the image➔ Reducing resolution

◆ this would reduce the amount of pixels by compressing the image.

Advantage to optimising

● images appear in search engines (e.g. google images)● this allows a chance for more site traffic, by images appearing on

search engines it draws in viewers. ● small files tend to be universal formats, such as .Jpg & .Gif.

Disadvantage to optimising

● picture quality is very low● difficult process for beginner website developers.

Storage

File SizeWhat could affect a Working Scale (Photoshop)

document file size?● the amount of layers that make up the

graphic● The diversity of colours● The size of the graphic● Multiple images/ shapes within one graphic

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

● merging layers together ● lossless file formats ● less colours or use those that are closer

together

What is an advantage of scaling up images before exporting?

● An advantage is that when an image is scaled up it won’t lose much quality (little distortion to the resolution) which is fine when exporting. Once exported the image when rescaled will look pixelated and bad quality.

What is a disadvantage of scaling up images before exporting?

File Naming ConventionsWhat naming conventions could you

use when creating your children’s book assets?

● Every layer needs a name that corresponds with what is in it. for example if one layer had a forest background in it then a convenient name for that layer would be “forest background”. The file it is saved to should also be saved in different versions, so that if something happens to one file then you can track backwards to the previous version so that not all progress is lost. The file’s name should look something like this ‘Children’s book V1’ (V2, V3, V4 etc…)

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

● By naming assets it allows you to quickly and efficiently find the correct layer that needs work/ editing. For example if I wanted to work on a flower that was in one scene, then I would find that layer easily by having it named “flower”. Otherwise you have to scroll through all the layers to find the correct one. Some Pieces of work could end up having more than 20 layers and so for convenience it’s easiest to name each layer to find later.

Asset ManagementWhy would you use folders when storing your assets?

● It’s always important to organise work into folders, folders help to find work or assets amongst a large amount of other files. When taking assets from the internet (downloading an image) then it’s important to save it into a folder so you don’t have to search through the whole computer to find the one image.

What folders would you create and what would you

save within them

● I would create three folders (at the least). One would be for storing my assets, another for storing the document containing the work and each version of that (V1, V2, V3). And one other folder to store any other documents or work relative to the project. This would be for when I am creating the product (in this case a children’s book).

● Alternatively I would make four folders for each part of the project. each learning objective (LO) would have it’s own folder. LO1 would include research for the project. LO2 would include my planning for the project. LO3 would be the actual production of the children’s book. And LO4 would include all feedback, criticism and evaluations.