Unit 22 - Understanding graphics and artistic styles
by Dave Johnson
Part 1 - Understanding artistic styles
Part 1 - Understanding artistic styles
On screen graphics form the backbone of any form of digital communications. They have developed from the earliest days of the computer, from the 8 Bit processer through to the 64 Bit processers we have today. Our computers today are total entertainment centres, capable of handling gaming, TV, social networking, music and the internet all at once. To many they are a need, a resource and a lifestyle, able to cater to most areas of a person’s life. Most importantly, they have become completely visual, where on screen graphics and icons can help even technophobic people navigate simply through the technology. The computers of yesteryear were far simpler in their visual presentation, able to calculate complex programs and procedures but with limited user interfaces. Often to use a program the user had to have a small knowledge of writing computer code or the machine operating system. Results could be trial and error, with the content of programs only catering for educational, mathematical or educational needs.
Similarly graphics have developed visual languages that can communicate feelings and emotions in a way we immediately understand. We term this method of communication as ‘artistic styles’. and can help define the game’s story, environment and intentions.
Artistic styles
Artistic styles in gaming is a vital ingredient as it sets up the players expectations of the game and it's story. Artistic style helps the player to maintain a consistent belief in the game world and immerse themselves in the experience. Factors that are taken into account are how the game world looks, the appearance of the main character, any non playable characters, the HUD, any full motion video or animations used during cut scenes, and the perspective of how the game world looks to the player.
Examples of artistic styles could include :
Bright, Comic, Cartoony
A comic visual style in gaming can serve a number of purposes. If the game has violent elements, they can help the game to seem other worldly and help make light of potential issues with the players' relationship with it. For example, games that rely heavily on shooting or punching can be made more approachable by adding a cartoony or comic element. Any other visual style would make the game closer to reality and as such would adopt a completely different personality.
The other advantage of this style is that because it can be considered so removed from reality, it gives developers a great deal of creative license. Gameplay elements such as special moves, crazy, unrealistic weapons and strange environments can all be introduced. As such games can be created that push the boundaries of the imagination and introduce the player to fun new worlds and ways of playing.
Notable examples include :
Bright, Comic, Cartoony
A comic visual style in gaming can serve a number of purposes. If the game has violent elements, they can help the game to seem other worldly and help make light of potential issues with the players' relationship with it. For example, games that rely heavily on shooting or punching can be made more approachable by adding a cartoony or comic element. Any other visual style would make the game closer to reality and as such would adopt a completely different personality.
The other advantage of this style is that because it can be considered so removed from reality, it gives developers a great deal of creative license. Gameplay elements such as special moves, crazy, unrealistic weapons and strange environments can all be introduced. As such games can be created that push the boundaries of the imagination and introduce the player to fun new worlds and ways of playing.
Notable examples include :
 |
| Street Fighter IV |
 |
| Zelda : The Ocarina Of Time |
 |
| Super Mario Kart |
Urban, Gritty
This visual style introduces a very real world element and is traditionally associated with military style games and first person shooters. They are often associated with combat or high action environments such as battlefields, cities and futuristic landscapes. This is largely because the content of the game is of a mature level and the stories of these games reflect this. Games of this style have often been designed for an older audience with the intent of immersing the player in a grim, danger filled, violent and high energy storyline.
Every attempt is made on the part of the developers to elicit an emotional response from the player, which is why there is often a first person perspective; to make the player feel that they inhabit that world. The aim is often to straddle the line between games and films, with non player characters talking directly to the camera as if talking to you. As well as the graphics this is clearly another convention used to introduce realism - to make the player feel that they are the character and part of the plot.
Notable examples include :
 |
| Battlefield 4 |
 |
| Call Of Duty : Modern Warfare |
 |
| Metal Gear Solid 4 |
 |
| Mirror's Edge |
Cel Shaded, Bright, Fun
Often this visual style of game incorporates a cartoon or comic feel. The idea is to make computer graphics appear almost hand drawn and larger than life. It is often used by Japanese game developers to bring popular Anime to life such as 'Naruto', 'Dragonball Z', 'One Piece' or 'Afro Samurai'. Primarily from the players' point of view it can often feel like the player is actually playing through a comic book, graphic novel or cartoon.
The purpose of cel shading is to create a link between games and comic book literature in the same way other games create a link with movies. This is even embellished with elements such as sound effects appearing as text on screen, speech bubbles, comic book panels appearing to describe events and more. They are not intended to be realistic depictions of life often dealing with light, fantasy subject matter. A notable exception of this rule is the 'Darkness II' which continues the dark horror tradition of the first, literally transferring the comic books' pages onto the screen.
Notable examples include :
 |
| Okami |
 |
| Prince Of Persia |
 |
| XIII |
 |
| Zelda : The Wind Waker |
 |
