Concept Art

Concept art is form of an illustrative goal to convey visual representation of design and/or mood used for the games before it is put to final product. It is referred as visual development.

 

What they do is draw a quick sketching of a few concepts, change them with shading and refining, choose one of the best concepts and put it into 3D modelling and then refine the 3D model and there a character, an item or a location from the concept arts or the concept art will be put into animation if it’s an animated character.

Image is from https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY4pzlm3ugUuJokGNRTaE-SAE_h06UMpQOk3st1TLNs92zgC_uoy0Y587Oi9JQOjidKb7yi-IQieV7AifjfExJo8_JDaFaLxt6SvFwKDwx6PR-DUa8spAKQHtU4zbUonYC3soQDCmjc_s/s1600/hunter_rough_sketch_process.jpg

Texture Art

Texture art can work on both graphics and background images making them look realistic as possible. They try to make different types of images of ground so that they can tell difference between grassy ground and concrete ground. Texture artist would be spending most of the time working on the floor, wall and the ceiling of the game but they would also create texture for when the when the weather changes or time changes and can make it look like it’s a sunny day or a rainy night.

 

Texture artists also work on 3D images requiring detailed painting if it’s for a character of a game or for an item.

 

For texture art the artist would take a photo or paint a picture of the surface they need and they scan it into the computer and wrap the picture around the object in a process called texture mapping.

Image is from http://i1245.photobucket.com/albums/gg581/jamesmcd85/Brick_texture_notTiled.jpg

 

Background Art

Background art is used to set the idea of the theme or location of the game which sets the environment for the game. For example if you were in a city the background would have tall buildings, streets, cars and people walking in the background. So the background artist would be building a playground for the character.

Background artists or modellers help create video game settings not just decorating a games walls but to make the playground for the game. They begin by sketching the background suggestions for the design document then they draft it more accurately on graph paper with proportion. The scale of the playground has to be accurate or the structure size will be too big or too small for the character. Once the demand has been satisfied the artists will mould the environment using the computer as a virtual movie set create the environment shape by shape.

For an example: the artist is creating a laboratory he might use rectangles to create the walls, ceiling, doors and the floor. Then create shapes to fill in the room such as counters, stools, sinks and large machinery. Finally create images for the player to interact with such as test tubes, calculators, fire extinguishers and experimental laser guns.

Then the artists will add light shadow so that the room will cast a spotlight of brightness and shadow over environment.

There is a background artist called Michael Kirkbride who works for Bethesda Softworks says he have to draw and construct the environment to the designers team specifications for the level designs that will fit the game.

www.incredibleart.org/jobs/video.html

Image of Michael Kirkbride from http://www.uesp.net/wiki/General:Michael_Kirkbride

Pixels & Resolution

 

A picture element is a singular rectangular point in a large graphic image made with many coloured rectangular points. Picture element has a shorter name known as “pixel”. Computer monitors can display images because the screen is divided into millions of pixels

arranged in columns and rows.

 

These pixels help form an image on the computer. Pixels can display different colour depths; the higher the bit numbers the more colours in each pixel and better the display the image.

 

For example: If the image was 1 bit it would contain up to 2 colours (black & white).

 

But if the image was 2 bit it would contain 4 colours (red, green, blue, black).

 

32 bit images can contain up to 16 million colours.

 

When I talk about resolution it doesn’t matter if it’s an image on the computer and you change the resolution of the image it will look the same on the computer screen. I would only see the difference on print.

 

Let’s say I open up and image in Photoshop and I change the resolution to 72 DPI (dots per inch) you would think the pixels would get smaller, the image does look like it’s become smaller but the pixels don’t get smaller, they do the opposite. The pixels would get bigger becoming bulkier trying to fill in most of the image. I would not notice this in Photoshop but if I print this out I would definitely notice the pixels has the picture becomes a bit blurry.

 

So if I change the image’s resolution to 300 DPI the image will blow up the image in Photoshop but the pixels will not grow bigger but they will become smaller. When putting an image in a higher resolution the pixels will become smaller so that all the different coloured pixels will fit together in a single mega-pixel which is like a pixel but with many colours in it.

 

