DESIGNING WITH COLOR AND TEXT

Choose Text Styles Sparingly for Emphasis with or without COLOR

Bold

Italic

Underline

Combination

Choose Text Fonts According to use of Heading, Readability or to set a Mood

ArielTimes new Roman

AlgerianScriptOld EnglishBroadway

Mixed case, high contrast is easiest to read. Avoid all caps.

Browsers can only interpret a limited number of fonts

Use Photoshop for other fonts or.These fonts are actually images and used for a few word titles rather than

paragraphs. OR – next slide --

DISPLAYING TEXT

Text is measured in Points – 1 point = 1/72 inch, so 72 points = 1 inch

10 Point is usually the smallest that can be easily read

Do not put a large amount of text on a web page. Instead, originate the text in MSWord save in pdf format and link to it to same as you link to another web page. ( MS Word allows you to save as a pdf format and use a variety of fonts)

You can also save Power Point presentations and pdf and link to them.

Most browsers can display pdf format.

Images are made of picture elements or pixels

The more pixels per inch of display the greater the resolution and the clearer the image.More pixels and more bits/pixel means larger files.

Each pixel could be black or white (1 bit/pixel)

Or

Up to 4 billion colors (32 bits/pixel)

Out of 256 possible for each RGB ==> 16,777,216 colors

Plan Your Color Scheme

COLOR WHEELORGANIZES COLORS TO ASSIST IN COLOR SELECTION

Additive Colors

The monochromatic color scheme uses variations in lightness and saturation of a single color. This scheme looks clean and elegant. Monochromatic colors go well together, producing a soothing effect. The monochromatic scheme is very easy on the eyes, especially with blue or green hues. You can use it to establish an overall mood.

Monochromatic Color Scheme

A color scheme based on analogous Colors

The analogous color scheme uses colors that are adjacent to each other on the color wheel. One

color is used as a dominant color while others are used to enrich the scheme.

A color scheme based on complementary colors

Two colors on opposite sides of the color wheel, which when placed next to each other make both

appear brighter.

A color scheme based on nature

Color ContextHow color behaves in relation to other colors and shapes is a complex area of

color theory. Compare the contrast effects of different color backgrounds for the

same red square.

Choosing Background and Text Colors

Examples

Downloading a “seamless” backgroundRight-click, “Save image as” in Home

“Hex” color codes

Text Hex color code

Cell background Hex color code

May specify text and Background for entire pageUsing page properties

Use the eyedropper to match an exact color

Insert exact color from upper left cell to lower right cell.

Use the color picker – eye dropper

IMAGE ATTRIBUTES

THIS IMAGE IS 100 BY 100 PIXELS

INCREASING THE PHYSICAL SIZE BLURS THE IMAGEBECAUSE THE RESOLUTION (PIXELS/INCH DOES NOT CHANGE)

SAVED WITH ONLY 16 COLORS – 4 BITS

ORIGINAL (LEFT) VS 256 COLOR (RIGHT)24 BIT (16 MILLION COLORS)

COMPARE FILE SIZES

KB -> kilo byte; byte -> 8 bits ; bit -> binary digit