Applications Of Interactive Media Graphics

Interactive media normally refers to products and services on digital computer-based systems which respond to the user's actions by presenting content such as text, graphics, animation, video, web authoring, audio, games etc.... 

Interactive Media are used in a number of places these range from...

• Rollover Buttons
• Navigation Bars
• Web Banners
• Logo's and Icon's
• DVD Menu's

Rollover Buttons

A rollover refers to a button created by a web developer or web designer, found within a web page, used to provide interactivity between the user and the page itself.

The term rollover originates from the visual process of "rolling the mouse cursor over the button" causing the button to react, and sometimes resulting in a change in the web page itself. 

To create a rollover button, you would need at least two image  a primary image for the normal state and a secondary image for the changed state.The button will also have a link placed on it to take you to another page or a location of importance on the present page. 

 An example of a rollover button on a website

Navigation Bars

Navigation Bars are there to enable the website users to navigate through the web pages of sites. Navigation bars provide an easy and visually interesting way for visitors to your site to navigate between the site's main sections. A navigation bar often extends along the top or side of a Web page and includes text, images, or animations, displayed as buttons that link to other sections or pages in the site. A navigation bar is a collection of navigation buttons such as home, images or videos. A navigation menu is a drop down menu with subheadings. Another thing on the web that uses interactive media graphics.

 

http://skysports.com

Web Banners

A web banner, can referee to a banner ad, but is most often a rectangular advertisement displayed on a webpage. Although banners are commonly considered a nuisance, similar to television commercials, the revenue from hosting web banners provides the funding for most non-sales websites.

The website displaying the banner typically is paid by the advertising company. The banner normally runs of a pay per click process. Even if a user does not click on the advertising link, he or she becomes exposed to its marketing. A web banner might be static or animated like the one above, it might even be interactive some web banners might utilize an audio feature. This can confuse users, especially if the banners is displayed near the bottom of the webpage, however all these are effective entertainment which creates impact towards that advert.

Logo's

The dictionary meaning of a logo is a symbol, sign or emblem. Human beings have used such symbols throughout time to convey a message. Logo's tend to be graphical in nature, designed for easy recognition of an organization. It is a tool to build an identity for the organization, as part of its trademark or brand and to generate favorable thoughts and feelings about the organization.

http://www.treefrog.ca/what-is-a-logo

Icon's
An icon is a graphic image, a small picture or object the represents a file, program, web page. They have the purpose of displaying something much bigger in a single presentable form. Many of these icons have hyperlinks on them. These icons can be clicked on which take the user to another page or for example an icon of a envelope could take the user to the contact page. 

http://www.axialis.com

DVD Menu's
Interactive graphics are also used very commonly in DVD menu's. They are used to entertain the audience by them being able to interact with something on the screen.
You can see in this example that graphics have been used to make the scene selection menu a lot more interesting and enjoyable for the user. So when the user hovers over one of the images, it will begin to play a small clip of that scene. This is the interactive part of the graphic. This is much better than just a still image.

Examples from - http://www.dvdactive.com 

Animated GIF
An animated GIF (Graphics Interchange Format) file is a graphic image on a webpage that moves - for example, a twirling icon or a banner with a hand that waves or letters that magically get larger. An animated GIF can loop endlessly or it can present one or a few sequences and then stop the animation. Animated GIFs are frequently used in web banners.
Java, Flash and other tools can be used to achieve the same effects as an animated GIF. However, animated GIFs are generally easier to create than comparable images with Java or Flash and are usually smaller in size and therefore faster to display. 

http://searchsoa.techtarget.com/definition/animated-GIF

Image Resolution
Image resolution or "dpi" (dot per inch), also called "ppi" (pixels per inch) determines the number of pixels that a digital image can contain and as such the depth of quality and size of the file. The more pixels an image can contain, the better the quality will be, but will also have an effect on the file size. It is important to understand how resolution affects image sizes, in print, the resolution does not affect the image size, but on screen, resolution can have dramatic effects on the image.
As you can see from the simple example below, the more pixels an image contains, will alter the quality and will change the quality of detail in the image.

