What is Digital Graphics Technology?

Introduction:

In the interactive media industry digital graphics are widely used in producing thing such as websites and advertising banners. In this e-zine I will use a company called Vision Design UK as an example for how digital graphics is used in the industry. Vision Design UK is a small graphics company based in Somerset and has over 20 years’ experience producing digital graphics for websites, TV & film and Printing and photography. http://www.vduk.co.uk/index.html

I will explain in depth some of the hardware and software which is normally used by digital graphics designers as well as explain in detail the reasons why a graphic would be saved in a particular format.

Hardware:

Vision Design UK would use various pieces of hardware to utilize their task for example they would use a standard mouse to navigate a digital graphics application to enable them to produce an image. The mouse can be used to crop images or move them around the computer screen. Visual Design UK would unlikely use it to actually draw a design because it’s not very stable and simply won’t be as good quality as if they used a graphics tablet. When quickly navigating the system looking for graphical templates the mouse should be used.

The graphics tablet is used to draw very detailed images onto a computer screen, enabling graphics designers a much easier drawing experience than a device such as mouse. It’s very similar to using a pencil to draw a picture although without the loss of resources such as lead and paper.

Here’s an example:

  (WWW.MODSHOP.COM)

Visual design UK would use a graphics tablet to enable them to make their graphics look more professional which can be an important factor when trying to sell a product.

A Digital Camera would be used to take real time images a store them on an internal storage device which can enable the user to copy, delete and edit images as the user chooses. Digital camera is better than the traditionally used cameras because they can offer greater resolution images and greater zoom resulting in a better quality image.

Here is a megapixel chart which tells you the maximum resolution available based on the megapixels you camera may offer. The chart also displays the maximum print size available for images of a particular resolution. For example a photo which has been taken on a 10 megapixel camera would need to be printed on paper 13 inches by 9 inches to be at its highest quality.  

If the image was printed on larger paper @ 300ppi then image will begin to get distorted.

 Digital cameras can utilize functions such as changing from various modes such as Night Vision, or Thermal and grayscale resulting in an all different theme to the digital graphics which are captured. Visual Design UK would use a digital camera to capture images relevant to them. For example if they wanted to create a banner promoting fish food they would take a picture with the digital camera and then may wish to edit it by importing it onto Photoshop then maybe increasing contrast or saturation to exaggerate the colour. This would more than likely increase the likelihood of someone buying that product.

A scanner is used to upload real world images onto the computer system in a computerized format which then enables it to be altered by the user or it can be used to simply copy the image so that it could then be cloned several times much like a photocopier. Visual Design UK might utilize the use of a scanner by again uploading and editing images for example in the following image: 

The original copy shown on the left would have been scanned by a scanner and then uploaded and then edited with software such as Photoshop to make it then red.

A flash card is simply a set of cards bearing information; it can be easily deleted and reprogrammed. The flash card is useful device for transferring digital data. Although not as fast to read as it would be on a hard drive in the PC. Flash cards would enable quite fast playback of Digital media and support a wide range of file formats. Visual design UK would use flash cards to navigate different types of digital graphics around the work place.

Image of a set of flash cards from Google Images:

USB Storage Devices are very useful devices because they enable the transfer of nearly all types of permitted files as long as it’s within the amount of storage memory although some USB memory sticks carry over 16GB of memory which plenty if your only thinking of storing Image files. USB storage devices are also very useful because they can be connected to all systems that have a USB port. For example devices like Phones, Cameras or games consoles.

Visual Design UK would utilize USB storage devices because it enables them like the flash cards to transport and transfer graphical files between computers. The high storage capacity makes it a perfect piece of hardware for a digital graphics company.

How Digital Graphics are used in Hardware

Hardware	Description	Use
CD ROM	The cd rom is used to store data on a Portable disk and can be transported easily and distribute software.	The Cd Rom can transport Graphical Images and Videos With easy playback. Also used for achieving images.
Hard Drive	The hard drive is an internal storage device within the computer able to store a great quantity of data.	The hard drive can be used to store images straight to the CPU it also enables quick playback of videos.
Flash Cards	Flash cars are a set of cards bearing information; it can be easily deleted and reprogramed.	The flash card is useful device for transferring digital data. Doesn’t transfer as fast as a hard drive
USB Storage Devices	Usb storage devices are widely used to transfer data from a CPU to other devices.	Usb storage devices can be used to transfer graphical data from a Digital camera or a video game consol.
Graphical Tablet	The graphical tablet is an input device which enables the user to hand draw an image. Connected by USB.	The graphical is a very useful device because it enables an artist to hand draw an image with great detail.
Mouse	The mouse is an original input device that enables the user to easily navigate the Computer.	The mouse can be used to draw on graphical software such as paint but no way as detailed as the graphics tablet.
Digital Camera	The digital camera is portable device able to take pictures and store them on an internal memory stick.	The Digital camera is very easy device to transfer images from and to the CPU.

