the elements of art and principles of design · · 2013-10-23the elements of art and principles...

Featuring Color Theory for the Web

0

The Elements of Art and

Principles of Design

for the Web

Lesson 1

Color

and

1

Original Assignment

Your assignment is to create an attenuating color strip from one hue, gradating the color

on approximately 15 to 20 uniform pieces of 3” x 3” (small size approx.) poster board by

adding white to the main color. This is an actual assignment in college, in Color Theory 1. It

is your choice whether the gradient goes from your chosen hue to white or black. More than

one color, but limited to three, is allowed as long as the gradients follow logical attenuating.

Keep the flow. Do not end with white and then begin with a dark color, or start over. Flow

into and out of your colors.

Color Poster board

2 colors (1 hue and 1 white or black)

or more of poster paint

(required - include white or black)

Scissors

Paste or standard Elmer’s Glue

Directions:

Using two hues is allowed. You can blend them,

but follow a logical gradient. If you use black,

logically leave your hue’s shade to begin your hue into

luminous (bright) or tint and white. Create one single

hue strip at least and you may even do a grayscale

(black to white) strip.

Original Assignment Materials

Progressive color

Blended colors progressive color 2

L. 1 Color

In order to switch over to modern day color theory, you will do a modern type

assignment .

In this assignment, you will change your color strip to RGB hex value gradation by

finding a matching hex value for each one of the painted pieces of your color strip.

Color Names Supported by All Browsers

There are 141 color names identified in the HTML and CSS color specification

comprised of the17 standard colors plus 124 more.

“Tip: The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime,

maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.”

(w3schools.com)

However, it would be hard for web designers to compare the colors using color

names to build gradating color. So, you will use the hex value code, or the numeric

version, to find the flowing colors.

3 L. 1 Color

There are several good color charts around on the web. Use your favorite or search for one.

A good one is http://htmlcolorcodes.org/, another is http://html-color-codes.com/. Also,

there may be a book in the library on the color code chart or the hex value system or RGB hex

value system.

Once you have found all 15 to 20 colors corresponding to your pieces, put them into the

above HTML page format. Use any style font you like. The text should create a short story on

your favorite holiday. 15 to 20 sentences is not a long story. Be creative with font, if you like.

4 L. 1 Color

<html><head><title>ArtGalaxies.com</title></head><body> <center> You look like a meadow in summer. You look like a meadow in summer. You look like a meadow in summer. You look like a meadow in summer. one line of text You look like a meadow in summer. You look like a meadow in summer. You look like a meadow in summer. You look like a meadow in summer. one line of text </h4></center></body></html>

http://htmlcolorcodes.org/





http://html-color-codes.com/

5

Surprise quiz. Take out a piece of paper and put your name at the top. Then format a basic

HTML page without content. You will not be graded, however this is an assessment quiz.

After quiz. Below is the basic HTML format to enclose a page.

• Your text belongs between the <body></body> tags.

• Put your name for the title between the <title></title> tags.

• The head tags should be in place. If you know animation or java, you know this is

where developers and designers place the scripts or javascript (.js). You are free to

demonstrate anything you know to your page, but the quiz will be the basics above.

• Your story is the text between the font tags <font=“#------”> .

• Each hex value, or color, has a beginning font and a font tag anchor.

<html><head><title></title></head><body> CONTENT AREA

</body></html>

KEY

Web Color

These colors are coded by name.

These colors parallel are numerically coded. The numeric range is much greater and any color can be produced to match or improve a color. Look at “green”. Name color would have left no choice but for designers who wanted green to select the name code green.

The same color numerically coded is written turquoise.

6 L. 1 Color

7 L. 1 Color

Older Web Color

Any color can be numerically produced, but previously color was coded by the color’s name.

I am providing screen shots of

my experimentation with old

name web color and new

numeric web color.

turquoise

8

Color Names Supported by All Browsers

There are 141 color names identified in the HTML and CSS color specification comprised

of the17 standard colors plus 124 more.

“Tip: The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime, maroon,

navy, olive, orange, purple, red, silver, teal, white, and yellow.” (w3schools.com)

There are several good color charts around on the web. Use your favorite or search for one.

A good one is http://htmlcolorcodes.org/, another is http://html-color-codes.com/.

For fonts, visit http://www.dafont.com or use your own favorite.



http://www.dafont.com/







9 L. 1 Color

Materials needed: Computer and Internet connection for researching “color chart”. Employ

the search engine or desktop software such as Photoshop for numeric color identification of RGB

hex value six-place codes. Alternatively, a book on color codes can be found at the library.

The students are asked to look up the color codes on the HTML color code chart and, based on

