Colors and backgrounds
This presentation is the property of its rightful owner.
Sponsored Links
1 / 60

Colors and Backgrounds PowerPoint PPT Presentation


  • 92 Views
  • Uploaded on
  • Presentation posted in: General

Colors and Backgrounds. Learning Web Design: Chapter 13 Beautiful Web Design: Chapter 2. Lesson Overview. Understand basic color theory Learn how to specify color in CSS Understand how to use foreground and background colors Manage link colors with Pseudo-classes

Download Presentation

Colors and Backgrounds

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Colors and backgrounds

Colors and Backgrounds

Learning Web Design: Chapter 13

Beautiful Web Design: Chapter 2


Lesson overview

Lesson Overview

  • Understand basic color theory

  • Learn how to specify color in CSS

  • Understand how to use foreground and background colors

  • Manage link colors with Pseudo-classes

  • Add and tile background images

  • Intro to External Style Sheets


The psychology of colors

The Psychology of Colors

  • Color can have an impact on a viewer

  • Color has long been the subject of study for advertisers, print designers and artists

  • How do we feel about the use of one color over another?

  • Consider the following…


Colors and backgrounds

Blue

  • Blue is the most sedate of all colors

  • Blue is used to represent ice and minty freshness

  • Blue symbolizes heaven and divinity

  • Blue is the color of choice for business suitsand logos


Colors and backgrounds

Red

  • Red is the most arrogant, attention grabbing, energetic color

  • Red is often associated with love and passion

  • Advertisers use red to catch our attention:

    • Red tag specials

    • Fast sports cars

    • Lipstick on beautiful women


Yellow

Yellow

  • Yellow is a warm, bright and vibrant color

  • Yellow is the color of the sun, and gold

  • Yellow representsgoodness and joy

  • Also represents caution

  • Yellow roses are the symbol of friendship


Orange

Orange

  • Orange is the marriage of red and yellow

  • Orange is considered happy and lively

  • Orange is used in autumnal landscapes and fire’s flame

  • Orange captures our attention: ex. Signs on roads and highways


Green

Green

  • Green is the color of the natural world, represents freshness and growing things

  • Green represents life and hope

  • Its cool quality sooths, calms, and has healing powers


Violet purple

Violet/Purple

  • Purple is the most exotic color

  • Purple is represents royalty, and wealth

  • Purple is a deep, mysterious hue,mystical and meditative


White

White

  • White represents perfect balance and perfection

  • White symbolizes purity, truth and goodness

  • Good guys wear white

  • White also suggests cleanliness


Black

Black

  • Black is the absence of white light

  • Black is the antithesis of white, bad guys wear black

  • Black represents funerals, death and mourning

  • Black can bring feelings of despair and loneliness

  • Black is mysterious, evil, and intriguing


The practical side of color

The Practical Side of Color

  • Knowing that colors affect us emotionally can aid us in choosing how and where to place color on our pages

  • Use the symbolic meanings of colors to add a subtle, deeper meaning for your Web pages

  • Use bright colors to grab attention

  • Use calm colors to encourage the viewer to stay around and relax


The color wheel

The Color Wheel

  • The color wheel is based on the three primary colors ( Red, Yellow and Blue ) placed evenly around a circle

  • The secondarycolors (Green, Orange and Violet) are mixtures of the two primaries they sit between

  • The tertiarycolors fall between each primary and secondary. Between yellow and orange, for example, is yellow orange, between blue and violet is blue violet and so on


More color terminology

More Color Terminology

  • Complimentary colors are opposite each other on the color wheel

  • Saturated colors contain no black, no white and none of their complimentary color

  • Compound colors contain a mixture of the three primaries, for example: the browns, khakis and earth colors

  • Tints are made by adding white to a color

  • Shades are made by adding black

This illustration shows the compound mixtures between red and green, as are tints and shades of the color wheel


Color in terms of hsv

Color in terms of HSV

  • In HSV, any color is decomposed along three axes

    • Hue: a pure rainbow color from the color wheel

    • Saturation: the proportion of this pure color vs. colorless gray

    • Value (also called luminance): the overall brightness of the color