| The Darkness II |
Games such as these are relatively recent, only coming about at the beginning of the 21st century. Their visual style is not realistic and graphics can be cartoony or stylized. In many cases, sprites and character models are abstract and minimal with the emphasis given to the landscape or environment. This is often matched in the sound department by ambient music, gentle sound and vocal effects and environmental noises. These can include wind, water, rain, fire, animal and insect sound effects. Often the only music is on the menu screen rather than in game.
Many games of this visual style have mystical or fantasy leanings. This is largely because the huge landscapes suit or a questing or roaming game format, intended to be as much a physical journey for the player as well as an emotional one. Other games adopt a surreal approach such 'Flow and Flower' for example follows a storyline of six dreaming flowers stood on a window sill. The player can go inside each flowers' dream and look from the perspective of a petal being blown along by the breeze. The petal is blown across a landscape towards a distant city, restoring color to the landscape and eventually arriving at the city in question. The city is a menacing looking place full of jutting metal structures, but the player can endeavor to restore life to it. This changes the city and ends the game. Intended as an experience the game is intended as a visual and sonic experience with no music or vocals.
Many of these games feature an emphasis on mood, atmosphere, narrative and color. The stripped back nature of the presentation means that the player builds an emotional connection through story and experience rather than traditionally obvious methods.
Notable examples include :
 |
| ICO |
 |
| Flow and Flower |
 |
| Journey |
Medieval
Many action and fantasy games adopt this visual style. Often fantastical monsters, spells and weapons can be found as the medieval style caters for traditional high fantasy stories. Some of the common components are a bleak color pallet, gothic castles and architecture, bladed weapons and strong ruling / under classes in society. These games generally often feature large expanses to explore and conquer such as castles, fields, cities, caves and dungeons.
There is often a sense of imminent or underlying danger reflected in the design of shapes, colors and designs of environments and characters. The player often feels like they are a savior or hero, able to conquer an evil and save the day. The traditional idea of an epic quest is usually employed requiring the player to travel many in game miles to defeat evil. Weather and day / night effects or often employed to emphasize drama, mood and realism.
The overall idea of a medieval style is create a game world that is realistic enough to be recognizable but far enough from us to be slightly primitive. This primitiveness is often offset by an underlying sense of magic or sorcery to create gameplay mechanics and visual interest for the game. Often there is a toned down, naturalistic color palette and earthy, under saturated tones.
Notable examples include :
 |
| The Witcher 3 |
 |
| Age Of Empires |
 |
| Castlevania : Lords Of Shadow 2 |
  |
| Skyrim |
The animated cartoon visual style caters largely for adventure and point and click games. The idea is to create an experience that is as close as possible to watching and interacting with a hand drawn feature film. The first game to try this was the laser disc game 'Dragons' Lair' in the 1980s. Hand drawn by the legendary animator Don Bluth it took the player through a sequence of increasingly difficult animated sequences. Only quick reflexes and the right joystick command would allow the player to progress. The problem was that the game was so commited to mimicking a cartoon that many traditionally helpful gameplay features were forsaken, rendering the game a trial and error affair.
Despite the shortcomings of this early effort, modern games have developed to the point where they are playable cartoons in their own right. The visual style caters for bright colors, exaggerated caricaturist visuals and smooth hand drawn animation sequences.
Notable examples include:
 |
| Dragons' Lair |
 |
| Broken Sword |
 |
| Hotel Dusk |
 |
| The Last Express |
 |
| Valiant Hearts |
The abstract art style places emphasis on colors, lines and geometric shapes that are not meant to represent any object in particular. Early developers favored abstract games because they could not create renderings of realistic objects. This is certainly true of the early Atari 2600 and NES. Certain games from around this period such as 'Yars Revenge' or 'Raiders Of The Lost Ark' could only be put into context in the manual or marketing. The game graphics alone were so primitive that they could not convey the stories or message that the games themselves attempted.
Perhaps one of the best known modern abstract games is 'Tetris', the falling block puzzle game. They are merely geometrical objects that do not represent anything in particular. The game rules and idea are built around the objects ( In Tetris, for example, the player is tasked with creating lines of interlocking shapes). Shapes and colors are the key distinguishing features of this style, often setting the games rules through them. An abstract game can be of any genre from puzzle through to shoot-em-up, the only constant being that there are no physical representations of real world objects.
Notable examples include :
 |
| Tetris |
 |
| Child Of Eden |
 |
| Geometry Wars |
 |