their original assignment’s color choices, find the matching codes.

Task: Exchange the painted poster board pieces for identical color codes and set them into a

HTML or XHTML document using the code given in class.

“Look up groovy fonts to use. Use them creatively as much as you like, but describe in your

text, your favorite family holiday.”

This satisfies the multiple ways the artwork connects with the learning environment. The

artwork learning environment facilitated connecting with learning about their classmates.

The project shows learning color theory was connected to emergent technology and this

was different than simply the same theory from the year 1666 BC.

The project shows how to look up color codes from the HTML color chart.

The project shows a creative use of color by creating gradating color schemes and

transferring the knowledge to using them in another environment.

Progression of numeric codes will present the likeness to the spectrum

The project shows artwork responding from one scenario to another, as well as they found

similarities in artwork changing from one scenario into another.

The project shows the students gain experience building a web page and uploading it to a

web site.

In order for you to respond correctly to questions on the elements of art and

principles of design and on other basic verbal art information, this lesson was

designed to help you. This information is important in every one of the four

visual arts content standards. Visual Art verbal or declarative knowledge is

taught to teach students to remember the elements of art are the basic properties

of a work of art.

The basic properties are organized into a composition. The elements of art are

organized in the artwork composition and this organization is referred to as the

principles of art.

In reverse, this works the principles of visual art are the guidelines artists use

to organize the elements of art in an artwork. When combined together

successfully, they create an aesthetically enjoyable work of art.

Properties perceived through the senses are: texture, form, shape, color, line

and value. Principles of art are movement, unity, harmony, variety, balance,

rhythm, emphasis, contrast, proportion, and pattern. A list may vary according to

the art educator, but these encompass the generally accepted principles.

Elements rhythm and pattern are often combined in art education, as are scale

and proportion.

10

The Elements of Art and Principles of

Design

2.0 Color and Color Theory - Lesson 1

2.1 Color Attributes

Hue, saturation, and brightness are the attributes of color.

Hue refers to the color family name. Although there are literally millions of colors, there are

only a few color families. Every color is described in terms of its three attributes: hue, saturation,

and brightness. Hue is the color family or color name (such as red). Hue is related to the color's

wavelength.

All electromagnetic radiation is light and humans can see only a small portion of this

radiation. That portion is called visible light. The colors separate because each color has a

different wavelength. So when the visible spectrum travels through a prism, the colors separate

into the colors of the rainbow. Violet has the shortest wavelength and red the longest.

Wavelengths are measured in nanometers. Each color is refracting at a slightly different angle

depending on wavelength.

“The cone-shaped cells in our eyes act as receivers tuned to the wavelengths in this narrow

band of the spectrum. Other portions of the spectrum have wavelengths too large or too small and

energetic for the biological limitations of our perception.” (Mission)

Saturation is the measure of purity of a color, meaning how sharp or dull the color appears.

Saturation is also called chroma.

Brightness is the darkness or lightness (shade or tint) of a color. As we know, evenly colored

areas of an object in direct light have higher brightness than areas in shadow. Brightness is also

called luminance or value.

11 L. 1 Color

12 L. 1 Color

13 L. 1 Color

Color is light and light is energy. It is known by scientists physiological changes take

place when human beings are exposed to certain colors. Colors depress, stimulate, excite,

tranquilize, increase appetite and can create the sensation of coolness or warmth. This is

known as chromodynamics.

(Artwork in progressive tints.)

Laura Aborealisis

Aum Mantra

14 L. 1 Color

The Laura Arborealisis artworks above, though of course not created by HTML, were

created in gradated colors.

15

Arbor Vitae

L. 1 Color

Below is a screen shot of the gradated text I created. It appears almost seamless from one

color to the next.

16 L. 1 Color

Color Attributes Colors have three main attributes:

hue, saturation and brightness.

Hue is the color’s family or color name

(i.e., red, green, purple) and is directly

related to the wavelength.

Saturation, or "chroma," is the amount

of purity a color has, referring to

crispness or dullness it appears.

Brightness, or "luminance" or "value," is

the shade (darkness) or tint (lightness)

of a color. Newton’s main colors were

red, orange, yellow, green, blue, indigo,

and violet.

17 L. 1 Color

Color Wheel Classifications Complementary – colors directly

facing each other on the color wheel

Triadic – cyan, magenta, yellow

Analogous – side by side colors of similar

hues

Monochromatic – unique in hue of

same color

Achromatic - no color (They use black,

white and shades of gray to represent colors.)

18 L. 1 Color

Split-complementary –

Colors lying on either side of the

complementary color

Color Classifications

Warm colors range from red to yellow, essentially the half of the color wheel corresponding

