Droddy

1. Principles of Digital Graphic Design Droddy

2. Pixels and Resolution • “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)

3. Resolution and Computers • 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.

4. FileTypes • 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

5. FileTypes • 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

6. FileTypes • 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

7. FileTypes • 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

8. FileTypes • 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

9. File Compression • 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 You Must Balance Quality and File Size In the use of Digital Media!

10. Image Management Programs • Two Types: Painting and Drawing • Painting Programs: • Create images using pixels • Photoshop is a painting program • Primarily used for photo editing and enhancement

11. Image Management Programs • 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.

12. Image Management Programs • 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

13. 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

16. Basic Design Principles • Repetition – repeating parts of the design throughout the project • Brings unity • Can be used with many elements: • Font • Colors • Etc

17. Basic Design Principles • 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

18. Basic Design Principles • 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

19. Basic Design Principles • Alignment – allows the eye to connect related elements • Left, right or centered • Line up related objects

20. Basic Design Principles • 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

21. Color Theory • 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

22. Color Theory • 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 blacKmix to form all the other colors

23. The Color Wheel • Organizes millions of colors. • Helps a designer make good color choices. • There is a different color wheel for Subtractive and Additive color.

24. Types of 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

25. The primary colors of the CMYK model create BLACK when mixed together. The primary colors of the RGB model create WHITE when mixed together. Secondary Colors • 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.

26. Complimentary Colors • 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

27. Split Complement • A three color palette • Uses one of the colors on the wheel and the two adjacent colors of its complement • Example:

28. Analagous Colors • Next to each other on the color wheel • Create harmony • Easy to use in design • Example:

29. Monochromatic Colors • Shades of the same color • Eye pleasing