Digital Graphics Digital Graphics VocabularyVocabulary

Texas State UniversityTexas State UniversityCI5363CI5363Florence YangFlorence Yang

Graphic File FormatsGraphic File Formats Image TypesImage Types - Graphics programs often produce - Graphics programs often produce

their own file types, but any image can be saved or their own file types, but any image can be saved or exported as a common, widely-usable file types.exported as a common, widely-usable file types.

Different graphic file formats employ varying Different graphic file formats employ varying compression schemes, and some are designed to compression schemes, and some are designed to work better than others for certain types of work better than others for certain types of graphics.graphics.

BMPBMP - Bitmap (file extension “.bmp”). is an image - Bitmap (file extension “.bmp”). is an image file format used to store bitmap digital images, file format used to store bitmap digital images, especially on Microsoft Windows Paint.especially on Microsoft Windows Paint.

Graphic File FormatsGraphic File Formats GIFGIF - Graphics Interchange - Graphics Interchange

Format (file extension “.gif”). Format (file extension “.gif”). GIF files incorporate a GIF files incorporate a compression scheme to keep compression scheme to keep file sizes at a minimum, and file sizes at a minimum, and they are limited to 8-bit (256 they are limited to 8-bit (256 or fewer colors) color or fewer colors) color palettes.palettes.

JPEGJPEG - Joint Photographic - Joint Photographic Experts Group (file extension Experts Group (file extension “.jpg”). JPEG images are full-“.jpg”). JPEG images are full-color images (24 bit, or "true color images (24 bit, or "true color"). color").

Graphic File FormatsGraphic File Formats PNGPNG- Portable Network Graphics (PNG) is a bitmapped - Portable Network Graphics (PNG) is a bitmapped

image format that employs lossless data compression. It image format that employs lossless data compression. It supports palette-based (palettes of 24-bit RGB colors), supports palette-based (palettes of 24-bit RGB colors), grayscale or RGB images. PNG files can be used for grayscale or RGB images. PNG files can be used for animations in Flash. animations in Flash.

TIFFTIFF - Tagged Image File Format (file extension “.tif”). - Tagged Image File Format (file extension “.tif”). A type of image often used for print output. TIFF images A type of image often used for print output. TIFF images have larger file sizes that GIF or JPEG images.have larger file sizes that GIF or JPEG images.

WMFWMF - Windows Meta File (file extension “.wmf”). A - Windows Meta File (file extension “.wmf”). A type of image used for Windows clip art. WMF files are type of image used for Windows clip art. WMF files are vector images and can be resized without losing quality.vector images and can be resized without losing quality.

Color ModelColor Model CYMK CYMK - Cyan, Magenta, Yellow, and - Cyan, Magenta, Yellow, and

Key (Black). A subtractive color model, Key (Black). A subtractive color model, used in color printing, also used to used in color printing, also used to describe the printing process itself. describe the printing process itself.

RGB RGB - Red, green, and blue. An - Red, green, and blue. An additive color model uses in the additive color model uses in the sensing, representation, and sensing, representation, and display of images in electronic display of images in electronic systems, such as televisions and systems, such as televisions and computers.computers.

Color ModelColor Model HSB color HSB color - Hue, Saturation, Brightness, the basic colors are - Hue, Saturation, Brightness, the basic colors are

created based on the amount of light (brightness) and the created based on the amount of light (brightness) and the intensity of the color (saturation). Used in optical reproduction. intensity of the color (saturation). Used in optical reproduction.

HueHue - Hue is defined as the - Hue is defined as the variation of the variation of the tinttint or or shadeshade of a of a color. color.

Saturation - Saturation - The amount of a The amount of a primary color applied on any primary color applied on any specific area.specific area.

Brightness Brightness - The amount of light - The amount of light that a color allows to pass through, that a color allows to pass through, also called luminosity.also called luminosity.

Color ModelColor Model Primary color Primary color - The sets - The sets

of colors can be of colors can be combined to make a combined to make a useful range of colors. useful range of colors.

Secondary color Secondary color - - Any color mixed from Any color mixed from two primary colors. two primary colors.

Tertiary color - Tertiary color - Any Any color mixed from a color mixed from a secondary and a secondary and a primary color. primary color.

Color ModelColor Model

Analogous color Analogous color – Colors next – Colors next to each other on the color to each other on the color wheel. They usually match well wheel. They usually match well and create serene and and create serene and comfortable designs.comfortable designs.