Scanner	The scanner is a device that can scan flat items and save the image on the CPU.	The scanner can be related to graphics for example the user can scan a photo and then the user can enhance it on another application.
Printer	The printer is peripheral device that can produce images by printing a digital image onto a sheet of paper.	The printer is linked to graphics because it prints graphical images onto paper with high quality, depending on the printer and ink quality.
Computer Monitor	The computer monitor is a peripheral device used to display the information that is on the computer, modern monitors are LCD.	The monitor enables the user to see the digital graphics , created by the CPU
Mobile Phone	The mobile phone is a device developed from the basic telephone enabling the user to perform calls while being mobile it uses Radio waves.	The mobile phone can display digital graphics but not with high quality resolution as a monitor could display.
PDA	The Personal Digital Assistant is basically a handheld computer able to display various colour sceams and audio capabilities also able to connect to the internet.	The PDA can playback various digital media such as videos and photo galleries, it can also synchronise information and media to a computer.
Plotter	The plotter is a device that prints   as the user moves a pen across the surface of some paper.	The plotter  can only draw line art and so is restricted from creating faster graphics

RAM	The integrated circuits of random access memory allow data to be accessed in any order.	The RAM is a type of memory which enables the user to perform tasks a lot faster, this can be linked to graphics because higher Ram would be required to produce higher quality  graphics
Cache	The cache is collection of data for temporary storage the cache has proven to be a very effective in many areas of computing.	The cache memory is faster memory able to complete tasks a lot faster than other internal memory on the CPU.
Processors	The processor is what manages to the task on the CPU	A dual core processor can enable the user to draw various different images at once or perform more than one task without a risk of slow down.

Graphics Card

A peripheral device that attaches to the PCI or AGP slot in your computer.

Enables the computer to display higher quality images, some graphics can display more colour schemes.

What is a Pixel?

All digital images are made up of lots of pixels, in most cases the more pixels which can be found in a digital image the more detailed they image will be. For example if someone was to say they had a 1080p background on their PC that basically means that their wallpaper has the dimensions of 1920 pixels by 1280 Pixels.

Here is an example:  

The image above is made up of many different coloured squares, these squares can represent pixels so in a 1080p image the width of the image will be made up of 1920 pixels and each pixels will have its own colour.

Currently 1080p is the highest quality visual display available on the market to consumers although future technologies such as 4K offer a visual experience double that of 1080p which enables even greater detail and larger screen sizes.

Vectors & Bitmaps

There are two types of digital graphics which are used on a computer and every digital graphic can be divided into one of the two categories. The names for these two categories are bitmap and vector and they both have their unique characteristics as well as advantages and disadvantages.

Bitmaps are defined by pixels which are explained previously, bitmaps can easily be identified as they are made up small squares as shown below, however on high resolution images such as 1080p wallpaper you would need to zoom in quite a lot to actually be able to see any pixilation. One of the key advantages of bitmaps over vectors is that they have a much smaller file size, this factor can be quite important when creating rich media products such as interactive websites.

  Vectors are slightly different from bitmaps as they don’t use the pixel grid method bitmaps do, instead they use control points as shown below to define where objects in the image are located.

This method enables vector images to be resized continuously without the risk of any loss in quality. This characteristic makes it a perfect format when designing graphics for things such as banners as you can change to size of the graphic to fit on either the side of skyscraper or the side of biscuit tin.

Vectors can also be very easily edited in programs such as Adobe Illustrator as parts of an image are normally separated into shapes which you can easily manipulate or recolor.

Vector can easily be identified as they normally have clearly defined shapes such as in the wallpaper below.

EPS (Vector Format)

  EPS stands for Encapsulated PostScript and is graphics format which is used by software such as Illustrator to exchange graphics or layouts for designs such as Nets. EPS format is also very commonly used because it is able to be opened on none-adobe software which enables it to be exchanged between computers without the fear of it not being compatible with 3^rd party software for example a graphic saved in EPS format would be able to be opened with software such as Microsoft Word.  In the graphics industry the design would often be located somewhere different so common practice would for the designer to create the net and graphics and then send it saved in EPS format to the manufacturer who would have the correct machinery to produce the product accurately.

Compression

Compression is a common term used in interactive media as compression can be implemented to various things from sound to images. Compression is basically the process of making the file smaller on a particular object. Compression can be done using software such as Photoshop and involves modifying some the settings of an image for example some the things you could do to an image to reduce its file size include resizing its dimensions to a smaller size or reducing the amount of colours in the image.

Uncompressed (1.37MB)

Compressed (40.9KB)

In the compression above I simply halved the screen dimensions from 800 x 600 to 400 x 300 and then halved the resolution from 72 to 36. This process dramatically reduced the file size of the image.

That was a manual compression I undertook on Photoshop but there are programs which enable graphics to undergo a Lossless compression technique which basically means that data from the original image is reconstructed into a smaller sized image, which hasn’t had its image quality hindered.

Lossy is a similar technique although priorities the compression rate over the quality of the image so expect smaller file sizes at the cost of image quality.

Optimization

The optimization process is a very important one when preparing digital graphics for example if the user is producing a high resolution image for a website they must ensure that the file size is small enough not hinder the loading time of the website. In most rich media websites such as movie sites they normally implement a preloader which is basically a loading screen for you website which ensures that all of the websites assets are loaded before the website is displayed.  In the movie website I created I optimized my website by compressing various elements of the website for example the sound effects, music and graphics.

One of the largest files on my website was the background music so I compressed the music to 25% of its original size which reduced the overall file size of my website substantially.

All of the backgrounds in my website were videos meaning that they can be imported from an external directory this technique doesn’t increase the file size of your project as the media content is streamed from an external source, this technique can be applied to other graphical assets to optimize your website.