Webmastering BASICS Using Dreamweaver

Lesson 13 –

Color and Typography

*

Objectives

●Discuss basic color theory.●Understand the color wheel. ●Understand how color is presented on a computer screen.●Apply different color schemes to your Web site.●Use typography effectively.

*

Vocabulary

●Analogous colors●Bit●Color wheel●Complementary colors●Cool colors●Primary hues●Secondary hues●Shade

●Split-Complementary colors●Tertiary hues●Tint●Triad colors●Typography●Value●Warm colors●Web safe colors

*

Color definitions

●Hue is another word for color.●Chroma is the intensity or purity of color.●Tint is a color mixed with white.●Tone is a color mixed with gray.●Shade is a color mixed with black.

*

Color Theory

●Color can be used to communicate a message and to draw in the audience. ●Colors can be used to convey a broad range of emotions.●Within each color, there is a range of tints and shades that can further evoke specific emotion.

Color Wheel

●Is an ordered progression of hues (or colors) that helps a designer easily understand and select color combinations.

●There are 2 primary types of color models:–Additive: used by computers/TVs–Subtractive: used for print materials

*

Additive Color

Additive color uses the primary colors found in light (red, green and blue) and adds them together (i.e., combines them) to create all other colors. White results from combining red, green and blue light in equal intensities. The secondary colors of additive color are magenta, yellow and cyan. 

Subtractive Color

● Subtractive color is the basis for creating colors when mixing paint, dye or ink. Color is created when some wave lengths of light are subtracted (i.e., absorbed) while others are reflected. The color display on a surface (a wall, a piece of cloth, a sheet of paper) depends on which colors are reflected by it and therefore made visible.

*

Reflected Colors (subtractive color)

Portions of white light are absorbed into a surface and the

light that is not absorbed is reflected back to your eye

*

Subtractive Color

*

The Additive Color Wheel

●The color wheel is an ordered progression of hues (or colors) that helps a designer easily understand and select color combinations.

●White light is the combination of red, green, and blue light.

●The primary hues of the additive color wheel are red, green, and blue (RGB).

*

Additive Colors RGB

*

The Color Wheel

●The three secondary hues are cyan, magenta, and yellow.

●Tint is a hue that has been lightened.

●Shade is a hue that has been darkened.

●Hues that contain red are considered warm colors.

●Hues that contain blue are considered cool colors.

*

Primary Hues

*

Secondary Colors

*

Tertiary Colors (Intermediate)

*

The Color Wheel

●There are four basic combinations that can be used to find all sorts of pleasing color schemes:

–Complementary colors –Split complementary colors–Triad colors –Analogous colors

*

Complementary Colors

Complementary colors are colors that are opposite from each other on the color wheel.

*

Split-complementary Colors

Split-complementary colors are three colors that form a triangle on the color wheel. The colors make a pleasing color scheme.

*

Triad Colors

Triad colors are three colors on the color wheel that have an equal amount of distance between each one.

*

Analogous Colors

Analogous colors are three colors on the color wheel that are side by side.

*

Warm and Cool Colors

●Hues that contain red are considered warm colors.

●Colors like red and yellow-orange are comforting. They give the user a sense of warmth such as a warm fireplace or a brilliant orange sky at dawn.

●Cool colors contain the color blue in them.

●Colors like cyan or blue give the viewer a sense of calm. Cool colors are found in nature such as water or the many shades of trees.

*

Color in Design

●Use color to label or show hierarchy.

●Use color to represent or imitate reality.

●Use color to unify, separate, or emphasize.

●Use color to decorate.

●Use color consistently.

*

Color and contrast

●Using color can enhance or detract from a composition.

●Color wheels help determine which colors are in greatest contrast.

Use Kuler from Adobe Labs to try out new color schemes:http://kuler.adobe.com/

*

Bit Depth

●A bit is the smallest unit of information that a computer understands.

●A bit can be either a 1 or a 0 (on or off).

●Thousands of pixels make up what appears on the monitor.

●A pixel receives bits of information that tell it what color it should be and where on the screen it should be located.

*

Monitor Bit

●An 8 bit monitor has 256 colors

●An 16 bit monitor has 65,536 colors

●An 24 bit monitor has 16.7 million colors

*

Display Properties dialog box

*

Web Safe Colors

●256 colors found on an 8-bit monitor ●Web safe colors appear the same on all monitors.●There are 216 colors on a Web safe color palette.

*

The Color dialog box

*

Typography

●The goal is to communicate a message in a legible and orderly way.

●Type can be created with HTML code or as a graphic.

●Be consistent when using type across a Web site.

●It is easier to read sans serif fonts than serif fonts on a computer screen.

●A monitor uses 72 dot per inch resolution

*

Typography

●Have enough contrast between the type color and the background color.

●Choose a font face that is appropriate for your Web site.

●The computer that is downloading your site must have the same font loaded in order to display the font that you intended.

*

Types of Fonts

Serif (more sophisticated) a smaller line used to finish off a main stroke of a letter

San Serif (more relaxed

*

Common Fonts

●Arial●Helvetica●Times New Roman●Courier●Veranda●Geneva

*

Summary

●Color is a powerful tool for designers and can be used to convey a broad range of emotions.●There are two types of color models: additive and subtractive. A computer monitor uses the additive color model while printed material uses the subtractive color model.●The color wheel is an ordered progression of colors that help a designer easily understand and select color combinations.

*

Summary (continued)

●The primary hues of the additive color wheel are red, green, and blue (RGB). The three secondary hues are cyan, magenta, and yellow. There are six tertiary hues.●When referring to the value of a hue, you are refer-ring to its lightness or darkness. Adding white to a hue lightens it and is called tint. Adding black darkens a hue and is called shade.●Hues that contain red are considered warm colors. Cool colors contain the color blue.

*

Summary (continued)

●Complementary colors are colors that are opposite from each other on the color wheel.●Split-complementary colors are three colors that form a triangle on the color wheel. The colors make a pleasing color scheme.●Triad colors are three colors on the color wheel that have an equal amount of distance between each one. Analogous colors are three colors on the color wheel that are side by side.

*

Summary (continued)

●The image on your screen is made up of pixels. Each pixel is represented by one or more bits of data.●To optimize a Web site for 8-bit color, there is a palette of 216 Web safe colors.●Typography is the act or art of expressing an idea by utilizing types or symbols.●It is easier to read sans serif fonts than serif fonts on a computer screen.

*

Summary (continued)

●It is important to keep font use consistent throughout a site and to use font sizes that are large enough to allow for easy readability.●If you use unusual fonts, your users may not have that font loaded and may not see the same result on their screens as you intended. For this reason, when using an unusual font for a heading or other special purpose, you may want to place the text in a graphic.