Complementary colorComplementary color- Two colors - Two colors that are opposite on the color wheel.that are opposite on the color wheel.

Color ModelColor Model If a color is made lighter by adding white, the If a color is made lighter by adding white, the

result is called a result is called a tinttint..

If black is added, the darker version is called a If black is added, the darker version is called a shadeshade. .

If gray is added, the result is a different If gray is added, the result is a different tonetone..

Information UnitsInformation Units File sizeFile size - The amount of memory used to store the - The amount of memory used to store the

file. For example, an image that has the file size of file. For example, an image that has the file size of 570k uses 570 kilobytes of memory.570k uses 570 kilobytes of memory.

BitsBits - The smallest possible unit of information in - The smallest possible unit of information in any digital system expressed either as 0 or 1. (short any digital system expressed either as 0 or 1. (short for binary digit)for binary digit)

BytesBytes - A unit of binary information consisting of - A unit of binary information consisting of eight bits. One Byte represents one character or eight bits. One Byte represents one character or number.number.

Information UnitsInformation Units Kilobyte (Kb) Kilobyte (Kb) - A unit of digital information storage - A unit of digital information storage

equal to either 1,024 bytes or 1,000 bytesequal to either 1,024 bytes or 1,000 bytes

Megabyte (Mb)Megabyte (Mb) - A unit of measurement for computer - A unit of measurement for computer memory 1Megabyte = 1,048,576 bytes, or 1,024 Kb.memory 1Megabyte = 1,048,576 bytes, or 1,024 Kb.

Gigabytes (Gb) - Gigabytes (Gb) - A unit of measurement equal to A unit of measurement equal to 1,024 megabytes. Typically, a storage device capable 1,024 megabytes. Typically, a storage device capable of holding a gigabyte or more of information is a mass of holding a gigabyte or more of information is a mass storage device.storage device.

Gb > Mb > Kb > Bytes > BitsGb > Mb > Kb > Bytes > Bits

Graphics VocabularyGraphics Vocabulary Aspect ratioAspect ratio – The ratio between – The ratio between

the width and height of a film the width and height of a film image. image.

Two common video graphic aspect Two common video graphic aspect

ratios are 4:3 (1.33:1), universal for ratios are 4:3 (1.33:1), universal for standard-definition video formats, standard-definition video formats, and 16:9 (1.78:1).In still camera and 16:9 (1.78:1).In still camera photography, the most common photography, the most common aspect ratios are 4:3 and 3:2.aspect ratios are 4:3 and 3:2.

Graphics VocabularyGraphics Vocabulary Bit-mapped graphicsBit-mapped graphics - An image comprised of - An image comprised of

pixels, where the computer program must reproduce pixels, where the computer program must reproduce each pixel in the correct location and in the correct each pixel in the correct location and in the correct color and brightness to create a picture.color and brightness to create a picture.

Color DepthColor Depth - The number of colors in an image, - The number of colors in an image, ranging from 2 to 16.7 million. The more colors in an ranging from 2 to 16.7 million. The more colors in an image, the larger its file size.image, the larger its file size.

CompressionCompression - Shrinking the size of an image file by - Shrinking the size of an image file by lowering the resolution or decreasing the color depth.lowering the resolution or decreasing the color depth.

Graphics VocabularyGraphics Vocabulary AscenderAscender- The part of any letter that extends - The part of any letter that extends

above the "x" height. An example is the top of the above the "x" height. An example is the top of the “S” and "h".“S” and "h".

DescenderDescender- The part of any letter that drops - The part of any letter that drops below the baseline. An example is the bottom of a below the baseline. An example is the bottom of a “p". Watch for decenders falling into the type “p". Watch for decenders falling into the type ascenders on the next line below.ascenders on the next line below.

Graphics VocabularyGraphics Vocabulary Anchor point Anchor point - In Photoshop, the small squares - In Photoshop, the small squares

on a vector line path that can be grabbed and on a vector line path that can be grabbed and used to move the line or to change its direction. used to move the line or to change its direction. A vector line will have an anchor at each end.A vector line will have an anchor at each end.

Bezier curve – A mathematically A mathematically

defined curve made up defined curve made up of four points, two ends of four points, two ends and two in between, and two in between, which affect its shape.which affect its shape.

Graphics VocabularyGraphics Vocabulary

