File Types and Formats Blog Notes

 Image Properties

Pixel

A pixel is a single dot of an image. An image is composed of loads of pixels.

This is an image

This is the equivalent of a pixel (couldn’t go any smaller). This represents the bottom corner of the image and the image has hundreds of these.

Image Resolution

Image resolution is how many pixel there are in an image, a picture that only has 10x10 pixels is good quality but very small if we make this picture bigger the image becomes pixelated because it adds pixels you are adding pixels that don’t exist but if you had an image of 50x50, the image could be seen better at bigger size because there are more pixels to use.

This image shows the difference between the amounts of pixels used as you see a 10x10 is small and if made big is blurry and a big picture that has more pixels made bigger is only partially blurry.

Pixel Colour Intensity

It is the amount of colour used in the image. So if an image is in RGB format the image colour intensity is the amount of red, green or blue used in the image. Each colour is represented in black and white with black being more intensity of that colour and white being less intensity.

 

This is an image with lots of colour

 

This is the red channel which shows the amount of red used (more red intensity is black and less is white and the grey colour is the middle between the 2)

 

This is the same as the last but with Green

Same as before but with blue

Types of Pixel Colour Intensity

There are 2 different colour intensities:

RGB: Red, Green and Blue this type of colour intensity is good for digital use like looking at it on a PC or camera.

CMYK: Cyan, Magenta, Yellow and Key (Black) this type of intensity is good for printing.

Compression

When we compress something this becomes a lot smaller in file size so that it doesn’t take up as much space on our hard drives. There are 2 different types of compression used in images which are Lossy and Lossless

A lossy compression is when an image is reduced and the pixels that aren’t needed in the smaller file are deleted. The data that has been deleted can’t be recovered so it can’t recover its original size. Lossy compression are good for big detailed pictures because they reduce the amount of pixels in the image which reduces the data usage on your hard drive.

Lossless compression saves the pixels away so the image can be made bigger and smaller without the picture becoming pixelated. Lossless compression is good for logos that need different sizes (logo on front of building big, logo on a piece of paper small or on a call card which is really small).

Types of digital graphics

Raster Image

A raster image is an image made of pixels and each point of the image is saved as a colour. We would use this type of images for posters or other big drawing that use lots of colours. When we zoom in on the image is because pixelated (because it’s made of pixels) this way it is only good to use to an image that has a fix size and doesn’t need resizing. This makes the files smaller. 

Some of the Raster image formats are: JPEG XR, TGA, ILBM, IMG, PGF, etc.

BMP

Introduced on Windows platform. Commonly used raster graphic format for saving image files. The BMP format stores colour data for each pixel in the image without any compression. A 10x10 pixel BMP image will include colour data for 100 pixels. This method of storing image information allows for crisp, high-quality graphics, but also produces large file sizes. The JPEG and GIF formats are also bitmaps, but use image compression algorithms that can significantly decrease their file size. For this reason, JPEG and GIF images are used on the Web, while BMP images are often used for printable images.

Uses lossless compression.

Can’t hold transparency or animation.

GIF

Designed by CompuServe in early days for computer 8-bit video, always uses lossless LZW compression, but uses an indexed file (8bits, 256 colours maximum), very good for web graphics, one colour in indexed colour can be marked transparent, allowing underlaying background to be seen, doesn’t save the dpi number for printing resolution, supports animation showing several sequential frames fast to simulate motion.

Tiff

This file format is lossless which means the image doesn’t get pixelated when zoomed on. It has the highest quality format for commercial work. Lossless compression. From 1-bit to 48-bit colour. It does support transparency but it can’t hold animation. This file format is good for graphic artists, publisher industry and photographers because it has the highest quality image format.

Versatile, many formats supported.
Mode: RGB or CMYK or LAB, and others, almost anything.
8 or 16-bits per color channel, called 8 or 16-bit "color" (24 or 48-bit RGB files).
Grayscale - 8 or 16-bits,
Indexed color - 1 to 8-bits,
Line Art (bilevel)- 1-bit

JPG

The file is much small than other standards because it uses lossy compression which means we get smaller files but a the cost of quality. Good for web pages, email, memory cards, etc.

RGB - 24-bits (8-bit color),
Grayscale - 8-bits

Can’t hold transparency or animations.

This type of image is used in most cases for its small file sizes and is easy to carry around lots of images like for photos.

Vector Images

A Vector image is an image where the image is made of shapes and each bit has coordinates saved to it so when we zoom in on the image it recalculates the coordinates so that the image stays the same and we don’t get a blurred pixelated image. This type of image is good for logos because we need the logo big on the front of a building or a small calling card and using the type we can make 1 logo and just resize it. This type of image uses a lot of memory because it keeps the colours doesn’t matter the size.

Some of the Vector image formats are: XPS, PPT, VML, AI, CDR, .dwf, .dwg, etc.

PSD

This is the Photoshop standard that is one of the few formats that supports all of Photoshop’s features. File size can be very large if we are working with lots of layers. Can be reopened and modified if needed.

It uses lossless compression

It can hold transparency but not animation.

This file format is used for making and modifying anything in Photoshop or InDesign programs.

Fla

Fla is the adobe flash standard that lets us modify the images in flash. This format is similar to photoshop because it uses lossless compression and holds the layers like PSD but can also use animations unlike PSD.

