Droddy

 “Pixel” is short for two words: Picture and Element. Pixels (tiny squares) combine to form the image the human eye perceives Too small for the human eye to distinguish Each pixel displays one color  Resolution is the number of pixels in an image More pixels = higher resolution Measured in ppi (pixels per inch) or dpi (dots per inch)

 The higher the resolution, the better the quality, however:  The higher the resolution the more memory it takes up and the longer it takes to download when viewed on the Web.  Most computer screens display at 72ppi.  Saving an image at a higher ppi will only waste memory, increase download time and will not be displayed at the higher resolution.

 JPG – Joint Photographic Experts Group (those who developed this file type) Used for photography (at very high res) and web (at lower res) Supports 16 million colors Compresses an image every time it is saved by throwing out subtle color changes (lossy compression) Good practice to keep an original of the image in case the image degrades below quality standards. Compression can be adjusted in this file type

 GIF (graphic interchange format) Efficiently compresses files Only 256 colors Best for images that have large areas of the same color Cartoons, logos, etc Lossless compression – compression without loss of quality. Used when an image has transparent parts Can be “animated” Good for Web due to small file size, Unsuitable for photographs

 BMP (bitmap) Not usually used on the Web but can be used for digital graphics A Microsoft Windows format used in the Paint Program, or used in word processing Sometimes clipart is saved as BMP Large File but limited to only 256 colors

 TIFF or TIF Large file sizes – too large for digital purposes Can be used in print Not compressed Displays 16 million colors Many scanners produces images as TIFF files Digital cameras can save in TIFF format

 PNG (Portable Network Graphics) Was designed to replace gif and jpeg (for digital purposes) files, but hasn’t done so yet Supported by some web browsers and is the native file type for Fireworks Compresses without loss of image quality and supports 16 million colors

 Compression – the process of reducing the file size of an image Often required in digital media to decrease load times Lossless – reduces the file size of an image without losing any pixel information Lossy – reduces the file size of an image by removing pixels that are not essential Greater compression = Quality loss

 Two Types: Painting and Drawing  Painting Programs: Create images using pixels Photoshop is a painting program Primarily used for photo editing and enhancement

 Drawing Programs: Create images using mathematically defined lines and curves – Vector Graphics Illustrator is a drawing a.k.a. vector program Can scale infinitely without loss of quality Vector Graphics - can be converted to other types of graphics  Common Vector Formats:.ai (Illustrator).fla (Flash).eps (Encapsulated Post Script – used in printing) Notice: These programs both incorporate drawing and painting tools. However, they specialize in one or the other.

 Each image management program has a file format specific to only that program, called its Native Format.  This is your working file. It is wise to always keep a copy of an image in its native format so it can be edited.  Adobe Illustrator:.ai  Adobe Photoshop:.psd  Adobe Flash:.fla  Adobe Fireworks:.png

Once a copy of an image has been saved in its native format, you can change to another file format by using Save As Sometimes you must Export to obtain a certain file type Different file formats are appropriate for different uses Some programs only import graphics with specific file formats Some images look better saved as one format over another Some images need to be small in order to load quickly on the Internet

Acronym File Format Extension Program Type BMPBitmap.bmpPainting TIFF or TIF Tagged Image File Format.tifPainting GIF Graphics Interchange Format.gifPainting JPG or JPEG Joint Photographic Experts Group.jpgPainting PNG Portable Network Graphics.pngPainting PSD Photoshop Document.psdPainting

Acronym File Format Extension Program Type CDRCorelDraw.cdrDrawing AI Adobe Illustrator.aiDrawing FLAFlash.flaDrawing WMF Windows Metafile.wmfDrawing EPS Encapsulated Postcript.epsDrawing

 Repetition – repeating parts of the design throughout the project Brings unity Can be used with many elements: Font Colors Etc

 Contrast – some elements of the design are created different from the rest Adds visual interest Creates a focal point Must be used sparingly and for elements you want to emphasize

 Proximity – grouping related elements together Eliminates confusion Helps create whitespace – a part of the project that is not taken up by images, text or other elements Allows the eye to rest Does not have to be white

 Alignment – allows the eye to connect related elements Left, right or centered Line up related objects

 Perspective – creating depth and viewing angle Linear perspective: the closer an element is in an image, the larger it is Atmospheric perspective: considers how objects look through air Objects in the foreground are in focus, clear and have more vibrant colors Objects in the background are less focused and less vibrant in color

 Color Models: Additive and Subtractive Additive (RGB): color model used for display screens such as computer screens and televisions Light is added from the source in order to see the color Hence the name additive color Red, Green and Blue mix to form all the other colors

Subtractive (CMYK): how we see color naturally and how printing colors are mixed Light reflects off of objects and some of the color is absorbed, or subtracted. We only see the colored light waves that are reflected Hence the name subtractive color Cyan, Magenta, Yellow and blacK mix to form all the other colors

 Organizes millions of colors.  Helps a designer make good color choices.  There is a different color wheel for Subtractive and Additive color.

 Primary Colors – the colors that cannot be mixed by mixing the other colors in the model. RGB – Red, Green and Blue CMYK – Cyan, Magenta, Yellow and Black  The center of the color wheel is the color made when mixing the primary colors of each color model. RGB – White CMYK - Black

 Made by mixing the primary colors  Found between the primary colors on the color wheel  The primary colors of the CMYK color model are created by mixing the primary colors of the RGB color model, and the reverse is also true. Therefore, the primary colors on the CMYK color wheel are found as secondary colors on the RGB color wheel. And Vice Versa. The primary colors of the CMYK model create BLACK when mixed together. The primary colors of the RGB model create WHITE when mixed together.

 Located directly across from each other on the color wheel  Used to create contrast in a design One complimentary color is dominant color One complimentary color is used as an accent

 A three color palette  Uses one of the colors on the wheel and the two adjacent colors of its complement  Example:

 Next to each other on the color wheel  Create harmony  Easy to use in design  Example:

 Shades of the same color  Eye pleasing