Theory & Applications Of Digital Graphics Technology

Pixel

Theory & Applications Of Digital Graphics Technology

Pixels are made up of thousands of tiny little dots, which create the images you see on your computer screen, pixels are used in raster images. A raster image is made up of different colored dots to form a image. A disadvantage of raster images is that when zoomed in the image can appear 'pixelated' or 'blocky which is showed in the picture on the top left.. Picture element is a single block of colour, which is put together to make a image, the more pixels there are the less amount of space and the higher image resolution.

Screen resolution plays a huge part in how you see a image, if the image is a high resolution image but the computer you are viewing it on is a low pixel resolution it may appear pixilated due to the screen.So if a image appears blocky to you it may just be yous computers resolution rather then the image its self, generally the more pixels a image has the better the quality of the image is.

Image Resolution- This refers to the pixels in a image, the more pixels in a image the higher the resolution will be. With larger images, they require larger resolutions. But the resolution will effect the size of the file, the resolution can be calculated by the number of pixels across by the number of pixels down. To work out the image resolution you would times the image width by the hight of pixels used in the image.

Bit Depth

Optimization

Optimization is simply getting the perfect balance between image quality and file size, this can vary depending on the indented use of the image. Many factors come into consideration when optimizing a image e.g. when uploading a image to the internet the JPEG file format is ideal as it has good image quality and a low file size so it will load fast on the website.

* Dimensions- This refers to the length and the width of a image, which is usually means in the unit of pixels, if you scale an image to make it larger or smaller the pixel number will stay the same but they will need to cover more space which is why some images get pixilated.

In simple terms bit depth refers to how many unique colours are used in the image. A image with a higher bit depth can have more shades of colour meaning the more natural the image looks as it has different colours of the same shade to create a object rather then one sold colour which would not look realistic. This usually only applies for bitmap images.

*Monochrome- This means different shades of the same colour are used in the picture rather then black and white as some people may think. This should not be confused with grey scale which uses black, white and grey rather then different shades of a colour.

*Intensity- This refers to how much red, blue and green is used in a image, this is also known as the RGB scale and is used to measure the intensity of the pixel. So in basic terms the more red, green or blue used in a image the higher intensity of colour the image has and the more vibrant the hues in the image look.

Applications Of Interactive Media Graphics

Raster

Navigation; Rollover Buttons & Navigation Bars

Rollovers are interactive media which can be found on almost all websites, when a user hovers their mouse over the rollover it will change; this could just be the colour of the font or a totally different background image from the starting one. Rollovers create interactivity between the website user and the web page, the example on the left shows a basic rollover, when a user hovers their mouse over 'Unit 23', on the left, which will turn to 'Unit 23' on the right hand side but with slight differences; like the font colour, and the background image of the rollover.

Navigation Bars are also interactive media which can be found at the top of web pages and sometimes the top left hand side of web pages too. They can be either vertical or horizontal with sub groups for different sections within the website for example; Contact Us, Gallery and Home. With in theses sections they can also be sub categories for example the Gallery section could have sub sections for different years of which the pictures were taken e.g. 2010, 2011 and so on. The illustration below shows a basic Navigation Bar which has 4 sections and a subsections within three of the four different sections.

Animated Graphics

Raster Images-A Raster images, also known as bitmap are images which are stored in a series of ‘bits’ of information which is translate into pixels on the screen, this type of image tends to take a lot of memory when saving it, this is because the file size is determinate by the size and the proportion of the image its self you are saving; so the bigger the image the larger the file size will be.

These pixels form points of colour that create an overall finished image. This is why sometimes a raster image can appear blocky when zoomed into. Some examples of raster file types are; BMP, PNG, GIF, TIFF, JPG and PSD. Also re-sizing bitmap images can be a hassle as to scale the image the arrangement of the pixels will need to change, this can be done well by some software applications but the quality will be losed and appear blocky. The image on the left shows a before and after of a bitmap image that has been scaled, it appears blurry and blocky.

Animated GIFS- GIF stands for Graphic Interchange Format, and is simply an animation which has been comprised with multiple similar images, each image in the GIF is called a frame. They can be used on web and are supported on all browser types. They are a lossless file format, which can be supported by both static and animated images.

Web Banners- Web Banners are used to advertise stuff on a website from clothing to events. They can be found on the right hand side and the bottom of most websites and are usually encoded to link to the advertised things website, they could also be at the top of web pages to catch the viewers eyes. They can be seen on almost every page you visit as the host of the site can earn money if you click on the advertisement. Some web banners might use cookies which track which websites the user visits and then they will appear as web banner advertisements on other for example this Asos web banner.

Logos- This is a image or symbol to represent a company, they can be used to help to promote a website. Larger companies tend to have their logos copyrighted meaning no one can use their logo or create a logo similar to theirs as it may confuse customers. Logos create a identity for the brand they represent for example the Kool-Aid logo is large and uses a playful animated font which children would like, as well as this is had a animated jug full of Kool-Aid which appears to be a person; the logo is designed for its target audience like the Kool-Aid logo which is aimed at children who tend to drink the beverage.