to the longer wavelengths. Warm colors are active, attention-grabbing

and aggressive. They stimulate the emotions, motivate and seem to come forward off the screen or

page.

Cool colors range from blue to violet, the half of the color wheel with shorter wavelengths.

Cool colors have a calming effect. They are frequently used for backgrounds to set off smaller areas of

warm colors. Hue – pure color Tint – hue plus white Shade – hue plus black Tone – grayed color

19 L. 1 Color

Cool colors recede and warm colors advance.

Raphael

Italian, High Renaissance

20 L. 1 Color

Lesson 2 Color Models

21

Red, green, and blue are the additive primary colors of the color spectrum. Combining balanced amounts of red, green, and blue lights also produces pure white. By varying the amount of red, green, and blue light, all of the colors in the visible spectrum can be produced.

Additive Color

22 L. 2 Color Models

RGB Model In the RGB system, the red, green and

blue dots are assigned brightness values

along some scale, for example 0 to 255,

where 0 is dark and 255 is bright. By

listing the three values for the red, green

and blue phosphors, you can specify the

exact color that will be mixed.

Additive colors get lighter when mixed.

As each component of light is mixed in, the

combination becomes a new color.

Red, green and blue are the three

additive primaries. You can mix any color

of light with different combinations of the

additive primaries. When you mix all three

together in balanced amounts, you get

white. (Pantone.com)

The RGB model is usually used to create color

on your computer display as well as other

electronic devices.


However, red, green, and blue blended does not result in the spectrum blend.


In Illustrator you would get this. If you were mixing paints equally, you would likely get a muddy brown result.


Color Wheel When Sir Isaac Newton studied the

colors in the visible spectrum, he bent

the spectrum into a circle. He

discovered there are seven main colors.

Each color is monochromatic, meaning

each color is composed of a single

wavelength that cannot be further

separated into other colors.

Newton discovered this in 1666

by passing a beam of light through a

prism. Newton’s main colors were red,

orange, yellow, green, blue, indigo, and

violet.


CMYK Model

The RGB model only produces a certain gamut of colors. Some colors cannot be accurately

displayed by a computer. “The number of colors visible on a monitor is further reduced by the

limitations of the video hardware in the computer, which may display anywhere from just black

and white up to 16.7 million colors.” (Pantone.com)

“Cyan, magenta and yellow are the three subtractive primaries. Subtractive colors get darker

when mixed. Each of the mixed paints or inks absorbs different components of the light. If the

right combination of paints is mixed together, all of the components of light are absorbed and

the result is a near black.” (Pantone.com)


CMY

Cyan, magenta, and yellow are the three subtractive primaries. Nearly any color can be

produced with different combinations of cyan, magenta, and yellow. Mixed together in equal

amounts, CMY is a near black. This is where CMYK comes from. CMYK is a color model, just

as RGB and CMY are. CMYK is used by printers and some software and RGB is used for web

display.

The Subtractive Primaries


Color Modes Remember, RGB is web display color and CMYK is printing color. Designers

are able to select the correct color mode to process the design.

Designers must be careful because RGB color printed is not CMYK printed.

Also, if a customer is set on a color, the designer must check with the printer.

Designers cannot simply deliver a project and say “the printer printed it that way”.

He/she would not be paid.

29

Time for Colors Quiz Lessons 1 & 2!

L. 2 Color Models

Lesson 3 Space, Line, Shape

30

SPACE

Space organizes elements in a composition.

A shallow space has little perspective.

31 L. 3 Space, Line, Shape

Actual space has control of size, color, and over-lapping. There is positive and negative space.


• Realistic, Non-Objective, or Abstract?

• Organic or Geometric?

More With Positive and Negative Space

• TWO FACES or a VASE?

L. 3 Space, Line, Shape

Line A line is the path of moving point.

vertical horizontal zig-zag

curved parallel diagonal

Cross-hatched wavy


Albrecht Durer

• 15th Century • Northern Renaissance = Germany

Four Horsemen of the Apocalypse

This entire work of art is done by

cross-hatching. The work shows the

method of etching used by early

printing presses for printing art called

lithography, a method of printing

images using flat metal or stone

surfaces and covering some parts with

ink.


Shape is defined as an area enclosed by an outline. It is 2-dimensional.

2-D


3-D

The form has height, width, and depth.


Art vocabulary words associated with shape are:

• Realistic

• Geometric

• Abstract form

• Idealized form

• Naturalistic

• Nonrepresentational

• Amorphous form

• Biomorphic

39

Please create a section in your art journal for vocabulary. Add these words to your journal!


Activities Time


200 Lines Project

Activity 2 Cloak an object or objects Draw a maze Create a non-objective artwork from inspiration