| Hazard : The Journey Of Life |
Many games have exaggerated elements to create a fantastical, other worldly element. Exaggerated graphics can also be used to introduce story elements, highlight gameplay mechanics or simply add to the fun. Exaggeration is also used to convey emotions and character; for example larger eyes, poses and muscles.
Many designers also exaggerate things like weapons or vehicles the characters can use to make them more appealing to the player. Exaggerating visual elements can also help a game to stand out from others in the same genre, making them different and unique.
Exaggeration can also apply to common elements such as speed, explosions, comedy or violence. The adventure game 'The Secret Of Monkey Island' featured a larger than life, distorted view of pirates in the 17th century along with a script to match. Its' big presence, sense of fun and personality has cemented it as one of the all time gaming greats. In contrast, the 'Mortal Kombat' series uses exaggerated violence as part of its' unique gameplay mechanic. The ability to finish opponents in some of the most gruesome ways imaginable has played its' own part in making a unique, memorable series of games.
Other games use exaggeration to tell stories or define game characters. The character model for Batman in the 'Arkham' series marks him out from all the other NPCs' in the game. His armour is advanced, his physique is imposing, his voice deep and commanding and his knowledge of martial arts skills second to none. In contrast the bosses have been carefully thought out to look evil, destructive or calculating. The developers 'Rocksteady' have clearly given thought to exaggerating physical characteristics that will show these traits (facial features, musculature, movement animation and more).
Exaggerated games do not necessarily look photo realistic. They can apply to any of the aforementioned visual styles.
Notable examples include :
 |
| Batman : Arkham City |
 |
| Final Fantasy VII |
 |
| Mortal Kombat |
 |
| Bioshock Infinite |
Photo realistic
Photo realistic games set out to try and create a real world experience on the screen. They attempt to accurately replicate people, places, animals and environments as close to real life viewing as possible. Often these games feel gritty, atmospheric, militaristic or mystical. Gaming has an agenda of trying to get closer to movie like experiences, and photo realism is one of the key factors that drives the industry technology forward. Most photo realistic games are geared towards a certain adult audience as they often tell mature stories.
Ultimately photo realism games aims to make scenarios inside a computer completely believable - as if they could happen to us in our world at any time. This gives the player a thrill and sense of adrenaline that probably sets photo realism apart from other visual styles.
Key elements of photo realism are a vast color palette, convincing object physics, and fluid, seamless animation. Motion capture is frequently used to show real body movements, speech patterns and facial expressions.
 |
| The Vanishing Of Ethan Carter |
 |
| Call Of Duty : Advanced Warfare |
In the modern gaming age, this is probably one of the more underused visual styles. It is commonly used in the field of Role Playing Games, Point & Click adventures and even some educational games. These games are usually geared towards a more cerebral audience and use gameplay mechanics such as using the right word with the correct object to create an effect. The 'Monkey Island' games feature a pre set list of commands the player can use such as 'Look at', 'Pick up', 'Walk to', 'Use', or 'Talk to'. These are used in conjunction with the games' graphics to create an interactive experience to solve puzzles within. Other examples of the use of text in games include statistics and values. These are traditionally used in games such as the classic RPG 'Eye Of The Beholder'. The use of text is to record attributes and skills with player an make speech choices. Often these elements make up a portion of the game screen rather than the entirety of it, with a section devoted to visual illustrations
There are some games that are just on screen text and no more. These hark back to the dawn of the computer games age on systems such as the BBC Micro and ZX Spectrum. Games then were far less advanced than they are now, often with minimal graphics capabilities. The player was often required to use their imagination to fill in gaps in the visual narrative. Examples of this could include titles such as 'Zork', 'Kentilla', 'Rigel's Revenge' and 'Granny's Garden'. The gameplay relies heavily on story and decision making and is largely concerned with how you react in given situations.
Surprising, there is still a large fan base for these kind of retro games. Websites such as textadventures.co.uk and gameshed.com offer independent developers the chance to create and upload their own games. It has become an area concerned with nostalgia where veteran gamers can relive the experiences of their gaming youth. There are even some websites and apps where the games have been developed to quite a high level with slick presentation and visuals such as torn.com. In the visual gaming age, text based art styles prove that their is room for any kind of visuals to exist alongside one another.
 |
| The Secret Of Monkey Island |
 |
| Eye Of The Beholder 3 |
 |
| Kentilla |
 |
