Digital Graphics File Formats

Courtney Whittaker

• Add example pictures of each file• Add information on each slide from notes • Deadline is Tuesday 29th september

Raster GraphicsWhat is Raster Graphics•Raster Graphics are made up of bitmaps (small pixel squares)•Raster graphics are digital images created or captured for an example of raster graphics is scanning a photo•The file size of a raster image is determined by the number of pixels being used in the image•A raster picture is a picture that is displayed by defining rows of coloured dots that are placed next to each other. These dots are called pixels. Each dot is assigned an individual colour. •The individual squares blend together to make up a picture.

Advantage of raster graphics•A raster graphics can be scaled down with no changes in quality •Raster graphics are great when creating detailed images such as photographs. •Every pixel in a raster image can be a different colour therefore you can create a complex image

Disadvantage of raster graphics• it is dependent on resolution •When the resolution of an image is scaled up the quality is lost in the picture and it becomes pixelated because there are no longer enough pixels to fill in this larger space, gaps are created between the pixels in the image. The editing software that you are using will try to fill these gaps however the resulting image is often blurry.

Vector GraphicsWhat is Vector Graphics •A vector picture is made up of areas that are defined by coordinates and mathematical formulas. •Vector Graphics are made of vector paths (shapes)•You are able to scale up to any resolution because it uses geometry and mathematical equations to define images rather than directly mapping pixels in a grid like raster graphics. •Vector graphics are generally used for line art, illustrations and embroidery.•A vector graphic is made up of a series of small points that combine together to make lines and images.

Advantages of vector Graphics•They can be easily scaled up and down without any loss to the quality of the image unlike raster images which loose quality when the resolution of the image is scaled up.•Vector graphics have smoother lines when compared to square, pixel-based raster graphics therefore, they are better with straight lines and sweeping curves than raster graphics

Disadvantages of vector graphics•Vector graphics are generally filled with a solid colour or a gradient. Whereas raster graphics can use many colours to give a complex image•If there are small errors in a vector graphic, these will easily be seen when the vector image is enlarged significantly.

Raster Graphics

JPEGStands For Joint Photograph Expert groups

Used For/Example JPEG is a compressed image file format. JPEG pictures store a single raster image in 24-bit colour. JPEGS are good to use for blogs and websites JPEG images open on the computer and in most programmes as well as on devices

like iPhones

Advantage JPEG’s compress after you save them so that the file is smaller. A larger file size takes up a lot of space on a computer and it’s slower to open up.

So a smaller file opens up quicker an takes up less space on a computer JPEG compression works well with photo-realistic artwork. JPEG images are not limited to a certain amount of colour, like GIF images are.

Therefore, the JPEG format is best for compressing photographic images. So if you see a large, colourful image on the Web, it is most likely a JPEG file.

JPEG has become the most popular universal format, because of its small file size and Internet compatibility.

Small file size so easy to print and send via email etc.

Disadvantage . The level of JPEG file compression can be increased or decreased. However, image quality is sacrificed for file size.

You can loose quality every time you open and edit a jpeg file as it compresses every time you save it.

For simpler artwork with fewer colours, sharp levels of contrast, solid borders, or large solid areas of colour, JPEG compression does not provide good quality results.

While JPEG images can contain colourful, high-resolution image data, it is a lossy format, which means some quality is lost when the image is compressed. If the image is compressed too much, the graphics become noticeably "blocky" and some of the detail is lost

TIFFStands For Tagged image file format

Used For/Example TIFF pictures store a single raster image at any colour depth. TIFF is one of the most widely supported graphics file format in the printing

industry and used for things like storing Bit-mapped images on Personal computers.

The TIFF format can handle colour depths ranging from 1-bit to 24-bit. TIFF’s are best used for multiple pages for example magazines, newspapers

and leaflets

Advantage By default TIFF files do not use compression. The big advantage to this is that there is no loss of image detail when a save is made.

TIFF files can be edited A TIFF is a widely supported format, especially between Mac’s and Windows-

based computers. Optional compression is supported.

Disadvantage Since compression is not used by default on TIFF files, the file size is generally quite big. This is a big disadvantage of TIFF files as uncompressed TIFF images can take up a lot more space than a JPEG. This means that digital cameras will not be able to save as many photos in TIFF format.

Not every browser will open a TIFF file

GIFStands For Graphic interchange format

Used For/Example

GIFs are animated images often used on the internet. It’s a series of images played one after the other in a loop, to create the appearance of a video

Advantage GIF is a widely supported Internet standard. Lossless compression and transparency are supported. GIF’s are simple to make using an animation program and a series of images, If you have a

series of images such as frames from a film you can easily make a GIF. They have lossless compression so that the file size can be reduced without too much

distortion, When you want to reduce the file size not too much quality is lost when compressing them.

Animated GIFs have a relatively small file size, Flash files often have very large files and can slow a website down,

Disadvantage • GIFs can give a pixelated or blocky quality to images that are animated reducing the overall quality

• They can slow a webpage down, If large numbers of them are used on a webpage it can take a very long time for them all to load.

• Often the frame rate on GIFs is quite low and using to few frames will result in a jumpy and jittery appearance to the animation not a smooth image.

