Digital Graphics
Navigation:
Rollover buttons- Rollover is referred to a button that is created by a web developer or web designer, found within a web page, it is used to provide interactivity between the user and the page itself. The term rollover in this regard is originated from the visual process of "rolling the mouse cursor over the button" causing the button to react (usually visually, by replacing the button's source image with another image), and sometimes resulting in a change in the web page itself.
Navigation bars- A navigation bar, also known as a navigation system is a section of a graphical user interface intended to aid visitors in accessing information. Navigation bars are implemented in file browsers, web browsers and as a design element of some websites. File browsers use a navigation bar to assist the user in traversing the filesystem. Navigation bars might include the current path, breadcrumbs, or a list of favourites. A web browser's navigation bar has the back and forward buttons, also the Location bar where URLs are entered. The functionality of the navigation bar was split between the browser's toolbar and the address bar, but Google Chrome introduced the practice of merging the two. Some early versions of Netscape used the HTML link tag to construct a navigation bar to navigate web sites. Today the nav tag can be used for the same purpose.
Navigation menus- It is a set of buttons or images in a row or column that serves as a control point to link the user to sections on a Web site. The navigation bar may also be a single graphic image with multiple selections. As the screen pointer is moves across the bar, the individual elements change colour or shading. Clicking an element directs the user to a different page on the Web site.
Animated graphics:
Gifs- This stands for "Graphics Interchange Format." A GIF is an image file format commonly used for images on the web and sprites in software programs. Unlike the JPEG image format, GIFs uses lossless compression that does not degrade the quality of the image. However, GIFs store image data using indexed colour, meaning each image can include a maximum of 256 colours. According to Steve Wilhite, the creator of the original GIF format, it is pronounced "jiff" (like the peanut butter brand). However, most people still pronounce it "gif" (with a hard G). Therefore, either pronunciation is acceptable. GIFs are better suited for buttons and banners on websites, since these types of images typically do not require a lot of colours. However, most web developers prefer to use the newer PNG format, since PNGs support a broader range of colours and include an alpha channel. (The alpha channel makes it possible for a single image with transparency to blend smoothly with any webpage background colour.) Still, neither JPEGs nor PNGs support animations, so animated GIFs remain popular on the web.
Web banners- A web banner or banner ad is a type of advertising on the World Wide Web delivered by an ad server. This form of online advertising entails embedding an advertisement into a web page. It is intended to attract people to a website by linking to the website of the advertiser. In many cases, banners are delivered by a central ad server. Web banners function the same way as traditional advertisements are intended to function: notifying consumers of the product or service and presenting reasons why the consumer should choose the product in question, a fact first documented on HotWired in 1996 by researchers Rex Briggs and Nigel Hollis. Web banners differ in that the results for advertisement campaigns may be monitored real-time and may be targeted to the viewer's interests. Behaviour is often tracked through the use of a click tag.
Logo graphics- The definition of logo is a graphical mark/image used to identify a company, organisation, product or brand. Logos can be displayed along side - or in lieu of - a company's name in order to generate awareness of the company's association with a particular product or service.
Screen icons- In computing, an icon is a pictogram displayed on a computer screen in order to help the user navigate a computer system or mobile device. The icon itself is a quickly comprehensible symbol of a software tool, function, or a data file, accessible on the system and is more like a traffic sign than a detailed illustration of the actual entity it represents. It can serve as an electronic hyperlink or file shortcut to access the program or data. The user can activate an icon using a mouse, pointer, finger, or recently voice commands. Their placement on the screen, also in relation to other icons, may provide further information to the user about their usage. In activating an icon, the user can move directly into and out of the identified function without knowing anything further about the location or requirements of the file or code.
Pixel:
Picture element- In digital imaging, a pixel, pel, dots or picture element is a physical point in a raster image, or the smallest addressable element in an all points addressable display device; so it is the smallest controllable element of a picture represented on the screen.
Image resolution- Image resolution is the detail an image holds. Higher resolution means more image detail. Image resolution can be measured in various ways. Resolution quantifies how close lines can be to each other and still be visibly resolved. Resolution units can be tied to physical sizes (e.g. lines per mm, lines per inch), to the overall size of a picture (lines per picture height, also known simply as lines, TV lines, or TVL), or to angular subtense.
Intensity- A pixel's intensity is its brightness. The histogram shows you how many pixels are at a given intensity level as compared to the others in the image. Black is on the left, white on the right, and intensities increase as you move to the right. Think of it as a bar graph with tiny one pixel-wide bars.
Raster images:
Compression- Lossless and lossy compression are terms that describe whether or not, in the compression of a file, all original data can be recovered when the file is uncompressed. With 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 or spreadsheet files, where losing words or financial data could pose a problem. The Graphics Interchange File (GIF) is an image format used on the Web that provides lossless compression.
On the other hand, lossy compression reduces a file by permanently eliminating certain information, especially redundant information. When the file is uncompressed, only a part of the original information is still there (although the user may not notice it). Lossy compression is generally used for video and sound, where a certain amount of information loss will not be detected by most users. The JPEG image file, commonly used for photographs and other complex still images on the Web, is an image that has lossy compression. Using JPEG compression, the creator can decide how much loss to introduce and make a trade-off between file size and image quality.
File extensions- File extensions are a way of letting the user and their computer know what type of program created any given file. Computer files have specific characteristics which depend on the software that created them. If you try to open a file using the wrong program, it will fail to open or sometimes even crash the program.
Vector images:
Points, lines, curves, polygons- A vector graphic is made up of mathematical calculations, can be printed at any size and can be re-scaled without losing image quality. Vector graphics are made up of paths which use points, curves and angles unlike raster images which are make up of a grid of pixels. the paths used in vector graphics can be lines, squares, triangles or curvy shapes which can be used to create simple drawings or complex diagrams. They are mainly used in cartoons.
The vector image can be easily converted to a raster image and larger images can maintain a smaller file size.
The disadvantage of vector images is that it is not a good format for photographs or photos with blends of colours.
EPS- Encapsulated Postscript
AI- Adobe Illustrator
FLA- Flash Application
SVG- Scalable Vector Graphics
Bit depth:
Sampling- The sample rate is the number of "snapshots" of audio that are sampled every second. The continuous audio stream is digitally encoded in a similar way to a movie camera capturing motion by recording an image frame many times per second. The higher the sample rate (and bit depth), the more accurately the original sound can be represented. The following diagram helps to illustrate this point. The curve can be thought of as being the original sound whereas the columns can be thought of as digital data trying to represent the original sound.
Bits per pixel- (BPP) The number of bits of information stored per pixel of an image or displayed by a graphics adapter. The more bits there are, the more colours can be represented, but the more memory is required to store or display the image. A colour can be described by the intensities of red, green and blue ( RGB ) components.
Logo graphics- The definition of logo is a graphical mark/image used to identify a company, organisation, product or brand. Logos can be displayed along side - or in lieu of - a company's name in order to generate awareness of the company's association with a particular product or service.
Screen icons- In computing, an icon is a pictogram displayed on a computer screen in order to help the user navigate a computer system or mobile device. The icon itself is a quickly comprehensible symbol of a software tool, function, or a data file, accessible on the system and is more like a traffic sign than a detailed illustration of the actual entity it represents. It can serve as an electronic hyperlink or file shortcut to access the program or data. The user can activate an icon using a mouse, pointer, finger, or recently voice commands. Their placement on the screen, also in relation to other icons, may provide further information to the user about their usage. In activating an icon, the user can move directly into and out of the identified function without knowing anything further about the location or requirements of the file or code.Pixel:
Picture element- In digital imaging, a pixel, pel, dots or picture element is a physical point in a raster image, or the smallest addressable element in an all points addressable display device; so it is the smallest controllable element of a picture represented on the screen.
Image resolution- Image resolution is the detail an image holds. Higher resolution means more image detail. Image resolution can be measured in various ways. Resolution quantifies how close lines can be to each other and still be visibly resolved. Resolution units can be tied to physical sizes (e.g. lines per mm, lines per inch), to the overall size of a picture (lines per picture height, also known simply as lines, TV lines, or TVL), or to angular subtense.Intensity- A pixel's intensity is its brightness. The histogram shows you how many pixels are at a given intensity level as compared to the others in the image. Black is on the left, white on the right, and intensities increase as you move to the right. Think of it as a bar graph with tiny one pixel-wide bars.
Raster images:
Compression- Lossless and lossy compression are terms that describe whether or not, in the compression of a file, all original data can be recovered when the file is uncompressed. With 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 or spreadsheet files, where losing words or financial data could pose a problem. The Graphics Interchange File (GIF) is an image format used on the Web that provides lossless compression.
On the other hand, lossy compression reduces a file by permanently eliminating certain information, especially redundant information. When the file is uncompressed, only a part of the original information is still there (although the user may not notice it). Lossy compression is generally used for video and sound, where a certain amount of information loss will not be detected by most users. The JPEG image file, commonly used for photographs and other complex still images on the Web, is an image that has lossy compression. Using JPEG compression, the creator can decide how much loss to introduce and make a trade-off between file size and image quality.
File extensions- File extensions are a way of letting the user and their computer know what type of program created any given file. Computer files have specific characteristics which depend on the software that created them. If you try to open a file using the wrong program, it will fail to open or sometimes even crash the program.
Vector images:
Points, lines, curves, polygons- A vector graphic is made up of mathematical calculations, can be printed at any size and can be re-scaled without losing image quality. Vector graphics are made up of paths which use points, curves and angles unlike raster images which are make up of a grid of pixels. the paths used in vector graphics can be lines, squares, triangles or curvy shapes which can be used to create simple drawings or complex diagrams. They are mainly used in cartoons.
The vector image can be easily converted to a raster image and larger images can maintain a smaller file size.
The disadvantage of vector images is that it is not a good format for photographs or photos with blends of colours.
EPS- Encapsulated Postscript
AI- Adobe Illustrator
FLA- Flash Application
SVG- Scalable Vector Graphics
Bit depth:
Sampling- The sample rate is the number of "snapshots" of audio that are sampled every second. The continuous audio stream is digitally encoded in a similar way to a movie camera capturing motion by recording an image frame many times per second. The higher the sample rate (and bit depth), the more accurately the original sound can be represented. The following diagram helps to illustrate this point. The curve can be thought of as being the original sound whereas the columns can be thought of as digital data trying to represent the original sound.
Monochrome- Monochrome describes paintings, drawings, design, or photographs in one colour or values of one colour. A monochromatic object or image reflects colours in shades of limited colours or hues. Images using only shades of grey (with or without black and/or white) are called grayscale or black-and-white. However, scientifically speaking, monochromatic light refers to visible light of a narrow band of wavelengths.
256- A typical computer monitor and video card may offer 8 bits of colour precision (256 output levels) per R/G/B colour channel, for an overall 24-bit colour space (or 32-bit space, with alpha transparency bits, which have little bearing on the colour precision), though earlier standards offered 6 bits per channel (64 levels) or less; the DVD-Video and Blu-ray Disc standards support video with a bit depth of 8-bits per colour YCbCr with 4:2:0 chroma subsampling.
True colour- True colour is the specification of the colour of a pixel on a display screen using a 24-bit value, which allows the possibility of up to 16,777,216 possible colours. Many displays today support only an 8-bit colour value, allowing up to 256 possible colours. The number of bits used to define a pixel's colour shade is its bit-depth . True colour is sometimes known as 24-bit colour. Some new colour display systems offer a 32-bit colour mode. The extra byte, called the alpha channel, is used for control and special effects information.
Colour space:
RGB- The RGB colour model is an additive colour model in which red, green, and blue light are added together in various ways to reproduce a broad array of colours. The name of the model comes from the initials of the three additive primary colours, red, green, and blue. The complete specification of an RGB colour space also requires a white point chromaticity and a gamma correction curve. As of 2007, sRGB is by far the most commonly used RGB colour space.
YUV- YUV is a colour space typically used as part of a colour image pipeline. It encodes a colour image or video taking human perception into account, allowing reduced bandwidth for chrominance components, thereby typically enabling transmission errors or compression artifacts to be more efficiently masked by the human perception than using a "direct" RGB-representation. Other colour spaces have similar properties, and the main reason to implement or investigate properties of Y'UV would be for interfacing with analog or digital television or photographic equipment that conforms to certain Y'UV standards.
HSV-Hue, Saturation, Value or HSV is a colour model that describes colours (hue or tint) in terms of their shade (saturation or amount of grey) and their brightness (value or luminance). The HSV colour wheel may be depicted as a cone or cylinder. Instead of Value, the colour model may use Brightness, making it HSB (Photoshop uses HSB). 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). Saturation is the amount of grey (0% to 100%) in the colour. Value (or Brightness) works in conjunction with saturation and describes the brightness or intensity of the colour from 0% to 100%.
Image capture:
Scanners- an image scanner—often abbreviated to just scanner, although the term is ambiguous out of context (barcode scanner, CAT scanner, etc.)—is a device that optically scans images, printed text, handwriting, or an object, and converts it to a digital image. Commonly used in offices are variations of the desktop flatbed scanner where the document is placed on a glass window for scanning. Hand-held scanners, where the device is moved by hand, have evolved from text scanning "wands" to 3D scanners used for industrial design, reverse engineering, test and measurement, orthotics, gaming and other applications. Mechanically driven scanners that move the document are typically used for large-format documents, where a flatbed design would be impractical. The image on the left is a 3D scanner and on the right is a normal scanner.
Digital camera- A digital camera or digicam is a camera that encodes digital images and videos digitally and stores them for later reproduction. Most cameras sold today are digital, and digital cameras are incorporated into many devices ranging from PDAs and mobile phones (called camera phones) to vehicles. Digital and film cameras share an optical system, typically using a lens with a variable diaphragm to focus light onto an image pickup device. The diaphragm and shutter admit the correct amount of light to the imager, just as with film but the image pickup device is electronic rather than chemical. However, unlike film cameras, digital cameras can display images on a screen immediately after being recorded, and store and delete images from memory. Many digital cameras can also record moving videos with sound. Some digital cameras can crop and stitch pictures and perform other elementary image editing.Resolution- Image resolution is the detail an image holds. The term applies to raster digital images, film images, and other types of images. Higher resolution means more image detail. Image resolution can be measured in various ways. Resolution quantifies how close lines can be to each other and still be visibly resolved. Resolution units can be tied to physical sizes (e.g. lines per mm, lines per inch), to the overall size of a picture (lines per picture height, also known simply as lines, TV lines, or TVL), or to angular subtense. Line pairs are often used instead of lines; a line pair comprises a dark line and an adjacent light line. A line is either a dark line or a light line. A resolution of 10 lines per millimeter means 5 dark lines alternating with 5 light lines, or 5 line pairs per millimeter (5 LP/mm). Photographic lens and film resolution are most often quoted in line pairs per millimeter.
Storage- Storage of images depends on the amount of memory that your computer has and the actual file size of the image, often to reduce the file size of the image in order to save the image, images can be changed to different formats such as JPEG’s in order to reduce the size of the file. Asset management ensures that all of the documents or files that are especially important to you are correctly stored within the computer.
Optimising:
Target destination- The target destination is the destination where you wish the graphic to be located on your network, in order to do this you need to be certain of the folder you intend to save all of the graphics, this will ensure that web serve is able to locate the graphics quickly and easy therefore optimising the performance of the website.
Bit depth- Bit Depth as previously stated is the volume of colour per pixel, reducing the bit depth will obviously reduce the image file size although the image quality is likely to suffer, generally deciding this involves making a decision between having good quality graphics with a slower load time or poorer quality graphics that enable the website to perform quicker.
Resolution- The Graphic Resolution can optimise the file size and also optimise the quality of the image although both will not be optimised at the same time, for example, optimising the graphic quality will make the file size much larger which may not be that beneficial for you but the users will benefit from the higher visual quality. Whereas if you decide to reduce the graphic the file size will be smaller but the image quality will be worse, ultimately this is up to the users preference.Dimensions- Image dimensions relate to the length and width of the digital image, by controlling the dimensions of the graphic you can then make the image smaller or bigger depending on the purpose or location of the image. When changing the dimensions of the graphic the volume of pixels stays the same, the only difference is the larger the image the more space the pixels have to cover.
Intended image output- Figuring out the Intended image output is essential in creating graphics that not only fit on the webpage, but it is at a decent standard to be accessed and processed quickly by the users computer. The intended image output essentially provides the guidelines to how you create your graphics.
No comments:
Post a Comment