| Zork |
Part 2 - Understanding computer graphics
Computer Game Graphics
Each instance of computer game graphics could each be categorised under several sub categories. Examples could include:
Now that we have looked at computer game graphics, let us look a little closer at how all those graphics are actually formed on screen They are all vastly different in style, yet all share a common element - the humble pixel. But what exactly is a pixel?
Pixels
The word pixel means "picture element". Every digital image is made up of 1000s on screen at once. A single pixel on its own is almost invisible to the naked eye, yet when we put one or more next to one another lines and forms begin to appear. Usually round or square, pixels are arranged in a grid like system.
Pixels in this grid system are referenced rather like co ordinates on a graph, via an x and y axis. Each pixel has its own mathematical equation placing it in a given part of the picture. From a distance, this grid is invisible, but its mosaic like effect becomes clear when we zoom in or magnify the image. So upon inspection of this grid we can see just how important each small part is to making up the whole. When we magnify or blow up an image too much we have an effect that is termed as 'pixelation'.
Resolution
Image resolution refers to exactly how sharp an image looks and is directly relevant to the pixel grid we have looked at above. In simple terms, the greater the number of pixels in the grid, the sharper the image resolution will be. This is chiefly because the greater the number of pixels, the more image and colour information can be stored. A low amount of pixels in the grid will result in blurry or indistinct images since there is not a great deal of information to work with.
Resolution is often measured as a multiplication sum. For example a monitor may be referred to as having 1280 x 1040 resolution. This means that the total amount of pixels on the monitor is 1280 wide by 1080 high. In other cases, resolution is referred to in megapixels.
A megapixel is a million pixels. Megapixels totals are usually expressed as a single number which is reached by multiplying the width of a screen's pixels by the height. For example:
The general rule of thumb is the higher the megapixel ratio, the sharper the image resolution.
Pixel colour
We have established that pixels can create line and form, but how exactly do they create colours? Looking closer, we can learn that each pixel stores colour information for the image. It stores its information in either 3 components RGB or 4 with CMYK. RGB (Red, Green, Blue) are what all colours on a monitor are made of - a blend of those three colours. Because of its monitor referencing, RGB is a colour model that is suitable for screen and web graphics.
CMYK (Cyan, Magenta, Yellow and BlacK) reference the inks that all printed colours are made from. This makes the CMYK colour model relevant to the production of any printed media.
Digging a little deeper, the number of distinct colours that can be represented by a pixel depends on the amount of information each pixel can store. Information is stored as 'bits'. The more bits per pixel (bpp) that are stored, the more colours a pixel will be able to represent. This is termed as 'bit depth'. If for example, a single bit is stored in a pixel it can be termed as either 'on' or 'off' - black or white.
Types of digital graphics
Now we have understood how pixels work together, let us turn now to different types of graphics. Broadly speaking graphics types fall into two categories, 'bitmaps' or 'vectors'. Within these we can find other sub categories such as animation, 3D and VRML.
Bitmaps
Bitmap formats are used to store pixel data. Sometimes called 'raster files', bitmaps contain a pixel by pixel grid map of an image as described above. They are particularly useful for storing photographs, screen graphics and video images. They have the disadvantage of distorting when magnified too highly, meaning they are best used at only their saved size or smaller. However they have the advantage of creating small file sizes due to the use of compression (a term looked at further on our study). Bitmaps are however particularly good at re creating natural media such as watercolors, pencil and brush strokes. This is because the pixels can bleed into each other, creating the rough or uneven edges we see in art in real life.
Vectors
Vector graphics are created by way of control points. These control points can be either plotted by a computer or a user using specialist vector design software such as 'Illustrator'. The computer plots a line between these control points to produce smooth curves and flowing lines. It differs from bitmaps in the sense that any graphics produced are far less blocky since it is is not sticking rigidly to a grid. As such a vector has far crisper edges than a bitmap image. They also have the advantage that they can be magnified to any size and still retain their image quality. This makes them highly useful in the field of printed media since imagery can be blown up to any size while retaining its fidelity.
Animation
Animation formats are used largely in video games and on screen graphics presentations as well as cartoons, movies and television. The basic premise of this type of animation is rather like the flip books we played with as children. In many cases they are a fast moving sequence of images that when super imposed over one another give the illusion of movement. Simple animation graphics store a sequence of images or frames that play on a loop. Slightly more advanced graphics store a single image but have multiple colour maps for the image. The colours in the image change and the object appears to move. Advanced animation sequences store just two image frames but update only the pixels that have changed as each frame is displayed. This can also be applied to control points on a 3D model to move whole areas to give the impression of movement.
A general rule of thumb is the requirement of 15 frames per second to produce smooth animation while video is around 20 frames.
For example an animation cycle in a computer game might give the impression a character is running when the controller is pressed. Pressing a jump button will cause the computer to quickly swap in a jump sequence that then swaps back to the original running sequence when the character lands back on the floor.
3D
3D Graphics can be created by vertices being arranged next to other vertices. Lines are drawn between them by the computer, eventually creating a wireframe model or 'polygon'.
Generally speaking all polygon modelling begins with a simple primitive shape such as a cube or sphere. From here more vertices can be added and manipulated, gradually changing the shape and form. The process has often been likened to a piece of virtual clay that is pushed, pulled, squashed and stretched until the desired form is reach. Surface detail can then be added by applying bitmaps files to the face surfaces to simulate texture. This technique is commonly used in the video game industry to add detail and not compromise CPU performance. Adding vertices to create these effects are time consuming and CPU memory consuming, potentially slowing onscreen performance. Adding bitmap graphics and 'wrapping' them around the polygon model is far more memory effective and less consuming of image data.
From here, other effects such as lighting, shadow, transparency, shininess and reflectivity can all be applied. The result is highly detailed representation of an object that is primarily a simple wireframe model.
VRML (Virtual Reality Modelling Language)
This is a simple text file that can be attached to a 3D polygon model. It gives the computer specific instructions on what to do when a user clicks a part of a polygon. Effects could include onscreen effects, the introduction of more polygon models, jump to another sequence of programming, alter colours, transparency, bitmaps and so on.
File Extensions
File extensions are necessary for identifying what kind of file the user or computer is currently working with. All files have characteristics that are dependent on certain software. If a user tries to open a file using the wrong program, the process may be met with failure. The few characters after the dot on your file name clearly label the file and tell us and the computer whether it is suitable.
According to the BBC web wise site :
"In the early days of the personal computer, file names consisted of up to seven characters followed by a file extension consisting of a full stop and three characters. But since 1995, file names can be much longer and the main part of the name can include full stops. So now the last full stop in the name is considered to mark the start of the file extension."
A file extension is also useful for running the file when it is double clicked. For example, double clicking a .jpg file will open an image whilst a .exe file will run a program.
It is good practice to always have file extensions turned on. By default, Windows turns them off. This has been taken advantage of by malicious programs which seek to compromise a computers security. For example with the file extensions turned off, a user may click an image file expecting it to be 'photo.jpg'. In actuality it is 'photo.jpg.exe' which could run a virus or trojan program. Therefore it is vital for a user to be able to see what type a file is, and whether it can be considered a threat.
Bitmap file extensions
Bitmap file extensions signify files that are pixel based. Below are the most common four types along with their advantages, disadvantages and usage.
.TIFF
This is an acronym for Tagged Image File Format. They are the format that can store the greatest amount of image information out of all the bitmap file formats. A TIFF can store a great deal of detail and are extremely flexible in terms of the colour pallets available (CMYK, RGB or grayscale.) The information in a TIFF file is vast though, leading to some quite large file sizes. Because of this they are predominantly used by photo software and desktop publishing software due to the detail they can store.
.JPEG / .JPG
This is an acronym for Joint Photographers Expert Group. It is a bitmap format which means that it is pixel based as described in the details above. A jpeg file is a lossy format that means it can be saved with a variable rate of compression. 'Lossy' and 'lossless' are terms that we give to files that lose some or no image quality after being compressed and saved.
Compression refers to how much information we are prepared to lose in the process of making a file smaller. For example a file with no compression will suffer very little loss and look almost identical to how it was when it was made in the imaging software. It will however be a larger file size.
A file with some or great deal of compression will likely be noticeably negligible in its image quality after saving - this can be noticed by a loss of sharpness and blurring in the image quality. It will however be a smaller file size.
It is useful to remember that a JPEG can store more bitmap image information than any other format, making it a good choice for photos, graphics and video. A JPEG is a useful file in that the user can directly specify, and with some detail, how they want it to look after saving. This is the main advantage to the user - a trade off of file size against image fidelity. However, a jpeg does not support transparent areas in the image like GIFs and PNGs. It is inadvisable to use JPEGS on vector art as the compression will degrade the quality of the image near its edges.
.GIF
This is an acronym for Graphics Interface Format, pronounced 'giff'. A GIF is bitmap image format that is similar to a JPEG, but has the advantage of being able to store animations. These animations can consist of around 20 frames, playing infinitely in a loop. The format is also lossless. No detail will be lost in the image during compression, but the file cannot be made as small as a JPEG.
GIFs also have a limited colour palette which makes them suitable for screen and web but not for printing.
.PNG
This is an acronym for Portable Network Graphics, pronounced 'ping'. It is a lossless image format making it suitable to save vector images with. It has advantages over GIFs as the user can specify the level of transparency required on any see through parts of the image. It creates small file sizes, but also has limitations - it features a possible colour palette of just 256 colours and cannot handle animations. The PNG format is widely used in web pages where graphic elements are overlaid over each other. The PNG's variable transparency (or opacity) means images underneath can still be seen if necessary. The format is widely used by web browsers and image viewers.
Vector file extensions
Vector file extensions signify files that are vector based. This means sharper, cleaner edges to images and a greater degree of image editing ability. Below are the most common four types along with their advantages, disadvantages and usage.
.AI
This is an acronym for Adobe Illustrator file, a vector graphics and drawing program that is part of the Adobe Creative Suite. It offers a huge amount of creativity and powerful image editing ability along with a colour palette of millions and the ability to optimise files.
Optimising is the term that we give to files when we allow the computer to save them at smaller file sizes to send or display on screen. The tools in Adobe Illustrator allow for advanced optimisation options - the program will deduct any colour information that it perceives will not be noticed by the human eye. To us, this means that we end up with graphics that are crisp, sharp, identical our image design but most importantly small file sizes.
The disadvantage of using Adobe Illustrator is that it is not widely accepted by many programs outside of the Adobe Creative Suite. There are a few image viewers that can open a .AI file but by and large it can only be read by other Adobe programs, limiting its support.
Its usage is geared towards graphics, desktop publishing and design for web graphics.
.PSD
This is an acronym for Adobe Photoshop file, an image editing and photography program that is part of the Adobe Creative Suite. It has also gathered much acclaim as a state of the art painting program, used and revered by hundreds of professions worldwide. Photoshop can create and edit hand drawn artwork as easily as it can handle photography manipulation. Perhaps most impressively it can import vectors from Illustrator and edit bitmap images just as easily.
Unfortunately, like Adobe Illustrator it is not widely accepted by many programs outside of the Adobe Creative Suite. There are some image viewers that can open a .PSD file but mostly it can only be read by other Adobe programs, limiting its support.
Its usage is geared towards illustration, photography and design for web graphics.
.INDD
.FLA
.PDF
The now world wide recognised PDF can produce small file sizes retaining fidelity, can hand le vectors and bitmaps and critically is cross compatible. Practically any program can open a PDF making it a good choice for an all purpose file format. Its main downside is it can be read for free, but editing a PDF will require the purchase of Adobe software, which can be expensive.
Image Capture
Digital images can be captured in any of the following ways:
Storage of image assets
Digital data can stored for retrieval or the event of an emergency in the following ways:
Bibliography
Each instance of computer game graphics could each be categorised under several sub categories. Examples could include:
- Pixel art - sprites, designs, collectables, in game screens, etc
- Concept art - designs, characters, vehicles, weapons, etc
- Texture art - stone, skin, cloth, metal, grass, etc
- Background graphics - Sky, Mountains, Deserts, Seas, Cityscapes, etc
- In game design - Score display, Heads Up Display, Game Over screen, etc
- Print media - Game packaging, marketing, advertising, Point Of Sale, etc
Now that we have looked at computer game graphics, let us look a little closer at how all those graphics are actually formed on screen They are all vastly different in style, yet all share a common element - the humble pixel. But what exactly is a pixel?
Pixels
The word pixel means "picture element". Every digital image is made up of 1000s on screen at once. A single pixel on its own is almost invisible to the naked eye, yet when we put one or more next to one another lines and forms begin to appear. Usually round or square, pixels are arranged in a grid like system.
Pixels in this grid system are referenced rather like co ordinates on a graph, via an x and y axis. Each pixel has its own mathematical equation placing it in a given part of the picture. From a distance, this grid is invisible, but its mosaic like effect becomes clear when we zoom in or magnify the image. So upon inspection of this grid we can see just how important each small part is to making up the whole. When we magnify or blow up an image too much we have an effect that is termed as 'pixelation'.
 |
