45
Design and Layout (part one) Elements of Art Multimedia

Design and Layout (part one) Elements of Art Multimedia

Embed Size (px)

Citation preview

Page 1: Design and Layout (part one) Elements of Art Multimedia

Design and Layout (part one)

Elements of ArtMultimedia

Page 2: Design and Layout (part one) Elements of Art Multimedia

Elements of Art Vocabulary

Line Shape / Form Value Space / Perspective Texture Color

Page 3: Design and Layout (part one) Elements of Art Multimedia

Elements of Art The Elements of Art are fundamental

ideas about the practice of good visual design. They include: Line Shape / Form Value Space / Perspective Texture Color

Page 4: Design and Layout (part one) Elements of Art Multimedia

Line Line

A mark on a surface that describes a shape or outline.

Lines give the eye explicit directions about where to look.

They group related objects together and divide unrelated objects.

Page 5: Design and Layout (part one) Elements of Art Multimedia

Example: Line Art

How is Line being used in this picture?

Page 6: Design and Layout (part one) Elements of Art Multimedia

Shape / Form Shape / Form

An enclosed space with defined boundaries. Shape implies two-dimensions: length and

width Form has depth, length, and width and is

perceived as three-dimensional.

Page 7: Design and Layout (part one) Elements of Art Multimedia

Example: Shape & Form

How are shape and form being used in these images?

Page 8: Design and Layout (part one) Elements of Art Multimedia

Value Value

The relative degree of light and dark in a design, contrast between black and white

Page 9: Design and Layout (part one) Elements of Art Multimedia

Example: Value

How is Value being used in these pictures?

Page 10: Design and Layout (part one) Elements of Art Multimedia

Preparing to Work Create a New Folder for your artwork You may create it on the desktop, in

your documents folder or where ever you like

This is where you will save your Multimedia graphic assignments

Later, you can upload your favorite ones to your website!

Page 11: Design and Layout (part one) Elements of Art Multimedia

MODELING PS Setting Up The Workspace Open Photoshop CS6 Create a New Document

File > New Name: Line, Shape & Value Preset: Web Click OK

If you cannot see the rulers, from the Menu bar, select View > Rulers

Page 12: Design and Layout (part one) Elements of Art Multimedia

MODELING PS Setting Up The Workspace Create a New Layer named “Line”

Layer > New > Layer Name: Line

Verify the Line layer is highlighted in the Layers panel

Page 13: Design and Layout (part one) Elements of Art Multimedia

MODELING Draw a Line in Photoshop CS6

Select the Line tool from the Toolbox The Line tool is a hidden Shape tool

In one quadrant of the Workspace, draw a design using Line The Web Workspace is about 11(width) x

8 ½ (height) inches. One quadrant equals 5 ½ (width) x 4 ¾

inches (height).

Page 14: Design and Layout (part one) Elements of Art Multimedia

MODELING PS Setting Up The Workspace Create a New Layer named “Shape”

Layer > New > Layer Name: Shape

Verify the Shape layer is highlighted in the Layers panel

Page 15: Design and Layout (part one) Elements of Art Multimedia

MODELING Draw a Shape in Photoshop CS6

Select a Shape tool (other than Line) Choose a Fill color from the Options bar

The Options bar is below the Menu bar Select a Stroke (outline) color from the

Options Bar In a different quadrant of the

Workspace, draw a Shape

Page 16: Design and Layout (part one) Elements of Art Multimedia

MODELING PS Setting Up The Workspace Create a New Layer named “Form”

Layer > New > Layer Name: Form

Verify the Form layer is highlighted in the Layers panel

Page 17: Design and Layout (part one) Elements of Art Multimedia

MODELING Draw a Form in Photoshop CS6

Select a third Shape tool Choose Fill and Stroke colors from the

Options Bar In a new quadrant, draw a Form:

Draw a new Shape on the Form layer Select Layer > Duplicate Layer to make a