Use Lines to Abstract Real things

• Wildlife and Flora are easily recognizable.


Use Lines to Create Abstract art

• Art that kind of looks like something recognizable but not really.


Use Lines to Create Non-Objective art

Steve Natanson Line Drawings


Design a Maze


Create a design cloaking an object or objects, create a maze, and create a non-objective design from inspiration. – 3 designs! 200 lines each.


• Warm up activity time! • Purpose: to refresh your introduction to some basic and essential art concepts

and terminology that we will be using all semester. • Whether you use a pencil or a mouse, a line is still a line and you need to

know what that is and what it can do for you.

Activities con’d.


Basic Art Elements

• Space • An area enclosed by an outline.

• Line • A series of points moving in the same direction • 3 kinds: straight, curved, zigzag

• Shape • A sealed space created when a line overlaps its own path • Geometric shapes: man-made, have rules, names • Organic shapes: natural, no rules, no “official” names


Activity #1 Coming up!

• Create a composition using line and shape. Your drawing will need: • At least six lines • At least six shapes • Variation in sizes of your lines and shapes • Use just a pencil

– This is just a sketch.


Activity #1 Part 2!

• Take a look at your drawings. What do you like? • Now we’re going to change some things.

• Pick at least one shape you don’t like and change it. • Pick at least one line you don’t like and change it. • Recreate your composition on a new sheet of paper. • Please take your time.

• This process is called “reflection.” We do it constantly. As artists, you will be doing this to improve your artwork.


Lesson 4 Value, Texture

52

VALUE

Differences in a hue ranging from lightest to darkest.

White to black or black to white.

Use neutral, or grayscale. (Shading)

53 L. 4 Value, Texture

Use black.

Compare the gradient of dark to light color to white to bright color.

Use white.

Hue value gradations

54

Remember: Value is not color. It is shading or brightness.

L. 4 Value, Texture

Basic Art Elements contd.

Value • The lightness or darkness of an object/environment • Darkest = black, lightest = white, infinite range of greys between these two

extremes. • Values are NOT COLORS!!! • Value does lots of great things, the most major one: allows us to see 3D.

– Shadows (absence of light, darker value) and Highlights (presence of light, lighter value)

• Depends entirely on light sources.

L. 4 Value, Texture

Cross Hatching =

Shading done with lines

3.2.a. Communicate ideas and concepts by manipulating elements

of art and principles of design to achieve specific visual effects. = USE DESIGN TECHNIQUES.

2.1.b. Compare images and forms that explore universal themes about human experiences from different times and places. = KNOW WHERE HATCHING CAME

FROM.

L. 4 Value, Texture

L. 4 Value, Texture

Cross Hatching is a form of Shading

L. 4 Value, Texture

Emotion

L. 4 Value, Texture

Tatoos

L. 4 Value, Texture

Albrecht Durer

• 15th Century • Northern

Renaissance = Germany

L. 4 Value, Texture

Shading done with repeating lines.

L. 4 Value, Texture

Pressure Variation

• The harder you force the pencil, the more color/tone you get…

L. 4 Value, Texture

Layering

• Going over one color with another

L. 4 Value, Texture

L. 4 Value, Texture

Principles of Design

1.Repetition or pattern/rhythm

2.Balance

3.Contrast

4.Unity/variety or proportion

5.Emphasis

67

Lesson 5 Pattern & rhythm, Balance

68

Repetition or pattern/rhythm “Repetition is the use of line, color, or a motif in more than one place in a composition. Pattern is created through a repetitious use of the same element to create an overall design.

69 L. 5 Pattern & rhythm, Balance

Rhythm is the repeated use of similar elements such as color, line, or shape__ the smooth transition from one part to another.” (Hume)

Pattern/repetiton artwork. India motif.

70 L. 5 Pattern & rhythm, Balance

71

Chessboards are patterns modeled after war. Repetition

Balance Balance is symmetry and stability in the artwork by the various elements.

72

“John Lennon With Guitar” by Leonid Afremov

L. 5 Pattern & rhythm, Balance

Dark Ages versus Reniassance Balance

http://upload.wikimedia.org/wikipedia/commons/8/86/K%C3%B6lner_Meister_eines_Evangelienbuches_001.jpg

http://en.wikipedia.org/wiki/File:LibyanSibyl_SistineChapel.jpg

Balance

• Change your values to create a more realistic 3D image.

Leonardo Da Vinci

http://en.wikipedia.org/wiki/File:Michelangelo_libyan.jpg

Da Vinci’s Vitruvian Man

Lesson 6 Contrast, Unity/variety, Emphasis

76