| Pixels become visible within an image when we zoom in on them. |
Image resolution refers to exactly how sharp an image looks and is directly relevant to the pixel grid we have looked at above. In simple terms, the greater the number of pixels in the grid, the sharper the image resolution will be. This is chiefly because the greater the number of pixels, the more image and colour information can be stored. A low amount of pixels in the grid will result in blurry or indistinct images since there is not a great deal of information to work with.
 |
| Examples that illustrate the principle of the greater the number of pixels in the grid, the sharper the image. |
A megapixel is a million pixels. Megapixels totals are usually expressed as a single number which is reached by multiplying the width of a screen's pixels by the height. For example:
A pixel of ratio of 2400 pixels x 3000 pixels means 2400 x 3000 = 7200000. This gives a resolution of 7.2 megapixels.
The general rule of thumb is the higher the megapixel ratio, the sharper the image resolution.
Pixel colour
We have established that pixels can create line and form, but how exactly do they create colours? Looking closer, we can learn that each pixel stores colour information for the image. It stores its information in either 3 components RGB or 4 with CMYK. RGB (Red, Green, Blue) are what all colours on a monitor are made of - a blend of those three colours. Because of its monitor referencing, RGB is a colour model that is suitable for screen and web graphics.
CMYK (Cyan, Magenta, Yellow and BlacK) reference the inks that all printed colours are made from. This makes the CMYK colour model relevant to the production of any printed media.
Digging a little deeper, the number of distinct colours that can be represented by a pixel depends on the amount of information each pixel can store. Information is stored as 'bits'. The more bits per pixel (bpp) that are stored, the more colours a pixel will be able to represent. This is termed as 'bit depth'. If for example, a single bit is stored in a pixel it can be termed as either 'on' or 'off' - black or white.
Types of digital graphics
Now we have understood how pixels work together, let us turn now to different types of graphics. Broadly speaking graphics types fall into two categories, 'bitmaps' or 'vectors'. Within these we can find other sub categories such as animation, 3D and VRML.
Bitmaps
Bitmap formats are used to store pixel data. Sometimes called 'raster files', bitmaps contain a pixel by pixel grid map of an image as described above. They are particularly useful for storing photographs, screen graphics and video images. They have the disadvantage of distorting when magnified too highly, meaning they are best used at only their saved size or smaller. However they have the advantage of creating small file sizes due to the use of compression (a term looked at further on our study). Bitmaps are however particularly good at re creating natural media such as watercolors, pencil and brush strokes. This is because the pixels can bleed into each other, creating the rough or uneven edges we see in art in real life.
Vectors
Vector graphics are created by way of control points. These control points can be either plotted by a computer or a user using specialist vector design software such as 'Illustrator'. The computer plots a line between these control points to produce smooth curves and flowing lines. It differs from bitmaps in the sense that any graphics produced are far less blocky since it is is not sticking rigidly to a grid. As such a vector has far crisper edges than a bitmap image. They also have the advantage that they can be magnified to any size and still retain their image quality. This makes them highly useful in the field of printed media since imagery can be blown up to any size while retaining its fidelity.
 |