copy of the Form layer

Page 18: Design and Layout (part one) Elements of Art Multimedia

MODELING Draw a Form in Photoshop CS6

Be sure the Form Copy layer is highlighted in the Layers panel

Select the Move tool First tool at the top of the Tool bar

Move the shape on the Form Copy layer away from the shape on the Form layer

Page 19: Design and Layout (part one) Elements of Art Multimedia

MODELING Draw a Form in Photoshop CS6

Select the Form Copy layer shape using the Rectangle Marquee tool Second tool from the top of the Tool bar

Select a different Fill color

Page 20: Design and Layout (part one) Elements of Art Multimedia

MODELING Draw a Form in Photoshop CS6

Creating Depth Using the Move tool, place the shape on the

Form Copy layer near the shape on the Form layer so it appears as a shadow

Creating Value Remember, Value is the RELATIVE degree

of light and dark Value will automatically be created by the

colors you choose.

Page 21: Design and Layout (part one) Elements of Art Multimedia

AssignmentPS Line, Shape, Form and Value

Save your design as Line, Shape, Form and Value

Practice explaining your artwork Be prepared to stand and explain to the

class how your artwork demonstrates Line, Shape, Form and Value.

Page 22: Design and Layout (part one) Elements of Art Multimedia

Concept Review Line

Describes a shape or outline. Tells the eye where to look. Group related objects and divide unrelated objects.

Shape / Form An enclosed space with defined boundaries. Shape implies two-dimensions: length and width Form has depth, length, and width and is perceived as

three-dimensional.

Value The relative lightness or darkness of color Contrast

Page 23: Design and Layout (part one) Elements of Art Multimedia

Space / Perspective Space / Perspective

Space - The perceived distance between, around, above, below, or within shapes and forms in a composition

Perspective – The representation of a volume of space or a 3-dimensional object on a flat surface

Page 24: Design and Layout (part one) Elements of Art Multimedia

Space Positive Space

“Occupied” areas Primary subject matter of a piece of art

Page 25: Design and Layout (part one) Elements of Art Multimedia

Space Negative Space

“Unoccupied” areas around subject matter

Page 26: Design and Layout (part one) Elements of Art Multimedia

Example: Space

Discuss how Space is used in this image.

Page 27: Design and Layout (part one) Elements of Art Multimedia

Texture Texture

tactile appearance

Page 28: Design and Layout (part one) Elements of Art Multimedia

Example: Texture

Discuss how Texture is used in this image.

Page 29: Design and Layout (part one) Elements of Art Multimedia

MODELING PS Setting Up The Workspace Open Photoshop CS6 Create a New Document

File > New Name: Space, Perspective and Texture Preset: Web Click OK

If you cannot see the rulers, select View > Rulers

Page 30: Design and Layout (part one) Elements of Art Multimedia

MODELING PS Setting Up The Workspace Create a New Layer named “Space”

Layer > New > Layer Name: Space

Verify the Space layer is highlighted in the Layers panel

Page 31: Design and Layout (part one) Elements of Art Multimedia

MODELING Creating Space in Photoshop CS6

Select a Shape tool (other than Line) Draw a Shape Choose Fill and Stroke colors for your

shape Select a different Shape tool Draw a second shape to reflect the

concept of Space Choose Fill and Stroke colors

Page 32: Design and Layout (part one) Elements of Art Multimedia

MODELING Demonstrating Perspective

Use your knowledge of Form to create a 3D image by adding depth to your artwork

Add as many additional layers and shapes as you like

Page 33: Design and Layout (part one) Elements of Art Multimedia

MODELING PS Setting Up The Workspace Create a New Layer named “Texture”

Layer > New > Layer Name: Texture

Verify the Texture layer is highlighted in the Layers panel

Page 34: Design and Layout (part one) Elements of Art Multimedia

MODELING Creating Texture in Photoshop CS6

Add another shape to your drawing Choose Fill and Stroke colors from the Options

