sam wainford. graphic design graphic design isn’t just about making things look pretty. it is...
TRANSCRIPT
INTRODUCTION TO DESIGN PRINCIPLES PART 1
Sam Wainford
2
Graphic Design• Graphic design isn’t just about making things look pretty. • It is about effectively sending out a desired message through visual
communication. – easy to understand– appealing to the desired audience.
• Effective design uses design principles to – have a certain effect on the viewer– to give the viewer direction as to what they should do after seeing the design
• Two great references:– http://deltadesignz.com/2010/09/design-principle-lines-in-graphic-design/– http://deltadesignz.com/2010/09/design-principle-part-2-balance/
Graphic Design elements
• Design elements are the building blocks of graphics.– Line– Color – Shape – Texture
3
Lines
• Lines can be straight or curved.
• How are lines used in the composition on this slide?
4
5
Lines to create movement
6
Lines to create illusion of volume
7
Lines used for impression of chaos
8
Lines used to create perspective
9
Lines used to create space
10
Lines used to create wireframe
11
Lines used to create depth
12
Lines used to divide a page
13
Work with Line on the Web
• Great HTML5 online drawing tools:– Harmony: http://mrdoob.com/projects/harmony/
HTML5 enabled browser required (Chrome works best)– Pixlr: http://pixlr.com/editor/
Also available for Android and iPhone– DeviantArt Muro: http://muro.deviantart.com/
Awesome app in pure HTML5– Bonomo: http://bomomo.com/
Included 20 painting and drawing tools– Zwibbler: http://zwibbler.com/
Good for sketching wireframes– Sketchpad: http://mudcu.be/sketchpad/
Paint and draw with patterns, gradients and more
Popular Color Models
Why do we have all these different color models?
WEB MEDIA ART MEDIA
PRINT MEDIA
Artist’s RYB Color Wheel• Analogous colors are adjacent to each other on the color wheel.• Complementary colors are opposite each other on the color wheel.
15http://www.webexhibits.org/colorart/bh.html
Isaac Newton developed the first circular diagram of colors in 1666, based on his study of rainbows and prisms.
Primary colors of pigment, paint, pastels:RYB = red, yellow, blue
16
Primary, Secondary, and Tertiary ColorsPrimary Colors - 3 pigment colors that can not be mixed or formed by any combination of other colors. All other colors are derived from these 3 hues.
red, yellow, blue
green, orange, purple
Secondary Colors – These are the colors formed by mixing the primary pigment colors.
yellow-orange, red-orange, red-purple, blue-purple, blue-green and yellow-green
Tertiary Colors – formed by mixing a primary and a secondary color. That’s why the hue is a two word name, such as blue-green.
17
All in one
RGB Color Wheel• This color wheel is for
calculating color mixture for Additive Color Theory (light waves). Primary colors of light in the visible spectrum.
• Frequency of light wavelength determines what the eye sees.
• Work best when generated from a light emitting device such as a monitor.
• Always refer to the traditional Subtractive RYB Color Wheel (Red Yellow Blue) when identifying Color Schemes such as complimentary and color triad harmonies.
http://susandwheeler.blogspot.com/2011/05/rgb-color-wheel.html#.UY90bKLqmcM
RGB COLOR MODEL
RGB colors are called additive colors because you create white by adding R, G, and B together
Additive colors are used for lighting, television, and computer monitors. Your monitor, for example, creates color by emitting light through red, green, and blue phosphors.
A large percentage of the visible spectrum can be represented by mixing red, green, and blue (RGB) colored light in various proportions and intensities. Where the colors overlap, they create cyan, magenta, and yellow.
http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f-6295a.html
Additive vs. Subtractive Color Models
• Additive color models display color as a result of light being transmitted (added). – The total absence of light would be perceived as black.– RGB: Web, TV, Computer monitor
• Subtractive color models display color as a result of
light being absorbed (subtracted) by the printing inks. – As more ink is added, less and less light is reflected.– Where there is a total absence of ink the resulting light
being reflected (from a white surface) would be perceived as white.
– CMYK: Print, printer’s ink, magazines, posters, etc– RYB: Painter's pigment, oil paint, pastels, etc– CMYK is derived from the traditional RYB model
When In Doubt, Save Images As RGB:RGB displays a much larger percentage of the visible spectrum than CMYK
Use RGB For Screen Displays and CMYK For Print
Confusion• There is a tremendous amount of confusion about whether
the color models are additive or subtractive.– Stems from semantics vs. science– Depends on your point of view– Doesn’t really matter as long as you know which on to use– Will not see additive or subtractive on tests for this class
• When identifying Color Schemes such as complimentary and color triad harmonies, always refer to the traditional, artist’s color model:– Red, Yellow, Blue– Will see on tests
for this class
Color Models & File Formats
Web File Formats:• GIF• PNG• JPG
http://www.sketchpad.net/basics5.htm
Color definitions• Hue is another word for color.• Chroma or Saturation is the intensity or purity of color.• Tint is a color mixed with white.• Tone is a color mixed with gray.• Shade is a color mixed with black.• Value is how light or dark a color is.
23
In Photoshop, use the Hue and Saturation and Brightness and Contrast Tools to quickly enhance photographs.
24
Saturation & Value
Example saturation and value variations on a single red hue.
25
Tints, Shades and Tones
• Tint – adding white to pure color
• Shade – adding black to pure color
• Tone – adding gray to pure color
26
Complimentary and Analogous ExamplesComplimentary Analogous
Green and red are complementary colors of same value. Used together they create vibrating boundaries.
Blue and green are analogous colors. When used together they produce amore calming effect.
The green reads lighter on the right even though they are the same color.
Simultaneous contrast: where appearance of the same color is affected by the appearance of other colors surrounding it.
27
Color Schemes/HarmoniesRed and Green :: Blue and Orange :: Purple and Yellow:
• Located directly across from each other on the color wheel.• Complementary colors rarely look good when used together. • Become extremely vibrant. • Difficult to read, especially if they are of the same value.
Complementary colors are really bad for text!Complimentary
Analogous
Red and Orange :: Blue and Green, etc
• Analogous colors are located next to each other on the color wheel. • They usually match extremely well.• Create almost no contrast. • They’re good for very serene, peaceful designs. • Artwork where you want viewers to feel comfortable.
28
Color Schemes/Harmonies
Triad
Triad – uses colors that are evenly spaced around the traditional artist’s color wheel.
Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated versions of your hues.
To use a triadic harmony successfully, the colors should be carefully balanced – let one color dominate and use the two others for accent.
29
Color Schemes/Harmonies
Rectangle (tetradic)
Rectangle (tetradic) - uses four colors arranged into two complementary pairs.
This color scheme is very rich and offers a lot of possibilities.
It works best if there is one dominant color.
30
Color Schemes/Harmonies
Split-Complementary
Split-Complementary – is a variation of the complementary color scheme.
In addition to the base color, it uses the two colors adjacent to its complement.
This color scheme has the same strong visual contrast as the complementary color scheme, but has less tension.
The split-complimentary color scheme is often a good choice for beginners, because it is difficult to mess up.
31
Color Pickers on the Web
• Use these resources to choose great color schemes!– Peter Piper’s Palette Picker:
http://www.worqx.com/color/palette.htm
– The Color Wizard: http://www.colorsontheweb.com/colorwizard.asp
– Colorminder: http://coloreminder.com/
USE THEM!
32
Color Optical Illusions
See if you can create this effect in PhotoShop
33
PhotoShop lab
How may colors do you see?
34
Bezold Effect and Munker-White Illusion• The Bezold effect is an optical illusion: A
color may appear different depending on its relation to adjacent colors.
• Munker-White Illusion is an optical illusion illustrating the fact that the same target luminance can elicit different perceptions of brightness in different contexts.
35
Bezold Effect
The background coloris the exact same color in all these images.
Using Color in design
• Use color to label or show hierarchy.• Use color to represent or imitate reality.• Use color to unify, separate, or emphasize.• Use color to decorate.• Use color consistently.
36
Shapes• Shapes are enclosed objects
that can be created by line or created by color and value changes that define their edges.
37
38
Negative Space
• The space around a shape is just as important. • What do you see?
39
Negative Space in Design
Texture• Texture is the surface look of
an object created by varying dark and light areas.
•Roughness•Smoothness•Depth
40
41
Texture created with line
42
Summary
• Use design principles as a means of communicating ideas
• Choose effective color schemes• Be aware of negative space