Applications Of Interactive Media Graphics:
Roll Over 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. You can see an example on
the right where there is the first image which is the normal state. When
someone goes over the button the visual nature of it changes this would be the
second image. 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. Rollover text is
essentially the same thing as a rollover buttons however it is the use of text
more than shapes.
http://help.adobe.com/en_US/photoshop/cs/using/WS18F9E180-3241-4891-ACC8-82C9DFB254F5a.htmlNavigation Bars:
The purpose of Navigation Bar and give direction to the
audience. It enables 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.
There are a few kinds
of navigation bars, one i want to talk about is text navigation Bar. Some
people surf with graphics turned off, or use browsers with no graphics
capability. It is customary to have text navigation bars in addition to
graphical bars.
This kind of navigation bar is with rollover and effects very similar to the graphics navigation bar except there is an additional feature to this. When the user moves the mouse over to an image that is linked, the state of that image will change from an off state to an on state. This state change will execute an image swapping process. When the user moves the mouse off the image, the reverse will happen and the image will be swapped back to the original one.
This kind of navigation bar is with rollover and effects very similar to the graphics navigation bar except there is an additional feature to this. When the user moves the mouse over to an image that is linked, the state of that image will change from an off state to an on state. This state change will execute an image swapping process. When the user moves the mouse off the image, the reverse will happen and the image will be swapped back to the original one.
Overall a navigation bar provides the following:
· An easy reference for the contents of your Web site.
· A way for visitors to navigate through multiple levels in
your site structure.
· A more convenient, customized alternative to a browser's
Back and Forward buttons. http://www.cs.umd.edu/~mount/Indep/CHassan/navbar.htm
Navigation Menus:
A navigation menu is a region of a screen or application interface where drop down menus are displayed from the main navigation bar. As you can see from the navigation bar this drops down a more text orientated menu which is hyper linked to different elements of the website. This helps the audience locate different area's of the website faster and makes no complexity or misunderstanding.
http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-exam
http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-exam
Animated Graphics:
Animated GIF:
An animated GIF (Graphics Interchange Format) file is a graphic image on a Web page that moves. An example of this is a twirling icon or a banner with a hand that waves or letters that magically get larger. In particular, an animated GIF is a file in the Graphics Interchange Format specified as GIF that contains within the single file a set of images that are presented in a specified order. An animated GIF can loop endlessly or it can present one or a few sequences and then stop the animation. You can see above an simple example of an animated GIF this is one of thousands of animated GIF's. Animated GIF's create a much more exciting experience on a webpage, animated GIF's are also used alot in web ad's making developers able to display there ads in a more interesting way. http://www.wisegeek.com/what-is-an-animated-gif.htm#didyouknowout
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.
As you can see on the left banner ad it typically displays a product or service, trying to get the Internet user to purchase it, and, if clicked, loads the appropriate sales website.
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 like the banner on the right or animated like the one above, it might even be interactive. It might change the Internet user's cursor into an image related to the content of the advertisement whenever the cursor is hovered or clicked over the banner. This serves to simulate an entertaining animated reaction or even a simplistic point and click game while quickly redirecting the user away to the main sales website. Some web banners might utilize an audio feature. This can confuse users, especially if the banner is displayed near the bottom of the webpage, beyond the user's immediate view however all these are effective entertainment which creates impact towards that advert.http://www.howstuffworks.com/banner-ad.htm
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.
As you can see on the left banner ad it typically displays a product or service, trying to get the Internet user to purchase it, and, if clicked, loads the appropriate sales website. 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 like the banner on the right or animated like the one above, it might even be interactive. It might change the Internet user's cursor into an image related to the content of the advertisement whenever the cursor is hovered or clicked over the banner. This serves to simulate an entertaining animated reaction or even a simplistic point and click game while quickly redirecting the user away to the main sales website. Some web banners might utilize an audio feature. This can confuse users, especially if the banner is displayed near the bottom of the webpage, beyond the user's immediate view however all these are effective entertainment which creates impact towards that advert.http://www.howstuffworks.com/banner-ad.htm
logo graphics:
The dictionary meaning of a logo is a symbol, sign, or emblem. Human beings have used such symbols throughout time to convey a message. Logos 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
Screen
icons:
Screen icons are icons which are presented all over websites. There are symbols which represent different things , you can see examples of these on the right. 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 house could take a user to the home page.http://www.designyourway.net/blog/resources/35-of-the-best-minimalist-icons-for-web-design-projects/
Background:
Web designers compete to impress visitors with distinctive and appealing visual elements. Background images are one of those visual elements that when designed properly, can create an amazing atmosphere and convey the style the designer has chosen. You can see some of the examples to the right:The examples on the right show a very interesting and creative backgrounds. When you open a page you want to see something that is going to catch your eyes and make you want to read the page. If its really boring then the user is most likely going to think that this isn't a good website and go somewhere else.
Texture
graphics:
Textures and patterns are used more often than people think. The reason why we don’t see them is because they usually remain in the background, supporting the overall design, replacing a standard background color and creating a more inviting atmosphere. But they almost never stand out. Used primarily for background images, they need to fit to the overall design making the content easier to perceive.
You can see on the right an example of a website with very strong texture/patterned structure. You can see that the texture of the woodland leaves and other outdoor equipment matches the context of the website which helps it all fit together to one idea. The pattern and texture of the background and structure of the website shows how effective and beneficial they can be. http://www.smashingmagazine.com/2008/07/09/textures-and-patterns-design-showcase/
Pixel:
| A digital image is a computer file that contains graphical information instead of text or a program. Pixels are the basic building blocks of all digital images. Pixels are small adjoining squares in a matrix across the length and width of your digital image. They are so small that you don’t see the actual pixels when the image is on your computer monitor. Pixels are monochromatic. Each pixel is a single solid color that is blended from some combination of the 3 primary colors of Red, Green, and Blue. So, every pixel has a RED component, a GREEN component and and BLUE component. The physical dimensions of a digital image, are measured in pixels and commonly called pixel or image resolution. Pixels are scalable to different physical sizes on your computer monitor or on a photo print. However, all of the pixels in any particular digital image are the same size. Pixels as represented in a printed photo become round slightly overlapping dots. |
 | This Picture is 260 pixels in width and 175 pixels in height. It has an image resolution of 175 by 260 pixels or 45 kilopixels since the length times the width equals 45,500 pixels. There are TWO resolutions for any digital image. The first and most important is IMAGE resolution which is the actual pixel dimensions. The second is PRINT or DOCUMENT resolution, also known as OUTPUT resolution . Print/output resolution scales the existing pixel dimensions to a requested print or document size. We'll discuss print/output resolution in more detail later |
