Our Product : Social Day 2009 Logo

Social Day organized by Social and Responsibility Division.

Type Families

The different options available within a typeface, such as roman, bold and italic, make up a type family. Times New Roman and Helvetica are examples of type families. These families are extremely useful because a designer can use just one or two within a project, but still have a wide variety of styles to choose from. This helps to achieve a consistent design.

Roman

Roman is the standard style of a typeface, not altered by weight, width, angle or any other characteristic. This is often used for large blocks of text, such as the text of a book.

Italic

Italic type is at an angle, generally slanting to the right from bottom to top. Italics are specifically designed within a typeface, meaning certain letters may be significantly different than the roman version to improve appearance and legibility. Oblique type, on the other hand, is the roman type slanted at an angle, as-is. The two are often confused.

Bold

Bold, or boldface, type is a heavier weight than roman type. As there is no official standard for naming typeface style, bold is often referred to as black or medium, or other names depending on the weight and the preference of the typeface designer.

Light

Light type is thinner than the roman option. Depending on how light the type weight is, it will often be used at large sizes so it is legible, or to achieve a specific style. As with bold, there are light varieties such as ultralight.

Extended

Extended type is wider than the standard type of a family. It is useful for headlines and other large type areas, and provides even greater flexibility within a family.

Condensed

Condensed type is a narrower face, which can fit into small spaces. Like extended, it provides more style options while staying within the same family.

Combined Styles

Most type families will not just provide bold, italic, condensed, light, and so on, but combinations of each. This gives the designer even more options to work with. For example, Helvetica Neue is availabl e in Regular, Italic, Bold, Bold Italic, Light, Light Italic, UltraLight, UltraLight Italic, Condensed Bold and Condensed Black. By using the options with a type family, and the combinations of each, designers can achieve a consistent layout while using a variety of styles.

Sources:

Gavin Ambrose, Paul Harris. "The Fundamentals of Typography." AVA Publishing SA. 2006.

Color Separation

Definition: Color separation is the process by which original artwork is separated into individual color components for printing. The components are cyan, magenta, yellow and black, known as CMYK. By combining these colors, a wide spectrum of colors can be produced on the printed page. In this four color printing process, each color is applied to a printing plate. When the colors are combined on paper (they are actually printed as small dots), the human eye combines the colors to see the final image. The use of plates for printing is part of the process known as lithography.

Also Known As: Four-color Process

Common Misspellings: Color Seperation

Using Swatches to Insure Desired Color Results in Printing

The Problem

When designing for print, a common issue that has to be dealt with is the difference between the color on your computer display and on paper. Even if your monitor is calibrated correctly the match them as best as possible, your client’s will not be, and so a third “version” of the color comes into play. If you then print proofs for your client on any printer other than the one that will be used for the final job (which is often the case), more colors join the mix that won’t match the final piece.

The Pantone Matching System

To deal with this problem, you can use the “Pantone Matching System,” or PMS. The PMS has an industry standard book of color swatches with reference numbers that you can give to the printer, who will then use ready-made inks that match these numbers to complete the job.

The PMS Swatch Book

The PMS swatch books come in many versions, made for different papers such as coated and matte. For this reason, it is important to talk to your printer first about what paper will be used, so you can refer to the proper book. The books are available for purchase directly from Pantone as well as on Amazon, other web sites, and in art stores. As the swatch book sets are expensive (especially the full reference library), you may want to start with the “Formula Guide” set, consisting of the coated, uncoated and matte swatch books, which are sufficient for most standard jobs. It is important to remember that books can “expire,” meaning they are no longer applicable to the current ink sets.

Working with the Client

To get the full value out of your swatch books, meet with your client to discuss the colors that will be used in the project. Once you have an idea of the project design, you can discuss exact colors for backgrounds, type and other elements. Remember that the swatches are for determining solid colors, and do not help to insure that elements like photos (which can contain millions of colors) will print as desired. For this reason, among others, it’s a good idea to always get a proof from a printer before they finish the entire job.

Applying the Selected Colors to Your Designs

Once you have selected PMS colors, what do you do with them? For starters, you need to use the matching colors in your design projects. You do this by selecting the appropriate swatch library, and colors, in your graphics software.

• In Photoshop: Open the swatches palette by clicking Window > Swatches. The standard swatch palette will be displayed. Click the small arrow on the top right of the swatches window, and you are presented with a long list of color libraries to choose from, include several Pantone collections. Select the set name that matches the swatch book you are using. Photoshop will ask you if you want to replace the current palette or add onto it (Append). Choose “OK” to replace the palette so you are only seeing your Pantone colors.
  
  
• In Illustrator: The process is basically the same, except when you click the arrow to bring up the swatches list, you must first choose “Open Swatch Library” to see the full list of Pantone and other color libraries.