• If they are not used well or too many are used the can give the site an unprofessional look

BMPStands For Bitmap image file

Used For/Example

• BMP images are types of images produced by digital cameras and scanners. • People also use them when they are editing or enhancing photographs or drawings.• Windows bitmaps store a single raster image in any colour depth, from black-and-white to 24-

bit colour.

Advantage • BMP supports 1-bit through 24-bit colour depth.• The BMP format is widely compatible with existing Windows programs• It can display a picture realistically. Bitmap images are made up out of pixels, which is

basically a coloured dot. Properly positioning the different coloured dots next to each other will perform the illusion of one colour blending into another. Thus, it is easier to get a more real-looking image using this format.

• There is no loss of quality when BMP images are opened and edited

Disadvantage • BMP files are not supported by Web browsers.• One of the disadvantages associated with a bitmap image is that it does not resize well. While

it may be easy to scale down an image without loss of clarity, it is not easy to enlarge the image without the image becoming pixelated and bad quality.

• BMP does not support compression, which results in very large files. An uncompressed image can be quite large because of the amount of information needed to display all the pixels in the various colours. Such a file can take a long time to load, send, or receive.

• The Windows bitmap file format is compatible with other Microsoft Windows programs. It does not support file compression and is not suitable for Web pages.

• For images of photographic quality, use a PNG file, a JPEG file, or a TIFF file. BMP files are suitable for wallpaper in Windows.

Vector Graphics

PSDStands For Photoshop Document

Used For/Example

A PSD file is a layered image file used in Adobe Photoshop. PSD, is the default format that Photoshop uses for saving data. PSD is a proprietary file that allows the user to work with the images’ individual layers even

after the file has been saved. When an image is complete, Photoshop allows the user to flatten the layers and convert the

flat image into a JPEG, TIFF, GIF, or other file format so it can be shared. Once a PSD image has been flatten by conversion, however, it cannot be converted back to

PSD and the user can no longer work with the image's layers. It is important, therefore, so always save the .PSD file and not overwrite it during conversion.

It is usually used for logo design as it can be scaled really big for a billboard or really small for a business card.

This document contains features for image manipulation It is used for front cover images of magazines It saves layers and page formatting information It is used by both graphics designers and artists to create and edit vector images. The

application is widely used to create photo-realistic drawings, maps, infographics, drawing illustrations, logos, graphs and charts.

Advantage • There is no loss in definition images do not get distorted when they are enlarged• Can preserve layers. PSD files can handle simple vector layers, making them more suitable for

importing and exporting data from programs like Adobe Illustrator. • PSD also supports masks, colour profiles, alpha channels and spot colours.• Keeps layers so you can work on it later, make changes if necessary

Disadvantage Since it is a design software some amount of skill or training is require to master it. A good idea is to check out the numerous tutorials that are available by adobe itself or spend some time with the tools this program is loaded with to master it.

To create photo realistic drawing the user must have lots of time and patience and a keen eye for detail

PSD files have a large size and capability to save significant amounts of file information 5. Very few other programmes will understand open or import PSD files.

Very few other programmes will understand, open or import PSD files this file opens in Adobe Photoshop

Is not suitable for a blog or website and you can’t always print it

AIStands For Adobe Illustrator art

Used For/Example Adobe Illustrator is a vector graphics editing application created by Adobe systems. It is used by both graphics designers and artists to create and edit vector images. The application is widely used to create photo-realistic drawings, maps, infographics,

drawing illustrations, logos, graphs and charts. Graphics created with Illustrator can be edited further using Photoshop.

Advantage • Graphics created with Illustrator can be edited further using Photoshop.• As it is a vector based program it allows the image to be scaled to any extent without

losing resolution, with crisp and sharp lines that are perfect for print where as raster images .

• Illustrator files are small in size so this allows easy sharing, mailing• It utilizes mathematical equations to draw out shapes.• This allows vector graphics to be scaled without any loss of resolution. • Since it is part of the Adobe Creative Suite, Illustrator works well with other Adobe

products, such as Photoshop.

• Disadvantage • Adobe Illustrator requires some skill or training to master it. Although there are many different tutorials that are available to help master it.

• To create photo realistic drawing, the user must have lots of time and patience and a keen eye for detail.

FLAStands For Flash File

Used For/Example

• Flash gives Web designers the ability to import artwork and to create animation and special effects, and add sound and interactivity.