Web site color schemes

Web Site Color Schemes

  • Choosing an aesthetically pleasing set of colors for a Web site may be challenging for non-designers

  • Using what we know about the color wheel, you can use different color combinations or schemes that are harmonious and pleasing to the eye

  • These schemes are used in other disciplines but also have their place in web design


Color scheme tools

Color Scheme Tools

  • There are several online tools that can help you with choosing a color scheme for a Web site

  • One is Color Scheme Designer:

    • http://colorschemedesigner.com/

    • This tool helps you view different schemes and then choose the one you like and transform the information into usable Web format


Monochromatic scheme

Monochromatic Scheme

  • Monochromatic color schemes use a single color as the basis of the scheme

  • Differing values of the chosen color can be used to create the feel of different colors

  • Monochromatic color schemes are usually seen as harmonious and peaceful

  • Using a single color creates unity and can help to create or tie things together


Monochromatic scheme1

Monochromatic Scheme


A monochromatic web site

A Monochromatic Web Site

http://newark1.com/chocolate/index.htm


Analogous scheme

Analogous Scheme

  • Analogous color combinations use colors that are adjacent on the color wheel

  • A selection of blues and purples, or reds and oranges creates an analogous color scheme

  • Two or more colors can be used in an analogous color scheme however, one color is often used as a dominant color while others are used as accents


Analogous color scheme

Analogous Color Scheme


Analogous web site

Analogous Web Site

http://www.regines.new.au/


Complementary scheme

Complementary Scheme

  • Complementary colors are opposite from each other on the color wheel

  • These contrasting colors are pleasing to the eye

  • This scheme usually combines a warm color and a cool together

  • Probably should not be used in a foreground and background relationship

  • Can be discordant if the colors are not true opposites on the color wheel.


Complementary scheme1

Complementary Scheme


Complementary web site

Complementary Web Site


Triadic color scheme

Triadic Color Scheme

  • The three colors in a triadic color scheme are evenly spaced on the color wheel

  • This scheme combines primary or secondary colors together

  • Using highly saturated colors can make your site look amateurish

  • A more subdued value of one or more color can help to create greater subtlety, harmony and readability for your site


Triadic color scheme1

Triadic Color Scheme


Tetradic color scheme

Tetradic Color Scheme

  • The tetradic scheme combines four colors evenly spaced on the color wheel

  • Can be seen as combining two sets of complementary color schemes

  • May appear too busy if all colors are given equal footing on a Web site

  • Consider choosing one dominant color and use others as accents


Tetradic color scheme1

Tetradic Color Scheme


Displaying color on the web

Displaying Color on the Web

  • Web color is grouped by its Red, Green, and Blue elements (RGB)

  • Newer monitors use 24 bit color: sometimes called true color

    • 8 bits for Red, 8 bits for Green and 8 bits for Blue

    • Can display millions of colors using this combination


Bit depth

Bit Depth

1 - bit2 colors

2 - bits4 colors

3 -bits 8 colors

4 – bits16 colors

5 – bits32 colors

6 – bits64 colors

7 – bits128 colors

8 – bits 256 colors

16 – bits65,536 colors

24 – bits16, 777, 216 colors

(Usually referred to as “millions of colors”)


Color name or number

Color Name or Number

  • A color can have a name

    • These are names recognized by the browser

    • User-friendly way of giving a color attribute value

    • Ex: “forestgreen”, “aquamarine”, “indianred”

  • A color can have a number

    • Uses a hexadecimal value to represent the RGB color

    • The # symbol designates this as a hexadecimal number to the browser

    • Ex: aqua = “#00FFFF”, darkviolet=“#9400D3”


Web safe colors

Web-Safe Colors

  • Choosing only web-safe colors is no longer critical because most monitors can now handle millions of colors

  • A color is web-safe if all pairs of digits are the same

  • Examples:

    • #00CCFF – is web-safe

    • #9400D3- is not web-safe

    • #FFF – shorthand notation for #FFFFFF

    • #FF – even shorter notation for #FFFFFF