Contrast “Contrast shows differences between the elements of art, which are line, color, shape, value, space, and texture.” (Hume)

“L’Absinthe” by Edgar Degas. French Realist/Impressionist

77 L. 6 Contrast, Unity/variety, Emphasis

http://www.artcyclopedia.com/history/realism.html

http://www.artcyclopedia.com/history/impressionism.html

Unity/variety The harmony of all the visual elements in a

composition or work of art is called unity.

Unity/variety is the enjoyable relationship of all the

parts to one another and to the design.

“Variety consists of differences in scale, surface, line,

value, and shape that give interest to a composition.”

(Hume)

78

Claude Monet French Impressionist

L. 6 Contrast, Unity/variety, Emphasis

79

Claude Monet “Le Dejeuner”


Emphasis

80

Focal point, receding cool colors, advancing warm colors, good variety, and perspective.

“Misty Mood of Afremov”

The center of interest, the largest, brightest, lightest, or

conspicuous subject is the distinction in a composition.

Emphasis is the weight of the center interest.

Vitebsk, Belarus = RUSSIA

Leonid Afremov 1955 -


Lesson 7 Digital History

81

82

Gates is the former chief executive and current chairman of Microsoft the world’s largest personal-computer software company, which he co-founded with Paul Allen.

Bill Gates

Digital History

Paul Allen

L. 7 Digital History

83

Steve Jobs “was an American inventor, entrepreneur, and marketer who was the co-founder, chairman, and CEO of Apple Inc.. Through Apple, he is widely recognized as a charismatic pioneer of the personal computer revolution and for his influential career in the computer and consumer electronics fields, transforming "one industry after another, from computers and smartphones to music and movies” … “Jobs left Apple and founded NeXT, a computer platform development company specializing in the higher-education and business markets.” (Wiki) He is considered the “Father of the Digital Era”.

Apple Inc.

Steve Wozniak “is an American inventor, computer engineer and programmer who co-founded Apple Computer (now Apple Inc.) with Steve Jobs and Ronald Wayne. Wozniak single-handedly invented both the Apple I and Apple II computers in the 1970s. These computers contributed significantly to the microcomputer revolution.” (Wiki)


84

Adobe was founded in December 1982 by John Warnock and Charles Geschke, who established the company after leaving Xerox PARC in order to develop and sell the PostScript page description language. In 1985, Apple Computer licensed PostScript for use in its LaserWriter printers, which helped spark the desktop publishing revolution.

John Warnock “is an American computer scientist best known as the co-founder with Charles Geschke of Adobe Systems Inc., the graphics and publishing software company. Dr. Warnock was President of Adobe for his first two years and Chairman and CEO for his remaining sixteen years at the company. Although retired as CEO in 2001, he still co-chairs the board with Geschke.”

Charles Geschke is best known as the 1982 co-founder with John Warnock of Adobe Systems Inc., the graphics and publishing software company. Both men originally worked for the Xerox company.


85

QUIZ

TIME!

86

• PUT YOUR NAME ON YOUR PAPER.

• IDENTIFY EACH MAN IN THE PHOTO BY MATCHING A NAME TO THE PHOTO WITH THE ONES IN THE COLUMN ON THE RIGHT.

a) John Warnock

b) Bill Gates

c) Steve Jobs

d) Paul Allen

e) Steve Wozniak

f) Charles Geschke

87

a) John Warnock

b) Bill Gates

c) Steve Jobs

d) Paul Allen

e) Steve Wozniak

f) Charles Geschke

88

a) John Warnock

b) Bill Gates

c) Steve Jobs

d) Paul Allen

e) Steve Wozniak

f) Charles Geschke

89

a) John Warnock

b) Bill Gates

c) Steve Jobs

d) Paul Allen

e) Steve Wozniak

f) Charles Geschke

90

a) John Warnock

b) Bill Gates

c) Steve Jobs

d) Paul Allen

e) Steve Wozniak

f) Charles Geschke

91

a) John Warnock

b) Bill Gates

c) Steve Jobs

d) Paul Allen

e) Steve Wozniak

92

IDENTIFY THE COMPANY OF THE LOGO.

95

Next , number your paper 1 thru 5 beside the column of names, a) thru e), and write the name of each company after its founder or co-founder.

a) John Warnock

b) Bill Gates

c) Steve Jobs

d) Paul Allen

e) Steve Wozniak

f) Charles Geschke

1.

2.

3.

4.

5.

6.

96

Artists Mentioned

