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.
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.
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:
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:
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.
Softwares used to create motion graphics
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.
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
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.
No comments:
Post a Comment