Foreground text color

Foreground Text Color

  • The color property is used to set the foreground text color

    • Values include: color name or hexadeimal number

  • Setting the text color in the body selector will set the default text foreground color for the entire page or site

    • body { color: black;}

    • body { color: #000000;}


Background color

Background Color

  • The background-color property is used to set the background color on any element

    • Values include: color name or hexadecimal number

  • Again, adding the background-color property to the body selector will color the background of the entire page

    • body { background-color: white;}

    • body { background-color: #FFFFFF;}


Anchor pseudo classes in css

Anchor Pseudo-Classes in CSS

  • An anchor pseudo-class defines styles for anchor state changes

  • You can determine a pseudo-class style because it contains the : character

  • Links exist in multiple states:

    • a:link – the unvisited state

    • a:visited – the link has been visited

    • a:active – the link is active

    • a:hover – the mouse is hovering over the link


Anchor pseudo classes

Anchor Pseudo Classes

  • Using CSS you can change the color and appearance of a link in these states

    • Ex. a: link { color: blue;}a: active { color: red; }a: visited { color: green; }a: hover { color: yellow; }

  • Descendent selectors may include a pseudo-class

    • Ex. ol a:link { color: blue;}


Watch backgrounds and link colors

Watch Backgrounds and Link Colors

  • Poor choice of background colors and background images can make your text or links unreadable

  • Make sure you have enough contrast between background and foreground

  • Often, increasing font size can make a world of difference

  • Subtle background patterns and colors are best


Creating a web color palette

Creating a Web Color Palette

  • A color scheme may provide you with only three or four colors to work with

  • Shades and tints of the main colors from a scheme that can be used to create a more complex color palette as needed for a Web site

  • Hexadecimal values of colors are needed to translate the color palette to CSS code

  • The Color Scheme tool can aid us in putting together a more complete palette


What colors are needed

What Colors are Needed ???

  • The two most important colors for a palette are the text color and the background color

    • These two colors must have enough contrast to make the text readable

  • Heading colors may be an accent color

  • Link, visited link, hover link, and active link colors must be readable on background and differ from text colors

  • Key graphics may echo accent or dominant color


Additional tool features

Additional Tool Features

  • The Color Scheme tool can generate an HTML file with embedded CSS that shows the color palette as hexadecimal values

  • A light background with dark text Web page can be viewed

  • A dark background with light text Web page can be viewed


Export palette as html css

Export Palette as HTML + CSS


Html page for tetradic color palette

HTML Page for TetradicColor Palette


Color palette css code

<style type="text/css">

/* Palette color codes */

/* Feel free to copy&paste color codes to your application */

.primary-1 { background-color: #7109AA }

.primary-2 { background-color: #5F2580 }

.primary-3 { background-color: #48036F }

.primary-4 { background-color: #9F3ED5 }

.primary-5 { background-color: #AD66D5 }

.secondary-a-1 { background-color: #CD0074 }

.secondary-a-2 { background-color: #992667 }

.secondary-a-3 { background-color: #85004B }

.secondary-a-4 { background-color: #E6399B }

.secondary-a-5 { background-color: #E667AF }

.secondary-b-1 { background-color: #9FEE00 }

.secondary-b-2 { background-color: #86B32D }

.secondary-b-3 { background-color: #679B00 }

.secondary-b-4 { background-color: #B9F73E }

.secondary-b-5 { background-color: #C9F76F }

.complement-1 { background-color: #FFFF00 }

.complement-2 { background-color: #BFBF30 }

.complement-3 { background-color: #A6A600 }

.complement-4 { background-color: #FFFF40 }

.complement-5 { background-color: #FFFF73 }

Color Palette CSS Code


Tetradic light page example

Tetradic Light Page Example


Tetradic dark page example

Tetradic Dark Page Example


Background image

Background-Image

  • The HTML background attribute of the <body> tag has been deprecated in favor of the background-image CSS property

  • A background image can be applied to the entire body of the page or any element

  • Use the body selector in a style sheet to set the background-image for a page

  • Examples:

    • body {background-image: url (path/filename);}

    • body { background-image: url (Images/chart.jpg) ;}


Background repeat in css

Background-Repeat in CSS

  • A background image will automatically try to cover the entire browser window

  • If it is a small image, it will repeat or tile to cover the window

    • This repeating is called tiling

  • The background-repeat property can help you to control the tiling of an image


Background repeat values

Background-Repeat Values

  • background-repeat values include:

    • background-repeat: repeat-x; will tile an image in the horizontal direction

    • background-repeat: repeat-y; will tile an image in a vertical direction

    • background-repeat: no-repeat;will not tile an image, it will only appear once

    • background-repeat: repeat; will tile the image in both directions, this is the default


To tile or not tile

To Tile or Not Tile ???

  • If your background image is smaller than the dimensions of the browser window, it will tile by default

  • Creating a small seamless image to tile is not easy

  • Advantage:A small tiled image will load very fast!

  • Disadvantage:While the texture may look perfect with the page heading or navigation bar, it may make text in the body area unreadable

  • A better solution might be to incorporate the same texture right into the graphics where it is needed, or use a non-tiling background


Non tiling backgrounds

Non-Tiling Backgrounds

  • Expanding the background image in both dimensions creates a background which is not subject to tiling

  • This technique, used by many professionally designed pages, gives the most creative control over layout

  • A non-tiling image must be large (at least 1200 pixels wide; its necessary height should be determined by the contents of the page) 

  • To keep file sizes down, only GIFs with few colors or JPEGs with high compression levels should be used

  • The loss of quality in highly compressed JPEGs is less noticeable if the image has low level of contrast, or is artificially faded or blurred. 


Background image warnings

Background Image Warnings

  • Background images can make the page hard to read

  • Use a background image like a light watermark and it will be more readable

  • Once the image is cached, subsequent pages can be displayed without incurring a loading time penalty

  • Always provide a background-color in case the background-image is not available


Background attachment

Background Attachment

  • The background-attachment property can be used to determine if the image scrolls with the document or stays fixed as content scrolls

    • Values include: scoll, fixed

  • This property is not supported by IE6 and earlier browsers

  • Examples:

    • body { background-attachment: fixed;}

    • body { background-attachment: scroll;}


External style sheets

External Style Sheets

  • External style sheets keep style rules as a separate file

  • Allows use of many style rules with a single file

  • Modifications to style sheet file will change all the associated pages

  • Uses the .css file extension


Example external style sheet

Example External Style Sheet

MyStyles.css

body { background-image: url(Images/back.jpg); font-family: Verdana, Arial, sans-serif; font-size: medium;

color: navy;

}

h1, h2, h3 { color: blue; line-height: 125%;

}

a:link { color: brown;}a:visited { color: red; }

a:hover { color: orange;}a:active { color: yellow; }

.bigger { font-size: large; }.imageleft { float: left; padding-right: 10px;

}


Attaching an external sheet

Attaching an External Sheet

  • Like an HTML page, a style sheet is just an ASCII text file

  • Usually this file is placed in your site folder

  • Attach the style sheet by using the <link> tag in your page header


Link tag

<link> tag

  • Example:<link rel=“stylesheet” href=“mystyles.css” type=“text/css” />

  • This creates a persistent style that is applied to your page regardless of the user’s local selections

  • The name of the styles heet linked in this case is: mystyles.css


More on external css later

More on External CSS Later

  • We will concentrate more on creating and using external style sheets in Chapters 14, 15, and 16

  • Microsoft’s Expression Web environment makes creating and managing external CSS a breeze

  • Read Project instructions carefully to see when to use external CSS and when to use embedded CSS


Lesson summary

Lesson Summary

  • Color schemes are based on combinations of colors related to their placement on the color wheel

  • RGB color is specified with color names and hexadecimal numbers

  • Link Pseudo-classes can be used to set link colors for different link states

  • Background images can be repeated or not repeated, fixed or scrolled

  • A color palette for a Web site maps colors to elements on a Web page


  • Login