This helps the image to have better details and to cope with the expansion of the image. When I printed this I noticed that the 300 DPI image was bigger than the 72 DPI print out but the images have the same quality so I traced back to the website where I got the image which is from http://freebigpictures.com/butterfly-pictures/colorful-butterfly/ , but my tutor told me I have actually save both pictures in the same way so they both ended up with the same resolution of 72 DPI. So he said I should just save the image and download the other and so I did. When I printed out the two images I can tell the difference of the two that the 72 DPI is more blurry and the 300 dpi is clearer.

 

This is the 72 DPI image I saved.

 

This the 300 DPI image I downloaded.

 

File Compressions Lossy/Lossless

File compression is simply a special formula know as algorithm used to create smaller files. The reason for compressing files is that some graphic files are big and take up a lot of space on computers and if I was downloading a big file it would take a long time for the file to finish. Though compression is good for space, the greater the compression the poorer the quality of the image so I would try the balance the quality of the file size.

 

There are two types of compression, lossy and lossless.

 

Lossy compression offers a greater compression than lossless and some of the pixels of the image will be changed while making the file size smaller. The important thing knowing about lossy compression is when it assumes some of the data that isn’t important it cuts out the unimportant data and that data is permanently lost. JPEG and Bitmap images uses this compression.

 

Lossless compression is different because when compressing none of the data gets lost in fact the data can be used to rebuild the image to its original quality. It uses mathematical functions to eliminate redundant data and if there isn’t enough redundant data then the file size may not be significantly reduced. There are much different graphic software that uses lossless compression such as WinZip and Stuffit. GIF and PNG images use these compressions.

 

Here is a diagram I found at https://wikis.glowscotland.org.uk/@api/deki/files/18430/=LOSSY.GIF that will help explain how lossy and lossless compressions work.

 

It shows that when you do a lossless compression and restore it all the data is still the same as from the original and while using lossy compression and restore, it loses data from the original.

Interface HUD

In the video game the interface is also known as the HUD (Heads-Up-Display) which allows the player to see pieces of information about the character while playing the character simultaneously. It shows the characters information such as:

 

• Health/lives

 

• Items

 

• Time limit

 

• An indication of game progress level/score

 

• Weapons/ammunition

 

• Crosshairs

 

• Mini-map

 

So the interface art is designed to match the theme of the game while still displaying the clear information of the character’s status. Every game has its own unique interface to match the certain style of the game.

The image above is an example of the interface/HUD from World of Warcraft (well an old version of it but it’s still a good example). In the top left corner you can see the player’s character’s status with characters face, name, health bar, secondary bar and current level. Underneath that is the characters pet or sidekick with its own status display and at the right of the characters status bar is another player’s status bar but it only shows health, name and current level.

 

On the top right corner is the mini map which shows the name of the area and the exact location with the mini map that always pointing north. It also has the option to open up a full map of the world and to zoom in or out on the mini map.

 

At the bottom of the image when you see that blue line, that’s the indication of the character’s levelling system, also note that it is in a third person view allowing the player to see the world and his/her character.

 