Ai

Ai is adobe illustrator file format that lets us make vector images.

Computer Game Graphic Types

2D Sprites

2D sprites are images used to represent a thing in a game, these things can be characters (main player or sub playable characters), objects (capsule, coin, fruit), enemies (big bad a baddies, mobs, creeps), etc. Everything (except the background image) are sprites in a 2D game.

In this image of mario we can see loads of different sprites like mario, mushroom, blocks, tubes, etc.

Different types of sprites

3D Isometric Sprites

A 3D isometric sprite is a 3D model of a character, object, and enemy and with that model you take an image of it at isometric angle. They do this to give the image depth and give the illusion of 3D but requires a lot less graphics to process so that low powered machines can run them. The sprites are made like a 2D sprite (Frame by frame) and are used in a games like sims, strategy games like command and conquer and most MOBA type games like DOTA (Defence of the Ancients)  and LOL (League of Legends).

 

Concept Art

Concept art are the initial designs for a game and are what the rest of the games development team have to base their work on. Concept art is needed for virtually everything in the game like characters, weapons, vehicles, environment, etc. Once the concept art is made 3D modellers can start working on these designs and create the concept art as a 3D model and add other details if needed. Concept artist are usually freelancers that go from one job to the next and are only really needed at the start of the project.

 

Textures

When a 3D model is created it is made in a shade of grey but that is no good in a game, so it needs colour. Textures are those colour that are applied to a 3D model. But in order to apply the texture the 3D model needs to be “unboxed” so to say where we need to unfold the model so it is flat add the texture and rewrap the model back together. There are different types of textures like Normal map, colour map/diffuse map and a specular map. A colour map is when we add all the colour to the model (the end result looks like this). A specular map is used to add shine to the model, the model is made up of black and white colours and the white parts represent shine/highlights and the black is not shine (Matt). The last one is a normal map which is coloured in blue and give fine detail to models like scratches.

Colour Map

Normal Map

Specular Map

All three of the same texture

 

In game Interface

An in game interface are feedback and interactive images that appear on screen. In a game you will have a heads up display (HUD) which will give simple but useful information to the player like (maps, remaining ammo, what button needs to be pressed to interact with something, etc. The graphics needed to make a game interface are 2D images that represent each thing on screen like icons that represent the weapon equipped with the amount of ammo left, minimap, etc.

In this example there is a minimap at the top right, remaining missiles just below it, health bars at the top of the screen, a radar at the top left, the current type of weapon equipped at the bottom right.

Printed media

There are different types of printed media used in video games like Box art, manuals, posters, etc. These are one of the most important aspects of creating the game because they will be the first impressions that the player see’s when he walks into a shop or looks it up online and can determine if they buy the game or not. The art used on these need to be eye-catching and show what the game is more or less about.

 

If we look at this box art of infamous 2 we see the main character and that the game is most likely a magic type game because the character is using lightning, there is also blue one side and red the other which gives off a good and bad effect which most gamers would see as a game where you choose whether to be good in the game or evil.

Graphical Styles

Every game is created with different graphical style which makes that game unique in its own way. The most common graphical styles used are Photo-realistic, Abstraction, Cel-shading and Exaggeration. Most genres use the same visual style because they work better in that certain genre like most FPS games are photo-realistic but there are some exceptions like borderlands.

Photo-realistic

Photo-realistic is when a game or rather something in the game is made from a picture from real life. Games that use this style are a lot of first person shooters like battlefield and Call of duty.

These games use this style to make the player feel like they are on a battlefield and at war and the players think they are this person in the middle of a battlefield giving orders or being ordered to save or kill somebody.

The colours used are very realistic like real life and make the viewer feel like it is something that could happen in real life or in the past.

 This graphical style is made so that the player feels like he is in the shoes of the avatar and everything done in the game is something that you do in real life (most times) but we wouldn’t do it (like shoot somebody).

Abstraction

Abstract art style often employs a lot of lines and geometric shapes that don't resemble any real-life objects. To abstract something is to simplify it, reducing it to a few essentials and basic forms instead of trying to reproduce it. Indie game developers use this style a lot because it is easy to create and doesn't require a lot of time or money to create. Plus the thing you create can be anything from your imagination and doesn't need to be compared to real life meaning it can't criticised for its graphics or art style. Games that use this style are Fez and Super Hexagon.

 

Cel-Shading

Cel-shading is a type of rendering which makes a 3D model look hand drawn.Games that use this style are borderlands and Catherine.

This style usually has the drawings outlined to give off a hand drawn effect and usually got a lot of bright colours and is a style between photorealistic and cartoon. The colours used make the viewer like they are watching drawings move.

Exaggeration

This style is a very non-realistic style where everything is created with everything being too big/powerful/impossible to exist in the real world like swords twice the size they should be or characters that body mass is bigger that it should be. Games that are exaggeration are most anime games like Naruto or games like Gear of War (Chest is really big).

The colours are usually bright and make the viewer feel like they have powers or magical items exist.

These are the most used graphical styles used in games and each style makes that game into hours of entertainment for the user, if the graphical style doesn't work then people won't buy the game.  Each graphical style gives a game a different feel to it which makes the game unique.