Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.
-
Upload
nancy-copeland -
Category
Documents
-
view
214 -
download
0
Transcript of Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.
![Page 1: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/1.jpg)
Design BasicsIntroduction
Color
Type
J187 Class 2
IIMMJ187 Introduction to Interactive Multimedia
![Page 2: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/2.jpg)
Problem Solving
Visual or Design Element: Anything on the page
as well as the lack of anything (space).
Images, text, lines, shapes, graphics, spacing, etc.
Design is about:
• Communication
• Creating Interest
• Solving Problems
![Page 3: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/3.jpg)
CRAP Design
C.R.A.P:
• Contrast
• Repetition
• Alignment
• Proximity
![Page 4: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/4.jpg)
Contrast
Use colors, shapes, sizes, fonts, space and imagery to create contrast in design.
Avoid colors and typefaces that are similar.
![Page 5: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/5.jpg)
![Page 6: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/6.jpg)
RepetitionRepeat visual elements throughout the designCommunicates consistency and brand
![Page 7: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/7.jpg)
![Page 8: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/8.jpg)
Alignment
Where’s my boat? Dock 4, Slip 20.
![Page 9: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/9.jpg)
![Page 10: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/10.jpg)
Proximity
Similar Items Closer, Different farther apart.
![Page 11: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/11.jpg)
![Page 12: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/12.jpg)
Color
![Page 13: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/13.jpg)
CMYK or RGB?
CMYK
For Print
Pigment
DO NOT USE IN CLASS!
RGB
For Screens
Light
ALWAYS USE IN CLASS!
WE WILL NEVER USE OR SPEAK OF CMYK IN THIS CLASS AGAIN!
![Page 14: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/14.jpg)
Color Wheel
![Page 15: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/15.jpg)
Primary Colors
Wheel is based on the equal spacing of the primary colors Red, Yellow and Blue
![Page 16: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/16.jpg)
Secondary Colors
Equal combinations of those primary colors
Orange, Green, Violet/Purple
![Page 17: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/17.jpg)
Tertiary (third) Colors
The next level of equal combinations
The color blue-green for example.
![Page 18: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/18.jpg)
Color Relationships
• Complementary • Two opposite colors in
wheel
• Triads • Triangle Spacing around wheel
• Analogous • Adjacent Hues
• Monochromatic • Single color, varied intensity
• Compound • Combines colors from various
hues
![Page 19: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/19.jpg)
Color Relationships
• Complementary • Two opposite colors in wheel
• Triads • Triangle Spacing around
wheel
• Analogous • Adjacent Hues
• Monochromatic • Single color, varied intensity
• Compound • Combines colors from various
hues
![Page 20: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/20.jpg)
Color Relationships
• Complementary • Two opposite colors in wheel
• Triads • Triangle Spacing around wheel
• Analogous • Adjacent Hues
• Monochromatic • Single color, varied intensity
• Compound • Combines colors from various
hues
![Page 21: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/21.jpg)
Color Relationships
• Complementary • Two opposite colors in wheel
• Triads • Triangle Spacing around wheel
• Analogous • Adjacent Hues
• Monochromatic • Single color, varied
intensity
• Compound • Combines colors from various
hues
![Page 22: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/22.jpg)
Color Relationships
• Complementary • Two opposite colors in wheel
• Triads • Triangle Spacing around wheel
• Analogous • Adjacent Hues
• Monochromatic • Single color, varied intensity
• Compound • Combines colors from
various hues
![Page 23: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/23.jpg)
Shades and Tints
Add Black Add White
![Page 24: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/24.jpg)
Warm and Cool Colors
Warm Cool
![Page 25: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.](https://reader030.fdocuments.in/reader030/viewer/2022032605/56649e7d5503460f94b8067c/html5/thumbnails/25.jpg)
Color Scheme Selectionhttp://kuler.adobe.com/#themes/rating?time=30
http://colorschemedesigner.com/
Image Selection in Photoshop