http://www.sphoto.com/homedd/
PPI stands for Pixels Per Inch and represents the number of pixels per linear inch on a photo print when a digital image's pixels are scaled onto paper. Just like pixels, these dots can vary in their size on hardcopy media (photo prints).
The term PPI is most appropriately used to scale existing digital images to a specified print size.
All digital images have a image resolution (height and width dimensions in pixels). You can also specify a print resolution (also called) output resolution for a digital image by assigning and saving a PPI number within the digital image file. After assigning a PPI number your printer or imaging program does some simple math to determine the print size that would created from the existing pixel dimensions at that assigned PPI number.
Bit depth:
Bit depth refers to the color information stored in an image. The higher the bit depth of an image, the more colors it can store. The simplest image, a 1 bit image, can only show two colors, black and white. That is because the 1 bit can only store one of two values, 0 (white) and 1 (black). An 8 bit image can store 256 possible colors, while a 24 bit image can display about 16 million colors.
Along with an image’s resolution, the bit depth determines the size of the image. As the bit depth goes up, the size of the image also goes up because more color information has to be stored for each pixel in the image.
The bit depth for each primary color is termed the bits per channel. The bits per pixel (bpp) refers to the sum of the bits in all three color channels and represents the total colors available at each pixel.
You can see on the right a colour image with a Bpp of 24 compared to the one below of 8 Bpp. The colour of the 24 Bpp is much more clear and evident than the lower one. Images with a higher Bpp will show much clever and better levels of colour compared to a worse quality image because of a lower Bpp. As described above the 24 BPP has around 16777216 colours where as the 8 Bpp has 256 colours.
http://www.cambridgeincolour.com/tutorials/bit-depth.htm
The bit depth for each primary color is termed the bits per channel. The bits per pixel (bpp) refers to the sum of the bits in all three color channels and represents the total colors available at each pixel.
You can see on the right a colour image with a Bpp of 24 compared to the one below of 8 Bpp. The colour of the 24 Bpp is much more clear and evident than the lower one. Images with a higher Bpp will show much clever and better levels of colour compared to a worse quality image because of a lower Bpp. As described above the 24 BPP has around 16777216 colours where as the 8 Bpp has 256 colours.
http://www.cambridgeincolour.com/tutorials/bit-depth.htm
Colour:
Monochrome, 256, high colour and true colour:
| Bits Per Pixel | Number of Colors Available | Common Name(s) |
|---|---|---|
| 1 | 2 | Monochrome |
| 2 | 4 | CGA |
| 4 | 16 | EGA |
| 8 | 256 | VGA |
| 16 | 65536 | XGA, High Color |
| 24 | 16777216 | SVGA, True Color |
| 32 | 16777216 + Transparency | |
| 48 | 281 Trillion |
As you can see from the table above. monochrome colour is a 1 bits per pixel format which consistent of only two colours. Monochrome colour is the simplest of image, which can only show the two colors of black and white. That is because the 1 bit can only store one of two values, 0 (white) and 1 (black). This image on the right is an example of the level of colour a monochrome image has.
256 colour is an image which has a lot more colours than the monochrome however isnt a great amount of clear colour that a high quality image would have. The common name for this type of colour channel is VGA and stands for Video Graphics Array. You can see to the left an example of 256 compared to full colour image on the right.
You can see that the colours in the left hand image of 256 isnt as clear or as sharp as the full colour image. The 256 colour image is obviously much better than the monochrome image however the full colour image is much clever. The high colour image has 65536 colours which it can display in an image. This is the next step up giving the image a lot more sharpness and cleverness.A True colour image has 16777216 colours. This is a clear image which can be passed as a very quality image. The true colour image will be close to the full colour image however a full colour image as you can see from the table normally has around 281 trillion colours.
Colour
space greyscale: RGB (red,
green, blue):
The RGB color model is a color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.
The main purpose of the RGB color model is for the sensing, representation, and display of images in electronic systems, such as televisions and computers, though it has also been used in conventional photography.
RGB is a device-dependent color model: different devices detect or reproduce a given RGB value differently, since the color elements and their response to the individual R, G, and B levels vary from manufacturer to manufacturer, or even in the same device over time. Thus an RGB value does not define the same color across devices without some kind of color management.
To form a color with RGB, three colored light beams (one red, one green, and one blue) must be superimposed (for example by emission from a black screen, or by reflection from a white screen). Each of the three beams is called a component of that color, and each of them can have an arbitrary intensity, from fully off to fully on, in the mixture.
An example of the breakdown of RGB in an image is shown on the right. You can see how the red, blue and green is broken down to get the final image.
YUV (luminance and chrominance):
The YUV color space refers to the complete range of colors that can be displayed and recorded on digital video. The YUV color encoding system is used for analog television, such as NTSC and PAL. YUV is a way of breaking the brightness and colors in the image down into numbers, and it’s a little different from RGB, which i discussed above. Just as a refresher, most cameras take the light coming into the lens, and convert that into 3 sets of numbers, one for Red, one for Green, and one for Blue as shown in the image from the RGB section.
You can see that YUV provides essentially a “grayscale” image from one channel, and the color information is separated out into 2 channels – one for Blue information minus the brightness, and one for Red info minus the brightness. In this image, the Blue channel is showing purple/yellow colors, and the Red channel has more red/cyan colors in this particular image.
The Luminance channel behaves similar to the numbers I described in my last article – it’s a number that starts at 0 and goes up to a maximum number. Easy Squeezy, lemon peasy.
However, the 2 color channels operate a little differently – 0 is a “midpoint” in the number, and there are positive and negative steps. If you look in the above example, you’ll see that the white snow in the shots has a grey color in both the color channels. That’s because it has a 0 value in both color channels. The barn has a negative value in the Blue channel (producing a yellowish color) and a positive value in the Red channel (producing, well, red colors.) Green colors are derived from a mix of negative values in both channels.http://blogs.adobe.com/VideoRoad/2010/06/what_is_yuv.html
HSV (hue,
saturation, value):HSV color space is widely used to generate high quality computer graphics. In simple terms, it is used to select various different colors needed for a particular picture. An HSV color wheel is used to select the desired color. A user can select the particular color needed for the picture from the color wheel. It gives the color according to human perception. HSV has three parts:
The main purpose of the RGB color model is for the sensing, representation, and display of images in electronic systems, such as televisions and computers, though it has also been used in conventional photography.
RGB is a device-dependent color model: different devices detect or reproduce a given RGB value differently, since the color elements and their response to the individual R, G, and B levels vary from manufacturer to manufacturer, or even in the same device over time. Thus an RGB value does not define the same color across devices without some kind of color management.To form a color with RGB, three colored light beams (one red, one green, and one blue) must be superimposed (for example by emission from a black screen, or by reflection from a white screen). Each of the three beams is called a component of that color, and each of them can have an arbitrary intensity, from fully off to fully on, in the mixture.
You can see that YUV provides essentially a “grayscale” image from one channel, and the color information is separated out into 2 channels – one for Blue information minus the brightness, and one for Red info minus the brightness. In this image, the Blue channel is showing purple/yellow colors, and the Red channel has more red/cyan colors in this particular image.
Hue is expressed as a number from 0 to 360 degrees representing hues of red (starts at 0), yellow (starts at 60), green (starts at 120), cyan (starts at 180), blue (starts at 240), and magenta (starts at 300).
In HSV, hue represents color. In this model, hue is an angle from 0 degrees to 360 degrees.
Saturation indicates the range of grey in the color space. It ranges from 0 to 100%. Sometimes the value is calculated from 0 to 1. When the value is ’0,’ the color is grey and when the value is ’1,’ the color is a primary color. A faded color is due to a lower saturation level, which means the color contains more grey.
Value is the brightness of the color and varies with color saturation. It ranges from 0 to 100%. When the value is ’0′ the color space will be totally black. With the increase in the value, the color space brightness up and shows various colors.
http://www.tech-faq.com/hsv.html
http://desktoppub.about.com/od/glossary/g/HSV.ht
m
Value is the brightness of the color and varies with color saturation. It ranges from 0 to 100%. When the value is ’0′ the color space will be totally black. With the increase in the value, the color space brightness up and shows various colors.
http://www.tech-faq.com/hsv.html
http://desktoppub.about.com/od/glossary/g/HSV.ht
m
Types of digital graphics used to create digital images:
Raster
images: compression (lossy, lossless):
Raster graphics are digital images created or captured for example, by scanning in a photo as a set of samples of a given space. A raster is a grid of x and y coordinates on a display space. For three-dimensional images, a z coordinate.) The raster file is sometimes referred to as a bitmap because it contains information that is directly mapped to the display grid. Bitmap-based images are comprised of pixels in a grid. A raster file is usually larger than a vector graphics image file and is usually difficult to modify without loss of information, although there are software tools that can convert a raster file into a vector file for refinement and changes. Examples of raster image file types are: BMP, TIFF, GIF, and JPEG files.You can see the effect that zooming in on an raster image has, the image on the right is a normal raster image which is then zoomed in. As you can see the image reduces in quality as the pixels are beng stretched. This is the big disadvantage of a raster image.
Lossy and lossless:Lossless compression preserves all picture information where as Lossy compression creates much smaller files. Lossless compression stores all the information exactly, without loss of quality or accuracy. The image recreated on the screen is exactly the same as the image created by the original designer. Lossless compression works particularly well for images with large, solid blocks of colour, which it condenses very effectively. This image shows that the colour in the lossless image even after compression, the colour is still very clear and sharp. http://searchcio-midmarket.techtarget.com/definition/raster-graphics
Lossy compression, on the other hand, has more advanced ways of compressing the image data, though this comes at the cost of precise reproduction. In lossy compression, the program creating the image looks for patterns of detail within the image, and compresses areas of low detail much more highly than areas of high detail. The patterns are converted into mathematical formulae describing the pattern's colours, with more complex formulae being used for more highly detailed regions. This can result in images that are significantly smaller than when encoded using other compression methods, especially with photographic images.
The top image on the right is the image saved as JPEG at 90% quality (10% compression, 15kB filesize). The image appears sharp and clear, and does not seem to have lost any quality due to the compression, even though the filesize has reduced from 75kB uncompressed to 15kB.The lower image is a worse quality image saved as JPEG at 10% quality (90% compression, 1.5kB filesize). The image is much fuzzier, with artifacts or distortion created by the extreme compression.http://computer.howstuffworks.com/file-compression3.htm
File Extensions - eg bmp, png, gif, tiff, jpg psd:
There are several formats that support raster images. I am going to describe these file formats and what software can display them:
Bmp:
BMP is the file format for uncompressed raster images comprised of a rectangular grid of pixels, containing a file header (bitmap identifier, file size, width, height, color options, and bitmap data starting point) and bitmap pixels, each with a different color. BMP files may contain different levels of color depths per pixel, depending on the number of bits per pixel specified in the file header. They may also be stored using a grayscale color scheme.
Png:
Adobe Photoshop CC
Microsoft Windows Photos
Adobe Illustrator CS6
Adobe Photoshop Elements 11
Psd:
Adobe Photoshop CC
Adobe Illustrator CS6
Adobe Photoshop Elements 11
Adobe InDesign CC
Apple QuickTime Player
Vector images and file extension:
Vector graphics are made up of paths, rather than individual pixels.
These paths can be used to represent lines and shapes within the image.
Most vector image formats can also include colors, gradients, and image
effects. Since vector graphics store image data as paths, they can be
enlarged without losing quality, which makes them a good choice for
logos and other types of drawings. It is possible to edit each object separately, for example, change the shape, colour, size and position.Even if an object in a vector graphic is quite large, it doesn't need a lot of computer memory. Therefore the file size of a vector graphic is often very small. Vector graphics are scalable, ie when you resize them, they do not lose quality.
Vector images are much more effective when enlarging an image as they don't consist of pixels. You can see in the right an example of an image which is enlarged comparing pixels to vector graphs As you can see with vector graphs because they use shapes to form images and not have to rely on pixels to form the image when you zoom in there is no distortion.
File Extensions-eg eps, ai, fla:
I am going to describe the main formats you may use with vector images.
Eps:
Adobe Photoshop Elements 11
Adobe Photoshop CC
Adobe InDesign CC
Adobe Acrobat XI
Ai:
Drawing created with Adobe Illustrator, a vector graphics editing program composed of paths connected by points, rather than bitmap image data; commonly used for logos and print media.Since Illustrator image files are saved in a vector format, they can be enlarged without losing any image quality. Some third-party programs can open AI files, but they may rasterize the image, meaning the vector data will be converted to a bitmap format.
Adobe Photoshop CC
Adobe Acrobat XI
Serif DrawPlus
Fla:
This is an editable movie or animation created with Adobe Flash which often saved as a .SWF file for use on the Web; the FLA file is the editable project file saved by the Flash development program; the SWF file is a compressed format that is viewable in most Web browsers with the Flash plugin.
This program which supports this is:
Adobe Flash Professional CS6
http://www.fileinfo.com/filetypes/vector_image
http://vectormagic.com/support/file_formats
BMP is the file format for uncompressed raster images comprised of a rectangular grid of pixels, containing a file header (bitmap identifier, file size, width, height, color options, and bitmap data starting point) and bitmap pixels, each with a different color. BMP files may contain different levels of color depths per pixel, depending on the number of bits per pixel specified in the file header. They may also be stored using a grayscale color scheme.
Png:
This is an image file stored in the Portable Network Graphic (PNG) format which contains a bitmap of indexed colors and uses lossless compression, similar to a GIF file but without copyright limitations; commonly used to store graphics for Web images.The PNG format was created in response to limitations with the GIF format, primarily to increase color support and to provide an image format without a patent license. PNG images cannot be animated like GIF images.
Gif:
This is an image file that may contain up to 256 indexed colors which is a color palette that may be a predefined set of colors or may be adapted to the colors in the image. it is a lossless format, meaning the clarity of the image is not compromised with GIF compression GIFs are common format for Web graphics, especially small images and images that contain text, such as navigation buttons. However, JPEG images are better for showing photos because they are not limited in the number of colors they can display GIF images can also be animated and saved as animated GIFs, which are often used to display basic animations on websites. They may also include transparent pixels, which allow them to blend with different color backgrounds. However, pixels in a GIF image must be either fully transparent or fully opaque, so the transparency cannot be faded like a .PNG image.
Tiff:
TIFF is a graphics container that can store both raster and vector images it may contain high-quality graphics that support color depths from 1 to 24-bit. It supports both lossy and lossless compression and also supports multiple layers and pages. TIFF files were designed to be a standard image format for saving high-quality color images on multiple computer platforms. They are also very commonly seen with the TIF extension.
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 color 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. However, the lossy compression used by JPEG may noticeably reduce the image quality if high amounts of compression are used.
The main software which supports all the formats explained above are:
Adobe Photoshop CC Microsoft Windows PhotosAdobe Illustrator CS6
Adobe Photoshop Elements 11
Psd:
This image file is created by Adobe Photoshop, a professional image-editing program which may include image layers, adjustment layers, layer masks, annotation notes, file information, keywords, and other Photoshop-specific elements.This a Photoshop document which supports RGB, CMYK, grayscale, monochrome, duotone, indexed color, Lab color, and multichannel color modes.
The main formats that PSD file can be supported on are:
Adobe Photoshop CCAdobe Illustrator CS6
Adobe Photoshop Elements 11
Adobe InDesign CC
Apple QuickTime PlayerVector images and file extension:
Vector graphics are made up of paths, rather than individual pixels.
These paths can be used to represent lines and shapes within the image.
Most vector image formats can also include colors, gradients, and image
effects. Since vector graphics store image data as paths, they can be
enlarged without losing quality, which makes them a good choice for
logos and other types of drawings. It is possible to edit each object separately, for example, change the shape, colour, size and position.Even if an object in a vector graphic is quite large, it doesn't need a lot of computer memory. Therefore the file size of a vector graphic is often very small. Vector graphics are scalable, ie when you resize them, they do not lose quality.Vector images are much more effective when enlarging an image as they don't consist of pixels. You can see in the right an example of an image which is enlarged comparing pixels to vector graphs As you can see with vector graphs because they use shapes to form images and not have to rely on pixels to form the image when you zoom in there is no distortion.
File Extensions-eg eps, ai, fla:
I am going to describe the main formats you may use with vector images.
Eps:
This is a postScript file that may contain 2D vector graphics, bitmap images, and text, it may also include an embedded preview image in bitmap format which can be placed within another PostScript document.
EPS files are supported by several different drawing programs and vector graphic editing applications. They are often used as a standard means for transferring image data between different operating systems.
Programs which support EPS are:
Adobe Illustrator CS6
Programs which support EPS are:
Adobe Illustrator CS6Adobe Photoshop Elements 11Adobe Photoshop CC
Adobe InDesign CCAdobe Acrobat XIAi:
Drawing created with Adobe Illustrator, a vector graphics editing program composed of paths connected by points, rather than bitmap image data; commonly used for logos and print media.Since Illustrator image files are saved in a vector format, they can be enlarged without losing any image quality. Some third-party programs can open AI files, but they may rasterize the image, meaning the vector data will be converted to a bitmap format.
Programs which support Ai are:
Adobe Photoshop CC
Adobe Acrobat XI
| ideaMK Ai Viewer |
Serif DrawPlus
Fla:
This is an editable movie or animation created with Adobe Flash which often saved as a .SWF file for use on the Web; the FLA file is the editable project file saved by the Flash development program; the SWF file is a compressed format that is viewable in most Web browsers with the Flash plugin.
This program which supports this is:
Adobe Flash Professional CS6http://www.fileinfo.com/filetypes/vector_image
http://vectormagic.com/support/file_formats
http://www.bbc.co.uk/schools/gcsebitesize/dida/graphics/bitmapvectorrev4.shtml
Image capture:
Scanners:
An imaging system or an image scanner or a graphical scanner converts text, drawings and photographs into digital form that can be stored in the computer system and then manipulated using different software programmes. The system scans each image with light and breaks the image into light and dark dots which are then converted into digital codes. In computing, an image scanner—often abbreviated to just scanner—is a device that optically scans images, printed text, handwriting, or an object, and converts it to a digital image.
Image capture:
An imaging system or an image scanner or a graphical scanner converts text, drawings and photographs into digital form that can be stored in the computer system and then manipulated using different software programmes. The system scans each image with light and breaks the image into light and dark dots which are then converted into digital codes. In computing, an image scanner—often abbreviated to just scanner—is a device that optically scans images, printed text, handwriting, or an object, and converts it to a digital image.
http://whatis.techtarget.com/definition/scanner
Digital cameras:
A digital camera is an optical device that is used in the field of digital photography to take still photographs as well as video. It is able to display images on the screen immediately after they have been taken. Once a picture has been taken, it can be downloaded to a computer system, and then manipulated with a graphics program and printed. Unlike film photographs, which have an almost infinite resolution, digital photos are limited by the amount of memory in the camera, the optical resolution of the digitizing mechanism, and, finally, by the resolution of the final output device.
The file format that Digital cameras often offer are around three JPG quality settings plus TIFF. JPG always means at least some loss of quality, TIFF means better quality. However, the file size is huge compared to even the best JPG setting, and the advantages may not be noticeable. http://www.computerhope.com/jargon/d/digicame.htm
Image capture Vs Digital cameras:
This is a EPSON Perfection V600 ~Photo Scanner with an output resolution of 6400 x 9600 dpi. This is a very good scanner with a 48 bit color scheme. This means that the colour protentional of this scanner is 281 Trillion colours.
Comparing this to a top digital camera such as the NIKON Coolpix S9400 Advanced Compact Digital Camera - Black which takes 18.1 Mega pixels. With a resolution of 4896 x 3672.
You can see that the resolution on the scanner is bigger than the digital camera. The scanner has 61, 4 mega pixels making it capable of a lot clearer and better pictures then the camera. The scanner uses a very high ultraviolet light to get the right lighting on the scanned document to make sure that it looks the best it can be. With the digital camera this is a lot harder to get the right lighting showing that the scanner is better for this kind of process than the digital camera.
http://www.pcworld.co.uk/gbuk/printers-ink/printers-scanners/scanners/epson-perfection-v600-photo-scanner-20797667-pdt.html#longDesc
http://www.pcworld.co.uk/gbuk/cameras-camcorders/digital-cameras/compact-digital-cameras/nikon-coolpix-s9400-advanced-compact-digital-camera-black-21307799-pdt.html#longDesc
Image output (resolution ppi):
Image resolution or "dpi" "dots per inch", also called "ppi" or "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 quality it can be but also the larger 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 size.
As you can see from the simple example on the right, the more pixels an image contains the more detail and quality it can contain. If you look at the smaller size images, you will see that when they are expanded they become very blocky or pixellated. There are a number of adopted standards in resolution which you should look to as often as possible to ensure best results. You can see that although some images may appear okay on your computer screen this is not a good guide as to how it will print. To reproduce the image in print, much higher resolution is required. Image resolution on web pages is typically 72ppi and when printed will appear quite pixelated. The same will occur if you make your images larger than they can be printed at an acceptable resolution.http://www.luminous-landscape.com/tutorials/understanding-series/und_resolution.shtml
http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f
File compression and optimization:
You can see here an printscreened image which is showing an image which has been exported in different formats, you can see that the biggest one here is the JPEG and the smallest which is GIF. I am now going to discuss each of these and how they differ.
Jpg:
Storage memory, file size:
Digital cameras:
The file format that Digital cameras often offer are around three JPG quality settings plus TIFF. JPG always means at least some loss of quality, TIFF means better quality. However, the file size is huge compared to even the best JPG setting, and the advantages may not be noticeable. http://www.computerhope.com/jargon/d/digicame.htm
Image capture Vs Digital cameras:
This is a EPSON Perfection V600 ~Photo Scanner with an output resolution of 6400 x 9600 dpi. This is a very good scanner with a 48 bit color scheme. This means that the colour protentional of this scanner is 281 Trillion colours.
Comparing this to a top digital camera such as the NIKON Coolpix S9400 Advanced Compact Digital Camera - Black which takes 18.1 Mega pixels. With a resolution of 4896 x 3672.
You can see that the resolution on the scanner is bigger than the digital camera. The scanner has 61, 4 mega pixels making it capable of a lot clearer and better pictures then the camera. The scanner uses a very high ultraviolet light to get the right lighting on the scanned document to make sure that it looks the best it can be. With the digital camera this is a lot harder to get the right lighting showing that the scanner is better for this kind of process than the digital camera.
http://www.pcworld.co.uk/gbuk/printers-ink/printers-scanners/scanners/epson-perfection-v600-photo-scanner-20797667-pdt.html#longDesc
http://www.pcworld.co.uk/gbuk/cameras-camcorders/digital-cameras/compact-digital-cameras/nikon-coolpix-s9400-advanced-compact-digital-camera-black-21307799-pdt.html#longDesc
Image output (resolution ppi):
Image resolution or "dpi" "dots per inch", also called "ppi" or "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 quality it can be but also the larger 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 size.
As you can see from the simple example on the right, the more pixels an image contains the more detail and quality it can contain. If you look at the smaller size images, you will see that when they are expanded they become very blocky or pixellated. There are a number of adopted standards in resolution which you should look to as often as possible to ensure best results. You can see that although some images may appear okay on your computer screen this is not a good guide as to how it will print. To reproduce the image in print, much higher resolution is required. Image resolution on web pages is typically 72ppi and when printed will appear quite pixelated. The same will occur if you make your images larger than they can be printed at an acceptable resolution.http://www.luminous-landscape.com/tutorials/understanding-series/und_resolution.shtmlhttp://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f
File compression and optimization:
Gif, jpg and PNG files are all three used for the web. The difference is the resulting image. Each one has its place for use on websites, and jpeg images can also be used in print files as well, although they need to be print resolution. Web images are typically 72 dpi, making them load quickly.
You can see here an printscreened image which is showing an image which has been exported in different formats, you can see that the biggest one here is the JPEG and the smallest which is GIF. I am now going to discuss each of these and how they differ.
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 color 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. However, the lossy compression used by JPEG may noticeably reduce the image quality if high amounts of compression are used.
GIF :
GIF :
Gif images are great for creating very low resolution files for a website. They support transparency, which is great. Transparency allows you to place the gif over any color background or even photos, and you won’t see a border or background in the image. All you will see is the icon. You typically use a gif for simple logos, icons, or symbols. Using a gif for photos is not recommended, because gifs are limited to 256 colors. In some cases you can use even less. The less colors that are in your image, the smaller your file size will be. Gif files also support a feature called interlacing, which preloads the graphic. It starts out blurry and becomes focused and crisp when it is finished downloading. This makes the transition for your viewer easier, and they don’t have to wait as long to see logos or icons on your site. Gifs also support animation.
You mainly use a gif file format for logos and graphics with solid areas of color. You wouldn’t use a photographic image, or a graphic with gradients.
PNG:
PNG files were developed to build upon the purpose of gifs. Designers need the ability to incorporate low-resolution images that load quickly but also look great, too. This is where PNG comes in. PNG-8 does not support transparency, but PNG-24 and PNG-32 do. PNG transparency is different from Gif transparency, because they can have different levels of transparency. Gifs are either transparent or opaque. Below is a comparison of how a gif will look if the edges of the image are blurred or they are semi transparent:
You mainly use a gif file format for logos and graphics with solid areas of color. You wouldn’t use a photographic image, or a graphic with gradients.
PNG:
PNG files were developed to build upon the purpose of gifs. Designers need the ability to incorporate low-resolution images that load quickly but also look great, too. This is where PNG comes in. PNG-8 does not support transparency, but PNG-24 and PNG-32 do. PNG transparency is different from Gif transparency, because they can have different levels of transparency. Gifs are either transparent or opaque. Below is a comparison of how a gif will look if the edges of the image are blurred or they are semi transparent:
You will notice that the edges are rough and pixelated. Gifs are best for crisp edged graphics. To the right is the same file, but saved as a png-24. You will notice in the PNG file that the edges are blurred or feathered. This will allow for some nice effects for websites and images.
Storage memory, file size:
File size dictates the time it takes to load your page, the larger the file size, often increased because of a high image resolution quality, the longer it will take to load. People often don't have the patience to wait through long web page loads, so keeping your file sizes low speeds up your web page access times. Typically, large high quality images should be kept between 100K and 60K. Smaller images should be closer to 30K and lower. As well as having an increased time in loading on webpages, the bigger the image the more storage space you are going to need on your computer or in a better context for small hand held devices. You will have to buy a bigger Micro SD card to keep all the images. This is why file size is important. I have also referred to file size and formats in other sections. http://www.scantips.com/basics09.html
http://users.wfu.edu/matthews/misc/graphics/formats/formats.html
Here i am showing a various section of an image exported into different formats.
I am going to compare some of the different formats to show the affect of file size.
GIF:
The first example here is the GIF format has a file size of 684KB, this is a small format which is good for storage on small devices or on something which has only a small sized memory. You can see in the image that the small file size has effected the quality of the image. The image has lines spread across the top which is a problem with the color.
BMP:
BMP or Bitmap files are important because they can be used to transmit graphics and photographs that can be used on Web pages or for other Web applications. Bitmap files, which are relatively low resolution, are transmitted by compressing image data and are usually added to the Internet as GIF or JPEG files. If you look back at the file sizes you can see that this is the biggest of all the different files. You can see that the colour in this image is a lot better with no lines in the sky. This is better quality however the files size is much bigger which could be a problem for small storage devices.
JPG:
The final main format that is important to consider is JPG. Looking at the lowest and highest quality of the formats, the highest being 1329KB and the lowest quality being 126KB.
Asset management:
http://users.wfu.edu/matthews/misc/graphics/formats/formats.html
I am going to compare some of the different formats to show the affect of file size.
The first example here is the GIF format has a file size of 684KB, this is a small format which is good for storage on small devices or on something which has only a small sized memory. You can see in the image that the small file size has effected the quality of the image. The image has lines spread across the top which is a problem with the color.
BMP:BMP or Bitmap files are important because they can be used to transmit graphics and photographs that can be used on Web pages or for other Web applications. Bitmap files, which are relatively low resolution, are transmitted by compressing image data and are usually added to the Internet as GIF or JPEG files. If you look back at the file sizes you can see that this is the biggest of all the different files. You can see that the colour in this image is a lot better with no lines in the sky. This is better quality however the files size is much bigger which could be a problem for small storage devices.
The final main format that is important to consider is JPG. Looking at the lowest and highest quality of the formats, the highest being 1329KB and the lowest quality being 126KB.
The
picture on the left shows the higher quality image.
The lower quality one
on the right. There is a massive difference
in file size but the quality in image isn't a lot of difference. This shows
that the images even with the compression shows that JPG doesn't lose a lot of
quality when compressed, this is a great benefit in the fact that you can have
small file sized images with still great quality.
http://www.sitepoint.com/gif-jpg-png-whats-difference/Asset management:
Digital asset management (DAM) consists of management tasks and decisions surrounding the ingestion, annotation, cataloguing, storage, retrieval and distribution of digital assets. Digital photographs, animations, videos and music exemplify the target areas of media asset management.Digital asset management systems (DAMS) include computer software and hardware systems that aid in the process of digital asset management.
DAM software and DAM is different concepts, DAM software like WIDEN is used to organize files and help organize assets, whether these be icons or video etc. This is very helpful for marketing mangers and other business's. A dealer may want a video or image by a curtain time, to be used in a powerpoint for example. The software can be used to narrow down the searches and select the relevant formats, he can then set a format which can be used on power point. This also automatically compresses the file which can be sent by email. This saves alot of time that would be on the phone and saves time having to search for different assets.
DAM software and DAM is different concepts, DAM software like WIDEN is used to organize files and help organize assets, whether these be icons or video etc. This is very helpful for marketing mangers and other business's. A dealer may want a video or image by a curtain time, to be used in a powerpoint for example. The software can be used to narrow down the searches and select the relevant formats, he can then set a format which can be used on power point. This also automatically compresses the file which can be sent by email. This saves alot of time that would be on the phone and saves time having to search for different assets.
http://www.widen.com/demos/
http://theiam.org/what-asset-management
Interactive graphics in Games, DVD:Interactive graphics can be seen in many places. They are also used very commonly in Games and DVD's. Interactive Graphics are used to entertain the audience by them being to interact with something on the screen.
You can see in this example that graphics have been used to make the scene selection menu alot more interesting and enjoyable for the viewer. When they go over the scenes they will flash and show up as something else. This is the interactive nature of the graphic. This is much better than just a still image that triggers movement and sound.
.jpg)
This is the same in video games. Video games are interactive in them self with the player using a remote to move and interact with an animation. However also when coming to something in the game and then being able to interact with that. For example getting into a car or picking up an object. The remote the player has in an interactive tool which they use to activate different graphics.
Graphic creation adobe after effects:
A way that these graphics are created is the use of after effects.
You can see here the panel which the after effect software uses.
Firstly you have the project panel on the left hand side of the image, this is the essential organization tool. This is where you store your video, audio, image and compositions in your project.
There is the tool bar which you can use to move things around and rotating layers etc.
In the middle you will see the composition panel which is where you see everything happens. This is the vision area where you see all your animation happen. Under that is the time line, your time line is the area where you structure layers, organize the order of those layers and place key frames in time in order to create animation. On the right hand you can see the info panel, preview panel and other things like effects preset. In the middle you will see the composition panel which is where you see everything happens. This is the vision area where you see all your animation happen. Under that is the time line, your time line is the area where you structure layers, organize the order of those layers and place key frames in time in order to create animation. On the right hand you can see the info panel, preview panel and other things like effects preset.
All these section are all needed for the construction of these interactive graphics
http://theiam.org/what-asset-management
Interactive graphics in Games, DVD:Interactive graphics can be seen in many places. They are also used very commonly in Games and DVD's. Interactive Graphics are used to entertain the audience by them being to interact with something on the screen.
You can see in this example that graphics have been used to make the scene selection menu alot more interesting and enjoyable for the viewer. When they go over the scenes they will flash and show up as something else. This is the interactive nature of the graphic. This is much better than just a still image that triggers movement and sound. .jpg)
This is the same in video games. Video games are interactive in them self with the player using a remote to move and interact with an animation. However also when coming to something in the game and then being able to interact with that. For example getting into a car or picking up an object. The remote the player has in an interactive tool which they use to activate different graphics.
Graphic creation adobe after effects:
A way that these graphics are created is the use of after effects.
You can see here the panel which the after effect software uses.
Firstly you have the project panel on the left hand side of the image, this is the essential organization tool. This is where you store your video, audio, image and compositions in your project.
There is the tool bar which you can use to move things around and rotating layers etc.
In the middle you will see the composition panel which is where you see everything happens. This is the vision area where you see all your animation happen. Under that is the time line, your time line is the area where you structure layers, organize the order of those layers and place key frames in time in order to create animation. On the right hand you can see the info panel, preview panel and other things like effects preset. In the middle you will see the composition panel which is where you see everything happens. This is the vision area where you see all your animation happen. Under that is the time line, your time line is the area where you structure layers, organize the order of those layers and place key frames in time in order to create animation. On the right hand you can see the info panel, preview panel and other things like effects preset.
All these section are all needed for the construction of these interactive graphics
No comments:
Post a Comment