Task 1 – What is Digital Graphics Technology?

Understand theory and applications of digital graphics technology

Applications of interactive media graphics
Interactive media is the integration of media into a digital computer environment, this is includes text, moving images, sound and any digital device that is connected to a network.

Where to Find Interactive Media?
Web Browser Navigation is one place to find interactive media; this consists of rollover buttons, navigation bars and menus. Rollover buttons are a set graphics in which change their features when a mouse is moved over the button; it has more than one state. Navigation bars and menus are found on nearly every single website, navigation bars consist of navigation buttons such as home, images etc. Navigation menus are drop down menus with subheadings; these can be created using programmes such as Photoshop (used to create the graphics) or Dreamweaver (used to create the interactivity).
Web banners are also interactive media graphics, they are used in advertisements on websites to promote different products, and it helps to identify a company on a webpage. Web banners are usually found at the top of web pages, so it is one of the first things people see. Sites like YouTube are paid to use web banners and Facebook is the biggest site to do this, they make money from advertising and usually show about 2 web banners.
An interactive logo helps to promote and advertise a company, but it can also be clicked which then moves you to a different page within the website(usually it takes you back to the home page, no matter what page you’re on) this is referred to as a hyperlink. Google, YouTube and Facebook all use interactive logos.
Screen icons can be displayed on an interactive media device, such as an iPhone or an android phone, they usually represent a company or brand. However they are different to company logos as the logos are usually bigger and are only for visual use, whereas a screen icon is there to promote a company and can also be clicked and can move to a page that the company has produced.
Game texture graphics are generated for use on gaming consoles, such as the Xbox or PS3, they are used in every game and can fit to any surface no matter what the shape or size of it is. The graphics are always made to the power of 2; all shapes within games start off as mesh and are then wrapped in game texture.

Pixels
A pixel (picture element) is a physical point of a raster image; it is the smallest controllable element of a picture, displayed on the screen. The resolution of an image is determined by the number of pixels per mm, the intensity of each pixel is variable, meaning it can be changed at any time.

Raster and Vector Images

Raster (Bitmap) Image

A raster image or a bitmap image is made up of square pixels. As you can see, the image looks smooth when zoomed out, but when it’s zoomed in, the image becomes distorted and you can see the square pixels that make up the image.

Vector Image

A vector image is the use of geometric primitives (the simplest graphics) such as points, lines, and curves etc, which are all based on mathematical expressions to represent computer graphics. As you can see, unlike raster images, when you zoom in to an image that uses vectors the image stays smooth and doesn’t become distorted.

File Extensions
A file extension (filename extension) is the suffix at the end of a file; this indicates what type of file it is. You can tell that a file is a bitmap image because it has “.bmp” at the end of the file name. There most common file extensions that are easy to remember are: “.jpg” which means the file is a JPEG image, “.txt” which means the file is a plain text file, “.mp3” which means the file is an MP3 audio file and “.wmv” which means the file is windows media video file. There are many raster image file extensions, for example “.gif” this stands for a graphical interchangeable format file, and there are also quite a few vector image file extensions, such as “.ai” which is an adobe illustrator file.

Vector Formats
AI: Adobe Illustrator is the leading vector graphics editor; it is developed and marketed by Adobe Systems.
CGM: Computer Graphics Metalife is a file format for 2D vector graphics and raster graphics.
CDR: CorelDraw is a vector graphics editing tool, it is mainly used for drawing purposes.
SVG: Scalable Vector Graphics is a family of specifications of an XML based file and is used for 2D vector graphics that are both static and dynamic.
DXF: Drawing Exchange Format is used for enabling data interoperability between AutoCAD and other graphical programs.
WMF: Windows Metalife is a vector graphics format developed on the windows systems; it stores a list of functions that have to be issued to the windows Graphics device.

Raster (Bitmap) Formats
JPEG: Join Photogenic Experts Group is one of the most commonly used formats for raster graphics.
PSD: Photoshop Documents stores an image with support for most imaging options available in PhotoShop. It restricts content to provide streamlines, predictable functionality.
GIF: Graphics Interchange Format is a bit-mapped file format which is used frequently on the internet. It supports 256 varying colours and various resolutions.
PNG: Portable Network Graphics is a raster graphics file format, it supports lossless data compression.
BMP: Bitmap image file is a raster graphics image file format used to store bitmap digital images.

Data Compression
Date compression involves converting information using few bits than the original data. It can either be lossy or lossless. Lossy compression reduces the size of the original file but results in lost data and quality from the original file; this can usually be found on image files but also on audio files. In an image file the lossyness can be seen by the image become pixelated and in audio files the lossyness can be heard by the audio sounding watery and losing its range of the audio. Lossless compression reduces the file size also, but instead of losing quality or some data of the file, the file’s quality stays the same as it originally was, it rewrites the data of the original file but makes it more efficient.

Image Capture
There are many ways in which we can capture images, such as, scanners, digital cameras and graphic tablets. A scanner does exactly what it says on the tin so to speak. It is a device that scans images, writing or an object and it then transforms them into a digital image, the quality of the image is determined on how good the scanner is. A digital camera is a camera that is able to take photos and videos digitally; they do this by using electronic image sensors, digital cameras vary in sizes and their abilities. A graphics tablet when connected to the computer enables you to hand draw something and it will appear on the computer monitor, this is different to digital cameras and scanners because it’s you doing most of the work instead of the scanner or camera doing most of the work. The image file size measures the size of the image; it is usually measure in bytes. The file is also made up of pixels or vector data, the greater the image resolution, the larger the file size. There are 3 most common image file formats for raster images that are used for printing, scanning and the internet. They are “.jpg” which stands for a JPEG image and “.gif” which stands for graphical interchangeable format file and “.tiff” which stands for tagged image file format, although this format can’t be used for internet use.

Optimising
The use of optimising is to make the most out of a file and to make something as efficient as possible. It is quite difficult to optimise an image because you have to get the balance right between the file-size and the picture quality. To get the best image possible, you need to think about what the best image output is, if you have want to watch something in HD then the best image output is 1080p. To optimise an image, there are 3 main areas where you can reduce the bytes of your graphics: the bit depth, the resolution and the dimension. The bit depth of an image is the number of bits used to make the colour of a pixel within a bitmap image. The image resolution determines the number of pixels that an image can contain, the more pixels an image has the better the quality of the image will be. The image dimensions are the height and width of an image; usually they are measured by pixels.