http://www.luminous-landscape.com

File Extensions
File extensions or file name suffix is usually three, four or more characters at the end of computer files. File extensions are a way of letting the user and their computer know what type of program to use. Also a file extension allows your computer to run the correct program automatically when you double-click on the file name (which saves a lot of time).

Common file extensions are:

• .BMP - BMP is the file format for uncompressed raster images comprised of a rectangular grid of pixels, containing a file header and bitmap pixels, each with a different colour.
• .PNG - This is an image file stored in the Portable Network Graphic (PNG) format which contains a bitmap of indexed colours and uses lossless compression, similar to a GIF file but without copyright limitations; commonly used to store graphics for web images.
• .TIFF - TIFF is a graphics container that can store both raster and vector images it may contain high-quality graphics that support colour depths from 1 to 25-bit. It supports both lossy and lossless compression and also supports multiple layers and pages.
• .GIF - This is an image file that may contain up to 256 indexed colours, which is a colour palette that may be a predefined set of colours or may be adapted to the colours in the image. It is a lossless format. GIFs are a common format for web graphics, especially small images and images that contain text, such as navigation buttons.
• .JPG - This is a compressed image format standardized by the Joint Photographic Experts Group (JPEG) this is commonly used for storing digital photos since the format supports up to 24-bit colour, therefore most digital cameras save images as JPG files by default. JPEG is also a common format for publishing web graphics since the JPEG compression significantly reduces the file size of images. 

File Compression
Compression means to reduce the size of a file for example a document, image, spreadsheet etc. It is a good idea to compress large files because they can take up a lot of storage space on your hard drive.

Lossy Compression:

A compression technique that does not decompress data back to 100% of the original. Lossy methods provide high degrees of compression and result in smaller compressed files, but there is a certain amount of visual loss when restored.

Audio, video and some imaging applications can tolerate loss and in many cases, it may not be noticeable to the human ear or eye. In other cases, it may be noticeable, but not that critical to the application. The more tolerance for loss, the smaller the file can be compressed and the faster the file can be transmitted over a network.
Examples of lossy file formats are MP3, AAC, MPEG and JPEG.  
http://www.pcmag.com

Lossless Compression: 
Lossless compression, every single bit of data that was originally in the file remains after the file is uncompressed. All of the information is completely restored. This is generally the technique of choice for text files, where losing words could pose a problem so this needs to be able to be regained.

Bitmap vs Vectors

Advantages of bitmaps

• In paint programs, you see what you are getting, usually in real time when wielding a “paintbrush”
• When you use a scanner, the output will normally be a bitmap
• Much easier to create the appearance of “natural” media, such as areas of watercolours bleeding into each other
• More universally available interchange file formats; most bitmaps can be read by most bitmap-based software and certain file formats such as JPEG and PNG can be read and written by every paint program. This is not, unfortunately, the case with vector file formats where many programs can only deal with their own file formats and a very limited choice of others such as EPS may be available.

Advantages of vectors

• Pretty much resolution-independent. It is possible to rescale up a whole chunk of animation without the blockiness you would get from doing this with bitmaps
• For painting, you can specify that the bounding lines are automatically closed even when not visible, so avoiding problems of paint flooding out
• Shapes easily edited
• Smaller output files for Internet use
• Shapes can be made to animate automatically from one to another, providing they have the same number of control points 

 http://www.animationpost.co.uk


Softwares used to create motion graphics

Photoshop – Is used Mainly for editing photos and creating animated GIFs, it is very popular and can also link together with exports from after effects , illustrator or premiere pro to make DVD quality effects such as backgrounds and textures. 

 

Adobe Aftereffects – Is used for creating effects and motion graphic's. Can animate, composite and create multiple different effects on images and video.

Adobe Flash –  Multimedia software, used for animations, creations of images and banners, vector graphics and used to add video/audio graphics and interactive media to websites.