The second example is a HUD from Battlefield 3 (the image is from http://media.pcgamer.com/files/2013/03/battlefield-3-end-game-4.jpg )

Note that it’s viewed in a first person view so that the player can see the world around him/her but the player cannot see his/her character (except for the hand and gun). On the bottom right corner you can see the status of the player such as the health with a 100% and with heart monitor and under that is the status of the weapon which shows the weapon has 20 bullets in the gun and has 108 bullets left.

On the bottom left corner is the mini map to show the player’s current location with a compass at the bottom indicating North to North/West. Just on top of the mini map is the status of the game that indicates the current status of the teams. I have played this game before from what I can tell that this a game of conquest were two teams must capture the most territory than the other team in order to win. The more territory you capture the other team will lose points. The blue colour represents the player’s team and the orange colour represents the enemy team (and from the looks of the score the blue is winning).

At the bottom centre you can see the player’s scores in the blue writing, it shows the number of points and why he/she have earn these points and under that is the statement of a kill with name of the player (green text), the name of the gun (white text) and the name of the victim (orange text). Also there is the crosshairs that helps the player to aim the gun but it’s hard to see it because the crosshairs is white and the map is a snowy terrain.

Print Media

Print media is actually anything about the game is printed and published whether on paper or the Internet. If you would put an image of the main character on a website you would make the image size small like 72 DPI (dots per inch) or if you put the game’s image on a poster it would have to be a march larger size about 300 DPI.

If I was going to be printing any images of the game it would be published on magazines, banners, newspapers, the game box cover, websites and leaflets.

This is an example of the print media.

On the left is the poster of Diablo 3 which is going to be a big print out so it will have to be 300 DPI so that the quality is not lost on the poster and on the right is the banner for the game from http://fc03.deviantart.net/fs24/f/2009/242/b/8/Diablo3_Banner_small_by_DavionX.gif . Though it looks like it’s a big image but it’s actually small with the resolution 72 DPI so it can be uploaded on the Internet without taking up much space.

Capturing Images

Today when capturing photographic images they turn into a digital format which later will get upload into a computer to be printed out, forwarded as an attachment on an email or to be posted on the internet.

There are two types of electronic devices that can digitally capture images; the digital camera and the scanner.

Digital Camera

The digital camera is the most popular way of capturing photographic image. The image is stored on an internal memory or on a SD card (these SD cards can have the capacity up to 32 gigabytes but they are small as a fingernail).

The data of a captured images are in mega pixels which are light sensitive sensor grids measured in pixels; the higher the mega pixels the better the resolution of the taken pictures. when the images are captured they only grayscale. RGB filters are placed on top of the CCD sensor to add colour.

Transferring images to my computer is as easy as taking the pictures, simply by using an USB connector or having a removable storage device. Also most cameras can record digital videos.

Digital cameras uses the primary colours of red, green and blue (RGB) because daylight is made of RGB, computers use RGB to display images on the monitor and the human eye use RGB to display light and colours.

 

Scanner

Scanners don’t capture photographic images like the digital camera but what they do is that they make digital copies of existing images (old photographs, magazines, comics, documents etc.).

The images are scanned in DPI (dots per inch). Some scanners allow users to preview image before they scan it into their computer. Scanners can easily upload images into computers with an USB port the user later can edit the image using graphic editing software.

How is image captured? Well the user places a document on the class and then closes the lid. Next the xenon light in the scanner illuminates the documents and the belt pulls the lamp to illuminate the whole document making the light bounce back through a series of mirrors, lenses and filters which the scanner’s software assembles the image together and uploads the image to be edited on the computer.

 Most scanned images come out as raster images either bitmaps of TIFF images.

 

I got this information from http://curiosity.discovery.com/question/how-does-scanner-capture-image

I also got this video from the same webpage. About uploading images onto the computer.

Vector Images

Vector images are the images that contain paths that contain text, lines and shapes. It is composed with lines and curves to make the image smoother and the colours are arranged by a mathematical equation called vector. Unlike raster images vector images are resolution independent meaning the images will not lose their quality no matter how big they are made. This would be useful for posters, magazine covers, website images, web pages, web advertisements, logos and billboards.

 

The only disadvantage of vector is that it’s not photorealistic. It lacks depth and appearance in the value and colours of a continuous tone image.

 

PSD

 

PSD is Photoshop Document shortened. It is created when you save a document on Photoshop. It can be converted to a raster image or a vector image. It can have the maximum height and width of 30,000 pixels and the limit size of 2 Gigabytes. It is used for Webpages and logos. But also Photoshop can also work on raster images.

 

FLA

 

FLA files contain source material from adobe flash. This format can be compiled into Shock Wave Flash (SWF). Flash is also what’s used to make GIF files and it is also known to make my own animations for web cartoons and for making flash video games.

 

AI

 

Ai files are used in Adobe Illustrator. It is a vector based format. It can be used to make images and game sprites. I quickly made this character to show as an example that even if you resize the image like a building it would not lose its quality. In my personal experience I use Illustrator to create the background and sprites for a video game I was making called “Halo Boy”.

 

PDF

 

In 1991 adobe systems created the Portable Document Format or PDF for short. It was created to be a document format that can work on software, hardware and operating systems. The contents of this format would have texts, fonts, graphics and other information required. This is a vector because when I enlarge the document it does not lose its quality and become blurry so I can see the words clearly (it’s easier to read with vector formats).

 

Rater Image Formats

Pixel Art

Pixel art is a form of digital art that is created in raster graphics software. The images are edited at a pixel level, so it’s a very retro style that was used in old console games, in calculators and some mobile games use pixel art to get that retro feel.

There are 3 types of pixel art files that can be used in video games.

 

1.    GIF: In 1987 CompuServe created the Graphics Interchange Format (or GIF). A raster format that is web friendly, it supports 24-bit colour RGB colour space containing 256 colours. It is also used for animation so it can be used to make a sprite look like it’s moving by its self in the game. It’s a lossless compression format so it basically doesn’t lose any of its data when it’s uploaded.

2.    PNG: In 1995 the Portable Network Graphics was produced by the same people who created GIF. It’s a raster graphics format that supports palettes of 24-bit or 32-bit colours. It also supports lossless compression meaning that it can reduce the size of the PNG image but it does not permanently lose its data and still keeps the image’s quality. So it would be mostly used to create sprites for a game.

3.    JPEG: Joint Photographic Experts Group or JPEG was created in 1991 by the Joint Photographic Experts Group. It is a format file designed for photos digitally uploaded on the computer. It is one of the most commonly used format file. Its colour depth goes to 24 bit meaning it contains about 16 million different colours. It is web-friendly but it is not good for lettering or simple line drawing. It’s a lossy compression format mean that when an image compress into a digital format it loses a bit of data and get it back.

4.    BMP: Stand for Bitmap picture. BMP are very large files, there colour depth goes up to 32 bit (16 million colours) and can be used on many operating systems. Since BMP are large files they can take up a lot of space on your computer and when you magnify the image, it loses its clarity and looks more block because of the pixels.

5.    TIFF: In 1992 the Tagged Image File Format or TIFF for short was created. It support for all platforms (MAC, PC etc.). It is used as a leading commercial and professional image standard. They come in large files with colour depth of 48 bit (16 million colours). They are often use in print documents. Electrical equipment such as scanners and digital cameras save images as TIFF files. Tiff files can be opened with Photoshop or with Windows Picture and fax Viewer.

 

 

As I mentioned before, the only flaw that when you enlarge a raster image, the image would lose its quality and it would look blurry and pixelated. Here’s an example, the small picture is the actually image size 64x64 and when I enlarge the image has now become blurry and pixelated so it can’t be used for any large prints.

 

 

 



Raster and Vector Images

There different digital image formats on the computer with different sizes and different purposes.

There is the raster image which consists of BMP, GIF, JPEG and TIFF files and there is the vector image which also consists of PDF, FLA and AI files.

The difference between raster and vector is that raster images have pixels which can capture pictures with continuous variety of colour tones and can be edited in Photoshop. But if I were to enlarge a raster image too much, the image would lose its quality and become blurry and I would start see the pixels.

Vector images contain paths which are coloured lines, texts and shapes and are not contained in pixels so that the image can increased or reduced without losing quality. When I create a vector image on Adobe Illustrator it creates a mathematical path based on the command of the user also when I resize the vector image to big or small it would not lose its quality but the vector image can’t have great detail with multiple colours only one colour for each shape so it can’t be used for photo editing software.

For an example I copied this image from http://vector-conversions.com/images/raster_vs_vector.jpg to show the different of raster and vector. The versus image in the raster corner has been enlarged but it starts to loses the quality and starts to become blurry and you can see the pixels, while in the vector corner the versus image has been enlarged but it keeps the good quality of the image with no blurriness or any pixels showing.

So if I were to make a logo big or small I would use the vector images, but if I want to capture a digital image with great details in colours and can edit them on Photoshop then I would use raster images.