Afremov, L. Artworks: John Lennon with Guitar, Misty Mood of Afremov Arboreal, L. Artworks: Aum Mantra, Arbor Vitae Da Vinci, L. Artworks: Vitruvian Man, Woman balanc Durer, A. Artworks: Self-portrait, Four Horsemen of the Apocalypse Kandinsky, W. Artworks: Odessa. Port, On White II Monet, C. Artworks: Le Dejeuner, Untitled portrait of Claude Monet Natson, S. Artworks: Line drawings Raphael Artworks: Untitled portrait of a woman, Untitled portrait of a man

97

Photographs

1. Allen, P. (2008). Paul Allen

2. Gates, B. (2012). Bill Gates

3. Geschke, C. (2012). Charles Geschke

4. Jobs, S. (2010). Steve Jobs

5. Warnock, J.(2008). John Warnock

6. Wozniak, S. (2005). Steve Wozniak

• Afremov, L. (?). John Lennon with Guitar. Leonid Afremov.

• Afremov, L. (?). Misty Mood of Afremov. Leonid Afremov.

• Arborealisis, L. (2006). Aum Mantra. Laura Aborealisis.

• Arborealisis, L.. (2011). Abor Vitae.

http://andreiverner.com/wp-content/uploads/2011/09/abor_vitae_by_lauraborealisis-

dx6nx0.jpg

• Berger, Kathleen S. (1994). The Developing Person Through the Life Span, Worth Publishers,

Inc., New York, p. 616. Print matter.

• Color Wheel. (2013). http://heinckerdesign.files.wordpress.com/2011/03/color-wheel-3.jpg

• Color Wheel. (2013).

http://rachelbradley.files.wordpress.com/2011/04/color-wheel-by-homeworkshop.jpg

• Durer, A. (1497). Example of cross hatching. Four Horsemen of the Apocalypse.

http://www.artcyclopedia.com/artists/durer_albrecht.html

• Durer, A. ( 1500). Self-portrait. http://www.artcyclopedia.com/artists/durer_albrecht.html

• Gagné, R. (2005). Principles of Instructional Design, 5th Editon. The Dick and Carey (2001)

Model of Instructional Design; pg. 39. Wadsworth. Print matter.

• Gagné, R. (2005). Principles of Instructional Design, 5th Editon. The Postulated Structures of

Cognitive Learning Theories, and the Process Associated with Them; pg. 193.

Wadsworth. Print matter.

98

References

http://andreiverner.com/wp-content/uploads/2011/09/abor_vitae_by_lauraborealisis-dx6nx0.jpg

http://andreiverner.com/wp-content/uploads/2011/09/abor_vitae_by_lauraborealisis-dx6nx0.jpg

http://heinckerdesign.files.wordpress.com/2011/03/color-wheel-3.jpg

http://rachelbradley.files.wordpress.com/2011/04/color-wheel-by-homeworkshop.jpg



99

• Gagné, R. (2005). Principles of Instructional Design, 5th Editon. Events of Instruction and Their

Relation to the Processes of Learning; pg. 195. Wadsworth. Print matter.

• Gates, B. (2012). Wikipedia. Retrieved from http://en.wikipedia.org/wiki/Bill_Gates

• Geschke, C. (2013). Wikipedia. Retrieved from http://en.wikipedia.org/wiki/Charles_Geschke

• Holland, Jeremy. (2013). “Color Theory”, “Colors”, “Big Quiz”. PowerPoint Slides.

• Hume, H. (2010). The Art Teacher’s Book of Lists, 2nd Edition. John Wiley & Sons Inc; Jossey

Bass. Print matter.

• Jobs, Steve (2010) . Wikipedia. Retrieved from http://en.wikipedia.org/wiki/Steve _Jobs

• MDE. (2013). Grade-by-Grade Fine Arts Content Standards VISUAL ARTS. PDF Retrieved from

Maryland Department of Education Online

• National_Standards_for_Visual_Art_Link_to_State_Dept_of_Ed.pdf (2007) Retrieved from

http://www.ed.gov/about/contacts/state/index.html

• Monet, C. (1880s) Le Dejeuner.

• Monet, C. (1880s) Untitled self portrait.

• Pantone.com. (2011). “What is Color?” Web. http://www.pantone.com/what_is_color

• Raphael. (15th-16th c.). Untitled portrait of a man

• Raphael. (15th-16th c.). Untitled portrait of a woman

• Split-Complementary. (2013). http://www.wordimagemedia.com/neg-space/Color/splits.gif

• Split-Complementary. (2013). http://www.wordimagemedia.com/neg-space/Color/splits.gif

• Willis, J. (2006). Research Strategies to Ignite Student Learning. ASCD. Print Matter.

• Wozniak, S. (2005). Wikipedia. Retrieved from http://en.wikipedia.org/wiki/Steve_Wozniak

