| May. 26th, 2010 @ 11:39 am Digital Color Gamuts and File Types |
|---|
Recently, I have been seeing a lot of questions and confusion about two specific areas of digital creation, Color Gamut/Mode and File Type. I figure, since I teach this subject at CCS, I should really put together a journal! So here it is! It takes me an entire college semester to explain these two worlds in full to my students, but I'll try to sum up quickly here. First of all, most colleges offer a course like this as "Color Theory", because at the end of the day, that's what all this is, a theory. Even though the following "rules" apply very even-handedly across all instances, there are a few anomalies and odd situations where the facts don't hold up. That being said, please take the below as a Standard Guide on these items, and not an unbreakable truth. New technologies are always re-inventing what computers can and cannot do, as is true with file formats etc. But for 2010, I think the below list is pretty safe and has served me well over the past 15 years or so.
"Color Mode" [Image > Mode]
Color Mode can be tricky to understand, because most artists see color as just color. The computer, however, sees color as mathematical uses of ink (or light). In the computer world, we refer to the entire range of color as its "gamut". There are four basic types of color gamuts (color ranges) within all computers: RGB, CMYK, Hexidecimal, and Brand Name (or "Book of Color", i.e. Pantone). There are also many sub-categories of color gamuts within these (Duotone, Index, etc), but these are highly specific and are only really used by professionals for very specific needs. (If you want more info, PM me).
Color Gamuts are separated also by two very extreme differences (which is where your problem is coming from): The world of PRINTED color (ink), and the world of DISPLAYED (light) color. Here are some of the basic uses of each:
RGB Color Gamut
Starting with the largest Color Gamut, we have RGB. RGB stands for Red Green Blue, which is a light-based color system. Since light is a "subtractive" system*, the more colors you bring together, the closer you get to White. For this reason, the three primary colors to the world of LIGHT are Red Green and Blue (which are different than the three primary INK colors we all grew up with, which are the familiar Red Yellow and Blue). Since RGB is a world defined by LIGHT, it is practically unlimited. (Some sources will say there are roughly 128 Million "known" RGB colors, but theoretically RGB is infinite). Since RGB is so vast, you can get colors like neon Pink or Green, or brilliant Blues and Purples. And since these colors are being displayed on your monitor, TV, iPhone etc, they appear clean and bright. However, once you try to print these colors (or save to the wrong File Type), they become muddy or grey. That is because all printed things using physical inks are restricted to a much smaller world of color, the CMYK Gamut.
*Some sources like Wikipedia will call RGB an "additive" process because you are adding the colors together to get the new color. But while you may be physically adding the colors together the resulting colors become lighter than their originals, so the process is technically Subtractive, since the color seems to be getting paler.
CMYK Color Gamut
The CMYK (Cyan, Magenta, Yellow, Black*) color gamut is exactly opposite of RGB. Where RGB has almost limitless color, CMYK is very tiny (it only contains roughly 200 Thousand colors). This is because physical inks just cannot get as bright as light-based colors like Neon Pink. Even fluorescent inks are pale compared to the potential of light-based colors. Where RGB relies on light to make colors really pop, CMYK inks have only the paper they're printed on. And no paper anywhere shines like a monitor. Another major difference between RGB and CMYK is that where RGB is a "subtractive" process of mixing color, CMYK is "additive". This means that when you mix CMYK colors together, they become darker. Think about when you mix paints together; the result is always darker than what you started with. Technically, if you were to mix C, M, Y, and K together, you would get a very dark black. (Often referred to as Rich Black). By contrast, if you were to mix R, G and B together, you would get pure white. Since CMYK is a vastly, vastly smaller color gamut than RGB, anything that was created in RGB and converted/printed as CMYK will become darker, muddier, and a bit duller.
Here's a Photoshop tip: Two things you can do when painting in RGB from within Photoshop to make sure your colors are print-safe:
First, when you're choosing a color in the the Color Picker, stay away from the upper right-hand corners. These areas contain the super bright colors that ink simply cannot match. When you pick a color and you see the little yellow warning triangle with the "!" inside, that symbol is letting you know that the selected color cannot be printed (and will appear notably duller if you try). When this icon appears, a tiny color box will appear beneath it. This is Photoshop's recommendation for the closest printable color to the "out of gamut" color. You will note that this recommended color is usually much bleaker than your original choice, so some considerable compromise is due.
Second, while you're painting, turn on the Gamut Warning option [View > Gamut Warning]. This will show all problem colors as grey. All this means, is that if you convert/print the image, all of the grey areas will become dull or muddy. (Using the Gamut Warning option does not actually change your colors, it just highlights them). If you turn Gamut Warning back off, the grey will disappear. Please note that this option does not actually modify or repair your colors, it's simply a tool of observation. If you find you have a lot of "problem colors" in your image, there is no simple push-button fix for this. RGB is RGB and CMYK is CMYK. There is nothing in between, so you would have to go through and repaint the problem areas with proper, print-safe CMYK colors. As an aside, bright color does not equal great color. If you find yourself distressed because the colors are not bright enough, try reconsidering your palette and approaching the tones differently. In my opinion, super bright colors are a false way of adding impact to an image.
*They used "K" for Black because "B" refers to Blue in other systems. Incidentally, "K" is a universal symbol for Black.
Hexidecimal (Index) (Web Safe RGB) Color Gamut
Within the vast world of RGB, there resides a specific cluster or colors reserved specifically for the Web. These colors are commonly referred to as Index or Web-Safe colors. The only difference between RGB and Web-safe RGB is the purpose. Since websites are created to be seen by essentially the entire world, they are therefore designed for the lowest-common denominators. Things like screen resolution, operating system, browser type, fonts, and even color. Since not all computers have state-of-the-art graphics cards, and since not all computers are calibrated to display color the same way, many colors will not display correctly. Blue may appear as purple, red may appear as pink, etc. Not to mention super-subtle hues may not even appear at all. So to make sure that your web graphics have the strongest chance of appearing at their best, a sub-set of RGB colors have been pulled aside and identified as the most-likely to display ideally under all circumstances. These are the Web-safe RGB colors. And like CMYK, the Web-safe RGB gamut is only a fraction of true RGB, so many colors will not work or even appear at all.
The term "Hexidecimal", the true name for Web-safe RGB and Index, comes from the six-digit mixture that the computer uses to create the color. For example, "FFFFFF" is white, "FF0000" is red, etc.
Color-Book (Brand-Name) Color Gamuts
Lastly, in much the same way that most computer monitors are not calibrated the same way, neither are printers. Even über-expensive printers are not the same from print house to print house. Magenta may appear very pink in one location, and very orange at another. Not only do printers differ by location, they also differ by print run. As a professional, if you print a brochure and it comes out blue the first time, and then purplish the second time, this is a huge problem. What if I print it here in America, and then again in Japan? Major color differences. Just as Web-safe RGB sets a standard for monitor colors, Color Book Colors (like Pantone) set the standard for printing colors. Essentially, these colors are nothing more than cans of pre-mixed inks that are sold to the print houses so that when you print using Pantone 485 (Coca-Cola Red) in Japan, it will be identical to Pantone 485 in Germany. Of course, since these colors are pre-mixed (and very expensive), you do not paint with them. They are used for logos and other design projects where you only need 2 or 3 colors to be consistent every time.
File Types
So what are file types? We're all familiar with the three-letter suffixes that come after the period on virtually every file on a computer, but what does that mean? Well in the world of graphics, these are indicative of two things: software proprietorship, and compression method. "PSD" for example, stands for "Photoshop Document" and is the exclusive ownership of Adobe. "JPG" stands for "Joint Photographic Experts Group", and thus reflects the name of the company that developed the compression method that makes a JPG a JPG.
Essentially, every file type is a compression technique used to deliver visual content. Some file types are non-destructive ("raw" or "lossless") compression like RAW, TIF, TGA or PSD. Others are variably destructive to a file (or, "lossy") such as JPG, PNG or GIF. Make no mistake about it, anytime you compress a file (by saving as one of these formats) you are harming your file. And once a file has been compressed (say, from a PSD to a JPG), anything that was cut out is gone forever and cannot be retrieved, which is why it is best to save important files in several formats. I personally always save files in three formats:
• PSD — The most reliable, this is my highest-quality working file that I can edit and archive.
• TIF — Making sure LZW compression is turned off and CMYK is on, this is my flattened, high-resolution print-ready file.
• JPG — This is my low-quality file that I use for emailing proofs for approval and posting to online portfolios.
The biggest mistake most artists make, is choosing the wrong File Type to save your work. Just like with Color Gamuts, every File Type is vastly different than the others. Listing the common File Types in order from Highest Quality to Lowest Quality†:
• PSD — Largest file size, no compression.
• TIF — Large file size, little to no compression
• JPG — Midrange file size (depending on compression setting)
• PNG — Midrange file size (depending on compression setting)
• BMP — Midrange file size, heavy compression
• GIF — Smallest file size*, heavy compression, Index color only
†The suggestions are recommended with a context of Photoshop, and within the context of common everyday use for most illustrators. The "correct" file type will ultimately be determined by your OS, style and application, the unique job requirements and the environment for that work.
PSD files are the strongest file type you save to/work with, because it saves everything: colors and ICC profiles, layers, paths, channels, etc. You lose no quality with this type. PSD files should be used as working files, and are not good for anything but Photoshop.
TIF files are my next best option because they retain color information and quality for every pixel of your image. Photoshop recently started allowing you to save layers, paths, etc with a TIF file, but I would not recommend it. Also, turn "LZW" compression off. Keeping it on makes it a glorified JPG, and compresses color information. TIF files should be used as archival files and for printing when quality is important. They may be saved with CMYK, RGB or Pantone, and are not good for the web.
JPG files are varied is size and purpose, depending on their settings. A JPG saved with low compression (Level 12) result in high-res files with very little loss. Files saved with heavy compression (Level 1) will result in horrible quality but smaller file size. Even with the settings at their highest, JPG by its very nature is a compression system, so some information will be compromised. JPGs are ideal for RGB and Web work. CMYK JPGs will result in bizarre printing/displaying problems.
PNG files are an ideal hybrid between JPG and GIF. PNGs retain the same robust colors of a JPG, and also allow transparency like a GIF. They have become the new favored file type for web work, and are ideal for RGB. CMYK will not work.
BMP files are a low-caliber file type that offers little quality control for images. They were originally used for web graphics and GUI interfaces for their small file size. Recent modifications to BMP compression techniques allow much-expanded quality, but still not ideal for quality work.
GIF files serve a purpose only as web graphics. They are tiny, heavily compressed, and work only with a very small number of colors. Good for web work only, Index color only.
*In defense of BMP, I need to mention that BMP gets a bad rap. If I were to take an image in Photoshop and go down the list saving that file in the different aforementioned formats, it would most likely not follow my above list for quality, item for item. You would be correct to say that the 2010 version of the BMP filetype is a large file compared to its 1985 version. Reason is, BMP is a lot like the RAW file format, which aims to preserve color and data quality on a "raw" level, with no compression, etc. However, back in the day when BMP was used heaviest, computers only had the ability to preserve a few thousand colors. BMP was the compression of choice. Fast forward to 2010 when the common computer displays 32 million colors, and the BMP file type does a lot more. As a preservation method, BMP does a great job. But BMP has not progressed much since its inception and has therefore been left behind in new technologies. Large format printers, for example, do not process that file format very well, if at all. So BMP might work well for you as a format to store images for personal use, but on a professional or technical level, BMP is a very hit or miss file type and is therefore not an advisable way to transmit work.
Well there you have it! My first foray into the online foray of edu-blogging. Send checks payable to KrossBreeder, please ^_~
If you have any questions, I'd be more than happy to help! Feel free to PM me.
Hope all is well! Happy designing!
-Kross |
|  |
![[info]](http://l-stat.livejournal.com/img/userinfo.gif?v=92.2){kind=small}
krossbreeder's journal