• The content is then saved as file with a .SWF file name extension. (The letters SWF stand for 'Shockwave Flash

• It is used to create animation and games, it can include sound and video

Advantage • It can produce high quality files with a small file size• The Flash player is installed on a higher percentage user than any other video format.

Although not all users have the latest version installed (so they may not support files with the latest version of Flash)

• Flash files look the same and work equally well on PCs and Mac’s • Flash files are completely consistent, so once you test and implement your Flash video,

you can be confident that it will function the same way for all users (apart from obvious variables such as connection speed). This is important for web designers.

• Processors can download Flash Player to view Flash content, which performs across multiple browsers and platforms.

• Flash is applauded for being one of the Web's most accessible plug-in. 89.9 percent of Web users already have Flash Player installed.

Disadvantage • Although it's possible to publish your first Flash video in less than an hour with no previous experience, you can do the same with other formats even faster.

• You may find that you often have to convert files from other formats to FLV. This takes time and any extra conversions between compressed formats and it will reduce quality.

• FLA files aren't as easy to preview.

WMFStands For Windows Meta file

Used For/Example • The Windows Metafile is a 16-bit metafile format that can contain both vector information and bitmap information.

• Metafile means that this file contains information that describes or specifies another file.

• It is used for logos and cartoon clipart• It is similar to AI files• Windows Metafiles are intended to be portable between applications

Advantage • WMF is a Windows standard format that works well with Office.• Large, simply structured images require less memory than bitmaps for display • WMF can contain both vector and bitmap components• Vectors have no loss in definition and can be scaled big and small

Disadvantage • Bitmaps used as components of metafiles will suffer all the disadvantages of resized bitmaps when the metafile which contains these bitmaps is resized

• Few applications support direct editing of metafiles. Some of the most common are CorelDraw and Microsoft Draw

File Format Capture and Optimising

CompressionDefinition • Lossy compression is the way in which file sizes are reduced by

reducing the amount of redundant information that is saved.• Lossless compression is a compression scheme that emphasizes

maintaining the integrity of the original picture. When the picture is uncompressed, it maintains the same resolution and picture quality of the original, uncompressed picture.

Advantage • It keeps file sizes small so that you have more space on your computer or device and its quicker to open up as larger files take a longer time to open up.

Disadvantage Lossy compression is a compression scheme that emphasizes producing a small picture file, even at the cost of picture quality. Images become more pixelated as there are no longer enough pixels to fill in this larger space, gaps are created between the pixels in the image. The editing software that you are using will try to fill these gaps however the resulting image is often blurry

Lossy compression can produce smaller picture files than lossless compression; however, when you uncompress the picture, some of the original picture data is lost and cannot be recovered.

Image CaptureMethod Scanner

How is it used for image capture of

graphics

You can digitise/capture physical images such as photos, sketches and mixed media products, by placing them in a scanner, which is usually attached to a computer and usually works with applications such as Photoshop. It creates a duplicate image using reflected light, then saves the digital image to the computer.

Method CameraHow is it used for image capture of

graphics

Taking pictures, A still film camera is made of 3 basic elements, optical element (lens), Chemical element (film), mechanical element (camera body). Light bounces of an object travels through the lens reaches a film and a picture is formed.

Method Graphics TabletHow is it used for image capture of

graphics

Technology device that allows you to control the mouse like a pen, allowing for enhanced control of drawing, selection and digital handwriting, it allows a person to draw by hand to capture an image in digital form takes a long time, practice and skill to get a realistic photo image.

OptimisingWhy would you optimise? It ensures easy viewing on the web as people don’t

wait very long for pages to load if they take some time. Optimising images make them appear faster on a web page.

How can you optimise? You should resize an image to height and width you want to set it as You nee to give it a suitable file format preferably with a lossless format so that it doesn't loose quality when compressed to a smaller file

Advantage to optimising • Optimising is much quicker to load a photo • The file is compressed so that it takes up less room

and is quicker to use as I has reduced the information that is irrelevant.

Disadvantage to optimising • Photo appears appear much smaller where as images that aren’t optimised appear nice and big.

• The resolution is decreased to help image load faster

• When optimising images you need to know what you are doing, as it has to be done correctly to get a good result.

Storage

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

Lots of information on a file can make the file large and it can take u a lot of room on your computer

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

affecting quality?

Convert file to a lossless format so that it is compressed without loosing any quality

What is an advantage of scaling up images before exporting?

Scaling an image smaller before exporting is helpful as some websites don’t accept large image the images might be take too much room

What is a disadvantage of scaling up images before exporting?

Scaling an image up before exporting might be take too much room on your computer or device If scaled u too big the image might loose quality and become pixelated.

File Naming Conventions

What naming conventions could you use when creating your

video game assets?

• You need to name assets with a short description of what it is, the date you have saved it on, and the initials of the creator for identification purposes.

• You need to do this every time you save your work s that you can easily find certain assets you want

Why is it a good idea to accurately name your

assets?

Its good to name an asset as the next time you want to open it up you might have to open up all the files on your computer before you find the file you are looking for

You need to give the file a suitable name which reminds you of what content is on the certain file.

Asset ManagementWhy would you use folders when storing

your assets?• A file is an item that contains information—for

example, text or images or music. Files can be placed into folders

• A folder is a container you can use to store files in. • If you had thousands of paper files on your desk, it

would be nearly impossible to find any particular file when you needed it.

• Having your files stored in folders its much quicker and easier to find a certain file as you would just open the folder its placed under

• it keeps work more organised and tidier instead of having to scroll down lot of files to try and find a certain file you want

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

I would create a media folder and within these folders I would store more folders such as film and TVPrint Based Media, Video Games, Photography and Work Related Learning, ad I would place Files under the appropriate folder such as a file about how to work a digital camera I would save this file n my photography folder within my media folder.