Introduction to Color Theory – File Formats

1. Introduction to Color Theory – File Formats Introduction to Photoshop

2. Color Management • RGB- A large percentage of the visible spectrum can be represented by mixing red, green and blue light in various proportions and intensities. • Creation of RGB is done with light. • Colors created by light are used for computer monitors, video and lighting. • RBG colors combine to create white. RGB colors are therefore known as “additive” colors. This means when all colors (of light) together, it results in a white color (opposite of paint and other physical pigments, which combine to create black). • A computer monitor is capable of displaying millions of colors. • By default, Photoshop is set up in RGB mode, which is appropriate for the work created in this class.

3. Color Management, cont. • CMYK- stands for cyan, magenta, yellow and white. These colors are created when red, green and blue (RGB) colors overlap. • CMYK describe colors as they appear in print, meaning paper and color ink. • CMYK is known as a “process color” referring to the process of creating color on paper. • CMYK is called “subtractive” colors because in theory, combining the color pigments should absorb all color and produce black. • Based on the light-absorbing quality of ink printed on paper. As light strikes translucent inks, part of the spectrum is absorbed, while other parts are reflected back to your eyes.

4. Color Management, cont. • CMYK- needs to add black ink to produce a pure black color: • Combining these pigments actually produces a muddy brown • Black ink is added to create the true black color • Black is identified with a “K” to avoid confusion with blue • Correct color output is dependent on your monitor and printer. • Results may vary between products produced by different manufacturers • Calibration is necessary on output devices • Photoshop has a sophisticated color management system to unify the results (see online help)

5. Color Printing • You can work in RGB and print in CMYK. • One way to by creating a proof profile • Proof profile is a “soft-proof” • Creates a close onscreen representation of what an image will look like when it is printed • View- Proof Setup- Custom • Your professional printer will give you their requirements • If you don’t know the printer, choose the profile: • Working CMYK- U>S> Web Coated (SWOP) v2 for generally good results. This is a commonly chosen default setting. • A second way is to create a CMYK EPS file • This automatically converts RGB to CMYK • This creates a new output file using the CMYK settings

6. Printing Color Separations • By default, Photoshop prints a composite image. This is also called a color composite. • It is a single print that combines the red, green and blue channels (channels is a way to identify each color) to show what the final image will look like. • When you print color separations, Photoshop prints a separate sheet, or “plate,” for each ink. • You need to instruct Photoshop to print color separations in the Print dialog box: • Color Management area- Color Handling- Separations • Photoshop will then print a CMYK images with four plates, one for each color process (or 4 sheets of paper) • Again, your professional printer will provide you with their recommended settings and procedures.

7. Color Mode • RGB Color is the color mode you’ll use the most in this class, and it’s also the one your monitor, digital camera and scanner use to represent colors. This mode shows colors as a mix of red, green, and blue light, with each having a numeric value between. • Black & White. This bitmap restricts you to two colors: black and white. This mode is useful when you’re scanning high-contrast items like black-and-white text documents or creating graphics for handheld devices that don’t have color screens. • Grayscaleexpands on Bitmap mode by adding shades between pure black and pure white. The higher the document’s bit depth, the more shades of gray—and so the more details—it can contain. • 8-bit documents include 256 shades of gray

8. Color Theory

9. Color Wheel

10. Image Resolution • The Resolution field controls the number of pixels per inch or per centimeter in your camera image and/or your Photoshop file. • High-resolution documents contain more pixels per inch than low resolutiondocuments of the same size. • Resolution guidance: • 72 ppi- If you’re designing an image that will be viewed only onscreen (in a web browser or a slideshow presentation, for example) • 150-240 ppi- If you’re going to print the image at home • 300+ ppi- if it’s headed to a professional printer

11. Influences on Graphic Quality • Resolution- is the quantity of pixels • Low quality for use on a computer screen – 72 ppi • Higher quality is needed for print – 150+ ppi • Bit-depth- is the quantity and quality of color stored in pixels • 1-bit (2 colors) • 8-bit (256 colors) • 24-bit (16.7 million colors)

12. Bit Depth

13. 1-bit Color

14. 8-bit Color

15. 24-bit Color

16. 24-bit Color Composite

17. File Formats- Most Common

18. JPEG Graphics • 24-bit depth storage • Best for continuous tone images (photographs) • Lossycompression- detail is lost when the file is compressed • Does not support transparent backgrounds • Image must decompress to view • Slows download speed

19. GIF Graphics • Created by Compuserve • Up to 8-bit depth storage- typically used for computer-generated line art with larger amounts of solid color • Lossless compression • Use LZW compression

20. TransparentGIF Regular GIF Transparent GIF

21. Animated GIF

22. PNG Graphics Newest W3C endorsed Continuous tone colors with up to 32-bit depth storage Lossless compression Supports transparent backgrounds

23. Raster Images • Raster images are made from pixels, tiny blocks of color that are the smallest elements of a digital image. The number of pixels in an image depends on the device that captured it (a digital camera or scanner) or the settings you entered when you created the document in Photoshop. • The size of the pixels depends on the image’s resolution, which specifies the number of pixels in an inch. Usually pixels are so small that you can’t see them individually; but, if you zoom in on a raster image, the pixels get bigger and the image starts to look like a bunch of blocks instead of a smooth image. • Raster images file types, include but not limited to: • .jpg • .gif • .png • .tiff

24. Digital Image Varieties • Raster (Bit-mapped images) • Raster graphics are the common output of painting software, scanners and digital cameras • Created from square picture elements – pixels • Picture made of individually addressed pixels (bitmapped) • Disadvantage is they contain a fixed number of pixels and can lose detail and appear jagged when scaled up on a monitor or printed at a lower resolution than they were created for.

25. Vector Images • Vector images are made up of points and paths that form shapes; these shapes are then filled and stroked (outlined) with color. • Paths are based on mathematical equations that tell monitors and printers exactly how to draw the image. Because there aren’t any pixels involved, you can make vector images as big or small as you want, and they’ll still look as smooth and crisp as the original. They can also be moved and have their colors changed and still remain as crisp as the original image. • In Photoshop CS6, you can create vector images easily in drawing programs such as Adobe Illustrator. • Photoshop can open vector images, but unless you open them as Smart Objects, Photoshop will turn them into pixel-based raster images through a process called rasterizing.

26. Vector Graphics • Vector (Object Oriented Images) • Lines, arcs and shapes • Created in many drawing programs • Stores as an algorithm describing the shapes, sizes and orientations • Advantages • Disadvantage

27. Common Vector Formats • Vector Graphics • Saved as algorithms. • Small file size. • Scalable. Offers great flexibility for resizing, printing and displaying graphics. • Common file types: • .ai • Created in Adobe Illustrator • .cdr • Created in Corel Draw version X6 • .swf • Created in Adobe Flash