Design and Layout (part one) Elements of Art Multimedia.
-
Upload
melvyn-mitchell -
Category
Documents
-
view
227 -
download
1
Transcript of Design and Layout (part one) Elements of Art Multimedia.
![Page 1: Design and Layout (part one) Elements of Art Multimedia.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/1.jpg)
Design and Layout (part one)
Elements of ArtMultimedia
![Page 2: Design and Layout (part one) Elements of Art Multimedia.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/2.jpg)
Elements of Art Vocabulary
Line Shape / Form Value Space / Perspective Texture Color
![Page 3: Design and Layout (part one) Elements of Art Multimedia.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/3.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/4.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/5.jpg)
Example: Line Art
How is Line being used in this picture?
![Page 6: Design and Layout (part one) Elements of Art Multimedia.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/6.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/7.jpg)
Example: Shape & Form
How are shape and form being used in these images?
![Page 8: Design and Layout (part one) Elements of Art Multimedia.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/8.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/9.jpg)
Example: Value
How is Value being used in these pictures?
![Page 10: Design and Layout (part one) Elements of Art Multimedia.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/10.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/11.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/12.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/13.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/14.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/15.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/16.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/17.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/18.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/19.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/20.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/21.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/22.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/23.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/24.jpg)
Space Positive Space
“Occupied” areas Primary subject matter of a piece of art
![Page 25: Design and Layout (part one) Elements of Art Multimedia.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/25.jpg)
Space Negative Space
“Unoccupied” areas around subject matter
![Page 26: Design and Layout (part one) Elements of Art Multimedia.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/26.jpg)
Example: Space
Discuss how Space is used in this image.
![Page 27: Design and Layout (part one) Elements of Art Multimedia.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/27.jpg)
Texture Texture
tactile appearance
![Page 28: Design and Layout (part one) Elements of Art Multimedia.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/28.jpg)
Example: Texture
Discuss how Texture is used in this image.
![Page 29: Design and Layout (part one) Elements of Art Multimedia.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/29.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/30.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/31.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/32.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/33.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/34.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/35.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/36.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/37.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/38.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/39.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/40.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/41.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/42.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/43.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/44.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022062221/56649e555503460f94b4be7d/html5/thumbnails/45.jpg)
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.