IT152_Lecture_08_Graphics_2013a Flashcards
Why do we use Graphics…?
- Photos
- Diagrams / Illustrations
- Text Created in paint packages
- Interface
- Animation Sequence
- Interactive
Photos…?
Scanned, Digital Cameras, Video, Library (CD), WWW Stock Photos area available to purchase a license to use.
Diagrams/ Illustrations…?
Information, Vector Drawing, Converted to Bitmap?, Drawn in paint package, Other (word, powerpoint, Internal Drawing Editor)
Text Created in paint packages…?
‘Typed in’ using internal editor, Imported from file.
Interface…?
Backgrounds, Buttons, Display Areas, Title Bars, Menus.
Animation Sequence…?
Vector/Bitmap
Interactive…?
Up / Down states, Rollovers Enabled/ Disabled states, Games/ Virtual Environments.
What are the Sources of Digital Images…?
- Scanned Images
- Still Images (digital camera)
- Video Images
- Photo CD
- Stock Photography
- Clip Art
- Original Artwork
- Copyright Laws
Scanners digitize already developed images, including…?
photographs and drawings.
Slide scanners are also available for…?
converting a slide or a negative to a digital image.
Digital cameras capture…?
images in a digital format.
Digital video cameras can also be used to…?
capture frames of video or still images.
Enables photos taken with a film camera to be viewed in a…?
digital format - hi resolution digital cameras taken over from film
Stock Photography: Photographs available on…?
CD or on Web sites, like www.iStockphoto.com
A collection of member-generated royalty-free images, that you have to pay for.
Clip Art is a collection of drawings or illustrations, generally organized by…?
category.
Public Domain refers to…?
Clip art images available free of charge for what ever use.
Licensed material may have some license restrictions such as…?
not allowed for commercial use.
Artwork that is created using an original drawing created by…?
hand or one of many graphics programs.
Advantages include not having to worry about licensing agreements or copyright laws.
Copyright laws are designed to protect intellectual property rights and…?
provide potential monetary rewards for inventiveness and hard work.
The 1994 Copyright Act and recent 2011 amendments applies to graphics.
Image types:
Line art…?
Term used to describe drawings that contain flat colors without tonal variations.
Image types:
Continuous-tone images…?
graphics that have tonal variations, such as color photographs.
Image types:
Grayscale images…?
Continuous-tone image consisting of black, white, and gray data only.
Image types:
Images can also be classified as…?
two-dimensional (2-D) or, by adding depth to them, they become three-dimensional (3-D)
Layering…?
- Process that keeps elements of an image separate and editable from the rest of an image
- Can overlap
- Particular elements can be selected and edited without affection the rest of the image
Transparency…?
Defines a colour as a transparency index, so the background shows through
(Namely GIF and PNG – support transparency. In addition, most image editing programs support transparency, but only when the image is saved in the software program’s native format.
Rendering…?
Process of capturing a view of a 3-D scene and saving it as a 2D image
“Lossless” and “lossy” compression…?
Lossless and lossy compression describe whether or not, in the compression of a file, all original data can be recovered when the file is uncompressed.
Lossless compression…?
None of data actually lost during compression
Lossy compression…?
Some data is lost during compression
- Lossy compression is generally used for video and sound, where a certain amount of information loss will not be detected by most users.
Interpolation…?
changing the size of the image using resizing tool.
Scaling…?
Dragging the edges of the image.
Resolution…?
- measurement of the output quality of an image, usually in terms of samples, pixels, dots, or lines per inch.
- Pixel Dimensions: The Number of pixels in total image
- Output devices display images as groups of pixels.
When you reduce the side of a bitmap image through your software’s resample or resize command, you must…?
throw away pixels.
When you increase the side of a bitmap image through your software’s resample or resize command, the software has to…?
create new pixels.
(When creating pixels, the software must estimate the colour values of the new pixels based on the surrounding pixels. This process is called interpolation zooming in and out, or dragging the edges of your images in a page layout program to resize it. This type of resizing is more accurately called scaling.
Changing screen resolution changes…?
size of pixels and size of bitmap image on screen. (Vector no change).
Online image ( WWW, CDROM), your maximum size is determined by …?
the lowest pixel dimension on screen.
Image resolution refers to the amount of…?
information stored for each image.
Image resolution is measured in…?
pixels per inch (PPI)
Web graphics can be set to…?
72 PPI because most computer monitors cannot display more than 72 PPI.
Image resolution…?
the number of pixels per unit.
- length normally pixels per inch =ppi
- Which determines the file size72 ppi (72 x 72 pixels = 5184 pixels in one square inch)300 ppi (300 x 300 pixels 90000 pixels in one square inch)
Precision to which a pixel can…?
specify colour is its colour depth
File size formula…?
Width x Height x bit depth in bytes 185 x 276 pixels.
at 8 bit colour depth…?
= 185 x 276 x 1
= 51, 060 bytes
Device resolution
Scanner…?
- Scanning at 600dpi
- 32 bit colour resolution.
Device resolution
Screen…?
- number of pixels the screen is divided into 640x480, 800x600, 1024x768, 1280x1024
- Dot pitch is the distance between the pixels
. - 28mm - Display adapter – 72dpi
- Web graphics can be set to 72dpi as most monitors cannot display more than that
- colour resolution of 256 colours
Device Resolution
Printer…?
600 dpi
Vectors:
Consist of lines and curves defined by…?
mathematical objects called vectors.
Vectors describe graphics according to…?
their geometric characterisitics
Vector graphics are made up of…?
many individual objects
Vectors:
Each of these objects can be defined by….?
mathematical statements and has individual properties assigned to it such as colour, fill, and outline.
Vectors:
They are resolution independent because they can…?
be output to the highest quality at any scale.
Vectors:
They are not restricted to…?
a rectangular shape like bitmaps.
Vectors:
Consist of lines and curves defined by..?
mathematical objects called vectors.
Vectors describe graphics according to..?
their geometric characteristics.
Vectors are…?
easily moved, resized copied, change properties without affecting quality.
Vector graphics are resolution independent…?
(Zoom in - still detailed)
Vector graphics are the best choice for…?
type (especially small type(, bold graphics, such as logos- Crisp, clear lines - easily scaled.
Examples of Vectors…?
- Fonts (True type, Adobe type 1)
- Illustrator (ai) / Freehand
- Flash
Primary disadvantage of vector graphics is that they’re…?
unsuitable for producing photo-realistic imagery
You can’t scan an image and save it as a vector file without using special conversion software.
vector images can, quite easily, be converted to bitmaps. This process is called…?
rasterizing.
The most common reason for wanting to convert a vector to a bitmap would be for…?
Use on the Web.
(At this time, there is not an established and accepted format for vector images on the Web, although things seem to be moving in that direction. We currently have Flash, a vector format that requires your viewer to have a plug-in, and the SVG will soon become a standard for vector images on the Web. Due to the nature of vector images, they have been best converted to GIF or PNG format for use on the Web.)
SVG…?
Two-dimensional vector graphic format created by the World Wide Web Consortium (W3C); developed as a standard format for displaying vector graphics on the Web; describes images using a text format that is based on XML.
The SVG format is an open standard developed under the…?
W3C (World Wide Web Consortium), with Adobe playing a major role. SVG images can be created and exported from Adobe Creative Suite programs, such as Illustrator and GoLive.
The SVG format is not natively supported by..?
Adobe Photoshop, Photoshop Elements, and InDesign. However, you can open SVG files in these programs using the SVG Kit for Adobe CS plug-in, which is developed by Scand.
Corel Graw and Corel Pintshop do support SVG .
Rasters (Bitmap):
Bitmap-based images are comprised of pixels in a grid. Each pixel or “bit” in the image contains…?
information about the location and colour to be displayed.
The resolution of bitmap images, such as…?
digital photographs, depends on both the display device and the inherent resolution of the bitmap image.
Examples of Rasters (Bitmap)…?
- Photoshop (PSD), Paintshop Pro,
- Tiff, BMP
- JPG, GIF - Web
Colour is a…?
vital component of multimedia.
Colour is the frequency of…?
a light wave within the narrow band of the electromagnetic spectrum to which the human eye responds.
ROY G BIV…?
Red Orange Yellow Green Blue Indigo Violet.
- is a popular mnemonic device used for memorizing the traditional optical spectrum
- ascending frequencies of the visible light spectrum
- Infrared below red and Ultraviolet is above the high end.
Human responses to colour is…?
complicated by cultural and experiential filters.
Emotions…?
Associations with yellow range from grace and nobility in Japan, to cowardice and caution in the United States, to happiness and prosperity in Egypt (Russo & Boor, 1993) Red in the west is a symbol of anger
Red in the east is the colour of happiness
Age…?
People of different generations have observable and often contrasting preferences in colour
Gender…?
In most cultures gender can greatly influence colour decisions
Fashion…?
colours fashions come and go (even on computer interfaces
A colour model is an abstract mathematical model describing…..?
the way colours can be represented, typically as three or four values or colour components.E.g RGB or CMYK
A colour gamuts is the range of…?
colours that a colour system can display or print. The spectrum of colours seen by the human eye is wider than the gamut available in any colour model.
The frequency of visible light is referred to as…?
color, and ranges from 430 trillion Hz, seen as red, to 750 trillion Hz, seen as violet.
There are two types of colour models, those that are…?
subtractive and those that are additive.
Additive colour models use…?
light to display colour.
Subtractive models use…?
printing inks.
Colour perceived in additive models are…/
the resoult of transmitted light.
Colours perceived in subtractive models are the result of….?
reflected light.
RGB…?
- Most of visible spectrum can be represented mixing three basic components of coloured light - Red, Green, and Blue
- Additive primary colours because adding
- 100% all colours together - white
- Commonly used when creating screen graphics
Other primary colours could in principle be used, but with red, green and blue the largest portion of the human colour space can be captured.
Mixtures of light of these primary colours cover a large part of the human colour space but will never be a perfect rep. of visual colour.
CMYK…?
The CMYK model is based on the light-absorbing quality of ink printed on paper. As white light strikes translucent inks, certain visible wavelengths are absorbed while others are reflected back to your eyes. Cyan, Magenta, Yellow, and blacK
HSB…?
Based on the human perception of colour.Three fundamental characteristics:HueSaturationBrightnessHue Wavelength of light reflected from or transmitted through an object.Name of the colour such as red, orange, or green.Location on the standard colour wheel Expressed as a degree between 0 degrees and 360 degrees.
Saturation,Strength or purity of the colour. Amount of grey in proportion to the hue Percentage from 0% (grey) to 100% (fully saturated).
BrightnessRelative lightness or darkness of the colour Percentage from 0% (black) to 100% (white).
Colour Gamuts…?
A gamut is the range of colours that a colour system can display or print. The spectrum of colours seen by the human eye is wider than the gamut available in any colour model.
CMYK (32bit)- print editing
RGB (24Bit)- Screen editing
Indexed (= 8bit)
Greyscale (8bit)
Bitmap (1Bit)
The RGB model displays a much larger percentage of the visible spectrum than the CMYK model and, as a result, has a wider gamut. Once an image has been converted from RGB to CMYK and brought into printable gamut, the extra RGB data will be lost.
Colour models
PCs…?
- Display colour using the RGB colour model
- This is why colour television sets or colour computer monitors need only produce mixtures of red, green and blue light.
Colour Models
Printing…?
Printing from a PC means colours have to be converted from RGB to CMYK and may not be a perfect representation
A monitor displays an…?
array of pixels referred to ask a bitmap.
Colour resolution measures the…?
number of bits of stored information per pixels.
Colour resolution is also called..?
pixel depth or colour depth.
Colour blindness, in humans is the inability to perceive differences between….?
some or all colours that other people can distinguish. It is most often of genetic nature, but may also occur due to exposure to certain chemicals.
Colour blindness in Australia(NZ)…?
8% (6%) of males 0.4% of females suffer.
In normal colour vision, green is…?
brighter than red, which is brighter than blue.
With some forms of “red-green colour blindness” the green is very slightly…?
brighter than the and the red is so dark it can barely be made out. Red traffic lights in bright daylight appear broken (no light). The green traffic light appears dirty white and hard to distinguish from night street lights
Greater bit depth (more bits of information per pixel) means…?
more available colours and more accurate colour representation.
Colour resolution ranges from..?
1-bit colour (2 colours) to 32-bit Color (16.7+ million colours)
In most cases, RGB, greyscale, and CMYK images contain…?
8 bits of data per colour channel.
Colour “depth” is defined by…?
the number of bits per pixel that can be displayed on a computer screen. 1 bit gives two colours (black and white) 2 bits give four colours 3 bits give eight colours 4 bits give 16 colours 8 bits give 256 colours 16 bits give 65536 colours 24 bits give 16,777,216 colours
Colour palettes are mathematical tables that…?
define the colour of pixels displayed on screen.
Colour Palettes:
Bitmap..?
(1 bit) (2x power of 1 = 2 colours) white Black & White
Colour Palettes:
16 Colour…?
(4bit) (2x power of 4=16 colours)
Colour Palettes:
Greyscale…?
up to 256 shades of grey
Colour Palettes:
256 Colour…?
(8 bit) OK for graphicsReasonable screen displayNot really good enough for editing graphics
Colour Palettes:
16 Bit 64K colours…?
Approx. 65535 cols (High Colour)Good screen display setting Pictures good quality, Slight Dithering
Colour Palettes:
24 Bit 16.7M colours…?
(True Colour)
(256 x 256 x 256)Editing & Creating images (RGB values)No dithering
Colour Palettes:
32 Bit…?
is a variation on 24 bit
Dithering is a technique used in computer graphics to create…?
the illusion of colour depth in images with a limited colour palette. In a dithered image, colours not available in the palette are approximated by a diffusion of colour pixels from within the available palette. The human eye perceives the diffusion as a mixture of the colours within it .Dithered images, particularly those with relatively few colours, can often be distinguished by a characteristic graininess, or speckled appearance.
Truecolor can frequently mimic many colours found in the real world, producing…?
16.7 million distinct colours. This approaches the level at which the human eye can distinguish colours for most photographic images, though image manipulation, some black-and-white images (which are restricted to 256 levels with Truecolor) or “pure” generated images may reveal the limitations.
24-bit Truefcolor uses 8 bits to represent…?
red, 8 bits to represent blue, and 8 bits to represent green. 28 = 256 levels of each of these three colours can therefore be combined to give a total of 16,777,216 mixed colours (256 x 256 x 256).
32-bit colour is a misnomer when regarding display color depth. In reality, 320bit colour actually refers to…?
24-bit colour (Truecolour) with an additional 8 bits either as empty padding space or to represent an alpha channel
Web Palette…?
- Standard set of 216 “safe” colours
- Colours may be specified as an RGB triplet in hexadecimal format
- Viewable on both Mac and PC
- No dithering
- Not as useful today with use of 16-bit+ monitors
Anti Aliasing…?
smoothes jagged edges,
the image on the right is anti aliased
Smoothes the jagged edges of a selection by softening the colour transition between edge pixels and background pixels. Since only the edge pixels change, no detail is lost. Anti-aliasing is useful when cutting, copying, and pasting selections to create composite images
File formats:
Codecs give us…?
file formats.
- Compression and decompression.
File formats:
Web…?
- GIF - Graphics Interchange Format
Limit to 256 colours - JPEG - Joint Photographic Experts Group
File formats:
Printed…?
- TIFF - Tagged-Image File Format
- EPS - Encapsulated PostScript®
TIFF…?
Tagged-Image File Format - Used for bitmaps only. The TIFF format is supported by virtually all graphics applications.
EPS…?
Encapsulated PostScript® - A file format used for both vector graphics and bitmaps. EPS files contain a PostScript description of the graphic data within them. EPS files are unique in that you can use them for vector graphics, bitmap images, type or even entire pages.
GIF (Graphics Interchange Format)…?
- Supports up to 256 colours
- GIFs that include interlacing appear blurry and sharpen as they are downloaded
- best for images with solid colours or areas of uniform colour such as illustrations and logos
JPEG (Join Photographic Experts Group)
- Supports millions of colours (24-bit)
- Uses a sophisticated mathematical model to produce a sliding scale of graphic compression that enables you to choose the degree of compression you wish to apply to the image
- Good for photos with lots of colours
PNG (Portable Network Graphics)…?
- One of the most flexible formats on the Web
- Uses compression to create small file sizes
- From 8-bit to 24bit truecolour
- PNG file format supports variable transparency that allows you to store up to 256 different levels of partial transparency and interlacing.
- Gamma correction capacity
Size vs Performance…?
- File size determined by image size and quality.
- Optimising refers to reducing file size by:
1 .Reduce colour resolution
2. Reduce image resolution to 72dpi
3. Resizing – reduce physical size
4. Cropping –remove areas
5. File format – choose the correct format for the image
Graphic Design - Interface…?
Multimedia productions need to be easy to use and intuitive
- Define control area (navigation) and stage area (content)
- Appropriate backgrounds and button graphics
- Use visual depth to indicate importance
- Keep it simple
Graphics Software…?
- Paint Programs
- Drawing Programs
- 3-D Modeling Programs
- Image Editing Programs
- Enhancement Programs
Paint Programs…?
- Paint programs create bitmapped images
- Paint programs allow you to edit images at the pixel level
- Enlarging an image too much may result in staircasing, or jaggies
- Most paint programs create geometric shapes, edit mistakes, add colours and textures, select a desired portion of your image
- Additional features vary by program
Drawing programs…?
- Vector graphics: Created and re-created from mathematical models
- Common drawing programs used today are Adobe Illustrator and FreeHand
- Adobe Illustrator contains different tools used to create a variety of fully editable shapes
3-D modeling programs…?
- 3-D modeling programs (also called rendering programs) used to create and manipulate 3-D images
- Geometric forms or wireframe models serve as basic building blocks
- Textures are applied or mapped to models to give them shadows and provide special effects
- Objects and lighting can be placed and manipulated to create realistic 3-D scenes
Image Editing Programs…?
- Manipulate digitized images using a variety of features that combine painting, editing, and other image composition tools
- Allow images to be cropped, colour corrected, the brightness and contrast adjusted
- Have layers which allow multiple images to be placed into the same document
- Ability to convert files from one format to another
Enhancement Programs…?
- Specifically for working with Web graphics and Web animation
- Optimizing: Process of making the image file sizes as small as possible for quick download via the Web
- Fireworks and Adobe ImageReady are examples