| A diagram showing how vector graphics plots lines between control points. |
 |
| A diagram showing the effects of resizing a vector and raster file. |
Animation
Animation formats are used largely in video games and on screen graphics presentations as well as cartoons, movies and television. The basic premise of this type of animation is rather like the flip books we played with as children. In many cases they are a fast moving sequence of images that when super imposed over one another give the illusion of movement. Simple animation graphics store a sequence of images or frames that play on a loop. Slightly more advanced graphics store a single image but have multiple colour maps for the image. The colours in the image change and the object appears to move. Advanced animation sequences store just two image frames but update only the pixels that have changed as each frame is displayed. This can also be applied to control points on a 3D model to move whole areas to give the impression of movement.
A general rule of thumb is the requirement of 15 frames per second to produce smooth animation while video is around 20 frames.
For example an animation cycle in a computer game might give the impression a character is running when the controller is pressed. Pressing a jump button will cause the computer to quickly swap in a jump sequence that then swaps back to the original running sequence when the character lands back on the floor.
3D
3D Graphics can be created by vertices being arranged next to other vertices. Lines are drawn between them by the computer, eventually creating a wireframe model or 'polygon'.
 |
| Example of how vertices (control points) are arranged to form a polygon sphere |
From here, other effects such as lighting, shadow, transparency, shininess and reflectivity can all be applied. The result is highly detailed representation of an object that is primarily a simple wireframe model.
 |