Backgrounds- Theses are the backdrop for websites, they can be comprised of images, text or even both. Some sites have a plain and simple white background, while some have animated backgrounds. You should always use the appropriate background; sometimes you may think a bright green background might look cool but this could not play in your favor as black font on a green background is very difficult to read and may cause some of your website visits to leave without even reading your website.

Screen Icons- A screen icon is a small image which can be located on the users desktop or on the start menu; screen icons are also interactive media graphics. Each icon represents a different software program, and each piece of software has a unique screen icon to make it easier for people to recognize and differentiate between them. When you click on Google Chrome, the screen icon will change and become highlighted in blue and open the software application . This applies to software applications the user had downloaded themselves as well as pre-installed software for example the short cuts fount at the icon tray on the users desk tip which contains shortcuts to the speakers, internet access and power plan.

Compression (Lossy & Lossless)-

Lossless Compression is a form of image compression which lets the user recreates the original file perfectly. The original file is broken into minute from, which is then saved and stored. Then it is put together to be used buy the person. In basic terms is allows the user to rebuild the image from its compressed form.

Lossy is the total opposite, it does not allow the user to rebuild the image from its compressed form. If an image is all blue, the lossy compression forms will pickup on this and automatically make it all the same colour, this may be stopped if the user changes the colour values for each and every pixel of the Image. This is the lossy compression software reinterpretation of the original image.

Raster File Formats

*BMP (Windows Bitmap File) is a bitmap file format commonly used to store bitmap images on devices usually on Microsoft Windows operating systems. Tehe file type is supported by all versions of the Windows operating system and is usually used for icons and small images as the file format has a large file size when compared to other file formats and also the quality of the image could be lost also.

*JPEG/ JPG (Joint Photographic Experts Group File) is a bitmap file format which produces super high quality images with great resolution, the file time is the most common file type used for photographs, due to this come cameras automatically download images into the JPEG file format. The download to this great file type is that images with sharp edges will get blurred.

*GIFF (Graphic Interchange Format) is a bitmap file format which is commonly used for web pages with high uploading speeds, it has a small file size when compared to some of the other bitmap file types I have mentioned. The file type is best suited for screen shots, cartoons and animations. The cons to the file types is that it has a limited colour code of up to 256 or less.

*PNG (Portable Network Graphics) is another bitmap file format which can also be used for screen shots and can be used in all operating systems from Windows to Mac and Linux and allows high quality images to be created which sharp images but the downfall to the file format is that you should avoid using it will images with a lot of small details as it will hugely increase the file size of the image as well as this in some instances the file format can have bigger file sizes then JPEG.

Vector

Image Capture

Vector images are made up of objects rather then pixels of different colours and are saved as mathematical equations, they have a small file size when saved onto a drive. In addition to this when zoomed in they do not become pixelated or blocky; this is because vector images are made up of lines, numbers and shapes so they don't lose their quality. This also means that if a company's logo was created using a vector file type they would be able to enlarge it for posters and reduce its size for businesses cards with no quality lost. They are saved as mathematical equations. Some examples of vector file formats are EPS, AI and FLA. The downfall is that vector images tend to look cartoony and unrealistic because of the unnatural appearance of the image and also vector photographs can not be taken so the artist must draw what they wish to capture and then edit in a software application and save it into a vector file format.

When an image has been taken on something like a camera it must be converted into a file format which can be read by a compute, making the image digitalised. When scanning a image it is automatically saved as a bitmap image.

Digital Camera- Theses can be used for multiple of reasons, taking pictures, videos and much more. Camera capture images or videos which then get saved into a digital format which can be opened onto a computer and edited if the user wishes. Some new cameras can upload pictures to the internet while some have bluetooth which can be used to send pictures as well as short videos to another bluetooth device. Most cameras still have a slot for a SD card where all the data will be saved on, this can then be removed and inserted into the users computer.

Scanner- This can be used to scan documents on to a computer, the document will then be turn into a digital image in different formats (depending on the scanner settings); such as PNG (Portable Network Graphics) which is a bitmap file format. There is different kinds of scanner such as a rotary scanner which is used for quick scanning of documents.

Vector File Formats

*AI (Adobe Illustrator File) is a vector based file type created by Adobe and allows the software's user to create as well as edit vector based graphics. It is the newer version of the older EPS format, the software is supported but used less when compared to the EPS format.

*EPS (Encapsulated postscript File) is also created by Adobe, but it the older and most used version of AI, the file format is supported by many programs as well as many different editing software applications. It is one of the most commonly used vector image format and in standard in most printing industry.

*PDF (Portable Document Format) is used a lot and is used as a general tool by most computer users, Adobe gives the software Acrobat PDF Reader free to any user but they sell the tools which are needed to create the PDF files them self.