Once your Pantone swatches are displayed, you can see the reference numbers by rolling over each color swatch with your mouse. Now you can select the colors that you have already picked out in your books. This process might vary slightly depending on what version of Photoshop or Illustrator you are using. The swatch palettes are also available in most standard graphics software, so be sure to select the right palette for the job.

Supply the Colors to Your Printer

Even though you have selected the appropriate colors in your design, it is important to let the printer know which colors are used where. You can do this by marking up a printed example of your design…simply label each PMS color with its reference number. Again, it’s a good idea to get a proof so you can approve the colors before the entire job is finished, which are much more likely to appear as you expected if you use the Pantone Matching System.

_Sources:

_{David Bann. “The All New Print Production Handbook.” Watson-Guptill Publications. 2006.}

Color Properties and the HSV Color Space

HSV Color

The HSV color space is important to look at because it describes color based on three properties: Hue, Saturation and Value. As you edit these values, the full spectrum of colors can be created.

Hue

The Color Wheel

Hue is another word for color. Red, blue, and yellow are the primary hues, and when combined in equal amounts they create the secondary hues orange, green and violet. When primary and secondary hues that are adjacent on the color wheel are combined, you get the tertiary hues. These colors are shown in the color wheel diagram. When you mix the primary colors in different amounts, you get a limitless number of colors.

Saturation

Saturation is the intensity of a color (or hue). When you mix colors or add black to a color, saturation and intensity drops. If you add white, color becomes lighter, but not necessarily more intense. The image below demonstrates this; the first box is fully saturated, the second has black added and the third has white added.

Value

The lightness or darkness of a color is its value. Like saturation, adding black or white to a color affects value. Tints are colors with added white, and shades are colors with added black. The image above shows tints and shades of the hues of the color wheel.

_Sources:

Rob Carter. “Digital Color and Type.” A RotoVision Book. 2002.

Color Models: RGB

RGB Color

There are many models used to measure and describe color. The RGB color model is based on the theory that all visible colors can be created using the primary additive colors red, green and blue. These colors are known as primary additives because when combined in equal amounts they produce white. When two or three of them are combined in different amounts, other colors are produced. For example, combining red and green in equal amounts creates yellow, green and blue creates cyan, and red and blue creates magenta.

As you change the amount of red, green and blue you are presented with new colors. Additionally, when one of these primary additive colors is not present you get black.

RGB Color in Graphic Design

The RGB model is so important to graphic design because it is used in computer monitors. The screen you are reading this very article on is using additive colors to display images and text. Therefore, when designing websites (and other on-screen projects such as presentations), the RGB model is used because the final product is viewed on a computer display.

Types of RGB Color Spaces

Within the RGB model are different color spaces, and the two most common are sRGB and Adobe RGB. When working in a graphics software program such as Adobe Photoshop or Illustrator, you can choose which setting to work in.

• sRGB: The sRGB space is best to use when designing for the web, as it is what most computer monitors use.
  
  
• Adobe RGB: Because the Adobe RGB space contains a larger selection of colors that are not available in the sRGB space, it is best to use when designing for print. It is also recommended for use with photos taken with professional digital cameras (as opposed to consumer-level), because high-end cameras often use the Adobe RGB space.

_Sources:

_{”The Little Know-It All: Common Sense for Designers.” Die Gestalten Verlag GmbH & Co. KG (dgv), Berlin 2007.}

_{”Working Space Options.” Adobe.com. 20 Sep. 2007.}

About the CMYK Color Model

The CMYK color model is used in the printing process. To understand it, it is best to start with RGB color. The RGB color model (made up of red, green and blue) is used in your computer monitor, and is what you will view your projects in while still on screen. These colors, however, can only be viewed with natural or produced light, such as in the computer monitor, and not on a printed page. This is where CMYK comes in.

When two RGB colors are mixed equally they produce the colors of the CMYK model, known as subtractive primaries. Green and blue creates cyan (C), red and blue creates magenta (M), and red and green creates yellow (Y). Black is added to the model because it cannot be created with the 3 subtractive primaries (when combined they create a dark brown). The K, or “key,” stands for black.

CMYK in the Printing Process

The four-color printing process uses four printing plates; one for cyan, one for magenta, one for yellow and one for black. When the colors are combined on paper (they are actually printed as small dots), the human eye sees the final image.

CMYK in Graphic Design

Graphic designers have to deal with the issue of seeing their work on screen in RGB, although their final printed piece will be in CMYK. Digital files should be converted to CMYK before sending to printers, unless otherwise specified. Because of this issue, it is important to use “swatches” when designing if exact color matching is important. Swatches provide a designer and client with a printed example of what a color will look like on paper. A selected swatch color can then be chosen in Photoshop (or a similar program) to insure the desired results. Even though the on-screen color won’t exactly match the swatch, you know what your final color will look like. You can also get a “proof” from a printer, which is an example of your printed piece provided before the entire job is run.

_Sources:

David Bann. “The All New Print Production Handbook.” Watson-Guptill Publications. 2006.