| Texture bitmaps that have been applied to a polygon sphere |
VRML (Virtual Reality Modelling Language)
This is a simple text file that can be attached to a 3D polygon model. It gives the computer specific instructions on what to do when a user clicks a part of a polygon. Effects could include onscreen effects, the introduction of more polygon models, jump to another sequence of programming, alter colours, transparency, bitmaps and so on.
File Extensions
File extensions are necessary for identifying what kind of file the user or computer is currently working with. All files have characteristics that are dependent on certain software. If a user tries to open a file using the wrong program, the process may be met with failure. The few characters after the dot on your file name clearly label the file and tell us and the computer whether it is suitable.
According to the BBC web wise site :
"In the early days of the personal computer, file names consisted of up to seven characters followed by a file extension consisting of a full stop and three characters. But since 1995, file names can be much longer and the main part of the name can include full stops. So now the last full stop in the name is considered to mark the start of the file extension."
A file extension is also useful for running the file when it is double clicked. For example, double clicking a .jpg file will open an image whilst a .exe file will run a program.
It is good practice to always have file extensions turned on. By default, Windows turns them off. This has been taken advantage of by malicious programs which seek to compromise a computers security. For example with the file extensions turned off, a user may click an image file expecting it to be 'photo.jpg'. In actuality it is 'photo.jpg.exe' which could run a virus or trojan program. Therefore it is vital for a user to be able to see what type a file is, and whether it can be considered a threat.
Bitmap file extensions
Bitmap file extensions signify files that are pixel based. Below are the most common four types along with their advantages, disadvantages and usage.
This is an acronym for Tagged Image File Format. They are the format that can store the greatest amount of image information out of all the bitmap file formats. A TIFF can store a great deal of detail and are extremely flexible in terms of the colour pallets available (CMYK, RGB or grayscale.) The information in a TIFF file is vast though, leading to some quite large file sizes. Because of this they are predominantly used by photo software and desktop publishing software due to the detail they can store.
This is an acronym for Joint Photographers Expert Group. It is a bitmap format which means that it is pixel based as described in the details above. A jpeg file is a lossy format that means it can be saved with a variable rate of compression. 'Lossy' and 'lossless' are terms that we give to files that lose some or no image quality after being compressed and saved.
Compression refers to how much information we are prepared to lose in the process of making a file smaller. For example a file with no compression will suffer very little loss and look almost identical to how it was when it was made in the imaging software. It will however be a larger file size.
 |