VectorVector - A term given to a graphic drawing, - A term given to a graphic drawing, specified as a color, start and end point, and specified as a color, start and end point, and applied to line segments, type and tints.applied to line segments, type and tints.

Raster imageRaster image - A - A collection of pixels or collection of pixels or dots. A raster image of dots. A raster image of a line is stored in a a line is stored in a bitmap that contains bitmap that contains information about each information about each pixel in the display.pixel in the display.

*The image is retrieved from: http://www.edc.uri.edu/criticallands/raster.html

Graphics VocabularyGraphics Vocabulary Drop ShadowDrop Shadow - A - A

graphic art effect graphic art effect designed to simulate the designed to simulate the shadow cast by three shadow cast by three dimensional shapes.dimensional shapes.

DodgeDodge- A darkroom - A darkroom technique adapted to technique adapted to Photoshop wherein a Photoshop wherein a select area of a photo is select area of a photo is lightened.lightened.

* The “Dodge” image is retrieved from: http://multimedia.journalism.berkeley.edu/tutorials/photo/photoshop/dodgeburnspot/

Graphics VocabularyGraphics Vocabulary GradientGradient - A smooth spread between colors. - A smooth spread between colors.

GrayscaleGrayscale - Commonly referred to as “black - Commonly referred to as “black and white.” An output option for images in and white.” An output option for images in only shades of gray.only shades of gray.

Original

Blue Gradient

Grayscale

Graphics VocabularyGraphics Vocabulary KerningKerning- The spacing between letters. Graphic - The spacing between letters. Graphic

designers often must adjust kerning because designers often must adjust kerning because automatic word processors will give too much automatic word processors will give too much space between thin width letters (i, l, j) and not space between thin width letters (i, l, j) and not enough space between wide width letters (o, m, enough space between wide width letters (o, m, w, etc). w, etc).

Example: She had a hard Example: She had a hard li feli fe. (the kerning . (the kerning between the i and the f needs to be adjusted)between the i and the f needs to be adjusted)

Layering - Layering - The process of placing one image on The process of placing one image on top of another and eliminating the lines top of another and eliminating the lines underneath.underneath.

Graphics VocabularyGraphics Vocabulary Mask - Mask - A temporary stencil restricting the action A temporary stencil restricting the action

of various functions to a selected area within the of various functions to a selected area within the picture or page. Masks can be created by drawing picture or page. Masks can be created by drawing points around an element or automatically by points around an element or automatically by specific density or hue values.specific density or hue values.

OptimizationOptimization – The application of various kinds of – The application of various kinds of compression to an image to cause it to decrease in compression to an image to cause it to decrease in file size.file size.

PixelPixel - An individual dot of color in a digital image. - An individual dot of color in a digital image. Each pixel’s color and characteristics are stored as Each pixel’s color and characteristics are stored as digital code.digital code.

Graphics VocabularyGraphics Vocabulary RasterizationRasterization - The - The

task of taking an image task of taking an image described in a vector described in a vector graphics format graphics format (shapes) and converting (shapes) and converting it into a raster image it into a raster image (pixels or dots) for (pixels or dots) for output on a video output on a video display or printer, or for display or printer, or for storage in a bitmap file storage in a bitmap file format.format.

*The image is retrieved from: http://beeex.net/web-development/generators/web-based-rasterized-image-generator

Graphics VocabularyGraphics Vocabulary ResolutionResolution – The amount of clarity and detail shown in – The amount of clarity and detail shown in

the image. Resolution can be measured in bitmap the image. Resolution can be measured in bitmap images by determining the amount of pixels (dots) per images by determining the amount of pixels (dots) per inch, also called DPI.inch, also called DPI.

SolarizationSolarization - A special effect to make color changes - A special effect to make color changes by reducing the number of available colors from 16 by reducing the number of available colors from 16 million to 10-100 in discrete steps.million to 10-100 in discrete steps.

SlantSlant - To incline an object, either horizontally, - To incline an object, either horizontally, vertically, or both.vertically, or both.

SmoothSmooth - To blur or defocus color or an element. - To blur or defocus color or an element.

ReferenceReference http://www.tigercolor.com/color-lab/color-theory/color-

theory-intro.htm

http://en.wikipedia.org/wiki/Main_Page

https://www.killeenisd.org/schools/high/harkerheights/ataylor2.html

http://www.teamphotoshop.com

http://webstyleguide.com/