Designing with a Grid November 29, 2009
Posted by kd49 in : Designing with a grid , comments closed A slight digression from infographics to look at some practical rules on using grids in design [ppt]and recommend reading Making and Breaking the Grid by Timothy Samara
and Mark Boulton’s blog: five easy steps to designing grid systems.
and as it applies to the web [Grids are good PDF]
by Khoi Vinh andMark Boulton
Unigrid of National Park Service brochures by Vignelli [flickr]
CMYK vs RGB November 3, 2009
Posted by kd49 in : Class 8 - RGB v CMYK, Classes , comments closed Review of color compositions and optical illusionsREVIEW
Recap of color wheel strategies
Hue – the color we describe. Pure color. Color reflected from or transmitted through an object. It is measured as a location on the standard color wheel, expressed as a degree between 0° and 360°. In common use, hue is identified by the name of the color, such as red, orange, or green.
Value or Brightness – how much light. Relative lightness or darkness of the color, usually measured as a percentage from 0% (black) to 100% (white).
Intensity, tint or saturation – how much color. Strength or purity of the color (sometimes called chroma). Saturation represents the amount of gray in proportion to the hue, measured as a percentage from 0% (gray) to 100% (fully saturated). On the standard color wheel, saturation increases from the center to the edge.
Formation of color in print vs digital:
Class ppt
Additive color: RGB obtained by mixtures of red, green and blue light. Project of three light beams of red blue and green. Each of the three beams is called component and each can have variable intensity from fully on to fully off. Zero intensity is black and full intensity is white. Where the light overlaps secondary colors are formed. A pure secondary is formed by two primary colors of equal intensity: cyan is green + blue, magenta is red+ blue, yellow is red+ green. Full light produces white. One of the challenges of RGB is that value can defined differently across different devices. Typical devices are: computer (since 1988), mobile phones, video projectors.
A color in the RGB model is described in percentage or a fixed variable (typically 0-255). 0-156 is the range that a single 8-bit byte can offer. (by encoding 256 distinct values) Zero is black and 255 is white. Higher end digital equipment can go to 65535 colors (16 bit)
Web color definition or hex color:
Web color is defined by a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications, to represent colors. The bytes represent the red, green and blue components of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation. This represents the least (0) to the most (255) intensity of each of the color components. The hex triplet is formed by concatenating three bytes in hexadecimal notation, in the following order:
- Byte 1: red value (color type red)
- Byte 2: green value (color type green)
- Byte 3: blue value (color type blue)
For example, consider the color where the red/green/blue values are decimal numbers: red=36, green=104, blue=160 (a greyish-blue color). The decimal numbers 36, 104 and 160 are equivalent to the hexadecimal numbers 24, 68 and A0 respectively. The hex triplet is obtained by concatenating the 6 hexadecimal digits together, 2468A0 in this example.
Note that if any one of the three color values is less than 16 (decimal) or 10 (hex), it must be represented with a leading zero so that the triplet always has exactly six digits. For example, the decimal triplet 4, 8, 16 would be represented by the hex digits 04, 08, 10, forming the hex triplet 040810.
The RGB mode assigns 24 bits of data to each pixel.
That allows for 16,777,216 different colors
The number of colors that can be represented by this system is
visualization of RGB color – additive color
Subtractive color: is the process that allows everyday objects around us to show color. Subtractive color starts with an object that reflects light and uses colorants to subtract portions of the white light to produce colors. Color paintings, film photography and all color printing processes use the subtractive processes. In these cases, the reflective subtract is the canvas or paper which is usually white. Colored inks act as filters and subtract portions of the white light striking the image on paper to produce other colors. Printing inks are transparent, which allows light to pass through to and reflect off the paper base. The printing process uses mixtures of cyan,magenta and yellow (CMY) and a fourth ink. black (K). When combined in equal amounts, pure subtractive primary colors produce the appearance of black.
The term “subtractive” is used because the primary colors are pure until you begin mixing them together, resulting in colors that are less pure versions of the primaries. For example, orange is created through the subtractive mixing of magenta and yellow together.
Practical example of how to think of additive versus subtractive:
For example, you can decrease the amount of any color in an image by increasing the amount of its opposite on the color wheel—and vice versa. Colors that lie opposite each other on the standard color wheel are known as complementary colors. Similarly, you can increase and decrease a color by adjusting the two adjacent colors on the wheel, or even by adjusting the two colors adjacent to its opposite.
In a CMYK image, you can decrease magenta either by decreasing the amount of magenta or by increasing its complement, which is green (the color on the opposite side of the color wheel from magenta). In an RGB image, you can decrease magenta by removing red and blue or by adding green. All of these adjustments result in an overall color balance containing less magenta.
In the CMYK mode, each pixel is assigned a percentage value for each of the process inks. The lightest (highlight) colors are assigned small percentages of process ink colors; the darker (shadow) colors higher percentages. For example, a bright red might contain 2% cyan, 93% magenta, 90% yellow, and 0% black. In CMYK images, pure white is generated when all four components have values of 0%.
Use the CMYK mode when preparing an image to be printed using process colors. Converting an RGB image into CMYK creates a color separation. If you start with an RGB image, it’s best to edit first in RGB and then convert to CMYK at the end of your process. In RGB mode, you can use the Proof Setup commands to simulate the effects of a CMYK conversion without changing the actual image data. You can also use CMYK mode to work directly with CMYK images scanned or imported from high-end systems.
example of CMYK screen printing
There are approximately 55,000 colors using CMYK, rather than 16.7 million plus, using RBG
Pantone: the standard for color communication
Review of printing resources: the Pantone color book. The PANTONE MATCHING SYSTEM is the definitive international reference for selecting, specifying, matching and controlling ink colors.
______
ASSIGNMENT
Come to class prepared to discuss and share your initials concepts for your final project – a portfolio website.