• Warnock, J. (2008). Wikipedia. Retrieved from http://en.wikipedia.org/wiki/John_Warnock

http://en.wikipedia.org/wiki/Bill_Gates

http://en.wikipedia.org/wiki/Charles_Geschke

http://en.wikipedia.org/wiki/Steve_Jobs

http://www.ed.gov/about/contacts/state/index.html

http://www.pantone.com/whatiscolor

http://www.wordimagemedia.com/neg-space/Color/splits.gif

http://www.wordimagemedia.com/neg-space/Color/splits.gif

http://en.wikipedia.org/wiki/Steve_Wozniak

http://en.wikipedia.org/wiki/John_Warnock

Appendices 1.0 Overview of Task Assessment

1.1 Appropriate Audience Grades 8 – 11

1.1.1 Crisfield Academy and High School

1.2 Statement of Problem

1.3 Instructional Goal Statement

1.4 Learner Analysis

1.5 Task Analysis

1.5.1 Elements and Principles of Art

1.5.2 Digital Technology Citizenship

1.5.3 Digital History

1.6 Performance Objectives

1.7 Literature Review

1.7.1 Explanation of the State of Maryland Common Core Standards

1.7.2. Outcomes

1.7.2.1 Outcome I - Perceiving and Responding Aesthetic Education

1.7.2.1.1 Expectation A

1.7.2.1.2 Expectation B

1.7.2.1.3 Expectation C

1.7.2.2 Outcome II - Historical, Cultural, and Social

1.7.2.2.1 Expectation A

1.7.2.2.2 Expectation B

1.7.2.2.3 Expectation C

100

1.7.2.3 Outcome III - Creative Expression and Production

1.7.2.1.3.1 Expectation A

1.7.2.1.3.2 Expectation B

1.7.2.1.3.3 Expectation C

1.7.2.1.4 Outcome IV - Aesthetics and Criticism

1.7.2.1.4.1 Expectation A

1.7.2.1.4.2 Expectation B

1.7.2.1.4.3 Expectation C

1.7.3 NAEA National Visual Arts Standards

1.7.4 National Standards for Visual Art

1.8 Method of Evaluation

1.8.1 Pretest in HTML – Teaching for Understanding

1.8.1.1 Use of Media and Technology for Learning 1.8.2 Colors Quiz 1.8.3 Digital History

1.8.4 Assessment Art Test

1.9 Unit of Instruction

1.9.1 Introduction

1.9.2 Performance Context

1.9.3 Specific Instructional Strategies Used

1.9.3.1 Special Population Needs

1.9.3.2 The Design Process Used in the Lesson Plan

101

102

1.9.3.3 Effective Instruction Through the Use of Design Theories

1.9.3.4 Learning Theories Used in Lesson Plan

2.1 Color and Color Theory

2.1.1 Attributes

2.1.1.1 Hue

2.1.1.2 Saturation

2.1.1.3 Brightness

2.1.2 Color Classifications

2.1.2.1 Complementary

2.1.2.2 Analogous

2.1.2.3 Split-complementary/Triadic

2.1.2.4 Monochromatic

2.1.2.5 Achromatic

2.1.2.6 Cool

2.1.2.7 Warm

2.3.1 Color Models

2.3.1.1 RGB (Additive) Model

2.3.1.2 CMYK (Subtractive) Model

2.2 Space

2.3 Line

2.4 Shape/volume

2.5 Value

2.6 Texture

Lesson 2……………….

Lesson 1……………....


2.0 Elements of Art

103


Colors Quiz

Put your name on your paper.

Number your Paper 1-8

3.1 Pattern and rhythm

3.2 Balance

3.3 Contrast

3.4 Unity and variety

3.5 Emphasis

Lesson 6

Lesson 7

3.0 Principles of Art

Lesson 5

105

4.0 Digital History

4.1 Bill Gates and Paul Allen 4.2 Steve Jobs and Steve Wozniak

5.0 Evaluation Method (Testing)

5.1 Colors Quiz and Key

5.3 Art Test and Key

5.2 Digital History Quiz and Key

1. Complementary, Analogous, Triadic, or Shading?


• Italian Flag


• Microsoft office logo

Key to Colors Quiz follows

1. Complementary

2. Triadic

3. Complementary

4. Triadic

5. Complementary

6. Analogous

7. Complementary

8. Shading

123

a) John Warnock

b) Bill Gates

c) Steve Jobs

d) Paul Allen

e) Steve Wozniak

PUT YOUR NAME ON YOUR PAPER. IDENTIFY EACH MAN IN THE PHOTO BY MATCHING A NAME TO

THE PHOTO WITH THE ONES IN COLUMN ON THE RIGHT.