| A picture demonstrating a large lossy effect (heavy compression) on the left through to minimal lossy on the right.(light compression). |
This is an acronym for Graphics Interface Format, pronounced 'giff'. A GIF is bitmap image format that is similar to a JPEG, but has the advantage of being able to store animations. These animations can consist of around 20 frames, playing infinitely in a loop. The format is also lossless. No detail will be lost in the image during compression, but the file cannot be made as small as a JPEG.
 |
| A great example of a smoothly animated gif |
This is an acronym for Portable Network Graphics, pronounced 'ping'. It is a lossless image format making it suitable to save vector images with. It has advantages over GIFs as the user can specify the level of transparency required on any see through parts of the image. It creates small file sizes, but also has limitations - it features a possible colour palette of just 256 colours and cannot handle animations. The PNG format is widely used in web pages where graphic elements are overlaid over each other. The PNG's variable transparency (or opacity) means images underneath can still be seen if necessary. The format is widely used by web browsers and image viewers.
Vector file extensions signify files that are vector based. This means sharper, cleaner edges to images and a greater degree of image editing ability. Below are the most common four types along with their advantages, disadvantages and usage.
.AI
This is an acronym for Adobe Illustrator file, a vector graphics and drawing program that is part of the Adobe Creative Suite. It offers a huge amount of creativity and powerful image editing ability along with a colour palette of millions and the ability to optimise files.
This is an acronym for Adobe Photoshop file, an image editing and photography program that is part of the Adobe Creative Suite. It has also gathered much acclaim as a state of the art painting program, used and revered by hundreds of professions worldwide. Photoshop can create and edit hand drawn artwork as easily as it can handle photography manipulation. Perhaps most impressively it can import vectors from Illustrator and edit bitmap images just as easily.
This is an acronym for Adobe In Design file, a desktop publishing and vector drawing program that is part of the Adobe Creative Suite. It is primarily for print design although does also have features that cater to web layouts. Files from Photoshop and Illustrator can all be imported along with most other types of bitmap file. It is a program that is best known for publishing layouts and typography, which it can produce vector versions of.
A feature that In Design does have that cannot be found elsewhere in the Adobe Creative Suite is the ability to package the source and all dependent files in one folder. With the click of a button the user can gather all bitmap and vector media, gathering all projects assets into one folder. This is a valuable tool for file storage and maintenance. It can also compress very large files into small PDFs that retain excellent image fidelity.
Sadly, In Design does not have any support outside of the Adobe Creative Suite however, meaning it has absolutely no cross compatibility.
Flash files are media animation files that can be embedded into sites or even make a complete website itself. It is an all vector based program, though its drawing tools are somewhat limited. Critically it has also fallen out of public favour in recent years with Google being unable to recognise Flash sites. This is obviously of no use when it comes to Search Engine Optimising making Flash web sites a thing of the past. Flash can produce some very fine animations however, with the ability to import and animate vectors and bitmaps to a very high standard.
The now world wide recognised PDF can produce small file sizes retaining fidelity, can hand le vectors and bitmaps and critically is cross compatible. Practically any program can open a PDF making it a good choice for an all purpose file format. Its main downside is it can be read for free, but editing a PDF will require the purchase of Adobe software, which can be expensive.
Image Capture
Digital images can be captured in any of the following ways:
- Via taking a screenshot
- Via a scanner and saving the image
- Via a digital camera or camera phone
- Via saving from a stock image library or Google
Storage of image assets
Digital data can stored for retrieval or the event of an emergency in the following ways:
- Via a cloud storage space or Google drive
- Via a USB stick, Flash drive or external disk drive
- Via sending the image to an email account as an attachment
- Via burning to a CD or DVD
- Via sharing with a networked computer
It is also prudent to store image assets on a computer via a well thought out filing system. If for example a project has numerous versions of work done on it, a simple filing convention will be required. This could be as simple as _V1, _V2, _V3 etc being attached to the end of the current filename and saving as a new file. This is useful for identifying the latest version and vitally creating a file back up. A good rule of thumb is back up files regularly in at least 3 places to prepare for the worst case eventuality.
Bibliography
http://www.ultimate-photo-tips.com/what-is-a-pixel.html
http://designthatsit.com/tag/tv/
http://www.sqa.org.uk/e-learning/BitVect01CD/page_07.htm
http://www.ivanexpert.com/blog/2010/05/the-5-types-of-digital-image-files-tiff-jpeg-gif-png-and-raw-image-files-and-when-to-use-each-one/
http://antonmckenzie.wordpress.com/unit-19/types-of-digital-graphics/
http://www.fileformat.info/mirror/egff/ch01_04.htm
http://www.bbc.co.uk/webwise/guides/file-extensions
http://www.webopedia.com
http://graphicdesign.about.com/od/Definitions/g/Tiff-Files.htm
http://vectormagic.com/support/file_formats
No comments:
Post a Comment