Bar Select Filter > Filter Gallery from the Menu bar

Rasterize the shape Open the Texture folder Select a texture for your image and adjust the

settings as you like Click OK when done

Page 35: Design and Layout (part one) Elements of Art Multimedia

AssignmentPS Space, Perspective and Texture

Save your design as Space, Perspective and Texture

Practice explaining your artwork Be prepared to stand and explain to the

class how your artwork demonstrates Space and Texture.

Page 36: Design and Layout (part one) Elements of Art Multimedia

Concept Review Space / Perspective

Space - The perceived distance between, around, above, below, or within shapes and forms in a composition

Perspective – The representation of a volume of space or a 3-dimensional object on a flat surface

Texture How an image appears to feel if touched

Page 37: Design and Layout (part one) Elements of Art Multimedia

Color Color

The way the eye experiences reflections of light

Represents emotion and allows objects to stand out from the background

Page 38: Design and Layout (part one) Elements of Art Multimedia

Color Communication Understanding the use of color to

communication is important. Color itself sends a message that depends on the age, gender, and culture of the person viewing it.

Different colors can be expected to send different messages or to create different effects.

Page 39: Design and Layout (part one) Elements of Art Multimedia

Color Communication Give some examples of what color

represents in your life or culture. EXAMPLE:

What does the color black make you think of? Blue? Green? Purple? Red? White? Yellow?

Page 40: Design and Layout (part one) Elements of Art Multimedia

Color Communication Black – classic, strong, powerful, mysterious,

elegant; death, dark foreboding Blue – tranquil, peaceful, dependable, cool,

constant, quiet; sad Green – soothing, refreshing, healing, timeless,

quiet Purple – sensual, elegant, eccentric, regal,

spiritual, mysterious Red – exciting, dynamic White – pure, bright, innocent, clean Yellow – warm, sunny; anxious

Page 41: Design and Layout (part one) Elements of Art Multimedia

Color Psychology Colors are often combined to create a

particular feeling: Warm Colors – red, orange, yellow, earth

tones Emotions – warmth, comfort, anger, hostility

EXAMPLE: Used to illustrate a sunny day. Cool Colors – blue, purple, green

Emotions – calmness, sadness, indifference EXAMPLE: Used to represent peacefulness.

Page 42: Design and Layout (part one) Elements of Art Multimedia

Color Psychology Studies have also shown that certain

colors can have an impact on performance.

Exposing students to the color red prior to an exam has been shown to have a negative impact on test performance. More recently, researchers discovered that the color red causes people to react with greater speed and force, something that might prove useful during athletic activities.

Page 43: Design and Layout (part one) Elements of Art Multimedia

Review:Elements of Art

The Elements of Art are fundamental ideas about the practice of good visual design. They include: Line

Tells the eye where to look. Shape / Form

An enclosed space whose boundaries are defined by other art elements (i.e space, line, texture, value, color, or shape).

Value The relative difference between light and dark in an

image

Page 44: Design and Layout (part one) Elements of Art Multimedia

Review:Elements of Art

The Elements of Art are fundamental ideas about the practice of good visual design. They include: Space / Perspective

Perceived distance between objects. The approximate representation of a 3D object on a

flat (2D) surface Texture

How an image appears to “feel” if touched Color

Represents emotion Helps objects to stand out from the background

Page 45: Design and Layout (part one) Elements of Art Multimedia

EXERCISE: Color Psychology

In groups of 2 - 4, select an ad for a product. Research the meanings of the different colors used in

the ad and analyze the ad’s use of color psychology. What does the ad want you to do? What colors are used? How do these colors make you feel about the product vs

how the artist wanted you to feel? Does the color scheme help the ad accomplish it’s goal

of making you take action? Why / Why not? Answer these questions in a Juno Doc and submit them.

(One submission with group members names, per group).

Practice and present your analysis to the class. Each group member must speak. Answer each of the questions in your presentation also.