124

a) John Warnock

b) Bill Gates

c) Steve Jobs

d) Paul Allen

e) Steve Wozniak

125

a) John Warnock

b) Bill Gates

c) Steve Jobs

d) Paul Allen

e) Steve Wozniak

126

a) John Warnock

b) Bill Gates

c) Steve Jobs

d) Paul Allen

e) Steve Wozniak

127

a) John Warnock

b) Bill Gates

c) Steve Jobs

d) Paul Allen

e) Steve Wozniak

128

IDENTIFY THE COMPANY OF THE LOGO.

Apple Inc.

129

Adobe Systems

130

Microsoft

131

Next , number your paper 1 thru 5 beside the column of names, a) thru e), and write the name of each company after its founder or co-founder.

a) John Warnock

b) Bill Gates

c) Steve Jobs

d) Paul Allen

e) Steve Wozniak

f) Charles Geschke

1. Adobe Systems

2. Microsoft

3. Apple Inc.

4. Microsoft

5. Apple Inc.

6. Adobe Systems

1. Choose “Vector” or “Raster” to fill in the blanks.

a.________ graphics are resolution dependent. They cannot scale up to an arbitrary

resolution without loss of apparent quality.

b. _______ graphics easily scale up to the quality of the device rendering them.

c. Adobe Illustrator is ________.

d. Adobe Photoshop is ________.

2. Choose “Subtractive” or “Additive” to fill in the blanks.

a. Red, blue, and green are the basis of the ___________ color model. It's called the

RGB model, and it's usually used to create color on your computer display as well as

other electronic devices. Cyan, magenta and yellow are the three ____________

primaries.

3. Color models are called modes when displaying color on an electronic device. Printing

quality is better using the _________ model/mode.

4. The continuous movement of a point across a surface is known as a ________.

5. Motion refers to where the viewer’s eye lands in an image because it is the viewer’s eye

contact with the artwork’s emphasis.

a. True

b. False

6. Sir Isaac Newton discovered this in 1666 by passing a beam of light through a ________.

Art Test I

Name:

PART I: Color Theory, Elements and Principles of Art, Art History, & Graphic Design

Teacher:

133

7. In 1666, Sir Isaac Newton invented the concept of the color wheel when he bent the color

spectrum into a circle. The color wheel is a tool for understanding color relationships and

creating harmonious color schemes. Write the names for identifying these color types in the

spaces from the selection. Answer can appear more than once.

Analogous, complementary, triadic, warm, cool

a. ___________ colors are opposite on the color wheel.

b. ___________ colors range from blue to violet and are of shorter wavelengths.

c. ___________ colors are emotionally stimulating.

d. ___________ colors have a calming effect.

e. ___________ colors are the same color in different shades.

f. ___________ colors are beside one another on the color wheel.

g. ___________ color schemes use a single hue with variations in the saturation and

brightness only.

h. ___________ color is the color plus those on either side of its opposite.

8. Principles of design are methods to arrange or organize the art so it communicates with the

audience. Elements of art are used to create art. The choices below either create or

communicate. Circle the letters of the ones that communicate.

a. line

b. emphasis

c. shape

d. color

e. unity and variety

f. rhythm

g. scale/proportion

h. space

i. balance

j. shape/volume

134

9. A 2-dimensional or 3-dimensional area enclosed by an outline is known as a ________.

10. __________ is given to the center of interest, which might be the largest, brightest, or

lightest subject.

11. Differences in a hue or neutral ranging from lightest to darkest is known as ________.

PART II: Elements of Art & Principles of Design

Instructions: Match category A or B on the left to an element or a principle on the right by

placing the correct category number beside the selection. (Hint) Elements of art are used to

create art. Principles of design are methods to arrange or organize the art so it communicates

with the audience.

12. Select A. Elements of Art or B. Principles of Design and fill in the space with A or B.

a. ___ color

b. ___ emphasis

c. ___ space

d. ___ texture

e. ___ contrast

f. ___ shape/volume

g. ___ line

h. ___ balance

i. ___ value

j. ___ unity and variety

k. ___ rhythm

135

Key

1. a. Raster b. Vector c. Vector d. Raster

2. a. Additive b. Subtractive

3. CMYK 4. Line 5. True 6. Prism 7.

a. Complementary b. Cool c. Warm d. Cool e. Analogous f. Analogous g. Analogous h. triadic

8. a. B b. E c. F d. G e. I

9. Shape 10.Emphasis 11.Value 12.

a. A b. B c. A d. A e. B f. A g. A h. B i. A j. B k. B

the elements of art and principles of design · · 2013-10-23the elements of art and principles...

Documents