Understanding Color Fundamentals in Graphic Design
Delve into the basics of color theory essential for graphic design. Learn how additive and subtractive colors work, the significance of CMYK in printing, and the various color modes in Photoshop. Gain insights into creating vibrant designs by mastering color management techniques.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
PRINT & WEB GRAPHICS FUNDAMENTALS MODULE 2
Additive Color: Color On screen It takes just three red, green, and blue to produce all the colors you see onscreen. So to create color, monitors add individual pixels of colored light. In the additive color system, areas where red, green, and blue light overlap appear white RGB
Subtractive Color: Printed Color Colors result from a combination of light that s reflected (which you see) and light that s absorbed (which you don t see). A mix of cyan, magenta, and yellow ink absorbs most of the primary colors red, green, and blue so you see what s left over: dark brown. CMYK
CMY + K =? In order to produce true black, grays, and shades of color (colors mixed with black to produce darker colors), printing presses added black as a fourth printing ink. B for black might be confused with blue (as in RGB), so K is used instead as in blacK. That s where the abbreviation CMYK comes from.
CHOOSING A COLOR MODE File Menu > New
Unless you choose a different color mode, Photoshop automatically uses RGB. The Color Mode menu gives you the following options: COLOR MODE WHEN TO USE IT For images destined for onscreen viewing or inkjet printing RGB Color For images you plan on sending to a commercial printing press CMYK Color Restricts you to two colors: black and white. Good for high-contrast items like black-and-white text documents or creating graphics for handheld devices that don t have color Bitmap
Expands on Bitmap mode by adding shades between pure black and pure white. The higher the document s bit depth, the more shades of gray. Grayscale Based on the way we see color, it lets you use all the colors human eyes can detect. Whereas RGB and CMYK modes limit a file s colors to what s visible onscreen or in a printed document, respectively. Lab Color
TRANSLATING COLORS FROM SCREEN TO PRINT
WYSIWYG WYSIWYG (pronounced wiz-e-wig ) is an acronym for What you see is what you get. It describes the elusive goal of getting prints to match what s onscreen.
COLOR ACCURACY The only way to achieve consistent printing results is to know: which printer your image is headed for, which color mode that printer wants the image to be in, which range of colors that printer can reproduce, and exactly what type of paper you re using.
Color Gamut A color gamut is the range of colors a given device can reproduce While the color ranges of monitors and printers frequently overlap, they re never identical.
Color Profile A color profile is a set of instructions that determine how computer monitors and printers display or print your document s colors. Color profiles contain detailed info about the printer s color gamut and, in some cases, the paper you re using, though usually that info lives in a separate file called a paper profile.
Common Generic Color Profiles Photoshop comes with a variety of all-purpose, generic profiles, but you can also get profiles from the printer and paper manufacturers. Paper Output Profiles Created by manufacturers like Epson, who make profiles to match almost every kind of paper they sell: glossy, luster, matte, and so on
The default color profile is set to sRGB IEC61966-2.1. Leave this setting alone unless you know you need to use a specific color profile for your project; EDIT MENU > COLOR SETTINGS
Monitor Calibration To ensure accurate prints, it s also important to make sure your monitor is displaying color accurately. All computers come with a built-in calibration program For best results, use an external measuring device like a colorimeter or spectrophotometer (hand- sized gadgets that clamp onto your monitor and measure the color it displays) instead.
The calibration process involves adjusting your monitor so that it displays a series of colors and images consistently. Having a calibrated monitor also lets you more accurately preview how images and colors will print External Calibration device
Calibrating in Windows 1. Open Display Color Calibration by clicking the Start button Picture of the Start button, and then clicking Control Panel. 2. In the search box, type calibrate display, and then click Calibrate display color. 3. In Display Color Calibration, click Next to continue.
THE COLOR CHANNELS
At the heart of any Photoshop file lie channels storage containers for all the color information in your image, selections you ve saved, masks you ve created, and instructions for printing with special inks.
RGB CHANNELS CMYK CHANNELS
KINDS OF CHANNELS Composite channels Technically, these aren t really channels; they re combinations of channels and are for your viewing pleasure only.
KINDS OF CHANNELS Alpha Channel Grayscale representations of a temporary selection you re in the process of making using Quick Mask mode, or a selection that you ve saved in your Photoshop document.
KINDS OF CHANNELS Spot Channel Used only in commercial printing, these channels let you define areas in your image that should be printed with special premixed inks (like Pan-tone colors)
DISTINGUISHING FILE FORMATS
FileSave Mac: press -S PC: Ctrl+S on a PC The Save As dialog box lets you save a copy of your file with a different name in a different location and in a different format.
PSD (Photoshop Document) Adobe Photoshop s native format that keeps all your layers and Smart Objects intact in case you need to go back and change them later. This is the format you want to use while editing images.
PRINT OUTPUT FILE FORMAT TIFF (tagged image file format) WHEN TO USE Considered the print-safe gold standard, and works with almost any program. Saving a file in this files format doesn t compress it, so the quality remains as good as that of the original. While it can compress files, it doesn t do so automatically, which makes it perfect for images you plan to print, plus it preserves the smooth edges of vectors. And if you need to email the file or upload it to an online print company, PDF is a better choice than TIFF because PDFs were designed for online use. PDF (portable document format) Ideal for multitonal image (Printing Duotone (Multitonal) Images) or one with spot colors EPS (Encapsulated Postscript)
WEB OUTPUT FILE FORMAT JPEG (joint photographic experts group) WHEN TO USE Commonly used for graphics that include a wide range of colors, like photos. It compresses images so they take up less space, but the smaller file size comes at a price: loss of quality. Use GIF for images with solid blocks of color. If you re dealing with line art or images made from areas of solid color (logos, comic strips, and so on). GIF (graphics interchange format) PNG (Portable Network Graphics) WBMP (Wireless Bitmap) Use PNG for super high-quality files. If quality is more important than download speed, save your image as a PNG. It also offers true transparency and better image quality than a JPEG, but it generates larger files. Use for black-and-white images headed for mobile devices. If you re designing black-and-white images for handheld devices (cell-phones, smart phones, and so on), choose WBMP.
*Note on transparencies Use GIF or PNG for images with transparent backgrounds. Use one of these formats when you want a graphic (a logo, say) to blend seamlessly into the background of a web page.
IMAGE RESAMPLING: COMPRESSION AND INTERPOLATION
RESAMPLING Resampling is the process by which Photoshop responds to your size-change request by either adding or subtracting pixels.
TWO KINDS OF RESAMPLING Downsampling To make an image smaller, you have to decrease its pixel dimensions. Upsampling When you upsample, Photoshop adds pixels that weren t originally there through a mathematical process called interpolation, in which it uses the pixels that are there to guess what the new ones should look like.
Resampling through the IMAGE SIZE dialog box
RESAMPLING ON which tells the program to increase or decrease the number of pixels in the image processes that reduce image quality because Photoshop either invents pixels or picks ones to eliminate, respectively.
RESAMPLING OFF protect the image s quality by locking the pixel dimensions. This lets you fiddle with the resolution without altering the quality because you re just changing pixel size, not pixel quantity.
Original Image Resampled Image
THE PHOTOSHOP ENVIRONMENT Part 2
Application Frame When you launch Photoshop CS6 for the first time, you re greeted by the Application Frame. This frame confines all things Photoshop to a single resizable and movable window.
Options Bar Lording over the document window is the Options bar, which lets you customize the behavior of nearly every item in the Tools panel. This bar automatically changes to include settings related to the tool you re currently using.
Screen Modes Photoshop includes three different screen modes for your document-viewing pleasure. Depending on what you re doing, one will suit you better than the others.
Standard Screen Mode Full Screen Mode With Menu Bar Standard Screen Mode
Panels The right side of the Application Frame is home to a slew of small windows called panels (years ago, they were called palettes), which let you work with commonly used features like colors, adjustments, layers, and so on. You re free to organize the panels however you like and position them anywhere you want. Panels can be free floating or docked (attached) to the top, bottom, left, or right sides of your screen. And you can link panels together into groups, which you can then move around.
Grouping Panels Drag to unto each other to group
Tools Panel The Tools is the home base for all of Photoshop s editing tools, and it s included in all the built-in workspaces. When you first launch the program, you ll see the Tools panel on the left side of the screen, but you can drag it anywhere you want by clicking the tiny row of vertical dashes near its top
